@extends('layouts.public')

@section('title', 'Permohonan Petugas')

@section('content')
    <div class="page-heading">
        <div class="eyebrow">Pendaftaran Awam</div>
        <h1 class="h3 mb-1">Permohonan Petugas Pilihanraya</h1>
        <p class="text-secondary mb-0">{{ $pusatMengundi->code }} - {{ $pusatMengundi->name }}</p>
    </div>

    <div class="row g-4">
        <div class="col-12 col-xl-4">
            <div class="content-panel p-3 p-md-4">
                <h2 class="h5 mb-3">Pusat Mengundi</h2>
                <dl class="mb-0">
                    <dt class="text-secondary small">Daerah</dt>
                    <dd class="mb-3">{{ $pusatMengundi->daerahMengundi?->name ?? '-' }}</dd>
                    <dt class="text-secondary small">Alamat</dt>
                    <dd class="mb-0">{{ $pusatMengundi->address ?: '-' }}</dd>
                </dl>
            </div>
        </div>

        <div class="col-12 col-xl-8">
            <div class="content-panel p-3 p-md-4">
                <form method="POST" action="{{ route('public.applications.store', $pusatMengundi->public_uuid) }}" enctype="multipart/form-data">
                    @csrf

                    <div class="row g-3">
                        <div class="col-12">
                            <h2 class="h5 mb-0">Maklumat Pemohon</h2>
                        </div>

                        <div class="col-12 col-md-6">
                            <label class="form-label" for="name">Nama</label>
                            <input id="name" name="name" class="form-control" value="{{ old('name') }}" required>
                        </div>

                        <div class="col-12 col-md-6">
                            <label class="form-label" for="ic_number">No. Kad Pengenalan</label>
                            <input id="ic_number" name="ic_number" class="form-control" inputmode="numeric" value="{{ old('ic_number') }}" required>
                        </div>

                        <div class="col-12 col-md-6">
                            <label class="form-label" for="phone_number">No. Telefon</label>
                            <input id="phone_number" name="phone_number" class="form-control" value="{{ old('phone_number') }}" required>
                        </div>

                        <div class="col-12 col-md-6">
                            <label class="form-label" for="email">Emel</label>
                            <input id="email" name="email" type="email" class="form-control" value="{{ old('email') }}">
                        </div>

                        <div class="col-12">
                            <label class="form-label" for="address">Alamat</label>
                            <textarea id="address" name="address" class="form-control" rows="3" required>{{ old('address') }}</textarea>
                        </div>

                        <div class="col-12">
                            <hr>
                            <h2 class="h5 mb-0">Jawatan dan Bank</h2>
                        </div>

                        <div class="col-12 col-md-6">
                            <label class="form-label" for="requested_position_code">Jawatan Dipohon</label>
                            <select id="requested_position_code" name="requested_position_code" class="form-select" required>
                                <option value="">Pilih jawatan</option>
                                @foreach ($roles as $role)
                                    <option value="{{ $role->code }}" @selected(old('requested_position_code') === $role->code)>
                                        {{ $role->code }} - {{ $role->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-12 col-md-6 d-none" id="ktm-section">
                            <label class="form-label" for="selected_ktm_assignment_id">KTM</label>
                            <select id="selected_ktm_assignment_id" name="selected_ktm_assignment_id" class="form-select" data-old-value="{{ old('selected_ktm_assignment_id') }}">
                                <option value="">Pilih KTM</option>
                            </select>
                            <div class="form-text">KTM hanya dipaparkan jika kekosongan masih ada.</div>
                        </div>

                        <div class="col-12 col-md-6">
                            <label class="form-label" for="bank_name">Nama Bank</label>
                            <input id="bank_name" name="bank_name" class="form-control" value="{{ old('bank_name') }}" required>
                        </div>

                        <div class="col-12 col-md-6">
                            <label class="form-label" for="bank_account_number">No. Akaun Bank</label>
                            <input id="bank_account_number" name="bank_account_number" class="form-control" inputmode="numeric" value="{{ old('bank_account_number') }}" required>
                        </div>

                        <div class="col-12">
                            <hr>
                            <h2 class="h5 mb-0">Dokumen</h2>
                        </div>

                        <div class="col-12 col-md-6">
                            <label class="form-label" for="ic_document">Dokumen Kad Pengenalan</label>
                            <input id="ic_document" name="ic_document" type="file" class="form-control" accept=".pdf,.jpg,.jpeg,.png" required>
                        </div>

                        <div class="col-12 col-md-6">
                            <label class="form-label" for="bank_statement">Penyata Bank</label>
                            <input id="bank_statement" name="bank_statement" type="file" class="form-control" accept=".pdf,.jpg,.jpeg,.png" required>
                        </div>
                    </div>

                    <div class="d-flex justify-content-end mt-4">
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-send me-1"></i>Hantar Permohonan
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        const ktmOptionsByRole = @json($ktmOptionsByRole);
        const roleSelect = document.getElementById('requested_position_code');
        const ktmSection = document.getElementById('ktm-section');
        const ktmSelect = document.getElementById('selected_ktm_assignment_id');
        const oldKtmValue = ktmSelect.dataset.oldValue;

        function refreshKtmOptions() {
            const roleCode = roleSelect.value;
            const requiresKtm = ['KP', 'KPDP'].includes(roleCode);
            const options = ktmOptionsByRole[roleCode] || [];

            ktmSection.classList.toggle('d-none', !requiresKtm);
            ktmSelect.required = requiresKtm;
            ktmSelect.disabled = !requiresKtm;
            ktmSelect.innerHTML = '';

            if (!requiresKtm) {
                ktmSelect.append(new Option('Pilih KTM', ''));
                return;
            }

            if (options.length === 0) {
                ktmSelect.append(new Option('Tiada KTM dengan kekosongan', ''));
                return;
            }

            ktmSelect.append(new Option('Pilih KTM', ''));

            options.forEach((item) => {
                const option = new Option(`${item.label} (${item.remaining} kosong)`, item.id);
                if (oldKtmValue && oldKtmValue === String(item.id)) {
                    option.selected = true;
                }
                ktmSelect.append(option);
            });
        }

        roleSelect.addEventListener('change', refreshKtmOptions);
        refreshKtmOptions();
    </script>
@endpush