@extends('admin.layout.tamplate')

@section('content')
<div class="p-6 md:p-10 space-y-8">
    {{-- Breadcrumb --}}
    @include('admin.layout.breadcumb')

@include('admin.layout.alert')

    <div class="max-w-5xl mx-auto">
        <form action="{{ route('dashboard.profile.update') }}" method="POST" class="space-y-8">
            @csrf 
            @method('PUT')

            {{-- Section: Program Kerja --}}
            <div class="bg-white p-8 rounded-[2.5rem] shadow-sm border border-sky-50 space-y-4">
                <div class="flex items-center gap-3 mb-2">
                    <div class="w-10 h-10 rounded-xl bg-sky-100 flex items-center justify-center text-sky-600 shadow-sm">
                        <i class="fas fa-briefcase text-sm"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-bold text-sky-950 leading-tight">Program Kerja</h3>
                        <p class="text-[10px] text-slate-400 font-medium uppercase tracking-wider">Rencana & Agenda Yayasan</p>
                    </div>
                </div>
                <div class="space-y-2">
                    <textarea name="program_kerja" class="editor-custom">{{ old('program_kerja', $setting->program_kerja) }}</textarea>
                </div>
            </div>

            

        
            {{-- Section: Program Berjalan --}}
            <div class="bg-white p-8 rounded-[2.5rem] shadow-sm border border-sky-50 space-y-4">
                <div class="flex items-center gap-3 mb-2">
                    <div class="w-10 h-10 rounded-xl bg-sky-100 flex items-center justify-center text-sky-600 shadow-sm">
                        <i class="fas fa-spinner text-sm"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-bold text-sky-950 leading-tight">Program Sedang Berjalan</h3>
                        <p class="text-[10px] text-slate-400 font-medium uppercase tracking-wider">Status Realisasi Program</p>
                    </div>
                </div>
                <div class="space-y-2">
                    <textarea name="program_berjalan" class="editor-custom">{{ old('program_berjalan', $setting->program_berjalan) }}</textarea>
                </div>
                
                <div class="flex justify-end pt-6">
                    <button type="submit" class="px-12 py-4 bg-sky-600 text-white rounded-2xl font-bold shadow-lg shadow-sky-100 hover:bg-sky-700 transition transform active:scale-95 flex items-center gap-3">
                        <i class="fas fa-check-double"></i> Simpan Semua Program
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

{{-- Styling Khusus Editor --}}
<style>
    .ck-content {
        padding-left: 2rem !important; 
        padding-right: 2rem !important;
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
        min-height: 250px;
        line-height: 1.8;
        font-size: 0.9rem;
    }

    .ck-editor__editable_inline {
        border-radius: 0 0 1.5rem 1.5rem !important;
        border: 1px solid #e0f2fe !important;
    }
    
    .ck-editor__top {
        border-radius: 1.5rem 1.5rem 0 0 !important;
        overflow: hidden;
        border: 1px solid #e0f2fe !important;
        border-bottom: none !important;
    }

    .ck-toolbar {
        background-color: #f8fafc !important;
        border: none !important;
    }

    .alert-fade-out {
        opacity: 0;
        transform: translateY(-20px);
        pointer-events: none;
    }
</style>

{{-- JS CKEditor --}}
<script src="https://cdn.ckeditor.com/ckeditor5/41.1.0/classic/ckeditor.js"></script>
<script>
    document.querySelectorAll('.editor-custom').forEach(el => {
        ClassicEditor.create(el, {
            toolbar: {
                items: [
                    'bold', 'italic', 'underline', 
                    '|', 
                    'bulletedList', 'numberedList', 
                    '|', 
                    'alignment', 
                    '|', 
                    'undo', 'redo'
                ]
            },
            alignment: {
                options: [ 'left', 'center', 'right', 'justify' ]
            }
        }).catch(error => {
            console.error(error);
        });
    });

    // Auto close alert
    document.addEventListener('DOMContentLoaded', function() {
        const alertBox = document.getElementById('alert-box');
        if (alertBox) {
            setTimeout(() => {
                alertBox.classList.add('alert-fade-out');
                setTimeout(() => alertBox.parentElement.remove(), 500);
            }, 5000);
        }
    });
</script>
@endsection