@extends('layout.layout')

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

    @php
        $teacherName = trim(($teacher->first_name ?? '') . ' ' . ($teacher->last_name ?? '')) ?: 'N/A';
        $pageDescription = $absenceDate
            ? 'Detailed absence records for ' . \Carbon\Carbon::parse($absenceDate)->format('Y-m-d') . '.'
            : 'Inspect each missed session for this teacher and review the handling schedules created afterward.';
    @endphp

    <div class="container-fluid app-bg">
        <div class="page-shell">
            <div class="d-flex flex-column gap-3">
                <x-page-title
                    title="Teacher Absence Details"
                    :description="$pageDescription"
                >
                    <a href="{{ route('teacher-absence-reports.index', request()->only(['date', 'search', 'per_page', 'page'])) }}" class="asset-btn asset-btn--secondary">
                        Back to List
                    </a>
                </x-page-title>

                <div class="ui-card">
                    <div class="ui-card__header">
                        <div>
                            <h6 class="mb-0 ui-title">Teacher Information</h6>
                            <p class="mb-0 ui-muted">Basic teacher details and the number of absence sessions recorded.</p>
                        </div>
                    </div>

                    <div class="p-3">
                        <div class="teacher-absence-summary">
                            <div class="teacher-absence-summary__item">
                                <span class="teacher-absence-summary__label">Name</span>
                                <strong class="teacher-absence-summary__value">{{ $teacherName }}</strong>
                            </div>

                            <div class="teacher-absence-summary__item">
                                <span class="teacher-absence-summary__label">Email</span>
                                <strong class="teacher-absence-summary__value">{{ $teacher->email ?? 'N/A' }}</strong>
                            </div>

                            <div class="teacher-absence-summary__item">
                                <span class="teacher-absence-summary__label">Teacher ID</span>
                                <strong class="teacher-absence-summary__value">{{ $teacher->id ?? 'N/A' }}</strong>
                            </div>

                            <div class="teacher-absence-summary__item">
                                <span class="teacher-absence-summary__label">Total Absences</span>
                                <strong class="teacher-absence-summary__value">{{ $uniqueAbsences->count() }} sessions</strong>
                            </div>

                            <div class="teacher-absence-summary__item">
                                <span class="teacher-absence-summary__label">Selected Date</span>
                                <strong class="teacher-absence-summary__value">
                                    {{ $absenceDate ? \Carbon\Carbon::parse($absenceDate)->format('Y-m-d') : 'All recorded dates' }}
                                </strong>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="ui-card">
                    <div class="ui-card__header">
                        <div>
                            <h6 class="mb-0 ui-title">Detailed Absence Records</h6>
                            <p class="mb-0 ui-muted">Expand each record to see the missed session and the replacement handling sessions.</p>
                        </div>
                    </div>

                    <div class="p-3">
                        @if ($uniqueAbsences->isEmpty())
                            <div class="px-3 py-5 text-center">
                                <h6 class="mb-1 ui-title">No absence records found.</h6>
                                <p class="mb-0 ui-muted">There are no teacher absence records available for this teacher.</p>
                            </div>
                        @else
                            <div class="accordion teacher-absence-accordion" id="absenceAccordion">
                                @foreach ($uniqueAbsences as $oldSessionId => $absenceData)
                                    @php
                                        $oldSession = $absenceData['old_session'];
                                        $handlingSessions = $absenceData['handling_sessions'];
                                    @endphp

                                    <div class="accordion-item teacher-absence-record">
                                        <h2 class="accordion-header" id="heading{{ $loop->index }}">
                                            <button
                                                class="accordion-button {{ $loop->first ? '' : 'collapsed' }}"
                                                type="button"
                                                data-bs-toggle="collapse"
                                                data-bs-target="#collapse{{ $loop->index }}"
                                                aria-expanded="{{ $loop->first ? 'true' : 'false' }}"
                                                aria-controls="collapse{{ $loop->index }}"
                                            >
                                                <div class="teacher-absence-record__heading">
                                                    <div>
                                                        <strong>Absence #{{ $loop->iteration }}</strong>
                                                        <span class="teacher-absence-record__meta">
                                                            Handling sessions: {{ $handlingSessions->count() }}
                                                        </span>
                                                    </div>

                                                    <span class="ui-pill ui-pill--neutral">Old Session ID: {{ $oldSessionId }}</span>
                                                </div>
                                            </button>
                                        </h2>

                                        <div
                                            id="collapse{{ $loop->index }}"
                                            class="accordion-collapse collapse {{ $loop->first ? 'show' : '' }}"
                                            aria-labelledby="heading{{ $loop->index }}"
                                            data-bs-parent="#absenceAccordion"
                                        >
                                            <div class="accordion-body">
                                                <div class="teacher-absence-grid">
                                                    <section class="teacher-absence-panel teacher-absence-panel--missed">
                                                        <div class="teacher-absence-panel__head">
                                                            <h6 class="mb-0 ui-title">Missed Session Information</h6>
                                                        </div>

                                                        <div class="teacher-absence-panel__body">
                                                            @if ($oldSession)
                                                                <div class="teacher-absence-fields">
                                                                    <div class="teacher-absence-field">
                                                                        <span class="teacher-absence-field__label">Session ID</span>
                                                                        <strong class="teacher-absence-field__value">{{ $oldSession->id }}</strong>
                                                                    </div>
                                                                    <div class="teacher-absence-field">
                                                                        <span class="teacher-absence-field__label">Date</span>
                                                                        <strong class="teacher-absence-field__value">{{ $oldSession->session_date ?? 'N/A' }}</strong>
                                                                    </div>
                                                                    <div class="teacher-absence-field">
                                                                        <span class="teacher-absence-field__label">Time</span>
                                                                        <strong class="teacher-absence-field__value">{{ $oldSession->start_time ?? 'N/A' }}</strong>
                                                                    </div>
                                                                </div>

                                                                <div class="mt-3">
                                                                    <span class="teacher-absence-field__label">Students</span>
                                                                    <div class="teacher-absence-pills">
                                                                        @forelse ($oldSession->staffScheduled?->courseStudent ?? [] as $courseStudent)
                                                                            <span class="ui-pill ui-pill--neutral">
                                                                                {{ ($courseStudent->student->first_name ?? '') . ' ' . ($courseStudent->student->last_name ?? '') }}
                                                                            </span>
                                                                        @empty
                                                                            <span class="ui-muted">No students</span>
                                                                        @endforelse
                                                                    </div>
                                                                </div>
                                                            @else
                                                                <p class="mb-0 ui-muted">No information available.</p>
                                                            @endif
                                                        </div>
                                                    </section>

                                                    <section class="teacher-absence-panel">
                                                        <div class="teacher-absence-panel__head">
                                                            <h6 class="mb-0 ui-title">Handling Sessions</h6>
                                                            <span class="ui-pill ui-pill--info">{{ $handlingSessions->count() }}</span>
                                                        </div>

                                                        <div class="teacher-absence-handlings">
                                                            @foreach ($handlingSessions as $handling)
                                                                <article class="teacher-handling-card">
                                                                    <div class="teacher-handling-card__head">
                                                                        <strong class="ui-title">Handling #{{ $loop->iteration }}</strong>
                                                                    </div>

                                                                    <div class="teacher-absence-fields">
                                                                        <div class="teacher-absence-field">
                                                                            <span class="teacher-absence-field__label">Schedule ID</span>
                                                                            <strong class="teacher-absence-field__value">{{ $handling['new_staff_scheduled']->id ?? 'N/A' }}</strong>
                                                                        </div>
                                                                        <div class="teacher-absence-field">
                                                                            <span class="teacher-absence-field__label">Date</span>
                                                                            <strong class="teacher-absence-field__value">{{ $handling['new_staff_scheduled']->start_date ?? 'N/A' }}</strong>
                                                                        </div>
                                                                        <div class="teacher-absence-field">
                                                                            <span class="teacher-absence-field__label">Session Type</span>
                                                                            <strong class="teacher-absence-field__value">
                                                                                {{ $handling['new_staff_scheduled']->academyProduct->name_en ?? $handling['new_staff_scheduled']->course_name_en ?? 'N/A' }}
                                                                            </strong>
                                                                        </div>
                                                                        <div class="teacher-absence-field">
                                                                            <span class="teacher-absence-field__label">Created By</span>
                                                                            <strong class="teacher-absence-field__value">{{ $handling['created_by']->full_name ?? 'N/A' }}</strong>
                                                                        </div>
                                                                        <div class="teacher-absence-field">
                                                                            <span class="teacher-absence-field__label">Created At</span>
                                                                            <strong class="teacher-absence-field__value">
                                                                                {{ $handling['created_at'] ? $handling['created_at']->format('Y-m-d H:i') : 'N/A' }}
                                                                            </strong>
                                                                        </div>
                                                                    </div>

                                                                    <div class="mt-3">
                                                                        <span class="teacher-absence-field__label">Students</span>
                                                                        <div class="teacher-absence-pills">
                                                                            @forelse ($handling['new_staff_scheduled']?->courseStudent ?? [] as $courseStudent)
                                                                                <span class="ui-pill ui-pill--neutral">
                                                                                    {{ ($courseStudent->student->first_name ?? '') . ' ' . ($courseStudent->student->last_name ?? '') }}
                                                                                </span>
                                                                            @empty
                                                                                <span class="ui-muted">No students</span>
                                                                            @endforelse
                                                                        </div>
                                                                    </div>
                                                                </article>
                                                            @endforeach
                                                        </div>
                                                    </section>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

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

        .teacher-absence-summary__item {
            padding: 1rem 1.1rem;
            border: 1px solid #e2e8f0;
            border-radius: 18px;
            background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
        }

        .teacher-absence-summary__label,
        .teacher-absence-field__label {
            display: block;
            margin-bottom: 0.35rem;
            color: #64748b;
            font-size: 0.8rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }

        .teacher-absence-summary__value,
        .teacher-absence-field__value {
            color: #0f172a;
            font-size: 0.96rem;
            line-height: 1.5;
        }

        .teacher-absence-accordion {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .teacher-absence-record {
            border: 1px solid #e2e8f0;
            border-radius: 18px;
            overflow: hidden;
            background: #fff;
        }

        .teacher-absence-record .accordion-button {
            background: #fff;
            box-shadow: none;
        }

        .teacher-absence-record .accordion-button:not(.collapsed) {
            background: #eff6ff;
            color: #1d4ed8;
        }

        .teacher-absence-record__heading {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            padding-right: 1rem;
        }

        .teacher-absence-record__meta {
            display: inline-block;
            margin-inline-start: 0.5rem;
            color: #64748b;
            font-size: 0.86rem;
            font-weight: 500;
        }

        .teacher-absence-grid {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: 1rem;
        }

        .teacher-absence-panel {
            border: 1px solid #e2e8f0;
            border-radius: 16px;
            background: #fff;
            overflow: hidden;
        }

        .teacher-absence-panel--missed {
            border-color: #b9b7b7;
            background: linear-gradient(180deg, #ffffff 0%, #b1b1b188 100%);
        }

        .teacher-absence-panel__head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            padding: 1rem 1.1rem;
            border-bottom: 1px solid #e2e8f0;
        }

        .teacher-absence-panel__body,
        .teacher-absence-handlings {
            padding: 1rem 1.1rem;
        }

        .teacher-absence-fields {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0.9rem;
        }

        .teacher-absence-field {
            padding: 0.9rem 1rem;
            border: 1px solid #e2e8f0;
            border-radius: 14px;
            background: rgba(255, 255, 255, 0.9);
        }

        .teacher-absence-pills {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-top: 0.5rem;
        }

        .teacher-absence-handlings {
            display: grid;
            gap: 1rem;
        }

        .teacher-handling-card {
            padding: 1rem;
            border: 1px solid #dbe4f0;
            border-radius: 16px;
            background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
        }

        .teacher-handling-card__head {
            margin-bottom: 0.9rem;
        }

        @media (max-width: 1024px) {
            .teacher-absence-summary {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .teacher-absence-fields {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 767px) {
            .teacher-absence-summary,
            .teacher-absence-fields {
                grid-template-columns: 1fr;
            }

            .teacher-absence-record__heading {
                flex-direction: column;
                align-items: flex-start;
                padding-right: 0;
            }
        }
    </style>
@endpush