@extends('layouts.app')

@section('title', 'Leaving Certificate')

@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">Leaving Certificate</h1>
                <p class="text-xs text-muted-foreground">Kenya Primary School Leaving Certificate — ED/B100 (REV). Issued when a pupil finishes school or transfers out.</p>
            </div>
        </div>

        <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
            <div class="rounded-xl border border-border bg-card">
                <div class="flex flex-col gap-3 p-4">
                    <div>
                        <label class="text-xs text-muted-foreground">Select Pupil</label>
                        <span class="ml-2 text-xs text-muted-foreground">{{ $students->count() }} active + transferred</span>
                    </div>
                    <form method="get" action="{{ route('students.leaving-certificates') }}" class="flex gap-2">
                        <input name="q" value="{{ $search }}" placeholder="Search by name, admission no, or UPI..."
                               class="h-9 flex-1 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                        <button class="rounded-lg bg-primary px-3 text-sm font-medium text-primary-foreground hover:bg-primary/90">Search</button>
                    </form>
                    <div class="max-h-80 overflow-y-auto rounded-md border border-border">
                        @foreach ($students as $s)
                            <a href="{{ route('students.leaving-certificates', ['q' => $s->full_name]) }}"
                               class="flex w-full items-center gap-2.5 border-b border-border/60 px-3 py-2 text-left text-sm transition-colors last:border-0 hover:bg-accent/40 {{ $student && $student->id === $s->id ? 'bg-primary/10' : '' }}">
                                <span class="flex size-7 shrink-0 items-center justify-center rounded-md bg-foreground/5 text-xs font-semibold">
                                    {{ strtoupper(substr($s->first_name, 0, 1).substr($s->surname, 0, 1)) }}
                                </span>
                                <span class="min-w-0 flex-1">
                                    <span class="block truncate font-medium">{{ $s->full_name }}</span>
                                    <span class="block text-xs text-muted-foreground">
                                        Adm {{ $s->admission_no }} · {{ $s->class_name }} {{ $s->stream }} · UPI {{ $s->upi }}
                                    </span>
                                </span>
                                @if ($s->status === 'Transferred')
                                    <span class="rounded-full border border-border px-2 py-0.5 text-[10px] text-muted-foreground">Transferred</span>
                                @endif
                            </a>
                        @endforeach
                        @if ($students->isEmpty())
                            <div class="px-3 py-8 text-center text-sm text-muted-foreground">No pupils found.</div>
                        @endif
                    </div>
                </div>
            </div>

            <div class="rounded-xl border border-border bg-card">
                <form method="post" action="{{ route('students.leaving-certificates.store') }}" class="flex flex-col gap-3 p-4">
                    @csrf
                    <div class="flex items-center justify-between">
                        <label class="text-xs text-muted-foreground">Certificate Details</label>
                        <span class="text-xs text-muted-foreground">
                            {{ $student ? $student->status . ' — left on defaults to ' . ($student->status === 'Transferred' ? \Carbon\Carbon::parse($student->transferred_on)->format('d M Y') : 'today') : '' }}
                        </span>
                    </div>

                    @if (! $student)
                        <div class="flex h-40 items-center justify-center text-sm text-muted-foreground">Select a pupil on the left to populate the certificate.</div>
                    @else
                        <input type="hidden" name="student_id" value="{{ $student->id }}">
                        <div class="grid grid-cols-2 gap-3">
                            @php
                                $leftOn = $student->status === 'Transferred' ? $student->transferred_on->toDateString() : now()->toDateString();
                                $kcpe = \App\Models\LeavingCertificate::kcpeIndexFor($student->admission_no);
                                $draft = [
                                    'full_name' => $student->full_name,
                                    'admission_no' => $student->admission_no,
                                    'kcpe_index' => $kcpe,
                                    'date_of_birth' => $student->date_of_birth?->toDateString(),
                                    'issued_on' => now()->toDateString(),
                                    'entered_on' => $student->date_of_admission?->toDateString(),
                                    'entered_standard' => '1',
                                    'left_on' => $leftOn,
                                    'left_standard' => '8',
                                    'course_standard' => '8',
                                    'report' => $student->full_name.' is a disciplined, hardworking and industrious pupil of good character. '.($student->gender === 'Female' ? 'She' : 'He').' showed commendable ability in classwork and cooperated well with teachers and fellow pupils throughout '.($student->gender === 'Female' ? 'her' : 'his').' stay at the school. '.($student->gender === 'Female' ? 'She' : 'He').' leaves the school in good standing.',
                                ];
                            @endphp
                            <x-field label="Admission/Serial No.">
                                <x-input name="admission_no" value="{{ $draft['admission_no'] }}" />
                            </x-field>
                            <x-field label="KCPE Index No.">
                                <x-input name="kcpe_index" value="{{ $draft['kcpe_index'] }}" />
                            </x-field>
                            <div class="col-span-2">
                                <x-field label="Pupil's full name">
                                    <x-input name="full_name" value="{{ $draft['full_name'] }}" />
                                </x-field>
                            </div>
                            <x-field label="Date of birth">
                                <x-input type="date" name="date_of_birth" value="{{ $draft['date_of_birth'] }}" />
                            </x-field>
                            <x-field label="Date of issue">
                                <x-input type="date" name="issued_on" value="{{ $draft['issued_on'] }}" />
                            </x-field>
                            <x-field label="Entered school on">
                                <x-input type="date" name="entered_on" value="{{ $draft['entered_on'] }}" />
                            </x-field>
                            <x-field label="Enrolled in standard">
                                <x-input name="entered_standard" value="{{ $draft['entered_standard'] }}" />
                            </x-field>
                            <x-field label="Left on">
                                <x-input type="date" name="left_on" value="{{ $draft['left_on'] }}" />
                            </x-field>
                            <x-field label="Left from standard">
                                <x-input name="left_standard" value="{{ $draft['left_standard'] }}" />
                            </x-field>
                            <div class="col-span-2">
                                <x-field label="Completed course for standard">
                                    <x-input name="course_standard" value="{{ $draft['course_standard'] }}" />
                                </x-field>
                            </div>
                            <div class="col-span-2">
                                <x-field label="Head teacher's report">
                                    <textarea name="report" rows="5" class="w-full rounded-lg border border-input bg-transparent px-3 py-2 text-sm outline-none focus-visible:border-ring">{{ $draft['report'] }}</textarea>
                                </x-field>
                            </div>
                        </div>
                    @endif

                    @if ($student)
                        <div class="flex items-center gap-2">
                            <button class="rounded-lg bg-primary px-3 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90">Record Issue</button>
                            <button type="button" onclick="printCert()" class="rounded-lg border border-border px-3 py-2 text-sm hover:bg-accent">Print</button>
                        </div>
                    @endif
                </form>
            </div>
        </div>

        <div class="rounded-xl border border-border bg-card">
            <div class="flex items-center gap-3 p-4">
                <span class="rounded-lg border border-border bg-muted/40 px-3 py-2 text-sm text-muted-foreground">Certificates Issued</span>
                <span class="ml-auto text-lg font-semibold tabular-nums">{{ $issued->count() }}</span>
            </div>
            <table class="w-full text-sm">
                <thead>
                    <tr class="border-b text-left text-xs uppercase text-muted-foreground">
                        <th class="px-4 py-2 font-medium">Cert No.</th>
                        <th class="px-4 py-2 font-medium">Pupil</th>
                        <th class="px-4 py-2 font-medium">Adm No</th>
                        <th class="px-4 py-2 font-medium">Left From Std</th>
                        <th class="px-4 py-2 font-medium">Issued On</th>
                        <th class="px-4 py-2 text-right font-medium">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($issued as $cert)
                        <tr class="border-b last:border-0">
                            <td class="px-4 py-2.5 font-mono text-xs">{{ $cert->cert_no }}</td>
                            <td class="px-4 py-2.5 font-medium">{{ $cert->full_name }}</td>
                            <td class="px-4 py-2.5 font-mono text-xs">{{ $cert->admission_no }}</td>
                            <td class="px-4 py-2.5">{{ $cert->left_standard }}</td>
                            <td class="px-4 py-2.5 text-muted-foreground">{{ $cert->issued_on->format('d M Y') }}</td>
                            <td class="px-4 py-2.5">
                                <div class="flex justify-end">
                                    <a target="_blank" href="{{ route('students.leaving-certificates.print', $cert->id) }}" class="rounded-md border border-border px-2 py-1 text-xs hover:bg-accent">Print</a>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                    @if ($issued->isEmpty())
                        <tr><td colspan="6" class="px-4 py-10 text-center text-sm text-muted-foreground">No certificates recorded yet.</td></tr>
                    @endif
                </tbody>
            </table>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        function esc(v) {
            return String(v).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
        }
        function label(v) {
            if (!v) return '';
            const p = v.split('-');
            if (p.length !== 3) return v;
            const months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
            return `${p[2]} ${months[+p[1] - 1]} ${p[0]}`;
        }
        function printCert() {
            const g = (n) => (document.querySelector(`[name="${n}"]`) || {}).value || '';
            const c = {
                admissionNo: g('admission_no'), kcpeIndex: g('kcpe_index'),
                fullName: g('full_name'), dateOfBirth: g('date_of_birth'),
                issuedOn: g('issued_on'), enteredOn: g('entered_on'),
                enteredStandard: g('entered_standard'), leftOn: g('left_on'),
                leftStandard: g('left_standard'), courseStandard: g('course_standard'),
                report: g('report'),
            };
            const html = `<div style="width:793px;margin:0 auto;border:3px double #000;padding:34px 44px;font-family:Georgia,'Times New Roman',serif;color:#000;">
  <div style="display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid #000;padding-bottom:10px;margin-bottom:18px;">
    <div style="width:110px;font-weight:700;font-size:13px;padding-top:6px;">ED/B100 (REV)</div>
    <div style="text-align:center;">
      <div style="font-weight:700;letter-spacing:.05em;">REPUBLIC OF KENYA</div>
      <div style="font-size:12px;margin-top:1px;">MINISTRY OF EDUCATION, SCIENCE AND TECHNOLOGY</div>
      <div style="font-weight:700;font-size:15px;margin-top:3px;">KENYA PRIMARY SCHOOL LEAVING CERTIFICATE</div>
    </div>
    <div style="width:110px;"></div>
  </div>
  <div style="text-align:center;margin:0 0 22px;">
    <div style="border-bottom:1px solid #000;display:inline-block;min-width:340px;font-size:16px;font-weight:600;line-height:1.9;">Greenville Academy</div>
    <div style="font-size:13px;margin-top:2px;">(Name of School)</div>
  </div>
  <div style="display:flex;justify-content:space-between;margin-bottom:16px;">
    <div style="font-size:13px;">Admission/Serial No.: <span style="border-bottom:1px dotted #000;padding:0 18px;">${esc(c.admissionNo)}</span> .</div>
    <div style="font-size:13px;">KCPE INDEX NO.: <span style="border-bottom:1px dotted #000;padding:0 18px;">${esc(c.kcpeIndex)}</span> ..</div>
  </div>
  <p style="font-size:14px;line-height:2.1;text-align:justify;margin:0 0 16px;">
    This is to certify that <span style="border-bottom:1px solid #000;padding:0 16px;white-space:nowrap;">${esc(c.fullName)}</span>
    entered this school on <span style="border-bottom:1px solid #000;padding:0 12px;">${label(c.enteredOn)}</span>
    and was enrolled in standard <span style="border-bottom:1px solid #000;padding:0 8px;">${esc(c.enteredStandard)}</span>
    and left on <span style="border-bottom:1px solid #000;padding:0 12px;">${label(c.leftOn)}</span>
    from standard <span style="border-bottom:1px solid #000;padding:0 8px;">${esc(c.leftStandard)}</span>
    having satisfactorily completed the approved course for standard
    <span style="border-bottom:1px solid #000;padding:0 8px;">${esc(c.courseStandard)}</span>.
  </p>
  <div style="font-size:13px;margin-bottom:16px;">
    Date of birth (in admission register): <span style="border-bottom:1px solid #000;padding:0 14px;">${label(c.dateOfBirth)}</span>
  </div>
  <div style="font-size:13px;margin-bottom:6px;">Head teacher&rsquo;s report on the pupil&rsquo;s ability, industry and conduct:</div>
  <div style="min-height:100px;border:1px solid #000;padding:10px 12px;font-size:14px;line-height:1.9;text-align:justify;">${esc(c.report)}</div>
  <div style="display:flex;justify-content:space-between;margin:30px 0 26px;">
    <div style="font-size:13px;">Pupil&rsquo;s signature <span style="display:inline-block;border-bottom:1px solid #000;width:180px;">&nbsp;</span></div>
    <div style="font-size:13px;">Date of issue <span style="display:inline-block;border-bottom:1px solid #000;width:130px;text-align:center;">${label(c.issuedOn)}</span></div>
  </div>
  <div style="display:flex;justify-content:space-between;align-items:flex-end;">
    <div style="font-size:13px;">STAMP: <span style="display:inline-block;width:130px;height:64px;border:1px dashed #000;vertical-align:bottom;"></span></div>
    <div style="font-size:13px;text-align:right;">H/T&rsquo;s Sign<br/><span style="display:inline-block;border-bottom:1px solid #000;width:180px;">&nbsp;</span></div>
  </div>
</div>`;
            const w = window.open('', '_blank', 'width=1000,height=800');
            if (!w) return;
            w.document.write(`<!doctype html><html><head><meta charset="utf-8"/><title>Leaving Certificate — ED/B100 · ${esc(c.admissionNo)}</title>
            <style>* { box-sizing: border-box; } body { font-family: Georgia, 'Times New Roman', serif; }</style></head><body>${html}
            <script>window.onload = function() { window.print(); };<\/script></body></html>`);
            w.document.close();
            w.focus();
        }
    </script>
@endpush