@extends('layouts.app')

@section('title', ($letter ? 'Edit Draft Surat' : 'Buat Surat').' · Kelola Surat FK')

@section('content')
<div class="pkbm-master-page surat-management-page mx-auto max-w-7xl space-y-5">
    <header class="pkbm-dashboard__heading">
        <div>
            <p class="pkbm-dashboard__breadcrumb"><a href="{{ route('fk.surat.index') }}" class="text-white/80 hover:text-white">Kelola Surat</a><i class="bi bi-chevron-right" aria-hidden="true"></i><span>{{ $letter ? 'Edit Draft' : 'Buat Surat' }}</span></p>
            <h1 class="pkbm-dashboard__title">{{ $letter ? 'Edit Draft Surat' : 'Buat Surat' }}</h1>
            <p class="pkbm-dashboard__subtitle">Pilih template, lengkapi data, lalu sunting langsung pada halaman surat ukuran A4.</p>
        </div>
    </header>
    @if (session('status'))
        <div role="status" class="settings-notice settings-notice--success"><i class="bi bi-check-circle-fill" aria-hidden="true"></i><span>{{ session('status') }}</span></div>
    @endif
    @if ($errors->any())
        <div role="alert" class="settings-notice settings-notice--error"><i class="bi bi-exclamation-circle-fill" aria-hidden="true"></i><div><p class="font-semibold">Periksa kembali data surat.</p><ul class="mt-1 list-inside list-disc">@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul></div></div>
    @endif

    <nav class="sp-card flex flex-wrap gap-2 p-2" aria-label="Menu kelola surat">
        <a href="{{ route('fk.surat.index') }}" class="sp-btn-secondary"><i class="bi bi-inboxes" aria-hidden="true"></i>Register surat</a>
        <a href="{{ route('fk.surat.create') }}" class="sp-btn-secondary" aria-current="page"><i class="bi bi-plus-circle" aria-hidden="true"></i>Buat surat</a>
        <a href="{{ route('fk.surat.settings') }}" class="sp-btn-secondary"><i class="bi bi-gear" aria-hidden="true"></i>Template &amp; penomoran</a>
    </nav>

    <form id="letter-form" method="POST" action="{{ $letter ? route('fk.surat.update', $letter->id) : route('fk.surat.store') }}" class="space-y-5">
        @csrf
        @if ($letter) @method('PUT') @endif
        <div class="hidden" data-institution-name="{{ $institutionName }}"></div>
        <section class="sp-card grid gap-4 p-4 sm:grid-cols-2 sm:p-5 lg:grid-cols-4">
            <div class="sm:col-span-2">
                <label for="letter-template" class="sp-form-label">Template surat</label>
                <select id="letter-template" name="template_id" required class="sp-form-control w-full px-3 py-2.5 text-sm" @disabled($letter)>
                    @foreach ($templates as $template)
                        <option value="{{ $template->id }}" data-body="{{ $template->isi }}" data-name="{{ $template->nama }}" @selected((int) old('template_id', $letter->template_id ?? $selectedTemplate->id) === $template->id)>{{ $template->nama }}</option>
                    @endforeach
                </select>
                @if ($letter)<input type="hidden" name="template_id" value="{{ $letter->template_id }}">@endif
            </div>
            <div class="sm:col-span-2">
                <label for="letter-subject" class="sp-form-label">Perihal</label>
                <input id="letter-subject" name="perihal" value="{{ old('perihal', $letter->perihal ?? $selectedTemplate->nama) }}" required maxlength="200" class="sp-form-control w-full px-3 py-2.5 text-sm">
            </div>
            <div>
                <label for="letter-date" class="sp-form-label">Tanggal surat</label>
                <input id="letter-date" type="date" name="tanggal_surat" value="{{ old('tanggal_surat', $letter->tanggal_surat ?? now()->toDateString()) }}" required class="sp-form-control w-full px-3 py-2.5 text-sm">
            </div>
            <div>
                <label for="letter-recipient" class="sp-form-label">Nama / instansi penerima</label>
                <input id="letter-recipient" name="nama_penerima" value="{{ old('nama_penerima', $letter->nama_penerima ?? '') }}" required maxlength="150" class="sp-form-control w-full px-3 py-2.5 text-sm" placeholder="Contoh: Dinas Pendidikan Kabupaten">
            </div>
            <div class="sm:col-span-2 lg:col-span-4">
                <label for="letter-purpose" class="sp-form-label">Keperluan / keterangan khusus</label>
                <input id="letter-purpose" name="keperluan" value="{{ old('keperluan', $letter->keperluan ?? '') }}" maxlength="500" class="sp-form-control w-full px-3 py-2.5 text-sm" placeholder="Contoh: koordinasi kegiatan pelatihan">
            </div>
        </section>

        <section class="sp-card overflow-hidden" data-editor-panel>
            <div class="sp-card-header flex flex-wrap items-center justify-between gap-2">
                <div>
                    <h2 class="sp-section-title">Editor surat</h2>
                    <p class="mt-1 text-xs text-slate-500">Pilih teks untuk memformat seperti di Word. Nomor resmi dialokasikan saat surat diterbitkan.</p>
                </div>
                @if ($letter)
                    <span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold text-slate-600">Draft · Belum bernomor</span>
                @endif
            </div>
            <div class="letter-toolbar" role="toolbar" aria-label="Format isi surat">
                <button type="button" data-command="bold" aria-label="Tebal"><strong>B</strong></button>
                <button type="button" data-command="italic" aria-label="Miring"><em>I</em></button>
                <button type="button" data-command="underline" aria-label="Garis bawah"><u>U</u></button>
                <button type="button" data-command="outdent" aria-label="Kurangi indentasi"><i class="bi bi-text-indent-left" aria-hidden="true"></i></button>
                <button type="button" data-command="indent" aria-label="Tambah indentasi"><i class="bi bi-text-indent-right" aria-hidden="true"></i></button>
                <span class="letter-toolbar__separator"></span>
                <button type="button" data-command="justifyLeft" aria-label="Rata kiri"><i class="bi bi-text-left" aria-hidden="true"></i></button>
                <button type="button" data-command="justifyCenter" aria-label="Rata tengah"><i class="bi bi-text-center" aria-hidden="true"></i></button>
                <button type="button" data-command="justifyRight" aria-label="Rata kanan"><i class="bi bi-text-right" aria-hidden="true"></i></button>
                <span class="letter-toolbar__separator"></span>
                <button type="button" data-command="insertUnorderedList" aria-label="Daftar bullet"><i class="bi bi-list-ul" aria-hidden="true"></i></button>
                <button type="button" data-command="insertOrderedList" aria-label="Daftar bernomor"><i class="bi bi-list-ol" aria-hidden="true"></i></button>
                <button type="button" data-insert-page aria-label="Tambah halaman"><i class="bi bi-file-earmark-plus" aria-hidden="true"></i>Halaman baru</button>
                <button type="button" data-insert-table aria-label="Sisipkan tabel 3 kali 3"><i class="bi bi-table" aria-hidden="true"></i>Tabel</button>
                <span class="letter-toolbar__separator"></span>
                <button type="button" data-table-action="row" aria-label="Tambah baris" disabled><i class="bi bi-plus-square" aria-hidden="true"></i>Baris</button>
                <button type="button" data-table-action="column" aria-label="Tambah kolom" disabled><i class="bi bi-layout-three-columns" aria-hidden="true"></i>Kolom</button>
                <button type="button" data-table-action="merge-columns" aria-label="Gabung sel mendatar" title="Gabung sel dalam satu baris" disabled><i class="bi bi-arrows-collapse-vertical" aria-hidden="true"></i>Gabung kolom</button>
                <button type="button" data-table-action="merge-rows" aria-label="Gabung sel menurun" title="Gabung sel dalam satu kolom" disabled><i class="bi bi-arrows-collapse" aria-hidden="true"></i>Gabung baris</button>
                <button type="button" data-table-action="border" aria-label="Sembunyikan border tabel" aria-pressed="true" disabled><i class="bi bi-border-all" aria-hidden="true"></i><span data-border-label>Border</span></button>
                <button type="button" data-table-action="delete" aria-label="Hapus tabel" disabled><i class="bi bi-trash3" aria-hidden="true"></i>Hapus tabel</button>
                <label class="letter-toolbar__size-control">
                    <span>Lebar kolom</span>
                    <input type="number" min="32" max="1200" step="4" value="120" data-table-size="column" aria-label="Lebar kolom dalam piksel" disabled>
                    <span>px</span>
                </label>
                <label class="letter-toolbar__size-control">
                    <span>Tinggi baris</span>
                    <input type="number" min="24" max="1200" step="4" value="40" data-table-size="row" aria-label="Tinggi baris dalam piksel" disabled>
                    <span>px</span>
                </label>
                <span class="letter-toolbar__resize-hint">Seret melintasi sel kosong atau Shift+klik untuk memilih. Seret garis untuk mengubah ukuran.</span>
                <select data-letter-block aria-label="Gaya paragraf">
                    <option value="p">Paragraf</option><option value="h2">Judul</option><option value="blockquote">Kutipan</option>
                </select>
                <span class="letter-toolbar__separator"></span>
                <button type="button" data-command="undo" aria-label="Urungkan"><i class="bi bi-arrow-counterclockwise" aria-hidden="true"></i></button>
                <button type="button" data-command="redo" aria-label="Ulangi"><i class="bi bi-arrow-clockwise" aria-hidden="true"></i></button>
            </div>
            <textarea id="letter-body-input" name="isi" class="hidden" data-editor-input>{{ old('isi', $initialBody) }}</textarea>
            <div class="letter-editor-scroll">
                <article class="letter-paper" aria-label="Halaman surat A4">
                    @include('fk.partials.letterhead', ['letterhead' => $letterhead])
                    <div class="letter-paper__meta">
                        <p>Nomor: <span class="letter-number-preview">[Nomor saat diterbitkan]</span></p>
                        <p>Lampiran: -</p>
                        <p>Perihal: <span class="letter-subject-preview">{{ old('perihal', $letter->perihal ?? $selectedTemplate->nama) }}</span></p>
                    </div>
                    <div id="letter-editor" class="letter-editor" contenteditable="true" spellcheck="true" data-letter-editor data-existing="{{ $letter ? 'true' : 'false' }}">{!! $initialBody !!}</div>
                    <div class="letter-paper__signoff">
                        <p>{{ $institution->kecamatan ? \Illuminate\Support\Str::title($institution->kecamatan).', ' : '' }}{{ now('Asia/Jakarta')->locale('id')->translatedFormat('d F Y') }}</p>
                        <p>Ketua {{ $institutionName }}</p>
                        <div class="letter-paper__signature-space"></div>
                        <p class="font-bold underline">{{ $headName ?: '........................................' }}</p>
                    </div>
                </article>
            </div>
            <div class="flex flex-wrap justify-between gap-2 border-t border-slate-100 p-4">
                <a href="{{ route('fk.surat.index') }}" class="sp-btn-secondary"><i class="bi bi-arrow-left" aria-hidden="true"></i>Kembali</a>
                <button type="submit" class="sp-btn-primary"><i class="bi bi-save" aria-hidden="true"></i>Simpan</button>
            </div>
        </section>
    </form>
</div>
@endsection