298 lines
14 KiB
PHP
298 lines
14 KiB
PHP
@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() + $hadirSesiLain->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(--kuning)">{{ $hadirSesiLain->count() }}</div>
|
||
<div class="label">Pernah Hadir (Sesi Lain)</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>
|
||
|
||
{{-- ============= PERNAH HADIR (SESI LAIN) ============= --}}
|
||
<div class="kad jadual-kad" data-alat data-per-page="10" style="padding:0;">
|
||
<div class="jadual-kepala">
|
||
<h2 class="tajuk-jadual kuning">PERNAH HADIR - SESI LAIN ({{ $hadirSesiLain->count() }})</h2>
|
||
<input type="text" class="cari-input tiada-cetak" data-cari
|
||
placeholder="Cari nama, telefon, pusat mengundi…" aria-label="Cari senarai pernah hadir sesi lain">
|
||
</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>Sesi Dihadiri</th>
|
||
<th>Tarikh Hadir</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
@forelse ($hadirSesiLain as $p)
|
||
@php
|
||
$penempatan = $p->butiranPenempatan();
|
||
$rekod = $kehadiranSesiLain->get($p->id);
|
||
@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="Sesi Dihadiri">{{ $rekod?->sesi?->nama }}</td>
|
||
<td data-label="Tarikh Hadir">{{ $rekod?->hadir_at?->format('d/m/Y') }}</td>
|
||
</tr>
|
||
@empty
|
||
<tr class="baris-tiada"><td colspan="8" class="teks-tengah">Tiada petugas dalam kumpulan ini.</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
|