@extends('layouts.app')

@section('tajuk', 'Kaunter Borang: ' . $sesi->nama)
@section('saiz-container', 'container-kecil')

@section('kandungan')
    <div class="kad">
        <h1>Kaunter Borang SPR</h1>
        <p class="teks-kecil mb-0">
            {{ $sesi->dun->code ?? '' }} — {{ $sesi->dun->nama ?? '' }} |
            {{ $sesi->nama }} ({{ $sesi->tarikh->format('d/m/Y') }})
        </p>
    </div>

    <div class="kad">
        <form method="GET" action="{{ route('kaunter.index', $sesi) }}">
            <label for="nombor_siri">Nombor Siri Slip Petugas</label>
            <input type="text" id="nombor_siri" name="nombor_siri" value="{{ request('nombor_siri') }}"
                   inputmode="numeric" placeholder="cth: 001" required autofocus>
            <button type="submit" class="btn btn-penuh">Semak</button>
        </form>
    </div>

    @if (! empty($ralat))
        <div class="makluman makluman-ralat">{{ $ralat }}</div>
    @endif

    @if (! empty($kehadiran))
        <div class="kad">
            <div class="teks-tengah">
                <p class="teks-kecil mb-0">Nombor siri</p>
                <div class="slip-nombor">{{ $kehadiran->nombor_siri_papar }}</div>
            </div>

            <table class="slip-butiran">
                <tr><th>Nama</th><td><strong>{{ $kehadiran->permohonan->nama_ic ?? '-' }}</strong></td></tr>
                <tr><th>No. KP</th><td>{{ $kehadiran->permohonan->no_kp ?? $kehadiran->no_kp }}</td></tr>
                <tr><th>Pusat Mengundi</th><td>{{ $penempatan['pusat_mengundi'] ?? '-' }}</td></tr>
                <tr><th>Saluran</th><td>{{ $penempatan['saluran'] ?? '-' }}</td></tr>
                <tr><th>Jawatan</th><td>{{ $penempatan['jawatan'] ?? '-' }}</td></tr>
                <tr><th>Masa Daftar</th><td>{{ $kehadiran->hadir_at->format('d/m/Y h:i A') }}</td></tr>
                <tr>
                    <th>Status Borang</th>
                    <td>
                        @if ($kehadiran->borang_diambil)
                            <span class="lencana lencana-hijau">Telah diambil</span>
                            <div class="teks-kecil">{{ $kehadiran->borang_diambil_at?->format('d/m/Y h:i A') }}</div>
                        @else
                            <span class="lencana lencana-merah">Belum diambil</span>
                        @endif
                    </td>
                </tr>
            </table>

            @if (! $kehadiran->borang_diambil)
                <form method="POST" action="{{ route('kaunter.serah', [$sesi, $kehadiran]) }}">
                    @csrf
                    <button type="submit" class="btn btn-hijau btn-penuh">
                        Sahkan Serahan Borang kepada Petugas
                    </button>
                </form>
            @else
                <div class="makluman makluman-amaran mb-0">
                    Borang telah pun diserahkan kepada petugas ini.
                </div>
            @endif
        </div>
    @endif
@endsection