@extends('layouts.app')

@section('title', 'Pengaturan Surat')

@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('pkbm.surat.index') }}" class="text-white/80 hover:text-white">Manajemen Surat</a><i class="bi bi-chevron-right" aria-hidden="true"></i>Pengaturan</p>
            <h1 class="pkbm-dashboard__title">Template & Penomoran Surat</h1>
            <p class="pkbm-dashboard__subtitle">Format nomor dan template tersimpan khusus untuk lembaga ini.</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">Pengaturan surat belum dapat diproses.</p><ul class="mt-1 list-inside list-disc">@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul></div></div>
    @endif

    <form id="letter-settings-form" method="POST" action="{{ route('pkbm.surat.settings.update') }}" class="space-y-5">
        @csrf
        @method('PUT')
        <input type="hidden" name="selected_template_id" value="{{ $selectedTemplateId }}" data-selected-template-input>
        <section class="sp-card overflow-hidden">
            <div class="sp-card-header">
                <h2 class="sp-section-title">Format penomoran surat</h2>
                <p class="mt-1 text-xs text-slate-500">Nomor urut tahunan dibuat saat surat diterbitkan dan nomor yang dibatalkan tidak dipakai ulang.</p>
            </div>
            <div class="grid gap-4 p-4 sm:p-5 lg:grid-cols-3">
                <div>
                    <label for="number-format" class="sp-form-label">Pola nomor surat</label>
                    <input id="number-format" name="nomor_format" value="{{ old('nomor_format', $settings->nomor_format) }}" required maxlength="150" class="sp-form-control w-full px-3 py-2.5 text-sm">
                    <p class="mt-2 text-xs leading-5 text-slate-500">Token: <code>{nomor}</code> (wajib), <code>{tahun}</code>, <code>{bulan_romawi}</code>, dan <code>{kode_surat}</code>.</p>
                </div>
                <div>
                    <label for="starting-number" class="sp-form-label">Nomor awal surat</label>
                    <input id="starting-number" name="nomor_awal" type="number" value="{{ old('nomor_awal', $settings->nomor_awal) }}" required min="1" max="4294967295" step="1" inputmode="numeric" class="sp-form-control w-full px-3 py-2.5 text-sm">
                    <p class="mt-2 text-xs leading-5 text-slate-500">Untuk melanjutkan penomoran dari luar aplikasi. Nomor yang sudah terbit tidak akan digunakan ulang.</p>
                </div>
                <div>
                    <label class="sp-form-label" for="number-format-preview">Contoh hasil nomor surat</label>
                    <div id="number-format-preview" class="sp-form-control flex items-center bg-slate-50 px-3 py-2.5 font-mono text-sm font-semibold" data-code="{{ $templates->firstWhere('id', $selectedTemplateId)->kode ?? 'SKB' }}" data-start="{{ old('nomor_awal', $settings->nomor_awal) }}">{{ strtr($settings->nomor_format, ['{nomor}' => str_pad((string) old('nomor_awal', $settings->nomor_awal), 3, '0', STR_PAD_LEFT), '{tahun}' => now()->format('Y'), '{bulan_romawi}' => ['I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X', 'XI', 'XII'][(int) now()->format('n') - 1], '{kode_surat}' => $templates->firstWhere('id', $selectedTemplateId)->kode ?? 'SKB']) }}</div>
                    <p class="mt-2 text-xs leading-5 text-slate-500">Pratinjau mengikuti nomor awal dan kode jenis surat yang dipilih.</p>
                </div>
            </div>
        </section>

        <section class="sp-card overflow-hidden" data-template-settings>
            <div class="sp-card-header flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
                <div class="w-full sm:max-w-sm">
                    <h2 class="sp-section-title">Template surat</h2>
                    <p class="mt-1 text-xs text-slate-500">Pilih jenis surat untuk melihat pratinjau dan mengubah template. Simpan perubahan sebelum menambah atau menghapus jenis.</p>
                    <label for="template-filter" class="sp-form-label mt-3">Nama jenis surat</label>
                    <select id="template-filter" class="sp-form-control w-full px-3 py-2.5 text-sm" data-template-filter>
                        @foreach ($templates as $template)
                            <option value="{{ $template->id }}" data-code="{{ $template->kode }}" @selected($template->id === $selectedTemplateId)>{{ $template->nama }}{{ ! $template->aktif ? ' (Nonaktif)' : '' }}</option>
                        @endforeach
                    </select>
                </div>
                <button type="button" class="sp-btn-secondary shrink-0" data-open-template-dialog><i class="bi bi-plus-lg" aria-hidden="true"></i>Tambah jenis surat</button>
            </div>
            @foreach ($templates as $index => $template)
                <article class="letter-template-entry border-t border-slate-100" data-template-entry="{{ $template->id }}" @if ($template->id !== $selectedTemplateId) hidden @endif>
                    <div class="sp-card-header flex flex-wrap items-center justify-between gap-3">
                        <div>
                            <h3 class="sp-section-title">{{ $template->nama }}</h3>
                            <div class="mt-2 flex flex-wrap gap-4">
                                <label class="inline-flex items-center gap-2 text-sm font-medium text-slate-700">
                                    <input type="hidden" name="templates[{{ $index }}][uses_student_data]" value="0">
                                    <input type="checkbox" name="templates[{{ $index }}][uses_student_data]" value="1" @checked(old("templates.$index.uses_student_data", $template->uses_student_data)) class="size-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500" data-template-data-type="student">
                                    Surat menggunakan data siswa
                                </label>
                                <label class="inline-flex items-center gap-2 text-sm font-medium text-slate-700">
                                    <input type="hidden" name="templates[{{ $index }}][uses_teacher_data]" value="0">
                                    <input type="checkbox" name="templates[{{ $index }}][uses_teacher_data]" value="1" @checked(old("templates.$index.uses_teacher_data", $template->uses_teacher_data)) class="size-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500" data-template-data-type="teacher">
                                    Surat menggunakan data guru
                                </label>
                            </div>
                            <p class="mt-2 text-xs text-slate-500" data-template-placeholders="student">
                                Placeholder Siswa:
                                <code>&#123;&#123;nama_siswa&#125;&#125;</code>, <code>&#123;&#123;nis&#125;&#125;</code>, <code>&#123;&#123;nisn&#125;&#125;</code>, <code>&#123;&#123;nama_ayah&#125;&#125;</code>, <code>&#123;&#123;nama_ibu&#125;&#125;</code>, <code>&#123;&#123;tempat_lahir_siswa&#125;&#125;</code>, <code>&#123;&#123;tanggal_lahir_siswa&#125;&#125;</code>.
                            </p>
                            <p class="mt-1 text-xs text-slate-500" data-template-placeholders="teacher">
                                Placeholder Guru:
                                <code>&#123;&#123;nama_guru&#125;&#125;</code>, <code>&#123;&#123;nuptk_guru&#125;&#125;</code>, <code>&#123;&#123;tempat_lahir_guru&#125;&#125;</code>, <code>&#123;&#123;tanggal_lahir_guru&#125;&#125;</code>, <code>&#123;&#123;jenis_kelamin_guru&#125;&#125;</code>, <code>&#123;&#123;alamat_guru&#125;&#125;</code>, <code>&#123;&#123;no_hp_guru&#125;&#125;</code>.
                            </p>
                            <p class="mt-1 text-xs text-slate-500">Placeholder Umum: <code>&#123;&#123;keperluan&#125;&#125;</code>, <code>&#123;&#123;nama_lembaga&#125;&#125;</code>, <code>&#123;&#123;tahun_pelajaran&#125;&#125;</code>.</p>
                        </div>
                        <div class="flex flex-wrap items-center gap-3">
                            <label class="inline-flex items-center gap-2 text-sm font-medium text-slate-700">
                                <input type="checkbox" name="templates[{{ $index }}][aktif]" value="1" @checked(old("templates.$index.aktif", $template->aktif)) class="size-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500">
                                Aktif
                            </label>
                            <button type="submit" form="delete-letter-template-{{ $template->id }}" class="sp-btn-secondary !min-h-0 !px-3 !py-1.5 text-xs text-rose-700" data-delete-template>
                                <i class="bi bi-trash3" aria-hidden="true"></i>Hapus
                            </button>
                        </div>
                    </div>
                    <input type="hidden" name="templates[{{ $index }}][id]" value="{{ $template->id }}">
                    <div class="grid gap-4 p-4 sm:grid-cols-[minmax(0,1fr)_10rem]">
                        <div>
                            <label for="template-name-{{ $template->id }}" class="sp-form-label">Nama jenis surat</label>
                            <input id="template-name-{{ $template->id }}" name="templates[{{ $index }}][nama]" value="{{ old("templates.$index.nama", $template->nama) }}" required maxlength="120" class="sp-form-control w-full px-3 py-2.5 text-sm" data-template-name-input="{{ $template->id }}">
                        </div>
                        <div>
                            <label for="template-code-{{ $template->id }}" class="sp-form-label">Kode surat</label>
                            <input id="template-code-{{ $template->id }}" name="templates[{{ $index }}][kode]" value="{{ old("templates.$index.kode", $template->kode) }}" required maxlength="20" pattern="[A-Za-z0-9\-]+" class="sp-form-control w-full px-3 py-2.5 text-sm" data-template-code-input="{{ $template->id }}">
                        </div>
                    </div>
                    <div class="letter-template-editor" data-editor-panel>
                        <div class="letter-toolbar" role="toolbar" aria-label="Format template 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>
                            <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="insertUnorderedList" aria-label="Daftar bullet"><i class="bi bi-list-ul" aria-hidden="true"></i></button>
                            <span class="letter-toolbar__separator"></span>
                            <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>
                        </div>
                        <textarea name="templates[{{ $index }}][isi]" class="hidden" data-editor-input>{{ old("templates.$index.isi", $template->isi) }}</textarea>
                        <div class="letter-template-paper" contenteditable="true" spellcheck="true" data-letter-editor>{!! $template->isi !!}</div>
                    </div>
                </article>
            @endforeach
        </section>
        <div class="flex flex-wrap justify-between gap-2">
            <a href="{{ route('pkbm.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 pengaturan surat</button>
        </div>
    </form>

    @foreach ($templates as $template)
        <form id="delete-letter-template-{{ $template->id }}" method="POST" action="{{ route('pkbm.surat.templates.destroy', $template->id) }}" class="hidden" data-delete-template-form>
            @csrf
            @method('DELETE')
            <input type="hidden" name="selected_template_id" value="{{ $selectedTemplateId }}">
        </form>
    @endforeach

    <dialog id="add-letter-template-dialog" class="pkbm-master-dialog pkbm-class-form-dialog" aria-labelledby="add-letter-template-title" data-reopen="{{ $errors->has('nama') || $errors->has('kode') ? 'true' : 'false' }}">
        <form method="POST" action="{{ route('pkbm.surat.templates.store') }}" class="pkbm-class-form-dialog__form">
            @csrf
            <div class="pkbm-class-form-dialog__header flex items-start justify-between gap-3 border-b border-slate-100 p-5">
                <div class="flex items-start gap-3">
                    <span class="pkbm-class-form-dialog__icon" aria-hidden="true"><i class="bi bi-envelope-plus"></i></span>
                    <div>
                        <h2 id="add-letter-template-title" class="sp-section-title">Tambah jenis surat</h2>
                        <p class="mt-1 text-xs text-slate-500">Jenis baru akan ditambahkan ke daftar template lembaga.</p>
                    </div>
                </div>
                <button type="button" data-close-template-dialog class="pkbm-class-form-dialog__close grid size-8 shrink-0 place-items-center rounded-lg text-slate-500" aria-label="Tutup dialog"><i class="bi bi-x-lg" aria-hidden="true"></i></button>
            </div>
            <div class="grid gap-4 p-5 sm:grid-cols-[minmax(0,1fr)_10rem]">
                <div>
                    <label for="new-template-name" class="sp-form-label">Nama jenis surat</label>
                    <input id="new-template-name" name="nama" value="{{ old('nama') }}" required maxlength="120" class="sp-form-control w-full px-3 py-2.5 text-sm" placeholder="Contoh: Surat Keterangan">
                </div>
                <div>
                    <label for="new-template-code" class="sp-form-label">Kode surat</label>
                    <input id="new-template-code" name="kode" value="{{ old('kode') }}" required maxlength="20" pattern="[A-Za-z0-9\-]+" class="sp-form-control w-full px-3 py-2.5 text-sm" placeholder="SK">
                </div>
            </div>
            <div class="flex flex-wrap gap-4 px-5 pb-5">
                <label class="inline-flex items-center gap-2 text-sm font-medium text-slate-700">
                    <input type="hidden" name="uses_student_data" value="0">
                    <input type="checkbox" name="uses_student_data" value="1" @checked(old('uses_student_data', true)) class="size-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500">
                    Surat menggunakan data siswa
                </label>
                <label class="inline-flex items-center gap-2 text-sm font-medium text-slate-700">
                    <input type="hidden" name="uses_teacher_data" value="0">
                    <input type="checkbox" name="uses_teacher_data" value="1" @checked(old('uses_teacher_data')) class="size-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500">
                    Surat menggunakan data guru
                </label>
            </div>
            <div class="pkbm-class-form-dialog__footer flex justify-end gap-2 border-t border-slate-100 p-5">
                <button type="button" data-close-template-dialog class="sp-btn-secondary">Batal</button>
                <button type="submit" class="sp-btn-primary"><i class="bi bi-plus-lg" aria-hidden="true"></i>Tambah template</button>
            </div>
        </form>
    </dialog>
</div>
@endsection