@php($fmt = $formatEkspor ?? null)

<div class="alert alert-light border mb-3 small">
    Kop surat tidak diatur di form ini. Dokumen memakai kop yang periodenya mencakup tanggal kegiatan
    (kelola kop di menu <a href="{{ route('admin.template-ekspor.index') }}" target="_blank">Template Ekspor</a>).
</div>

<div class="row">
            <div class="col-md-6 mb-2">
                <label for="nama_institusi" class="form-label">Nama Institusi</label>
                <input type="text" name="nama_institusi" id="nama_institusi" class="form-control form-control-sm @error('nama_institusi') is-invalid @enderror"
                    placeholder="mis. Poltekkes Kemenkes Malang" value="{{ old('nama_institusi', $templateAktif->nama_institusi ?? '') }}">
                @error('nama_institusi')
                    <span class="invalid-feedback d-block">{{ $message }}</span>
                @enderror
            </div>
            <div class="col-md-6 mb-2">
                <label for="judul_dokumen" class="form-label">Judul Dokumen</label>
                <input type="text" name="judul_dokumen" id="judul_dokumen" class="form-control form-control-sm @error('judul_dokumen') is-invalid @enderror"
                    placeholder="mis. Rekap Kehadiran Mahasiswa" value="{{ old('judul_dokumen', $templateAktif->judul_dokumen ?? '') }}">
                @error('judul_dokumen')
                    <span class="invalid-feedback d-block">{{ $message }}</span>
                @enderror
            </div>
        </div>
        <p class="small text-muted mb-0">
            Logo diambil otomatis dari <code>public/images/logo-institusi.png</code>. Untuk masa berlaku atau
            beberapa template tersimpan, atur lewat <a href="{{ route('admin.template-ekspor.index') }}" target="_blank">menu Template Ekspor</a>.
        </p>
    </div>
</div>

<div class="row">
    <div class="col-md-7">
        <div class="mb-3">
            <label for="jenis" class="form-label">Jenis Export <span class="text-danger">*</span></label>
            <select name="jenis" id="jenis" class="form-select @error('jenis') is-invalid @enderror" {{ $fmt ? 'disabled' : '' }} required
                @unless ($fmt) onchange="location.href='{{ route('admin.format-ekspor.create') }}?jenis=' + this.value" @endunless>
                @foreach (\App\Models\FormatEkspor::JENIS_LABEL as $slug => $label)
                    <option value="{{ $slug }}" {{ old('jenis', $fmt->jenis ?? $jenisDipilih ?? '') === $slug ? 'selected' : '' }}>{{ $label }}</option>
                @endforeach
            </select>
            @if ($fmt)
                <input type="hidden" name="jenis" value="{{ $fmt->jenis }}">
                <small class="text-muted d-block mt-1">Jenis tidak bisa diganti setelah format dibuat — buat format baru kalau butuh jenis lain.</small>
            @else
                <small class="text-muted d-block mt-1">Ganti pilihan ini akan memuat ulang halaman supaya panel placeholder di kanan dan isian lain ikut sesuai jenisnya.</small>
            @endif
            @error('jenis')
                <span class="invalid-feedback d-block">{{ $message }}</span>
            @enderror
        </div>

        <div class="mb-3">
            <label for="nama_format" class="form-label">Nama Format <span class="text-danger">*</span></label>
            <input type="text" name="nama_format" id="nama_format" class="form-control @error('nama_format') is-invalid @enderror"
                placeholder="mis. Format Standar 2025/2026" value="{{ old('nama_format', $fmt->nama_format ?? '') }}" required>
            @error('nama_format')
                <span class="invalid-feedback d-block">{{ $message }}</span>
            @enderror
        </div>

        <div class="mb-3">
            <label for="markup" class="form-label">Isi Dokumen (markup) <span class="text-danger">*</span></label>
            <textarea name="markup" id="markup" rows="18" class="form-control font-monospace @error('markup') is-invalid @enderror"
                placeholder="Tulis HTML + placeholder @{{ nama }} di sini..." required>{{ old('markup', $fmt->markup ?? '') }}</textarea>
            <small class="text-muted d-block mt-1">
                Kop surat (logo, nama institusi, judul dokumen) SUDAH otomatis ditambahkan di atas isi ini
                dari menu Template Ekspor — tidak perlu ditulis ulang di sini. Tulis HTML biasa untuk
                tabel/paragraf, pakai placeholder di panel sebelah kanan untuk menyisipkan data.
            </small>
            @error('markup')
                <span class="invalid-feedback d-block">{{ $message }}</span>
            @enderror
        </div>

        <div class="mb-3 form-check">
            <input type="checkbox" name="jadikan_aktif" id="jadikan_aktif" class="form-check-input" value="1"
                {{ old('jadikan_aktif', $fmt->is_aktif ?? false) ? 'checked' : '' }}>
            <label for="jadikan_aktif" class="form-check-label">
                Jadikan format aktif untuk jenis ini (dipakai saat export PDF jenis ini)
            </label>
        </div>
    </div>

    <div class="col-md-5">
        <div class="card bg-light">
            <div class="card-body">
                <h6 class="card-title mb-2">Placeholder yang tersedia</h6>
                <p class="small text-muted mb-2">Panel ini otomatis menyesuaikan begitu "Jenis Export" di atas diganti.</p>
                @foreach (\App\Models\FormatEkspor::placeholderUntuk($fmt->jenis ?? $jenisDipilih ?? '') as $grup => $daftar)
                    <div class="mb-2">
                        <div class="fw-semibold small">{{ $grup }}</div>
                        <ul class="small mb-0 ps-3">
                            @foreach ($daftar as $item)
                                <li><code>{{ $item['nama'] }}</code></li>
                            @endforeach
                        </ul>
                    </div>
                @endforeach
                <a href="{{ route('admin.format-ekspor.unduh-placeholder') }}" class="small" target="_blank">
                    <i class="bx bx-download me-1"></i>Unduh daftar lengkap placeholder + penjelasan (semua jenis, PDF)
                </a>

                @php($kelasCss = \App\Models\FormatEkspor::cssKelasUntuk($fmt->jenis ?? $jenisDipilih ?? ''))
                @if (! empty($kelasCss))
                    <hr>
                    <h6 class="card-title mb-2">Kelas CSS siap pakai</h6>
                    <p class="small text-muted mb-2">
                        Sudah ada warnanya, tinggal pakai nama class-nya di HTML supaya tampilan serupa versi bawaan
                        (mis. <code>&lt;span class="status-hadir"&gt;Hadir&lt;/span&gt;</code>), tidak perlu menulis CSS sendiri.
                    </p>
                    <ul class="small mb-0 ps-3">
                        @foreach ($kelasCss as $kelas => $deskripsi)
                            <li><code>{{ $kelas }}</code> &mdash; {{ $deskripsi }}</li>
                        @endforeach
                    </ul>
                @endif
                <hr>
                <p class="small text-muted mb-0">
                    Sintaks: <code>@{{ nama }}</code> untuk teks biasa,
                    <code>@{{#daftar}} ... @{{/daftar}}</code> untuk perulangan tabel,
                    <code>@{{^daftar}} ... @{{/daftar}}</code> untuk "tampil kalau kosong".
                </p>
            </div>
        </div>
    </div>
</div>