@extends('layouts.app')

@section('title', 'Detail Kehadiran')

@section('content')
    <div class="page-heading">
        <div class="eyebrow">Admin</div>
        <div class="d-flex justify-content-between flex-column flex-lg-row gap-3">
            <div>
                <h1 class="h3 mb-1">Detail Kehadiran</h1>
                <p class="text-secondary mb-0">{{ $pusat->code }} - {{ $pusat->name }}</p>
            </div>
            <div class="d-flex gap-2">
                <a class="btn btn-outline-secondary" href="{{ route('admin.attendance.index') }}">Kembali</a>
                <a class="btn btn-primary" href="{{ route('admin.attendance.export', $pusat) }}"><i class="bi bi-download me-1"></i>Export</a>
            </div>
        </div>
    </div>

    <div class="row g-3 mb-4">
        @foreach ([
            ['label' => 'Staf', 'value' => $summary['total_staff'], 'tone' => 'primary'],
            ['label' => 'Hadir', 'value' => $summary['present'], 'tone' => 'success'],
            ['label' => 'Tidak hadir', 'value' => $summary['absent'], 'tone' => 'danger'],
            ['label' => 'Belum rekod', 'value' => $summary['not_recorded'], 'tone' => 'warning'],
        ] as $card)
            <div class="col-6 col-xl-3">
                <div class="stat-card h-100">
                    <div class="text-secondary small">{{ $card['label'] }}</div>
                    <div class="fs-3 fw-bold mt-2 text-{{ $card['tone'] }}">{{ $card['value'] }}</div>
                </div>
            </div>
        @endforeach
    </div>

    <div class="content-panel p-3 p-md-4 mb-4">
        <h2 class="h5 mb-3">Ringkasan Mengikut Jawatan</h2>
        <div class="row g-2">
            @foreach ($roleSummaries as $roleSummary)
                <div class="col-12 col-md-6 col-xl-3">
                    <div class="border rounded p-3 h-100">
                        <div class="fw-semibold">{{ $roleSummary['role'] }}</div>
                        <div class="small text-secondary">Staf {{ $roleSummary['total_staff'] }} · Hadir {{ $roleSummary['present'] }} · Tidak hadir {{ $roleSummary['absent'] }} · Belum {{ $roleSummary['not_recorded'] }}</div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    <div class="content-panel p-0 overflow-hidden">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead>
                    <tr>
                        <th>Staf</th>
                        <th>Jawatan</th>
                        <th>Saluran</th>
                        <th>Status</th>
                        <th>Masa Check-in</th>
                        <th>Catatan</th>
                        <th>Direkod Oleh</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($assignments as $assignment)
                        @php($attendance = $assignment->attendance)
                        <tr>
                            <td>
                                <div class="fw-semibold">{{ $assignment->application?->name ?: $assignment->user?->name ?: 'Tanpa nama' }}</div>
                                <div class="small text-secondary">{{ $assignment->application?->ic_number ?: $assignment->user?->email ?: '-' }}</div>
                            </td>
                            <td>{{ $assignment->position?->code }}</td>
                            <td>{{ $assignment->saluranMengundi?->number ?: '-' }}</td>
                            <td><span class="badge text-bg-secondary">{{ str_replace('_', ' ', $attendance?->status ?? 'not_recorded') }}</span></td>
                            <td>{{ $attendance?->check_in_time?->format('d/m/Y H:i') ?: '-' }}</td>
                            <td>{{ $attendance?->note ?: '-' }}</td>
                            <td>{{ $attendance?->recordedBy?->name ?: '-' }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="7" class="text-center text-secondary py-4">Tiada staf aktif.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
@endsection