@extends('layouts.app')

@section('tajuk', 'Daftar Kehadiran Taklimat')
@section('saiz-container', 'container-kecil')

@section('kandungan')
    <div class="kad">
        <h1>Daftar Kehadiran Taklimat</h1>

        <table class="slip-butiran">
            <tr><th>DUN</th><td>{{ $sesi->dun->code ?? '' }} — {{ $sesi->dun->nama ?? '-' }}</td></tr>
            <tr><th>Sesi</th><td>{{ $sesi->nama }}</td></tr>
            <tr><th>Tarikh</th><td>{{ $sesi->tarikh->format('d/m/Y') }}</td></tr>
            @if ($sesi->masa)
                <tr><th>Masa</th><td>{{ $sesi->masa }}</td></tr>
            @endif
            <tr><th>Lokasi</th><td>{{ $sesi->lokasi }}</td></tr>
        </table>

        <div class="makluman makluman-info">
            Sila tunjuk kad pengenalan di kaunter jika diminta untuk pengesahan identiti.
        </div>

        @if ($errors->has('no_kp'))
            <div class="makluman makluman-ralat">{{ $errors->first('no_kp') }}</div>
        @endif

        <form method="POST" action="{{ route('checkin.submit', $sesi->qr_token) }}">
            @csrf
            <label for="no_kp">No. Kad Pengenalan</label>
            <input type="text" id="no_kp" name="no_kp" value="{{ old('no_kp') }}"
                   inputmode="numeric" placeholder="cth: 890529015104" required autofocus>

            <button type="submit" class="btn btn-penuh">Daftar Kehadiran</button>
        </form>
    </div>
@endsection