@extends('layouts.app')

@section('tajuk', 'Senarai Kehadiran: ' . $sesi->nama)

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

    <div class="stat-grid">
        <div class="stat">
            <div class="nilai">{{ $hadir->count() + $tidakHadir->count() }}</div>
            <div class="label">Jumlah Petugas</div>
        </div>
        <div class="stat">
            <div class="nilai" style="color:var(--hijau)">{{ $hadir->count() }}</div>
            <div class="label">Hadir</div>
        </div>
        <div class="stat">
            <div class="nilai" style="color:var(--merah)">{{ $tidakHadir->count() }}</div>
            <div class="label">Tidak / Belum Hadir</div>
        </div>
    </div>

    {{-- ===================== HADIR ===================== --}}
    <div class="kad jadual-kad" data-alat data-per-page="10" style="padding:0;">
        <div class="jadual-kepala">
            <h2 class="tajuk-jadual hijau">HADIR ({{ $hadir->count() }})</h2>
            <input type="text" class="cari-input tiada-cetak" data-cari
                   placeholder="Cari nama, telefon, pusat mengundi…" aria-label="Cari senarai hadir">
        </div>
        <div class="jadual-bekas">
            <table class="jadual jadual-responsif">
                <thead>
                    <tr>
                        <th>Siri</th>
                        <th>Nama</th>
                        <th>No. Telefon</th>
                        <th>Emel</th>
                        <th>Pusat Mengundi</th>
                        <th>Saluran</th>
                        <th>Jawatan</th>
                        <th>Borang</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($hadir as $p)
                        @php
                            $penempatan = $p->butiranPenempatan();
                            $rekod = $kehadiran->get($p->id);
                        @endphp
                        <tr class="baris-data">
                            <td data-label="Siri"><strong>{{ $rekod?->nombor_siri_papar }}</strong></td>
                            <td data-label="Nama">{{ $p->nama_ic }}</td>
                            <td data-label="No. Telefon">{{ $p->no_telefon ?? '-' }}</td>
                            <td data-label="Emel">{{ $p->emel ?? '-' }}</td>
                            <td data-label="Pusat Mengundi">{{ $penempatan['pusat_mengundi'] }}</td>
                            <td data-label="Saluran">{{ $penempatan['saluran'] }}</td>
                            <td data-label="Jawatan">{{ $penempatan['jawatan'] }}</td>
                            <td data-label="Borang">
                                @if ($rekod?->borang_diambil)
                                    <span class="lencana lencana-hijau">Diambil</span>
                                @else
                                    <span class="lencana lencana-kelabu">Belum</span>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr class="baris-tiada"><td colspan="8" class="teks-tengah">Tiada petugas hadir lagi.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="jadual-kaki tiada-cetak">
            <span class="teks-kecil" data-info></span>
            <div class="paging" data-pager></div>
        </div>
    </div>

    {{-- ================ TIDAK / BELUM HADIR ================ --}}
    <div class="kad jadual-kad" data-alat data-per-page="10" style="padding:0;">
        <div class="jadual-kepala">
            <h2 class="tajuk-jadual merah">TIDAK / BELUM HADIR ({{ $tidakHadir->count() }})</h2>
            <input type="text" class="cari-input tiada-cetak" data-cari
                   placeholder="Cari nama, telefon, pusat mengundi…" aria-label="Cari senarai tidak hadir">
        </div>
        <div class="jadual-bekas">
            <table class="jadual jadual-responsif">
                <thead>
                    <tr>
                        <th>Nama</th>
                        <th>No. Telefon</th>
                        <th>Emel</th>
                        <th>Pusat Mengundi</th>
                        <th>Saluran</th>
                        <th>Jawatan</th>
                        <th>Hubungi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($tidakHadir as $p)
                        @php
                            $penempatan = $p->butiranPenempatan();
                            $telefon = preg_replace('/[^0-9]/', '', $p->no_telefon ?? '');
                            $waNombor = $telefon !== '' ? (str_starts_with($telefon, '60') ? $telefon : '6' . $telefon) : '';
                        @endphp
                        <tr class="baris-data">
                            <td data-label="Nama">{{ $p->nama_ic }}</td>
                            <td data-label="No. Telefon">{{ $p->no_telefon ?? '-' }}</td>
                            <td data-label="Emel">{{ $p->emel ?? '-' }}</td>
                            <td data-label="Pusat Mengundi">{{ $penempatan['pusat_mengundi'] }}</td>
                            <td data-label="Saluran">{{ $penempatan['saluran'] }}</td>
                            <td data-label="Jawatan">{{ $penempatan['jawatan'] }}</td>
                            <td data-label="Hubungi">
                                @if ($telefon !== '')
                                    <div class="baris-tindakan">
                                        <a class="btn btn-kecil btn-hijau" target="_blank" rel="noopener"
                                           href="https://wa.me/{{ $waNombor }}?text={{ urlencode('Salam, ini peringatan taklimat petugas SPR bagi ' . ($sesi->dun->nama ?? '') . ' pada ' . $sesi->tarikh->format('d/m/Y') . ' di ' . $sesi->lokasi . '. Mohon hadir, terima kasih.') }}">
                                            WhatsApp
                                        </a>
                                        <a class="btn btn-kecil" href="tel:{{ $telefon }}">Call</a>
                                    </div>
                                @else
                                    <span class="teks-kecil">Tiada no. telefon</span>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr class="baris-tiada"><td colspan="7" class="teks-tengah">Semua petugas telah hadir.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="jadual-kaki tiada-cetak">
            <span class="teks-kecil" data-info></span>
            <div class="paging" data-pager></div>
        </div>
    </div>

    <div class="baris-tindakan tiada-cetak">
        <a href="{{ route('sesi.show', $sesi) }}" class="btn btn-luar">Kembali ke Sesi</a>
        <button onclick="window.print()" class="btn">Cetak Senarai</button>
    </div>

    <script>
        (function () {
            function init(root) {
                var perPage = parseInt(root.getAttribute('data-per-page') || '10', 10);
                var search  = root.querySelector('[data-cari]');
                var tbody   = root.querySelector('tbody');
                var pager   = root.querySelector('[data-pager]');
                var info    = root.querySelector('[data-info]');
                var rows    = Array.prototype.slice.call(tbody.querySelectorAll('tr.baris-data'));
                var page    = 1;
                var filtered = rows;

                if (!rows.length) {
                    if (info) info.textContent = '0 rekod';
                    return;
                }

                var colCount = rows[0].children.length;

                // Baris "tiada padanan" untuk hasil carian kosong.
                var kosong = document.createElement('tr');
                kosong.className = 'baris-tiada tiada-cetak';
                kosong.style.display = 'none';
                var kosongTd = document.createElement('td');
                kosongTd.colSpan = colCount;
                kosongTd.className = 'teks-tengah';
                kosongTd.textContent = 'Tiada padanan carian.';
                kosong.appendChild(kosongTd);
                tbody.appendChild(kosong);

                function tapis() {
                    var q = (search ? search.value : '').trim().toLowerCase();
                    filtered = q === '' ? rows : rows.filter(function (r) {
                        return r.textContent.toLowerCase().indexOf(q) !== -1;
                    });
                    page = 1;
                    render();
                }

                function render() {
                    var total = filtered.length;
                    var jumlahPage = Math.max(1, Math.ceil(total / perPage));
                    if (page > jumlahPage) page = jumlahPage;
                    var mula = (page - 1) * perPage;
                    var habis = mula + perPage;

                    rows.forEach(function (r) { r.style.display = 'none'; });
                    filtered.slice(mula, habis).forEach(function (r) { r.style.display = ''; });
                    kosong.style.display = total === 0 ? '' : 'none';

                    if (info) {
                        info.textContent = total === 0
                            ? 'Tiada padanan'
                            : 'Menunjukkan ' + (mula + 1) + '–' + Math.min(habis, total) + ' daripada ' + total;
                    }

                    renderPager(jumlahPage);
                }

                function btn(label, target, opts) {
                    opts = opts || {};
                    var b = document.createElement('button');
                    b.type = 'button';
                    b.className = 'paging-btn' + (opts.aktif ? ' aktif' : '');
                    b.textContent = label;
                    if (opts.disabled) {
                        b.disabled = true;
                    } else {
                        b.addEventListener('click', function () { page = target; render(); });
                    }
                    pager.appendChild(b);
                }

                function renderPager(jumlahPage) {
                    if (!pager) return;
                    pager.innerHTML = '';
                    if (jumlahPage <= 1) return;

                    btn('‹', page - 1, { disabled: page === 1 });
                    var start = Math.max(1, page - 2);
                    var end = Math.min(jumlahPage, start + 4);
                    start = Math.max(1, end - 4);
                    for (var i = start; i <= end; i++) {
                        btn(String(i), i, { aktif: i === page });
                    }
                    btn('›', page + 1, { disabled: page === jumlahPage });
                }

                if (search) search.addEventListener('input', tapis);
                render();
            }

            document.querySelectorAll('[data-alat]').forEach(init);
        })();
    </script>
@endsection