@extends('layout.layout')

@section('content')
    @include('components.alert')

    @php
        $totalAbsentTeachers = $absentTeachers->count();
        $totalAbsenceCases = $absentTeachers->sum('total_absences');
        $averagePerTeacher = $totalAbsentTeachers > 0 ? number_format($absentTeachers->avg('total_absences'), 2) : 0;
    @endphp

    <div class="container-fluid app-bg">
        <div class="page-shell">
            <div class="d-flex flex-column gap-4">
                <x-page-title
                    title="Teacher Absence Reports"
                    description="Track absent teachers for a selected day, review how many sessions were missed, and drill into the handling details."
                />

                <div class="ui-card">
                    <div class="ui-card__header">
                        <div>
                            <h6 class="mb-0 ui-title">Filter By Date</h6>
                            <p class="mb-0 ui-muted">Pick a day to inspect teacher absences and the sessions affected on that date.</p>
                        </div>
                    </div>

                    <div class="p-3">
                        <form action="{{ route('teacher-absence-reports.index') }}" method="GET" class="row g-3 align-items-end">
                            <div class="col-md-4 col-xl-3">
                                <label for="date" class="form-label">Absence Date</label>
                                <input
                                    type="date"
                                    class="form-control form-control-sm"
                                    id="date"
                                    name="date"
                                    value="{{ $absenceDate ?? request('date') }}"
                                >
                            </div>

                            <div class="col-12 d-flex justify-content-end gap-2 flex-wrap">
                                <button type="submit" class="asset-btn asset-btn--primary">Apply Filter</button>
                                <a href="{{ route('teacher-absence-reports.index') }}" class="asset-btn asset-btn--secondary">Reset</a>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="teacher-absence-stats">
                    <div class="teacher-absence-stat teacher-absence-stat--primary">
                        <span class="teacher-absence-stat__label">Total Absent Teachers</span>
                        <strong class="teacher-absence-stat__value">{{ $totalAbsentTeachers }}</strong>
                    </div>

                    <div class="teacher-absence-stat teacher-absence-stat--warn">
                        <span class="teacher-absence-stat__label">Total Absence Cases</span>
                        <strong class="teacher-absence-stat__value">{{ $totalAbsenceCases }}</strong>
                    </div>

                    <div class="teacher-absence-stat teacher-absence-stat--info">
                        <span class="teacher-absence-stat__label">Average Per Teacher</span>
                        <strong class="teacher-absence-stat__value">{{ $averagePerTeacher }}</strong>
                    </div>
                </div>

                <div class="ui-card ui-card--table">
                    <div class="ui-card__header">
                        <div class="d-flex align-items-center gap-3 flex-wrap">
                            <div style="margin-right: auto;">
                                <h6 class="mb-0 ui-title">Teacher Summary</h6>
                                <p class="mb-0 ui-muted">Results for {{ \Carbon\Carbon::parse($absenceDate)->format('Y-m-d') }}.</p>
                            </div>

                            <span class="ui-pill ui-pill--neutral">Total Teachers: {{ $totalAbsentTeachers }}</span>
                        </div>
                    </div>

                    <x-table
                        :headers="['#', 'Teacher Name', 'Email', 'Total Absences', 'Actions']"
                        :paginator="$absentTeachers"
                        emptyMessage="No absence records found."
                    >
                        @foreach ($absentTeachers as $index => $teacherData)
                            @php
                                $teacher = $teacherData['teacher'];
                                $teacherName = $teacher ? trim(($teacher->first_name ?? '') . ' ' . ($teacher->last_name ?? '')) : 'N/A';
                            @endphp

                            <tr>
                                <td class="ui-id text-center">{{ $index + 1 }}</td>
                                <td class="text-center ui-title">{{ $teacherName }}</td>
                                <td class="text-center ui-muted">{{ $teacher->email ?? 'N/A' }}</td>
                                <td class="text-center">
                                    <span class="ui-pill ui-pill--warn">{{ $teacherData['total_absences'] }} times</span>
                                </td>
                                <td class="text-center">
                                    <div class="ui-actions justify-content-center">
                                        @if ($teacher)
                                            <x-table-action
                                                type="view"
                                                :url="route('teacher-absence-reports.show', $teacher->id)"
                                                title="View Details"
                                            />
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </x-table>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .teacher-absence-stats {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 1rem;
        }

        .teacher-absence-stat {
            padding: 1.15rem 1.25rem;
            border-radius: 20px;
            border: 1px solid #e2e8f0;
            background: #fff;
            box-shadow: 0 12px 24px rgba(15, 23, 42, 0.04);
        }

        .teacher-absence-stat__label {
            display: block;
            margin-bottom: 0.45rem;
            color: #64748b;
            font-size: 0.84rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }

        .teacher-absence-stat__value {
            color: #0f172a;
            font-size: 1.9rem;
            line-height: 1.2;
        }

        .teacher-absence-stat--primary {
            background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%);
        }

        .teacher-absence-stat--warn {
            background: linear-gradient(180deg, #ffffff 0%, #bbbbb92f 100%);
        }

        .teacher-absence-stat--info {
            background: linear-gradient(180deg, #ffffff 0%, #f0f9ff 100%);
        }

        @media (max-width: 900px) {
            .teacher-absence-stats {
                grid-template-columns: 1fr;
            }
        }
    </style>
@endpush