@extends('admin.layout.tamplate')

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

    {{-- Alert Notifikasi --}}
    @if (session('success') || session('error'))
        <div id="alert-wrapper" class="relative z-30"> 
            <div id="alert-box" class="flex items-center p-4 mb-6 rounded-2xl shadow-lg border-t-4 transition-all duration-500 {{ session('success') ? 'text-emerald-800 border-emerald-400 bg-emerald-50' : 'text-red-800 border-red-400 bg-red-50' }}">
                <div class="flex-shrink-0 w-10 h-10 {{ session('success') ? 'bg-emerald-100 text-emerald-600' : 'bg-red-100 text-red-600' }} rounded-xl flex items-center justify-center mr-4">
                    <i class="fas {{ session('success') ? 'fa-check-double' : 'fa-exclamation-circle' }} text-lg"></i>
                </div>
                <div class="flex-1">
                    <p class="text-[10px] uppercase font-bold tracking-widest opacity-60 mb-0.5">Notifikasi Sistem</p>
                    <p class="text-sm font-bold tracking-tight">{{ session('success') ?? session('error') }}</p>
                </div>
                <button type="button" onclick="this.parentElement.parentElement.remove()" class="ml-4 p-2 text-slate-400 hover:text-slate-600">
                    <i class="fas fa-times text-sm"></i>
                </button>
            </div>
        </div>
    @endif

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

            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                {{-- Card Visi --}}
                <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-bullseye text-sm"></i>
                        </div>
                        <h3 class="text-lg font-bold text-sky-950">Visi Yayasan</h3>
                    </div>
                    <div class="space-y-2">
                        <label class="text-[10px] font-bold text-sky-900/40 uppercase tracking-widest ml-1">Deskripsi Visi</label>
                        <textarea name="visi" class="editor-custom">{{ old('visi', $setting->visi) }}</textarea>
                    </div>
                </div>

                {{-- Card Misi --}}
                <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-bullseye text-sm"></i>
                        </div>
                        <h3 class="text-lg font-bold text-sky-950">Misi Yayasan</h3>
                    </div>
                    <div class="space-y-2">
                        <label class="text-[10px] font-bold text-sky-900/40 uppercase tracking-widest ml-1">Deskripsi Misi</label>
                        <textarea name="misi" class="editor-custom">{{ old('misi', $setting->misi) }}</textarea>
                    </div>
                </div>


                  <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-bullseye text-sm"></i>
                        </div>
                        <h3 class="text-lg font-bold text-sky-950">Tujuan Yayasan</h3>
                    </div>
                    <div class="space-y-2">
                        <label class="text-[10px] font-bold text-sky-900/40 uppercase tracking-widest ml-1">Deskripsi Tujuan</label>
                        <textarea name="tujuan" class="editor-custom">{{ old('tujuan', $setting->tujuan) }}</textarea>
                    </div>
                </div>
            </div>

            {{-- Card Latar Belakang --}}
            <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-bullseye text-sm"></i>
                    </div>
                    <h3 class="text-lg font-bold text-sky-950">Latar Belakang</h3>
                </div>
                <div class="space-y-2">
                    <label class="text-[10px] font-bold text-sky-900/40 uppercase tracking-widest ml-1">Sejarah Singkat</label>
                    <textarea name="latar_belakang" class="editor-custom">{{ old('latar_belakang', $setting->latar_belakang) }}</textarea>
                </div>
                
                <div class="flex justify-end pt-4">
                    <button type="submit" class="px-10 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-save"></i> Simpan Perubahan Profil
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

{{-- CSS KHUSUS CKEDITOR --}}
<style>
    /* Padding di area ketik agar kursor tidak mepet ke kiri */
    .ck-content {
        padding-left: 2rem !important; 
        padding-right: 2rem !important;
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
        min-height: 200px;
        line-height: 1.8;
    }

    /* Styling Border & Radius CKEditor */
    .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; /* Slate-50 */
    }

    /* Alert Fade Out Animation */
    .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'
                ]
            },
            // Konfigurasi Alignment
            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