@extends('layouts.app')

@section('title', $isTeacher ? 'Kartu ID' : 'Cetak Kartu ID')

@section('content')
<div class="pkbm-master-page mx-auto max-w-7xl space-y-5">
    <header class="pkbm-dashboard__heading">
        <div class="min-w-0">
            <p class="pkbm-dashboard__breadcrumb"><span>Standar Pengelolaan</span><i class="bi bi-chevron-right" aria-hidden="true"></i>Manajemen Absensi<i class="bi bi-chevron-right" aria-hidden="true"></i>{{ $isTeacher ? 'Kartu ID' : 'Cetak Kartu ID' }}</p>
            <h1 class="pkbm-dashboard__title">{{ $isTeacher ? 'Kartu ID' : 'Cetak Kartu ID' }}</h1>
            <p class="pkbm-dashboard__subtitle">{{ $isTeacher ? 'Lihat kartu ID siswa aktif.' : 'Pratinjau kartu ID guru maupun pelajar. Cetak atau unduh satu kartu, atau ekspor semua kartu dalam satu ZIP.' }}</p>
        </div>
        @if ($canPrint && $cards->isNotEmpty())
            <div class="flex flex-wrap gap-2">
                <button type="button" class="sp-btn-secondary shrink-0" onclick="window.print()"><i class="bi bi-printer" aria-hidden="true"></i>Cetak kartu</button>
                <button id="student-card-download-zip" type="button" class="sp-btn-primary shrink-0"><i class="bi bi-file-zip" aria-hidden="true"></i>Download ZIP</button>
            </div>
        @endif
    </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><span>{{ $errors->first() }}</span></div>
    @endif

    <section class="sp-card">
        <form method="GET" action="{{ route('pkbm.absensi.id-cards') }}" class="grid gap-3 p-4 sm:grid-cols-2 sm:items-end">
            @if ($isTeacher)
                <input type="hidden" name="jenis" value="siswa">
            @else
            <div>
                <label for="student-card-kind" class="sp-form-label">Jenis kartu</label>
                <select id="student-card-kind" name="jenis" class="sp-form-control px-3 py-2 text-sm" onchange="this.form.requestSubmit()">
                    <option value="">Pilih jenis kartu</option>
                    <option value="siswa" @selected($type === 'siswa')>Siswa</option>
                    <option value="guru" @selected($type === 'guru')>Guru</option>
                </select>
            </div>
            @endif
            @if ($type === 'siswa')
                <div>
                    <label for="student-card-class" class="sp-form-label">Kelas siswa aktif</label>
                    <select id="student-card-class" name="kelas" class="sp-form-control px-3 py-2 text-sm" onchange="this.form.requestSubmit()">
                        <option value="">Pilih kelas</option>
                        @foreach ($classes as $class)
                            <option value="{{ $class->id }}" @selected((string) $classId === (string) $class->id)>{{ $class->nama_kelas }}</option>
                        @endforeach
                    </select>
                </div>
            @endif
        </form>

        @unless ($isTeacher)
        <form method="POST" action="{{ route('pkbm.absensi.id-cards.template') }}" enctype="multipart/form-data" class="grid gap-3 border-t border-slate-100 p-4 sm:grid-cols-[minmax(12rem,1fr)_minmax(14rem,1.5fr)_auto] sm:items-end">
            @csrf
            <div>
                <label for="card-template-type" class="sp-form-label">Template belakang untuk</label>
                <select id="card-template-type" name="jenis" class="sp-form-control px-3 py-2 text-sm" required>
                    <option value="siswa" @selected($type === 'siswa')>Siswa</option>
                    <option value="guru" @selected($type === 'guru')>Guru</option>
                </select>
            </div>
            <div>
                <label for="card-template-file" class="sp-form-label">Upload template belakang (PNG, maks. 5 MB)</label>
                <input id="card-template-file" name="template" type="file" accept="image/png" required class="sp-form-control px-3 py-2 text-sm">
            </div>
            <button type="submit" class="sp-btn-secondary justify-center px-4 py-2 text-sm"><i class="bi bi-upload" aria-hidden="true"></i>Upload template</button>
        </form>
        @endunless
    </section>

    @if (! $period)
        <p role="status" class="rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900">Periode akademik aktif belum diatur. Atur periode sebelum mencetak kartu siswa.</p>
    @elseif ($type === 'siswa' && ! $classId)
        <p role="status" class="rounded-xl border border-blue-200 bg-blue-50 p-4 text-sm text-blue-900">Pilih kelas untuk menampilkan kartu siswa aktif.</p>
    @elseif ($type && $cards->isEmpty())
        <p role="status" class="rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900">Tidak ada kartu yang cocok dengan pilihan ini.</p>
    @endif

    @if ($cards->isNotEmpty())
        <section class="sp-card overflow-hidden">
            <div class="sp-card-header">
                <h2 class="sp-section-title">Kartu {{ $type === 'guru' ? 'Guru' : 'Siswa' }} · {{ $type === 'siswa' ? $classes->firstWhere('id', (int) $classId)?->nama_kelas : $institution->nama_pkbm }}</h2>
                <p class="mt-1 text-xs text-slate-500">{{ number_format($cards->count(), 0, ',', '.') }} pasang kartu · bagian depan dan belakang berdampingan</p>
            </div>
            <div @class(['student-card-list p-4 sm:p-6', 'student-card-list--guru' => $type === 'guru', 'student-card-list--siswa' => $type === 'siswa'])>
                @foreach ($cards as $card)
                    @php
                        $cardName = $card->nama ?: 'Nama tidak tersedia';
                        $logoUrl = route('account.avatar', ['tenant' => auth()->user()->id_pkbm, 'logo' => $institution->logo ?? '']);
                        $frontTemplate = route('pkbm.absensi.id-cards.asset', ['type' => $type, 'side' => 'depan']);
                        $backTemplate = route('pkbm.absensi.id-cards.asset', ['type' => $type, 'side' => 'belakang']);
                        $photoUrl = $card->foto
                            ? ($type === 'guru' ? route('pkbm.guru.photo', $card->id) : route('pkbm.siswa.photo', $card->id))
                            : null;
                        $qrValue = $card->kode_qr;
                        $displayCode = $qrValue ?: ($type === 'guru' ? 'G-'.$card->id : null);
                        $birthTimestamp = $type === 'siswa' && $card->tanggal_lahir ? strtotime($card->tanggal_lahir) : false;
                    @endphp
                    <article class="student-card-pair" data-card-name="{{ $cardName }}">
                        <div class="student-card-actions">
                            <span class="truncate text-sm font-semibold text-slate-700">{{ $cardName }}</span>
                            @if ($canPrint)<div class="flex shrink-0 gap-2">
                                <button type="button" class="sp-btn-secondary justify-center px-3 py-2 text-xs" data-print-card>
                                    <i class="bi bi-printer" aria-hidden="true"></i>Cetak
                                </button>
                                <button type="button" class="sp-btn-primary justify-center px-3 py-2 text-xs" data-download-card>
                                    <i class="bi bi-download" aria-hidden="true"></i>Unduh
                                </button>
                            </div>@endif
                        </div>
                        <div class="student-card-face student-card-face--front student-card-face--{{ $type }}"
                             data-card-face="depan" style="--card-template: url('{{ $frontTemplate }}')">
                            @if ($type === 'guru')
                                <div class="teacher-card-logo"><img src="{{ $logoUrl }}" alt="Logo {{ $institution->nama_pkbm }}"></div>
                                @if ($photoUrl)
                                    <img class="teacher-card-photo" src="{{ $photoUrl }}" alt="Foto {{ $cardName }}" onerror="this.remove()">
                                @else
                                    <div class="teacher-card-photo-placeholder"><i class="bi bi-person-fill" aria-hidden="true"></i></div>
                                @endif
                                <div class="teacher-card-name">{{ $cardName }}</div>
                                <div class="teacher-card-code">Kode Guru: {{ $displayCode }}</div>
                                <div class="teacher-card-organization">{{ $institution->nama_pkbm }}</div>
                            @else
                                <div class="student-card-logo"><img src="{{ $logoUrl }}" alt="Logo {{ $institution->nama_pkbm }}"></div>
                                <div class="student-card-organization">{{ $institution->nama_pkbm }}</div>
                                @if ($photoUrl)
                                    <img class="student-card-photo" src="{{ $photoUrl }}" alt="Foto {{ $cardName }}" onerror="this.remove()">
                                @else
                                    <div class="student-card-photo-placeholder"><i class="bi bi-person-fill" aria-hidden="true"></i></div>
                                @endif
                                <div class="student-card-data">
                                    <strong class="student-card-title">KARTU PELAJAR</strong>
                                    <table>
                                        <tr><th>Nama</th><td>:</td><td>{{ mb_strtoupper($cardName) }}</td></tr>
                                        <tr><th>NIS/NISN</th><td>:</td><td>{{ $card->nis ?: '-' }} / {{ $card->nisn ?: '-' }}</td></tr>
                                        <tr><th>TTL</th><td>:</td><td>{{ $card->tempat_lahir ?: '-' }}, {{ $birthTimestamp ? date('d-m-Y', $birthTimestamp) : '-' }}</td></tr>
                                        <tr><th>Alamat</th><td>:</td><td>{{ $card->alamat ?: '-' }}</td></tr>
                                    </table>
                                </div>
                                <div class="student-card-validity">Berlaku: Selama Menjadi Siswa Aktif</div>
                            @endif
                        </div>
                        <div class="student-card-face student-card-face--back student-card-face--{{ $type }}"
                             data-card-face="belakang" style="--card-template: url('{{ $backTemplate }}')">
                            @if ($qrValue)
                                <div class="student-card-qr-wrap">
                                    <canvas class="student-card-qr" data-qr-value="{{ $qrValue }}" aria-label="QR Code {{ $cardName }}"></canvas>
                                </div>
                            @else
                                <div class="student-card-missing-qr">QR Code belum tersedia</div>
                            @endif
                            <div class="student-card-back-copy">
                                <strong>{{ $type === 'guru' ? $cardName : 'KARTU ABSENSI' }}</strong>
                                <span>{{ $type === 'guru' ? 'Pindai QR Code di atas untuk presensi kehadiran guru.' : mb_strtoupper($cardName) }}</span>
                                @if ($type === 'siswa')
                                    <span class="student-card-back-instruction">Gunakan kartu ini untuk melakukan presensi kehadiran.</span>
                                @endif
                            </div>
                        </div>
                        <p class="student-card-caption">{{ $cardName }} · depan &amp; belakang</p>
                    </article>
                @endforeach
            </div>
        </section>
    @endif
