@extends('layouts.app')

@section('title', 'ID Cards')

@section('content')
    <div class="flex flex-col gap-6">
        <div class="flex items-end justify-between gap-3">
            <div>
                <h1 class="text-lg font-semibold">ID Cards</h1>
                <p class="text-xs text-muted-foreground">Select students by class and generate printable student ID cards (front and back)</p>
            </div>
        </div>

        <div class="rounded-xl border border-border bg-card">
            <form method="get" action="{{ route('students.id-cards') }}" class="flex flex-wrap items-end gap-3 p-3">
                <div class="flex flex-col gap-1.5">
                    <label class="text-xs text-muted-foreground">Form/Class *</label>
                    <select name="class" required class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                        @foreach (\App\Models\Student::FORMS as $f)
                            <option value="{{ $f }}" @selected($className === $f)>{{ $f }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="flex flex-col gap-1.5">
                    <label class="text-xs text-muted-foreground">Stream</label>
                    <select name="stream" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                        <option value="">All</option>
                        @foreach (\App\Models\Student::STREAMS as $st)
                            <option value="{{ $st }}" @selected($stream === $st)>Stream {{ $st }}</option>
                        @endforeach
                    </select>
                </div>
                <button class="h-9 rounded-lg bg-primary px-3 text-sm font-medium text-primary-foreground hover:bg-primary/90">Load Students</button>
            </form>
        </div>

        @if ($className === '')
            <div class="flex h-48 items-center justify-center rounded-xl border border-border text-sm text-muted-foreground">
                Pick a form/class above, then load the students to generate cards.
            </div>
        @else
            <div class="rounded-xl border border-border bg-card">
                <div class="flex items-center gap-3 p-3">
                    <span class="text-sm text-muted-foreground">{{ $prior->count() }} students in {{ $className }} {{ $stream ? "Stream {$stream}" : '(all streams)' }}</span>
                    <button onclick="generateCards()" class="ml-auto rounded-lg bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary/90">Generate ID Cards</button>
                </div>
                <table class="w-full text-sm">
                    <thead>
                        <tr class="border-b text-left text-xs uppercase text-muted-foreground">
                            <th class="w-9 px-3 py-2 font-medium"><input type="checkbox" onchange="toggleAll(this.checked)"></th>
                            <th class="px-3 py-2 font-medium">Adm No</th>
                            <th class="px-3 py-2 font-medium">Student</th>
                            <th class="px-3 py-2 font-medium">Class</th>
                            <th class="px-3 py-2 font-medium">Category</th>
                        </tr>
                    </thead>
                    <tbody id="card-rows">
                        @foreach ($prior as $s)
                            <tr class="border-b last:border-0">
                                <td class="px-3 py-2.5"><input type="checkbox" class="card-check" value="{{ $s->id }}"></td>
                                <td class="px-3 py-2.5 font-mono text-xs">{{ $s->admission_no }}</td>
                                <td class="px-3 py-2.5 font-medium">{{ $s->full_name }}</td>
                                <td class="px-3 py-2.5">{{ $s->class_name }} {{ $s->stream }}</td>
                                <td class="px-3 py-2.5 text-muted-foreground">{{ $s->category }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </div>
@endsection

@push('scripts')
    <script>
        const ROOT = {!! json_encode($prior->map(fn ($s) => [
            'id' => $s->id,
            'name' => $s->full_name,
            'admissionNo' => $s->admission_no,
            'className' => $s->class_name,
            'stream' => $s->stream,
            'category' => $s->category,
            'house' => $s->house ?? '',
            'upi' => $s->upi,
        ])->values()) !!};

        function initials(name) {
            return name.split(' ').filter(Boolean).slice(0, 2).map((p) => (p[0] || '').toUpperCase()).join('');
        }

        function selectedCards() {
            const ids = new Set([...document.querySelectorAll('.card-check:checked')].map((c) => c.value));
            return ROOT.filter((s) => ids.has(String(s.id)));
        }

        function toggleAll(v) {
            document.querySelectorAll('.card-check').forEach((c) => (c.checked = v));
        }

        function generateCards() {
            const chosen = selectedCards();
            if (chosen.length === 0) { alert('Select at least one student'); return; }
            const cards = chosen.map((s) => `
              <div class="card">
                <div class="photo">${initials(s.name)}</div>
                <h2>${s.name}</h2>
                <p>Adm No: ${s.admissionNo}</p>
                <p>${s.className} ${s.stream}</p>
                <p>${s.category} · ${s.house || 'Greenville'}</p>
                <div class="labels">
                  <span class="lbl">UPI ${s.upi}</span><br/>
                  <span class="lbl">Valid for Term 1 · 2026</span>
                </div>
              </div>
              <div class="card back">
                <div style="font-size:12px; font-weight:700; color:#888; letter-spacing:.06em; text-transform:uppercase;">Greenville Academy</div>
                <p style="margin-top:6px;">This card identifies ${s.name} as a bona fide student of Greenville Academy. Lost cards should be reported to the deputy principal immediately.</p>
                <div class="labels">
                  <span class="lbl">Signature ______________________</span><br/>
                  <span class="lbl">Deputy Principal</span>
                </div>
              </div>`).join('');

            const w = window.open('', '_blank', 'width=1000,height=800');
            if (!w) return;
            w.document.write(`<!doctype html><html><head><meta charset="utf-8"/><title>Student ID Cards</title>
            <style>
              * { box-sizing: border-box; }
              body { font-family: -apple-system, 'Segoe UI', sans-serif; color: #111; margin: 24px; font-size: 12px; }
              h1 { font-size: 18px; margin: 0 0 2px; }
              .muted { color: #555; }
              .header { text-align: center; margin-bottom: 18px; }
              .header .school { font-size: 20px; font-weight: 700; letter-spacing: .02em; }
              .cards { display: flex; flex-wrap: wrap; gap: 14px; }
              .card { width: 226px; height: 142px; border: 1px solid #333; border-radius: 10px; padding: 12px; position: relative; }
              .card .photo { width: 54px; height: 64px; border:1px solid #888; border-radius:6px; float:left; margin-right:10px; display:flex; align-items:center; justify-content:center; background:#f5f5f5; color:#666; }
              .card h2 { margin: 0 0 2px; font-size: 13px; }
              .card p { margin: 2px 0; font-size: 10px; }
              .card .labels { position: absolute; bottom: 10px; left: 12px; right: 12px; }
              .card .lbl { font-size: 9px; color: #555; }
              @media print { body { margin: 12px; } }
            </style></head><body>
            <div class="header">
              <div class="school">Greenville Academy</div>
              <div class="muted">Student ID Cards</div>
            </div>
            <div class="cards">${cards}</div>
            <script>window.onload = function() { window.print(); };<\/script>
            </body></html>`);
            w.document.close();
            w.focus();
        }
    </script>
@endpush