@extends('layouts.app')
@section('title', 'Attendance')
@section('content')
@php $today = \Carbon\Carbon::today()->toDateString(); @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 class="d-flex align-items-center gap-2">
                <h6 class="mb-0">Monthly Attendance</h6>
                <a href="{{ route('attendance.summary', ['month'=>$month,'year'=>$year]) }}" class="btn btn-sm btn-outline-primary mb-0 py-1">
                    <i class="bi bi-bar-chart me-1"></i>Summary
                </a>
            </div>
            <form method="GET" class="row g-2 align-items-center">
                <div class="col-auto" style="min-width:230px">
                    <select name="site_id" class="form-select form-select-sm searchable" onchange="this.form.submit()">
                        @foreach($sites as $site)
                            <option value="{{ $site->id }}" @selected($siteId==$site->id)>{{ $site->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-auto">
                    <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>
                </div>
                <div class="col-auto">
                    <input type="number" name="year" value="{{ $year }}" class="form-control form-control-sm" style="width:90px" onchange="this.form.submit()">
                </div>
            </form>
        </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">
        @if($staff->isEmpty())
            <p class="text-muted text-center py-4">No staff assigned to this site.</p>
        @else
        <form method="POST" action="{{ route('attendance.store') }}">
            @csrf
            <input type="hidden" name="site_id" value="{{ $siteId }}">
            <input type="hidden" name="month" value="{{ $month }}">
            <input type="hidden" name="year" value="{{ $year }}">

            <div class="table-responsive" style="max-height:68vh; padding-bottom:18px">
                <table class="table table-bordered att-grid mb-0">
                    <thead>
                        <tr>
                            <th class="att-name-col bg-white">Staff</th>
                            @foreach($days as $d)
                                <th class="text-center {{ $d['weekend'] ? 'att-weekend' : '' }}">
                                    <div class="att-dow">{{ $d['dow'] }}</div>
                                    <div>{{ $d['day'] }}</div>
                                </th>
                            @endforeach
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($staff as $s)
                            <tr>
                                <td class="att-name-col">
                                    <a href="{{ route('staff.show', $s) }}" class="text-sm font-weight-bold">{{ \Illuminate\Support\Str::limit($s->name, 24) }}</a>
                                </td>
                                @foreach($days as $d)
                                    @php $val = $marks[$s->id][$d['date']] ?? ''; $future = $d['date'] > $today; @endphp
                                    <td class="p-0 text-center {{ $d['weekend'] ? 'att-weekend' : '' }} {{ $future ? 'att-future' : '' }}">
                                        <select name="att[{{ $s->id }}][{{ $d['date'] }}]"
                                                class="att-cell att-{{ $val }}" {{ $future ? 'disabled' : '' }}
                                                title="{{ $future ? 'Future date' : '' }}">
                                            <option value="">–</option>
                                            @foreach(\App\Models\Attendance::CODES as $code=>$label)
                                                <option value="{{ $code }}" @selected($val===$code)>{{ $code }}</option>
                                            @endforeach
                                        </select>
                                    </td>
                                @endforeach
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="text-end mt-3">
                <button class="btn btn-primary btn-sm"><i class="bi bi-save me-1"></i>Save Attendance</button>
            </div>
        </form>
        @endif
    </div>
</div>

<style>
    .att-grid th, .att-grid td { padding: 2px; vertical-align: middle; }
    .att-grid th { font-size: .65rem; font-weight: 600; white-space: nowrap; }
    .att-dow { color: #8392ab; font-weight: 500; }
    .att-weekend { background-color: #fff4f1 !important; }
    .att-grid td.att-name-col, .att-grid th.att-name-col {
        position: sticky; left: 0; z-index: 10; min-width: 170px;
        background-color: #ffffff !important; background-clip: padding-box;
        border-right: 1px solid #e9ecef; box-shadow: 3px 0 5px -2px rgba(0,0,0,.12);
    }
    .att-grid thead th.att-name-col { z-index: 11; }
    .att-cell { width: 50px; height: 30px; border: 0; font-size: .72rem; font-weight: 700; cursor: pointer;
                text-transform: uppercase; background-color: transparent; color: inherit; padding: 0 2px; text-align-last: center; }
    .att-cell:focus { outline: 2px solid var(--mi-coral); border-radius: 3px; }
    .att-future, .att-cell:disabled { background-color: #f1f3f5 !important; }
    .att-cell:disabled { color: #c4c9d0; cursor: not-allowed; }
    /* status colours */
    .att-P  { background:#c6f6d5 !important; color:#22543d; }
    .att-A  { background:#fed7d7 !important; color:#822727; }
    .att-R  { background:#e2e8f0 !important; color:#4a5568; }
    .att-MC { background:#feebc8 !important; color:#7b341e; }
    .att-AL { background:#bee3f8 !important; color:#2a4365; }
    .att-UL { background:#cbd5e0 !important; color:#1a202c; }
    .att-PH { background:#e9d8fd !important; color:#44337a; }
    .att-HD { background:#b2f5ea !important; color:#234e52; }
    .att-legend { border:1px solid rgba(0,0,0,.06); }
</style>

@push('scripts')
<script>
    const codes = @json(array_keys(\App\Models\Attendance::CODES));
    document.querySelectorAll('.att-cell').forEach(function(sel){
        sel.addEventListener('change', function(){
            codes.forEach(c => sel.classList.remove('att-'+c));
            if (sel.value) sel.classList.add('att-'+sel.value);
        });
    });
</script>
@endpush
@endsection