@extends('layouts.app')

@section('title', $letter ? 'Edit Draft Surat' : 'Buat 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><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

    <form id="letter-form" method="POST" action="{{ $letter ? route('pkbm.surat.update', $letter->id) : route('pkbm.surat.store') }}" class="space-y-5">
        @csrf
        @if ($letter) @method('PUT') @endif
        <div class="hidden" data-institution-name="{{ $institutionName }}" data-academic-year="{{ $tahunPelajaran }}"></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 }}" data-uses-student="{{ $template->uses_student_data ? 'true' : 'false' }}" data-uses-teacher="{{ $template->uses_teacher_data ? 'true' : 'false' }}" @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 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">
            </div>
            <div class="grid gap-4 sm:col-span-2 lg:col-span-4 sm:grid-cols-2 lg:grid-cols-4" data-letter-fields="student">
                <div class="sm:col-span-2 lg:col-span-4">
                    <label for="letter-student" class="sp-form-label">Ambil data peserta didik</label>
                    <select id="letter-student" name="id_siswa" data-person-select="student" class="sp-form-control w-full px-3 py-2.5 text-sm">
                        <option value="">Isi data penerima secara manual</option>
                        @foreach ($students as $student)
                            <option value="{{ $student->id }}" data-name="{{ $student->nama_siswa }}" data-nis="{{ $student->nis }}" data-nisn="{{ $student->nisn }}" data-father="{{ $student->nama_ayah }}" data-mother="{{ $student->nama_ibu }}" data-birth-place="{{ $student->tempat_lahir }}" data-birth-date="{{ $student->tanggal_lahir }}" data-class="{{ $student->kelas }}" @selected((string) old('id_siswa', $letter->id_siswa ?? '') === (string) $student->id)>
                                {{ $student->nama_siswa }}{{ $student->nis ? ' · NIS '.$student->nis : '' }}{{ $student->kelas ? ' · '.$student->kelas : '' }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="sm:col-span-2 lg:col-span-4 space-y-3" data-person-list="student">
                    @foreach ($selectedStudentIds as $personIndex => $selectedStudentId)
                        <div class="flex items-end gap-2" data-person-row>
                            <div class="min-w-0 flex-1">
                                <label class="sp-form-label">Peserta didik tambahan {{ $personIndex + 2 }}</label>
                                <select name="id_siswa_tambahan[]" data-person-select="student" class="sp-form-control w-full px-3 py-2.5 text-sm">
                                    <option value="">Pilih peserta didik</option>
                                    @foreach ($students as $student)
                                        <option value="{{ $student->id }}" data-name="{{ $student->nama_siswa }}" data-nis="{{ $student->nis }}" data-nisn="{{ $student->nisn }}" data-father="{{ $student->nama_ayah }}" data-mother="{{ $student->nama_ibu }}" data-birth-place="{{ $student->tempat_lahir }}" data-birth-date="{{ $student->tanggal_lahir }}" data-class="{{ $student->kelas }}" @selected((string) $selectedStudentId === (string) $student->id)>{{ $student->nama_siswa }}{{ $student->nis ? ' · NIS '.$student->nis : '' }}{{ $student->kelas ? ' · '.$student->kelas : '' }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <button type="button" class="sp-btn-secondary shrink-0" data-remove-person aria-label="Hapus peserta didik tambahan"><i class="bi bi-trash3" aria-hidden="true"></i>Hapus</button>
                        </div>
                    @endforeach
                </div>
                <div class="sm:col-span-2 lg:col-span-4">
                    <button type="button" class="sp-btn-secondary" data-add-person="student"><i class="bi bi-plus-circle" aria-hidden="true"></i>Tambah siswa</button>
                </div>
                <template data-person-template="student">
                    <div class="flex items-end gap-2" data-person-row>
                        <div class="min-w-0 flex-1">
                            <label class="sp-form-label">Peserta didik tambahan</label>
                            <select name="id_siswa_tambahan[]" data-person-select="student" class="sp-form-control w-full px-3 py-2.5 text-sm">
                                <option value="">Pilih peserta didik</option>
                                @foreach ($students as $student)
                                    <option value="{{ $student->id }}" data-name="{{ $student->nama_siswa }}" data-nis="{{ $student->nis }}" data-nisn="{{ $student->nisn }}" data-father="{{ $student->nama_ayah }}" data-mother="{{ $student->nama_ibu }}" data-birth-place="{{ $student->tempat_lahir }}" data-birth-date="{{ $student->tanggal_lahir }}" data-class="{{ $student->kelas }}">{{ $student->nama_siswa }}{{ $student->nis ? ' · NIS '.$student->nis : '' }}{{ $student->kelas ? ' · '.$student->kelas : '' }}</option>
                                @endforeach
                            </select>
                        </div>
                        <button type="button" class="sp-btn-secondary shrink-0" data-remove-person aria-label="Hapus peserta didik tambahan"><i class="bi bi-trash3" aria-hidden="true"></i>Hapus</button>
                    </div>
                </template>
                <div>
                    <label for="letter-nis" class="sp-form-label">NIS</label>
                    <input id="letter-nis" name="nis" value="{{ old('nis', $letter->nis ?? '') }}" maxlength="50" class="sp-form-control w-full px-3 py-2.5 text-sm">
                </div>
                <div>
                    <label for="letter-nisn" class="sp-form-label">NISN</label>
                    <input id="letter-nisn" name="nisn" value="{{ old('nisn', $letter->nisn ?? '') }}" maxlength="50" class="sp-form-control w-full px-3 py-2.5 text-sm">
                </div>
                <div>
                    <label for="letter-student-class" class="sp-form-label">Kelas</label>
                    <input id="letter-student-class" class="sp-form-control w-full px-3 py-2.5 text-sm" data-student-detail="class" readonly>
                </div>
                <div>
                    <label for="letter-student-father" class="sp-form-label">Nama ayah</label>
                    <input id="letter-student-father" class="sp-form-control w-full px-3 py-2.5 text-sm" data-student-detail="father" readonly>
                </div>
                <div>
                    <label for="letter-student-mother" class="sp-form-label">Nama ibu</label>
                    <input id="letter-student-mother" class="sp-form-control w-full px-3 py-2.5 text-sm" data-student-detail="mother" readonly>
                </div>
                <div>
                    <label for="letter-student-birth-place" class="sp-form-label">Tempat lahir</label>
                    <input id="letter-student-birth-place" class="sp-form-control w-full px-3 py-2.5 text-sm" data-student-detail="birth-place" readonly>
                </div>
                <div>
                    <label for="letter-student-birth-date" class="sp-form-label">Tanggal lahir</label>
                    <input id="letter-student-birth-date" class="sp-form-control w-full px-3 py-2.5 text-sm" data-student-detail="birth-date" readonly>
                </div>
            </div>
            <div class="grid gap-4 sm:col-span-2 lg:col-span-4 sm:grid-cols-2 lg:grid-cols-4" data-letter-fields="teacher">
                <div class="sm:col-span-2 lg:col-span-4">
                    <label for="letter-teacher" class="sp-form-label">Ambil data guru</label>
                    <select id="letter-teacher" name="id_guru[]" data-person-select="teacher" class="sp-form-control w-full px-3 py-2.5 text-sm">
                        <option value="">Pilih guru</option>
                        @foreach ($teachers as $teacher)
                            <option value="{{ $teacher->id }}" data-name="{{ $teacher->nama }}" data-nuptk="{{ $teacher->nuptk }}" data-birth-place="{{ $teacher->tempat_lahir }}" data-birth-date="{{ $teacher->tanggal_lahir }}" data-gender="{{ $teacher->jenis_kelamin }}" data-address="{{ $teacher->alamat }}" data-phone="{{ $teacher->no_hp }}" @selected(isset($selectedTeacherIds[0]) && (string) $selectedTeacherIds[0] === (string) $teacher->id)>{{ $teacher->nama }}{{ $teacher->nuptk ? ' · '.$teacher->nuptk : '' }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="sm:col-span-2 lg:col-span-4 space-y-3" data-person-list="teacher">
                    @foreach (array_slice($selectedTeacherIds, 1) as $personIndex => $selectedTeacherId)
                        <div class="flex items-end gap-2" data-person-row>
                            <div class="min-w-0 flex-1">
                                <label class="sp-form-label">Guru tambahan {{ $personIndex + 2 }}</label>
                                <select name="id_guru[]" data-person-select="teacher" class="sp-form-control w-full px-3 py-2.5 text-sm">
                                    <option value="">Pilih guru</option>
                                    @foreach ($teachers as $teacher)
                                        <option value="{{ $teacher->id }}" data-name="{{ $teacher->nama }}" data-nuptk="{{ $teacher->nuptk }}" data-birth-place="{{ $teacher->tempat_lahir }}" data-birth-date="{{ $teacher->tanggal_lahir }}" data-gender="{{ $teacher->jenis_kelamin }}" data-address="{{ $teacher->alamat }}" data-phone="{{ $teacher->no_hp }}" @selected((string) $selectedTeacherId === (string) $teacher->id)>{{ $teacher->nama }}{{ $teacher->nuptk ? ' · '.$teacher->nuptk : '' }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <button type="button" class="sp-btn-secondary shrink-0" data-remove-person aria-label="Hapus guru tambahan"><i class="bi bi-trash3" aria-hidden="true"></i>Hapus</button>
                        </div>
                    @endforeach
                </div>
                <div class="sm:col-span-2 lg:col-span-4">
                    <button type="button" class="sp-btn-secondary" data-add-person="teacher"><i class="bi bi-plus-circle" aria-hidden="true"></i>Tambah guru</button>
                </div>
                <template data-person-template="teacher">
                    <div class="flex items-end gap-2" data-person-row>
                        <div class="min-w-0 flex-1">
                            <label class="sp-form-label">Guru tambahan</label>
                            <select name="id_guru[]" data-person-select="teacher" class="sp-form-control w-full px-3 py-2.5 text-sm">
                                <option value="">Pilih guru</option>
                                @foreach ($teachers as $teacher)
                                    <option value="{{ $teacher->id }}" data-name="{{ $teacher->nama }}" data-nuptk="{{ $teacher->nuptk }}" data-birth-place="{{ $teacher->tempat_lahir }}" data-birth-date="{{ $teacher->tanggal_lahir }}" data-gender="{{ $teacher->jenis_kelamin }}" data-address="{{ $teacher->alamat }}" data-phone="{{ $teacher->no_hp }}">{{ $teacher->nama }}{{ $teacher->nuptk ? ' · '.$teacher->nuptk : '' }}</option>
                                @endforeach
                            </select>
                        </div>
                        <button type="button" class="sp-btn-secondary shrink-0" data-remove-person aria-label="Hapus guru tambahan"><i class="bi bi-trash3" aria-hidden="true"></i>Hapus</button>
                    </div>
                </template>
                <div>
                    <label for="letter-teacher-nuptk" class="sp-form-label">NIP/NUPTK</label>
                    <input id="letter-teacher-nuptk" class="sp-form-control w-full px-3 py-2.5 text-sm" data-teacher-detail="nuptk" readonly>
                </div>
                <div>
                    <label for="letter-teacher-birth-place" class="sp-form-label">Tempat lahir guru</label>
                    <input id="letter-teacher-birth-place" class="sp-form-control w-full px-3 py-2.5 text-sm" data-teacher-detail="birth-place" readonly>
                </div>
                <div>
                    <label for="letter-teacher-birth-date" class="sp-form-label">Tanggal lahir guru</label>
                    <input id="letter-teacher-birth-date" class="sp-form-control w-full px-3 py-2.5 text-sm" data-teacher-detail="birth-date" readonly>
                </div>
                <div>
                    <label for="letter-teacher-gender" class="sp-form-label">Jenis kelamin guru</label>
                    <input id="letter-teacher-gender" class="sp-form-control w-full px-3 py-2.5 text-sm" data-teacher-detail="gender" readonly>
                </div>
                <div class="sm:col-span-2">
                    <label for="letter-teacher-address" class="sp-form-label">Alamat guru</label>
                    <input id="letter-teacher-address" class="sp-form-control w-full px-3 py-2.5 text-sm" data-teacher-detail="address" readonly>
                </div>
                <div>
                    <label for="letter-teacher-phone" class="sp-form-label">Nomor telepon guru</label>
                    <input id="letter-teacher-phone" class="sp-form-control w-full px-3 py-2.5 text-sm" data-teacher-detail="phone" readonly>
                </div>
            </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: pengajuan beasiswa">
            </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('pkbm.kalender-pendidikan.partials.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>{{ $letterhead['institution']?->kecamatan ? $letterhead['institution']->kecamatan.', ' : '' }}{{ now('Asia/Jakarta')->locale('id')->translatedFormat('d F Y') }}</p>
                        <p>Kepala {{ $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('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 sebagai draft</button>
            </div>
        </section>
    </form>
</div>
@endsection