</div>

<style>
    .student-card-list { display: grid; gap: 1.5rem; }
    .student-card-pair { min-width: 0; break-inside: avoid; }
    .student-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.5rem; }
    .student-card-face {
        position: relative;
        flex: 0 0 auto;
        overflow: hidden;
        color: #172033;
        background-color: #f8fafc;
        background-image: var(--card-template);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        box-shadow: 0 4px 15px rgb(15 23 42 / 16%);
        font-family: Arial, sans-serif;
    }
    .student-card-face--siswa { width: 8.6cm; height: 5.4cm; border-radius: 0.25cm; }
    .student-card-face--guru { width: 5.4cm; height: 8.6cm; border-radius: 0.22cm; }
    .student-card-face--front { isolation: isolate; }
    .student-card-face--front::before { position: absolute; z-index: -1; inset: 0; background: rgb(255 255 255 / 12%); content: ""; }
    .student-card-pair > .student-card-face + .student-card-face { margin-top: 0.3cm; }
    .student-card-face img { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .teacher-card-logo { position: absolute; top: 0.3cm; left: 0; right: 0; z-index: 2; display: flex; justify-content: center; }
    .teacher-card-logo img { width: 1.45cm; height: 1.45cm; border-radius: 50%; background: #fff; padding: 4px; object-fit: contain; }
    .teacher-card-photo, .teacher-card-photo-placeholder { position: absolute; top: 2cm; left: 1.45cm; display: grid; width: 2.5cm; height: 3.2cm; place-items: center; border: 2px solid #fff; background: #e2e8f0; object-fit: cover; font-size: 3rem; color: #64748b; }
    .teacher-card-name { position: absolute; top: 5.3cm; left: 0.3cm; right: 0.3cm; overflow: hidden; color: #000; text-align: center; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 800; }
    .teacher-card-code { position: absolute; top: 5.9cm; left: 0.3cm; right: 0.3cm; color: #333; text-align: center; font-size: 11px; }
    .teacher-card-organization { position: absolute; right: 0.2cm; bottom: 1.25cm; left: 0.2cm; overflow: hidden; color: #000; text-align: center; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; font-size: 11px; font-weight: 900; }
    .student-card-logo { position: absolute; top: 0.3cm; left: 0.4cm; z-index: 3; display: grid; width: 1.1cm; height: 1.1cm; place-items: center; border-radius: 4px; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 20%); }
    .student-card-logo img { width: 0.9cm; height: 0.9cm; object-fit: contain; }
    .student-card-organization { position: absolute; top: 0.3cm; right: 0.3cm; left: 1.7cm; z-index: 3; overflow: hidden; color: #fff; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; font-size: 12px; font-weight: 900; text-shadow: 1px 1px 2px rgb(0 0 0 / 50%); }
    .student-card-photo, .student-card-photo-placeholder { position: absolute; top: 1.7cm; left: 0.5cm; display: grid; width: 18mm; height: 27mm; place-items: center; border: 1.5px solid #fff; background: #e2e8f0; object-fit: cover; font-size: 2.5rem; color: #64748b; }
    .student-card-data { position: absolute; top: 1.2cm; right: 0.35cm; left: 2.9cm; z-index: 2; }
    .student-card-title { display: inline-block; margin-bottom: 6px; border-bottom: 2px solid #004d4d; padding-right: 15px; color: #004d4d; font-size: 13px; font-weight: 900; }
    .student-card-data table { width: 100%; border-collapse: collapse; table-layout: fixed; }
    .student-card-data th, .student-card-data td { padding: 1.5px 0; color: #333; text-align: left; vertical-align: top; font-size: 9px; font-weight: 600; line-height: 1.15; overflow-wrap: anywhere; }
    .student-card-data th { width: 0.95cm; }
    .student-card-data td:nth-child(2) { width: 0.2cm; }
    .student-card-data td:last-child { color: #000; font-weight: 700; }
    .student-card-validity { position: absolute; bottom: 0.55cm; left: 2.9cm; color: #004d4d; font-size: 8px; font-weight: 700; }
    .student-card-qr-wrap { position: absolute; top: 50%; left: 0.5cm; display: grid; width: 3.6cm; height: 3.6cm; place-items: center; border-radius: 0.2cm; background: #fff; padding: 0.15cm; transform: translateY(-50%); }
    .student-card-face--guru .student-card-qr-wrap { left: 50%; width: 3.7cm; height: 3.7cm; padding: 0.2cm; transform: translate(-50%, -68%); }
    .student-card-qr { display: block; width: 100% !important; height: 100% !important; }
    .student-card-back-copy { position: absolute; top: 50%; right: 0.4cm; left: 4.35cm; display: flex; flex-direction: column; gap: 0.15cm; color: #172033; transform: translateY(-50%); }
    .student-card-face--guru .student-card-back-copy { top: auto; right: 0.35cm; bottom: 0.7cm; left: 0.35cm; text-align: center; transform: none; }
    .student-card-back-copy strong { color: #004d4d; font-size: 11px; font-weight: 900; }
    .student-card-back-copy span { font-size: 9px; line-height: 1.35; }
    .student-card-back-copy .student-card-back-instruction { margin-top: 4px; font-size: 8px; }
    .student-card-face--guru .student-card-back-copy strong { font-size: 10px; text-transform: uppercase; }
    .student-card-face--guru .student-card-back-copy span { font-size: 8px; }
    .student-card-missing-qr { position: absolute; top: 50%; left: 50%; width: 3.6cm; height: 3.6cm; display: grid; place-items: center; border: 1px dashed #64748b; background: #fff; color: #475569; text-align: center; font-size: 9px; transform: translate(-50%, -50%); }
    .student-card-caption { margin: 0.35rem 0 0; color: #64748b; text-align: center; font-size: 0.75rem; }
    @media (min-width: 900px) {
        .student-card-pair { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 0.3cm; }
        .student-card-pair > .student-card-face + .student-card-face { margin-top: 0; }
        .student-card-caption { flex-basis: 100%; }
    }
    @media print {
        @page { size: portrait; margin: 8mm; }
        .app-sidebar, .app-header, .app-footer, .pkbm-dashboard__heading, .sp-card > form, .sp-card-header, .student-card-caption, .student-card-actions { display: none !important; }
        .app-main { margin-left: 0 !important; }
        .app-content { min-height: 0 !important; padding: 0 !important; background: #fff !important; }
        .app-content--hero::before { display: none !important; }
        .student-card-list { display: flex; flex-direction: column; align-items: center; gap: 0.45cm; padding: 0 !important; }
        .student-card-pair { display: flex; align-items: flex-start; gap: 0.2cm; break-inside: avoid; }
        .student-card-pair > .student-card-face + .student-card-face { margin-top: 0; }
        .student-card-face { box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
        body[data-print-single-card="1"] .student-card-pair:not(.student-card-pair--print-selected) { display: none !important; }
    }
</style>
@endsection