@extends('layouts.app')

@section('title', 'Attendance')

@section('crumbs')
    <a href="{{ route('dashboard') }}">Dashboard</a><span class="sep">/</span><span>Attendance</span>
@endsection

@section('content')
    @php
        $statuses = ['present' => 'Present', 'absent' => 'Absent', 'late' => 'Late', 'excused' => 'Excused'];
        $badgeColors = ['present' => 'green', 'absent' => 'red', 'late' => 'amber', 'excused' => 'blue'];
    @endphp

    <div class="page-header">
        <div>
            <h1>Daily attendance</h1>
            <p class="page-header__subtitle">
                {{ $class?->name ?? 'No class selected' }}
                &middot; {{ \Illuminate\Support\Carbon::parse($date)->format('l, d M Y') }}
                &middot; {{ $enrollments->count() }} student(s) on the roll
            </p>
        </div>
        <div style="display:flex;gap:.5rem;flex-wrap:wrap;">
            <a href="{{ route('attendance.report') }}" class="btn btn--secondary">Attendance report</a>
            <a href="{{ route('attendance.index') }}" class="btn">Take attendance</a>
        </div>
    </div>

    @if ($classes->isEmpty())
        <div class="alert alert--warning">
            No classes are available for your account, so there is nothing to take attendance for.
        </div>
    @endif

    <div class="card">
        <div class="card__header">
            <form method="GET" action="{{ route('attendance.index') }}" class="filters">
                @unless ($isFamily)
                    <div class="form-group">
                        <label for="class_id">Class</label>
                        <select id="class_id" name="class_id">
                            @foreach ($classes as $option)
                                <option value="{{ $option->id }}" @selected($classId === $option->id)>
                                    {{ $option->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="section_id">Section</label>
                        <select id="section_id" name="section_id">
                            <option value="">All sections</option>
                            @foreach ($sections as $section)
                                <option value="{{ $section['id'] }}" @selected($sectionId === $section['id'])>
                                    {{ $section['label'] }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                @endunless

                <div class="form-group">
                    <label for="date">Date</label>
                    <input type="date" id="date" name="date" value="{{ $date }}"
                           max="{{ today()->toDateString() }}">
                </div>

                <button type="submit" class="btn btn--secondary">Filter</button>
                <a href="{{ route('attendance.index') }}" class="btn btn--ghost">Reset</a>
            </form>
        </div>

        @perm('attendance.manage')
            <form method="POST" action="{{ route('attendance.store') }}">
                @csrf
                <input type="hidden" name="class_id" value="{{ $classId }}">
                <input type="hidden" name="section_id" value="{{ $sectionId }}">
                <input type="hidden" name="academic_year_id" value="{{ $year?->id }}">
                <input type="hidden" name="date" value="{{ $date }}">
        @endperm

        <div class="card__body" style="border-bottom:1px solid var(--border);">
            <div class="flex-between">
                <div style="display:flex;gap:.5rem;flex-wrap:wrap;">
                    <span class="badge badge--green">Present {{ $summary['present'] }}</span>
                    <span class="badge badge--red">Absent {{ $summary['absent'] }}</span>
                    <span class="badge badge--amber">Late {{ $summary['late'] }}</span>
                    <span class="badge badge--blue">Excused {{ $summary['excused'] }}</span>
                </div>
                <div style="display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;">
                    <span class="text-muted">
                        {{ array_sum($summary) }} of {{ $enrollments->count() }} marked
                        &middot; {{ $summary['present'] + $summary['late'] + $summary['excused'] }} accounted for
                    </span>
                    @perm('attendance.manage')
                        <button type="button" class="btn btn--ghost btn--sm" id="mark-all-present">
                            Mark all present
                        </button>
                    @endperm
                </div>
            </div>
        </div>

        <div class="card__body card__body--flush">
            <div class="table-wrap">
                <table class="table">
                    <thead>
                    <tr>
                        <th>Adm. No</th>
                        <th>Student</th>
                        <th>Roll call</th>
                        <th>Remarks</th>
                    </tr>
                    </thead>
                    <tbody>
                    @forelse ($enrollments as $enrollment)
                        @php($student = $enrollment->student)
                        @continue(!$student)
                        @php($record = $records->get($student->id))
                        <tr>
                            <td class="mono">{{ $student->admission_no }}</td>
                            <td>
                                <strong>{{ $student->full_name }}</strong>
                                @if ($isFamily && $enrollment->schoolClass)
                                    <div class="form-hint">{{ $enrollment->schoolClass->name }}</div>
                                @elseif ($enrollment->section)
                                    <div class="form-hint">Section {{ $enrollment->section->name }}</div>
                                @endif
                            </td>
                            <td>
                                @perm('attendance.manage')
                                    <div class="att-options">
                                        @foreach ($statuses as $value => $label)
                                            <label class="att-option">
                                                <input type="radio"
                                                       name="status[{{ $student->id }}]"
                                                       value="{{ $value }}"
                                                       @checked(old('status.' . $student->id, $record?->status) === $value)>
                                                <span>{{ $label }}</span>
                                            </label>
                                        @endforeach
                                    </div>
                                @else
                                    <span class="badge badge--{{ $record ? ($badgeColors[$record->status] ?? 'gray') : 'gray' }}">
                                        {{ $record ? ucfirst($record->status) : 'Not recorded' }}
                                    </span>
                                @endif
                            </td>
                            <td>
                                @perm('attendance.manage')
                                    <input type="text"
                                           name="remarks[{{ $student->id }}]"
                                           maxlength="255"
                                           placeholder="Optional note"
                                           value="{{ old('remarks.' . $student->id, $record?->remarks) }}">
                                @else
                                    <span class="text-muted">{{ $record?->remarks ?: '—' }}</span>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4" class="table-empty">
                                @if ($enrollments->isEmpty() && $classes->isEmpty())
                                    No classes are available for your account.
                                @elseif ($isFamily)
                                    No students are linked to your account.
                                @else
                                    No active students are enrolled in this class yet.
                                @endif
                            </td>
                        </tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        @perm('attendance.manage')
            <div class="card__body" style="border-top:1px solid var(--border);">
                <div class="flex-between">
                    <span class="form-hint">
                        Students without a selected status are left unrecorded for this date.
                    </span>
                    <button type="submit" class="btn btn--success">Save attendance</button>
                </div>
            </div>
            </form>
        @endperm
    </div>
@endsection

@push('head')
    <style>
        .att-options { display: flex; gap: .75rem; flex-wrap: wrap; }
        .att-option {
            display: inline-flex;
            align-items: center;
            gap: .3rem;
            font-size: .84rem;
            font-weight: 500;
            color: var(--text);
            cursor: pointer;
            white-space: nowrap;
        }
        .att-option input[type=radio] { accent-color: var(--primary); margin: 0; }
    </style>
@endpush

@push('scripts')
    <script>
        document.getElementById('mark-all-present')?.addEventListener('click', function () {
            document.querySelectorAll('input[type=radio][name^="status["][value="present"]')
                .forEach(function (radio) {
                    radio.checked = true;
                });
        });
    </script>
@endpush