@php($title = 'Siswa')
<x-layouts.app :title="$title">
    <div class="card">
        <div style="display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:12px;">
            <div style="font-size:18px; font-weight:700;">Daftar Siswa</div>
            <div>
                <a class="btn" href="{{ route('students.create') }}">Tambah Siswa</a>
            </div>
        </div>

        <form method="GET" class="row" style="margin-bottom:12px;">
            <div class="field">
                <label>Sekolah</label>
                <select name="school_id">
                    <option value="">Semua</option>
                    @foreach($schools as $school)
                        <option value="{{ $school->id }}" @selected(request('school_id')==$school->id)>{{ $school->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="field">
                <label>Jurusan</label>
                <select name="major_id">
                    <option value="">Semua</option>
                    @foreach($majors as $major)
                        <option value="{{ $major->id }}" @selected(request('major_id')==$major->id)>{{ $major->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="field" style="align-self:flex-end;">
                <button class="btn btn-primary" type="submit">Filter</button>
            </div>
        </form>

        <form method="POST" action="{{ route('students.import') }}" enctype="multipart/form-data" class="card" style="margin-bottom:12px; border-color:var(--border); background:#f8fafc;">
            @csrf
            <div class="row">
                <div class="field">
                    <label>Sekolah</label>
                    <select name="school_id" required>
                        <option value="">-- Pilih Sekolah --</option>
                        @foreach($schools as $school)
                            <option value="{{ $school->id }}">{{ $school->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="field">
                    <label>Jurusan (opsional)</label>
                    <select name="major_id">
                        <option value="">Tidak ada</option>
                        @foreach($majors as $major)
                            <option value="{{ $major->id }}">{{ $major->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="field">
                    <label>File Excel (xlsx/xls/csv)</label>
                    <input type="file" name="file" required>
                </div>
                <div class="field" style="align-self:flex-end;">
                    <button class="btn btn-primary" type="submit">Import Siswa</button>
                </div>
            </div>
            <p style="margin:4px 0 0; font-size:12px; color:var(--muted);">Gunakan heading: nama, jenis_kelamin, agama, tempat_lahir, tanggal_lahir, alamat, rt, rw, desa, kecamatan, kabupaten, provinsi, kelas, tingkat, nis, nisn.</p>
        </form>

        <div class="card" style="margin-bottom:12px; border-color:var(--border); background:#eef2ff;">
            <div style="display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px;">
                <div>
                    <div style="font-weight:700; font-size:14px;">Cetak Massal Kartu (Template 1)</div>
                    <div style="font-size:12px; color:var(--muted);">10 kartu per halaman (200mm x 300mm, portrait)</div>
                </div>
                <div style="display:flex; gap:6px; flex-wrap:wrap;">
                    <a class="btn btn-primary" href="{{ route('cards.print.template1.front') }}" target="_blank">Cetak Depan</a>
                    <a class="btn" href="{{ route('cards.print.template1.back') }}" target="_blank">Cetak Belakang</a>
                </div>
            </div>
        </div>

        <div class="card" style="margin-bottom:12px; border-color:var(--border); background:#e0f2fe;">
            <div style="display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px;">
                <div>
                    <div style="font-weight:700; font-size:14px;">Unduh JPG Kartu (Template 4) per Sekolah</div>
                    <div style="font-size:12px; color:var(--muted);">Depan per siswa, belakang satu file. Nama file: kelas_nama.jpg</div>
                </div>
                <form action="{{ route('cards.download.images') }}" method="GET" style="display:flex; gap:6px; flex-wrap:wrap; align-items:center;">
                    <select name="school_id" required style="padding:6px;">
                        <option value="">Pilih Sekolah</option>
                        @foreach($schools as $school)
                            <option value="{{ $school->id }}">{{ $school->name }}</option>
                        @endforeach
                    </select>
                    <select name="class_name" style="padding:6px; max-width:140px;">
                        <option value="">Kelas (opsional)</option>
                        @foreach($classes as $class)
                            <option value="{{ $class }}">{{ $class }}</option>
                        @endforeach
                    </select>
                    <button class="btn btn-primary" type="submit">Unduh JPG (Tpl 4)</button>
                </form>
            </div>
            <p style="margin:6px 0 0; font-size:12px; color:var(--muted);">Pastikan dependensi Browsershot + Puppeteer terpasang untuk rendering JPG.</p>
        </div>

        <div class="card" style="margin-bottom:12px; border-color:var(--border); background:#0f172a; color:#e2e8f0;">
            <div style="display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px;">
                <div>
                    <div style="font-weight:700; font-size:14px;">Designer Kartu (Template 4)</div>
                    <div style="font-size:12px; color:#94a3b8;">Atur label/data, posisikan elemen, pilih QR/barcode, unggah background.</div>
                </div>
                <a class="btn btn-primary" href="{{ route('cards.designer') }}" target="_blank">Buka Designer</a>
            </div>
        </div>

        <form method="POST" action="{{ route('students.import-photos') }}" enctype="multipart/form-data" class="card" style="margin-bottom:12px; border-color:var(--border); background:#eef2ff;">
            @csrf
            <div class="row">
                <div class="field">
                    <label>Sekolah (opsional)</label>
                    <select name="school_id">
                        <option value="">Semua</option>
                        @foreach($schools as $school)
                            <option value="{{ $school->id }}">{{ $school->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="field">
                    <label>Jurusan (opsional)</label>
                    <select name="major_id">
                        <option value="">Semua</option>
                        @foreach($majors as $major)
                            <option value="{{ $major->id }}">{{ $major->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="field">
                    <label>File ZIP foto (nama file = NISN)</label>
                    <input type="file" name="file" accept=".zip" required>
                </div>
                <div class="field" style="align-self:flex-end;">
                    <button class="btn btn-primary" type="submit">Upload Foto</button>
                </div>
            </div>
            <p style="margin:4px 0 0; font-size:12px; color:var(--muted);">Masukkan ZIP berisi foto yang sudah dinamai NISN (contoh: 1234567890.jpg). Pencocokan berdasarkan NISN, hanya file gambar (jpg/png/webp) yang diproses.</p>
        </form>

        <table>
            <thead>
                <tr>
                    <th>Nama</th>
                    <th>Sekolah</th>
                    <th>Jurusan</th>
                    <th>Kelas</th>
                    <th>NIS / NISN</th>
                    <th>Kartu</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody>
                @forelse($students as $student)
                    <tr>
                        <td>{{ $student->full_name }}</td>
                        <td>{{ $student->school->name ?? '-' }}</td>
                        <td>{{ $student->major->name ?? '-' }}</td>
                        <td>{{ $student->class_name }}</td>
                        <td>{{ $student->nis }} / {{ $student->nisn }}</td>
                        <td>
                            <a class="btn btn-primary" href="{{ route('students.card', [$student, 'template'=>1]) }}" target="_blank">Template 1</a>
                            <a class="btn" href="{{ route('students.card', [$student, 'template'=>2]) }}" target="_blank">Template 2</a>
                            <a class="btn" href="{{ route('students.card', [$student, 'template'=>3]) }}" target="_blank">Template 3</a>
                            <a class="btn" href="{{ route('students.card', [$student, 'template'=>4]) }}" target="_blank">Template 4</a>
                        </td>
                        <td>
                            <div style="display:flex; flex-direction:column; gap:4px;">
                                <div style="display:flex; gap:4px; flex-wrap:wrap;">
                                    <a class="btn" href="{{ route('cards.download.single', [$student, 'template'=>4, 'side'=>'front']) }}">JPG Depan</a>
                                    <a class="btn" href="{{ route('cards.download.single', [$student, 'template'=>4, 'side'=>'back']) }}">JPG Belakang</a>
                                </div>
                                <form method="POST" action="{{ route('students.photo', $student) }}" enctype="multipart/form-data" style="display:flex; gap:4px; align-items:center; flex-wrap:wrap;">
                                    @csrf
                                    <input type="file" name="photo" accept="image/*" required style="font-size:11px; max-width:150px;">
                                    <button class="btn btn-primary" type="submit">Upload Foto</button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="7">Belum ada data.</td></tr>
                @endforelse
            </tbody>
        </table>

        <div style="margin-top:12px;">
            {{ $students->links() }}
        </div>
    </div>
</x-layouts.app>