@extends('layouts.app')
@section('title', 'Attendance Summary')
@section('content')
@php
    // Column totals across all sites.
    $colTotals = array_fill_keys($codes, 0);
    $grandStaff = 0; $grandTotal = 0;
@endphp
<div class="card">
    <div class="card-header pb-0">
        <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
            <div>
                <h6 class="mb-0">Attendance Summary by Site</h6>
                <span class="text-xs text-muted">{{ \Carbon\Carbon::create($year, $month, 1)->format('F Y') }}</span>
            </div>
            <div class="d-flex align-items-center gap-2">
                <a href="{{ route('attendance.index', ['month'=>$month,'year'=>$year]) }}" class="btn btn-sm btn-outline-primary mb-0">
                    <i class="bi bi-grid-3x3-gap me-1"></i>Mark Attendance
                </a>
                <form method="GET" class="d-flex gap-2">
                    <select name="month" class="form-select form-select-sm" onchange="this.form.submit()">
                        @for($m=1;$m<=12;$m++)<option value="{{ $m }}" @selected($month==$m)>{{ \Carbon\Carbon::create()->month($m)->format('F') }}</option>@endfor
                    </select>
                    <input type="number" name="year" value="{{ $year }}" class="form-control form-control-sm" style="width:90px" onchange="this.form.submit()">
                </form>
            </div>
        </div>
        <div class="d-flex flex-wrap gap-2 mt-2 mb-1">
            <span class="text-xs text-muted">Codes:</span>
            @foreach(\App\Models\Attendance::CODES as $code=>$label)
                <span class="att-legend att-{{ $code }} text-xs px-2 py-1 rounded">{{ $code }} = {{ $label }}</span>
            @endforeach
        </div>
    </div>

    <div class="card-body">
        <div class="table-responsive">
            <table class="table align-items-center mb-0">
                <thead>
                    <tr class="text-xxs text-uppercase text-secondary">
                        <th class="ps-3">Site / Project</th>
                        <th class="text-center">Staff</th>
                        <th class="text-center">Marked</th>
                        <th class="text-center">Days</th>
                        <th class="text-center">Coverage</th>
                        @foreach($codes as $code)<th class="text-center">{{ $code }}</th>@endforeach
                        <th class="text-center">Records</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                @forelse($sites as $site)
                    @php
                        $staff = (int) ($staffCounts[$site->id] ?? 0);
                        $row = $matrix[$site->id] ?? [];
                        $rowTotal = array_sum($row);
                        $cov = $coverage[$site->id] ?? null;
                        $marked = (int) ($cov->staff_marked ?? 0);
                        $days = (int) ($cov->days_recorded ?? 0);
                        $pct = $staff > 0 ? (int) round($marked / $staff * 100) : 0;
                        $grandStaff += $staff; $grandTotal += $rowTotal;
                    @endphp
                    <tr>
                        <td class="ps-3">
                            <a href="{{ route('attendance.index', ['site_id'=>$site->id,'month'=>$month,'year'=>$year]) }}"
                               class="text-sm font-weight-bold">{{ $site->name }}</a>
                        </td>
                        <td class="text-center text-sm">{{ $staff }}</td>
                        <td class="text-center text-sm">{{ $marked ?: '–' }}</td>
                        <td class="text-center text-sm">{{ $days ?: '–' }}</td>
                        <td class="text-center" style="min-width:90px">
                            <div class="progress" style="height:6px">
                                <div class="progress-bar {{ $pct >= 80 ? 'bg-success' : ($pct > 0 ? 'bg-warning' : 'bg-light') }}" style="width:{{ $pct }}%"></div>
                            </div>
                            <span class="text-xxs text-muted">{{ $pct }}%</span>
                        </td>
                        @foreach($codes as $code)
                            @php $c = (int) ($row[$code] ?? 0); $colTotals[$code] += $c; @endphp
                            <td class="text-center text-sm">
                                @if($c > 0)<span class="att-{{ $code }} px-2 py-1 rounded">{{ $c }}</span>@else<span class="text-muted">–</span>@endif
                            </td>
                        @endforeach
                        <td class="text-center text-sm font-weight-bold">{{ $rowTotal ?: '–' }}</td>
                        <td class="text-end pe-3">
                            <a href="{{ route('attendance.index', ['site_id'=>$site->id,'month'=>$month,'year'=>$year]) }}"
                               class="btn btn-sm btn-outline-primary mb-0 py-1">Add</a>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="{{ count($codes) + 7 }}" class="text-center text-muted py-4">No sites with staff or attendance for this month.</td></tr>
                @endforelse
                </tbody>
                @if($sites->isNotEmpty())
                <tfoot>
                    <tr class="border-top">
                        <th class="ps-3 text-sm">Total</th>
                        <th class="text-center text-sm">{{ $grandStaff }}</th>
                        <th colspan="3"></th>
                        @foreach($codes as $code)<th class="text-center text-sm">{{ $colTotals[$code] ?: '–' }}</th>@endforeach
                        <th class="text-center text-sm">{{ $grandTotal ?: '–' }}</th>
                        <th></th>
                    </tr>
                </tfoot>
                @endif
            </table>
        </div>
    </div>
</div>

<style>
    .att-legend { border:1px solid rgba(0,0,0,.06); }
    .att-P  { background:#c6f6d5; color:#22543d; } .att-A  { background:#fed7d7; color:#822727; }
    .att-R  { background:#e2e8f0; color:#4a5568; } .att-MC { background:#feebc8; color:#7b341e; }
    .att-AL { background:#bee3f8; color:#2a4365; } .att-UL { background:#cbd5e0; color:#1a202c; }
    .att-PH { background:#e9d8fd; color:#44337a; } .att-HD { background:#b2f5ea; color:#234e52; }
</style>
@endsection