@extends('layouts.app')

@section('title', 'Log Scan QR')
@section('page-title', 'Log Scan QR')
@section('breadcrumb', 'Beranda / Log Scan')

@push('styles')
<style>
.live-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #16a34a; display: inline-block;
    animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .5; transform: scale(1.3); }
}
</style>
@endpush

@section('content')

{{-- Stat Row --}}
<div style="display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin-bottom:22px;">
    <div class="stat-card">
        <div class="stat-icon" style="background:#d1fae5; color:#065f46;"><i class="fa-solid fa-calendar-check"></i></div>
        <div class="stat-info">
            <div class="label">Hadir Hari Ini</div>
            <div class="value">{{ $hadirHariIni }}</div>
        </div>
    </div>
    <div class="stat-card">
        <div class="stat-icon" style="background:#fee2e2; color:#991b1b;"><i class="fa-solid fa-calendar-xmark"></i></div>
        <div class="stat-info">
            <div class="label">Belum Hadir</div>
            <div class="value">{{ $totalAnak - $hadirHariIni }}</div>
        </div>
    </div>
    <div class="stat-card">
        <div class="stat-icon" style="background:#dbeafe; color:#1e40af;"><i class="fa-solid fa-database"></i></div>
        <div class="stat-info">
            <div class="label">Total Scan</div>
            <div class="value">{{ $totalScan }}</div>
        </div>
    </div>
</div>

{{-- Log Table --}}
<div class="card">
    <div class="card-header">
        <span class="live-dot"></span>
        <span class="card-title" style="margin-left:6px;">Log Scan QR Code</span>

        {{-- Filter form --}}
        <form method="GET" style="display:flex; gap:8px; margin-left:auto;">
            <input type="date" name="tanggal" class="form-control"
                value="{{ request('tanggal', today()->format('Y-m-d')) }}"
                style="width:160px; padding:7px 12px;">
            <button type="submit" class="btn btn-outline btn-sm">
                <i class="fa-solid fa-filter"></i>
            </button>
            <a href="{{ route('scan-log.index') }}" class="btn btn-outline btn-sm">Reset</a>
        </form>
    </div>

    <div class="table-wrap">
        <table>
            <thead>
                <tr>
                    <th style="width:50px;">No</th>
                    <th>Anak Yatim Piatu</th>
                    <th>Mushola</th>
                    <th>Waktu Scan</th>
                    <th>Keterangan</th>
                </tr>
            </thead>
            <tbody id="scan-log-body">
                @forelse($scanLogs as $i => $log)
                <tr>
                    <td style="color:#9db8ac;">{{ $scanLogs->firstItem() + $i }}</td>
                    <td>
                        <div style="font-weight:600;">{{ $log->anakYatim->nama }}</div>
                        <span class="badge badge-blue" style="font-size:10px;">{{ $log->anakYatim->kode }}</span>
                    </td>
                    <td style="font-size:13px;">{{ $log->anakYatim->mushola }}</td>
                    <td>
                        <div style="font-weight:600;">{{ $log->scanned_at->format('H:i:s') }}</div>
                        <div style="font-size:11px; color:#7aaa94;">{{ $log->scanned_at->format('d M Y') }}</div>
                    </td>
                    <td style="font-size:13px; color:#6b8f7e;">{{ $log->keterangan ?? '—' }}</td>
                </tr>
                @empty
                <tr>
                    <td colspan="5" style="text-align:center; padding:48px; color:#9db8ac;">
                        <i class="fa-solid fa-circle-xmark" style="font-size:32px; display:block; margin-bottom:8px;"></i>
                        Belum ada scan
                        @if(request('tanggal'))
                            pada tanggal <strong>{{ \Carbon\Carbon::parse(request('tanggal'))->format('d M Y') }}</strong>
                        @endif
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    @if($scanLogs->hasPages())
    <div style="padding:14px 22px; border-top:1px solid #e8f0ec;">
        {{ $scanLogs->withQueryString()->links('vendor.pagination.custom') }}
    </div>
    @endif
</div>

{{-- Belum hadir section --}}
@if($belumHadir->count() > 0 && !request('tanggal'))
<div class="card" style="margin-top:20px;">
    <div class="card-header">
        <i class="fa-solid fa-circle-exclamation" style="color:#f59e0b;"></i>
        <span class="card-title">Belum Hadir Hari Ini</span>
        <span class="badge badge-yellow">{{ $belumHadir->count() }} anak</span>
    </div>
    <div class="table-wrap">
        <table>
            <thead>
                <tr>
                    <th>Kode</th>
                    <th>Nama</th>
                    <th>Mushola</th>
                </tr>
            </thead>
            <tbody>
                @foreach($belumHadir as $anak)
                <tr>
                    <td><span class="badge badge-blue">{{ $anak->kode }}</span></td>
                    <td style="font-weight:500;">{{ $anak->nama }}</td>
                    <td style="font-size:13px; color:#6b8f7e;">{{ $anak->mushola }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endif

@endsection

@push('scripts')
<script>
@if(!request('tanggal') || request('tanggal') === today()->format('Y-m-d'))
    setTimeout(() => location.reload(), 30000);
@endif
</script>
@endpush