@extends('layouts.main_dashboard.app')

@section('title', __('dashboard.Class Schedule'))
@section('page_heading', __('dashboard.Class Schedule'))
@section('page_subtitle', app()->getLocale() === 'ar' ? 'إدارة جدول الصف أسبوعيًا مع عرض أوضح للفترات والإجراءات المباشرة.' : 'Manage the class weekly schedule with a clearer view of periods and direct actions.')
@section('skip_page_hero', true)

@php
    $isArabic = app()->getLocale() === 'ar';
    $weekDays = ['Saturday', 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'];
    $dayLabels = collect($weekDays)->mapWithKeys(fn ($day) => [$day => __('dashboard.' . $day)]);
    $usedDays = collect($weekDays)->filter(fn ($day) => $groupedByDay->get($day, collect())->isNotEmpty())->count();
    $freeSlots = (count($periodRange) * count($weekDays)) - $summary['total_entries'];
    $filtersApplied = collect($filters)->filter(fn ($value) => filled($value))->count();
    $copyRoute = $otherClasses->isNotEmpty()
        ? route('admin.schedules.copy', [$schoolClass->id, $otherClasses->first()->id])
        : null;
@endphp

@section('content')
<div class="space-y-6">
    <section class="rounded-xl border border-surface-200 bg-white p-6 shadow-sm dark:border-surface-800 dark:bg-surface-900">
        <div class="flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between">
            <div class="space-y-2">
                <p class="text-[11px] font-black uppercase tracking-[0.24em] text-surface-400">{{ $isArabic ? 'إدارة جدول الصف' : 'Class schedule management' }}</p>
                <h2 class="text-2xl font-black tracking-tight text-surface-900 dark:text-white">{{ $schoolClass->name }}</h2>
                <p class="max-w-2xl text-sm leading-7 text-surface-500 dark:text-surface-400">
                    {{ $isArabic ? 'اعرض الفترات الأسبوعية، راجع المواد والمعلمين، ثم نفّذ التعديل أو النسخ من واجهة عملية ومباشرة.' : 'Review weekly periods, inspect courses and teachers, then update or copy the schedule from a direct workspace.' }}
                </p>
            </div>

            <div class="flex flex-wrap items-center gap-3">
                <div class="inline-flex items-center gap-3 rounded-xl border border-surface-200 bg-surface-50 px-4 py-3 dark:border-surface-700 dark:bg-surface-950">
                    <p class="text-sm font-bold text-surface-500 dark:text-surface-400">{{ $isArabic ? 'إجمالي الإدخالات' : 'Total entries' }}</p>
                    <p class="text-2xl font-black leading-none text-surface-900 dark:text-white">{{ $summary['total_entries'] }}</p>
                </div>
                <a href="{{ route('admin.schedules.create', $schoolClass->id) }}" class="inline-flex items-center gap-2 rounded-xl bg-brand-600 px-4 py-2 text-sm font-bold text-white transition hover:bg-brand-700">
                    <i class="fa-solid fa-plus text-xs"></i>
                    <span>{{ __('dashboard.Add New Schedule') }}</span>
                </a>
            </div>
        </div>
    </section>

    <section class="overflow-hidden rounded-xl border border-surface-200 bg-white shadow-sm dark:border-surface-800 dark:bg-surface-900">
        <div class="border-b border-surface-200 bg-surface-50/80 px-6 py-5 dark:border-surface-800 dark:bg-surface-800/30">
            <div class="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
                <div class="space-y-1">
                    <p class="text-[11px] font-black uppercase tracking-[0.24em] text-surface-400">{{ $isArabic ? 'ملخص الجدول' : 'Schedule summary' }}</p>
                    <h2 class="text-xl font-black text-surface-900 dark:text-white">{{ $isArabic ? 'نظرة سريعة' : 'Quick overview' }}</h2>
                    <p class="text-sm text-surface-500 dark:text-surface-400">{{ $isArabic ? 'حالة الجدول الحالي قبل التعديل أو النسخ إلى صف آخر.' : 'Current schedule status before editing or copying to another class.' }}</p>
                </div>

                <div class="grid grid-cols-2 gap-3 sm:grid-cols-4">
                    <div class="rounded-2xl border border-surface-200 bg-white px-4 py-3 dark:border-surface-700 dark:bg-surface-900">
                        <p class="text-[11px] font-bold text-surface-500 dark:text-surface-400">{{ $isArabic ? 'المواد المغطاة' : 'Covered courses' }}</p>
                        <p class="mt-1 text-xl font-black leading-none text-surface-900 dark:text-white">{{ $summary['courses'] }}</p>
                    </div>
                    <div class="rounded-2xl border border-surface-200 bg-white px-4 py-3 dark:border-surface-700 dark:bg-surface-900">
                        <p class="text-[11px] font-bold text-surface-500 dark:text-surface-400">{{ $isArabic ? 'الدروس المستخدمة' : 'Used lessons' }}</p>
                        <p class="mt-1 text-xl font-black leading-none text-surface-900 dark:text-white">{{ $summary['lessons'] }}</p>
                    </div>
                    <div class="rounded-2xl border border-surface-200 bg-white px-4 py-3 dark:border-surface-700 dark:bg-surface-900">
                        <p class="text-[11px] font-bold text-surface-500 dark:text-surface-400">{{ $isArabic ? 'الأيام المفعلة' : 'Active days' }}</p>
                        <p class="mt-1 text-xl font-black leading-none text-surface-900 dark:text-white">{{ $usedDays }}</p>
                    </div>
                    <div class="rounded-2xl border border-surface-200 bg-white px-4 py-3 dark:border-surface-700 dark:bg-surface-900">
                        <p class="text-[11px] font-bold text-surface-500 dark:text-surface-400">{{ $isArabic ? 'فترات شاغرة' : 'Free slots' }}</p>
                        <p class="mt-1 text-xl font-black leading-none text-surface-900 dark:text-white">{{ max(0, $freeSlots) }}</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="grid gap-6 px-6 py-6 xl:grid-cols-[minmax(0,1fr)_320px]">
            <div class="space-y-4">
                <div class="space-y-1">
                    <p class="text-sm font-black text-surface-900 dark:text-white">{{ $isArabic ? 'تصفية الجدول' : 'Filter schedule' }}</p>
                    <p class="text-sm text-surface-500 dark:text-surface-400">{{ $isArabic ? 'اعرض يومًا أو فترة أو مادة أو معلمًا محددًا للوصول بسرعة إلى الإدخالات المطلوبة.' : 'Filter by day, period, subject, teacher, or search term to focus the schedule.' }}</p>
                </div>

                <form method="GET" action="{{ route('admin.schedules.index', $schoolClass->id) }}" class="grid gap-3 md:grid-cols-2 xl:grid-cols-6">
                    <select name="day_of_week" class="rounded-xl border border-surface-200 bg-white px-4 py-3 text-sm text-surface-700 outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">
                        <option value="">{{ __('dashboard.Day') }}</option>
                        @foreach($weekDays as $day)
                            <option value="{{ $day }}" @selected($filters['day_of_week'] == $day)>{{ $dayLabels[$day] }}</option>
                        @endforeach
                    </select>
                    <select name="period" class="rounded-xl border border-surface-200 bg-white px-4 py-3 text-sm text-surface-700 outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">
                        <option value="">{{ __('dashboard.Period') }}</option>
                        @foreach($periodRange as $period)
                            <option value="{{ $period }}" @selected($filters['period'] == $period)>{{ $period }}</option>
                        @endforeach
                    </select>
                    <select name="subject_id" class="rounded-xl border border-surface-200 bg-white px-4 py-3 text-sm text-surface-700 outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">
                        <option value="">{{ __('dashboard.Subject') }}</option>
                        @foreach($subjects as $subject)
                            <option value="{{ $subject->id }}" @selected($filters['subject_id'] == $subject->id)>{{ $subject->name }}</option>
                        @endforeach
                    </select>
                    <select name="teacher_id" class="rounded-xl border border-surface-200 bg-white px-4 py-3 text-sm text-surface-700 outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">
                        <option value="">{{ __('dashboard.Teacher') }}</option>
                        @foreach($teachers as $teacher)
                            <option value="{{ $teacher->id }}" @selected($filters['teacher_id'] == $teacher->id)>{{ $teacher->first_name }} {{ $teacher->last_name }}</option>
                        @endforeach
                    </select>
                    <input type="search" name="search" value="{{ $filters['search'] }}" class="rounded-xl border border-surface-200 bg-white px-4 py-3 text-sm text-surface-700 outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100" placeholder="{{ __('dashboard.Search course') }}">
                    <div class="flex gap-3">
                        <button type="submit" class="inline-flex w-full items-center justify-center gap-2 rounded-xl bg-brand-600 px-4 py-3 text-sm font-bold text-white transition hover:bg-brand-700">
                            <i class="fa-solid fa-magnifying-glass text-xs"></i>
                            <span>{{ __('dashboard.Apply filters') }}</span>
                        </button>
                        <a href="{{ route('admin.schedules.index', $schoolClass->id) }}" class="inline-flex items-center justify-center rounded-xl border border-surface-200 px-4 py-3 text-sm font-bold text-surface-600 transition hover:bg-surface-50 dark:border-surface-700 dark:text-surface-300 dark:hover:bg-surface-800">{{ __('dashboard.Reset filters') }}</a>
                    </div>
                </form>

                @if($filtersApplied > 0)
                    <div class="flex flex-wrap items-center gap-2">
                        <span class="text-xs font-black uppercase tracking-[0.2em] text-surface-400">{{ $isArabic ? 'فلاتر نشطة' : 'Active filters' }}</span>
                        @if($filters['day_of_week'])
                            <span class="rounded-full bg-surface-100 px-3 py-1 text-xs font-bold text-surface-700 dark:bg-surface-800 dark:text-surface-200">{{ $dayLabels[$filters['day_of_week']] }}</span>
                        @endif
                        @if($filters['period'])
                            <span class="rounded-full bg-surface-100 px-3 py-1 text-xs font-bold text-surface-700 dark:bg-surface-800 dark:text-surface-200">{{ __('dashboard.Period') }} {{ $filters['period'] }}</span>
                        @endif
                        @if($filters['search'])
                            <span class="rounded-full bg-surface-100 px-3 py-1 text-xs font-bold text-surface-700 dark:bg-surface-800 dark:text-surface-200">{{ $filters['search'] }}</span>
                        @endif
                    </div>
                @endif
            </div>

            <aside class="space-y-4">
                <div class="rounded-xl border border-surface-200 bg-surface-50/70 p-5 dark:border-surface-800 dark:bg-surface-950/40">
                    <p class="text-[11px] font-black uppercase tracking-[0.24em] text-surface-400">{{ $isArabic ? 'نسخ الجدول' : 'Copy schedule' }}</p>
                    <h3 class="mt-1 text-lg font-black text-surface-900 dark:text-white">{{ $isArabic ? 'نقل نفس الهيكل إلى صف آخر' : 'Reuse this structure in another class' }}</h3>
                    <p class="mt-2 text-sm leading-6 text-surface-500 dark:text-surface-400">{{ $isArabic ? 'انسخ الجدول الحالي إلى صف مختلف بدل إعادة البناء يدويًا.' : 'Copy the current schedule to another class instead of rebuilding it manually.' }}</p>

                    @if($otherClasses->isNotEmpty())
                        <form id="copy-schedule-form" method="POST" action="{{ $copyRoute }}" class="mt-4 space-y-3">
                            @csrf
                            <select id="copy-target" name="target_class_id" class="w-full rounded-xl border border-surface-200 bg-white px-4 py-3 text-sm text-surface-700 outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">
                                @foreach($otherClasses as $classOption)
                                    <option value="{{ $classOption->id }}">{{ $classOption->name }}</option>
                                @endforeach
                            </select>
                            <button type="submit" class="inline-flex w-full items-center justify-center gap-2 rounded-xl bg-brand-600 px-4 py-3 text-sm font-bold text-white transition hover:bg-brand-700">
                                <i class="fa-solid fa-copy text-xs"></i>
                                <span>{{ __('dashboard.Copy') }}</span>
                            </button>
                        </form>
                    @else
                        <div class="mt-4 rounded-xl border border-dashed border-surface-300 px-4 py-5 text-sm text-surface-500 dark:border-surface-700 dark:text-surface-400">
                            {{ __('dashboard.No target class available') }}
                        </div>
                    @endif
                </div>
            </aside>
        </div>
    </section>

    <section class="overflow-hidden rounded-xl border border-surface-200 bg-white shadow-sm dark:border-surface-800 dark:bg-surface-900">
        <div class="border-b border-surface-200 px-6 py-5 dark:border-surface-800">
            <div class="flex flex-col gap-2 lg:flex-row lg:items-center lg:justify-between">
                <div>
                    <p class="text-[11px] font-black uppercase tracking-[0.24em] text-surface-400">{{ $isArabic ? 'المصفوفة الأسبوعية' : 'Weekly matrix' }}</p>
                    <h2 class="mt-1 text-xl font-black text-surface-900 dark:text-white">{{ $isArabic ? 'توزيع الفترات على أيام الأسبوع' : 'Periods distributed across the week' }}</h2>
                </div>
                <p class="text-sm text-surface-500 dark:text-surface-400">{{ $isArabic ? 'شبكة سريعة توضح ما إذا كانت كل فترة مشغولة أو فارغة.' : 'A quick matrix showing whether each period is occupied or empty.' }}</p>
            </div>
        </div>

        @if($schedules->isEmpty())
            <div class="px-6 py-16 text-center">
                <div class="mx-auto flex h-20 w-20 items-center justify-center rounded-full bg-brand-50 text-brand-600 dark:bg-brand-500/10 dark:text-brand-300">
                    <i class="fa-solid fa-calendar-xmark text-3xl"></i>
                </div>
                <h3 class="mt-6 text-xl font-black text-surface-900 dark:text-white">{{ __('dashboard.No data found') }}</h3>
                <p class="mt-3 text-sm text-surface-500 dark:text-surface-400">{{ $isArabic ? 'لا توجد حصص مطابقة للنطاق الحالي.' : 'No schedule entries match the current scope.' }}</p>
            </div>
        @else
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-surface-200 dark:divide-surface-800">
                    <thead class="bg-surface-50/80 dark:bg-surface-800/40">
                        <tr class="text-right text-xs font-black uppercase tracking-[0.2em] text-surface-500 dark:text-surface-400">
                            <th class="px-6 py-4 text-left">{{ __('dashboard.Period') }}</th>
                            @foreach($weekDays as $day)
                                <th class="px-6 py-4">{{ $dayLabels[$day] }}</th>
                            @endforeach
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-surface-200 dark:divide-surface-800">
                        @foreach($periodRange as $period)
                            <tr class="transition hover:bg-surface-50/60 dark:hover:bg-surface-800/20">
                                <td class="px-6 py-5 text-left align-top">
                                    <p class="text-sm font-black text-surface-900 dark:text-white">{{ __('dashboard.Period') }} {{ $period }}</p>
                                </td>
                                @foreach($weekDays as $day)
                                    @php
                                        $entries = $groupedByDay->get($day, collect())->where('period', $period);
                                    @endphp
                                    <td class="px-4 py-4 align-top">
                                        @if($entries->isEmpty())
                                            <div class="rounded-xl border border-dashed border-surface-200 px-3 py-4 text-center text-xs font-bold text-surface-400 dark:border-surface-700 dark:text-surface-500">
                                                {{ __('dashboard.No class') }}
                                            </div>
                                        @else
                                            <div class="space-y-3">
                                                @foreach($entries as $entry)
                                                    <div class="rounded-xl border border-surface-200 bg-surface-50 px-3 py-3 text-right dark:border-surface-800 dark:bg-surface-950/50">
                                                        <p class="text-sm font-black text-surface-900 dark:text-white">{{ $entry->course?->name ?? __('dashboard.No Course') }}</p>
                                                        <p class="mt-1 text-xs text-surface-500 dark:text-surface-400">
                                                            {{ \Illuminate\Support\Carbon::parse($entry->start_time)->format('H:i') }} - {{ \Illuminate\Support\Carbon::parse($entry->end_time)->format('H:i') }}
                                                        </p>
                                                        @if($entry->lesson)
                                                            <p class="mt-1 text-xs text-surface-500 dark:text-surface-400">{{ $entry->lesson->title }}</p>
                                                        @endif
                                                    </div>
                                                @endforeach
                                            </div>
                                        @endif
                                    </td>
                                @endforeach
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </section>

    <section class="overflow-hidden rounded-xl border border-surface-200 bg-white shadow-sm dark:border-surface-800 dark:bg-surface-900">
        <div class="border-b border-surface-200 px-6 py-5 dark:border-surface-800">
            <div class="flex flex-col gap-2 lg:flex-row lg:items-center lg:justify-between">
                <div>
                    <p class="text-[11px] font-black uppercase tracking-[0.24em] text-surface-400">{{ $isArabic ? 'الإدارة التنفيذية' : 'Execution list' }}</p>
                    <h2 class="mt-1 text-xl font-black text-surface-900 dark:text-white">{{ $isArabic ? 'جميع حصص الصف الحالية' : 'All current class entries' }}</h2>
                </div>
                <p class="text-sm text-surface-500 dark:text-surface-400">{{ $isArabic ? 'القائمة التالية مناسبة للتعديل والحذف السريع لكل حصة.' : 'Use this list for quick editing and deletion of each entry.' }}</p>
            </div>
        </div>

        @if($schedules->isEmpty())
            <div class="px-6 py-12 text-center text-sm text-surface-500 dark:text-surface-400">{{ $isArabic ? 'لا توجد إدخالات معروضة حاليًا.' : 'No visible entries right now.' }}</div>
        @else
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-surface-200 dark:divide-surface-800">
                    <thead class="bg-surface-50/80 dark:bg-surface-800/40">
                        <tr class="text-right text-xs font-black uppercase tracking-[0.2em] text-surface-500 dark:text-surface-400">
                            <th class="px-6 py-4">{{ $isArabic ? 'اليوم' : 'Day' }}</th>
                            <th class="px-6 py-4">{{ __('dashboard.Period') }}</th>
                            <th class="px-6 py-4">{{ $isArabic ? 'المساق' : 'Course' }}</th>
                            <th class="px-6 py-4">{{ $isArabic ? 'الدرس' : 'Lesson' }}</th>
                            <th class="px-6 py-4">{{ __('dashboard.Time') }}</th>
                            <th class="px-6 py-4 text-left">{{ __('dashboard.Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-surface-200 dark:divide-surface-800">
                        @foreach($schedules as $entry)
                            <tr class="transition hover:bg-surface-50/80 dark:hover:bg-surface-800/20">
                                <td class="px-6 py-5 text-sm font-bold text-surface-900 dark:text-white">{{ $dayLabels[$entry->day_of_week] ?? $entry->day_of_week }}</td>
                                <td class="px-6 py-5 text-sm text-surface-600 dark:text-surface-300">{{ $entry->period }}</td>
                                <td class="px-6 py-5">
                                    <p class="text-sm font-black text-surface-900 dark:text-white">{{ $entry->course?->name ?? __('dashboard.No Course') }}</p>
                                </td>
                                <td class="px-6 py-5 text-sm text-surface-600 dark:text-surface-300">{{ $entry->lesson?->title ?? '-' }}</td>
                                <td class="px-6 py-5 text-sm text-surface-600 dark:text-surface-300">{{ \Illuminate\Support\Carbon::parse($entry->start_time)->format('H:i') }} - {{ \Illuminate\Support\Carbon::parse($entry->end_time)->format('H:i') }}</td>
                                <td class="px-6 py-5">
                                    <div class="flex items-center justify-end gap-2">
                                        <a href="{{ route('admin.schedules.edit', $entry->id) }}" class="inline-flex items-center gap-2 rounded-xl bg-brand-600 px-4 py-2.5 text-sm font-bold text-white transition hover:bg-brand-700">
                                            <i class="fa-solid fa-pen-to-square text-xs"></i>
                                            <span>{{ __('dashboard.Edit') }}</span>
                                        </a>
                                        <form action="{{ route('admin.schedules.destroy', $entry->id) }}" method="POST" onsubmit="return confirm('{{ __('dashboard.Are you sure you want to delete this item?') }}');">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="inline-flex items-center gap-2 rounded-xl bg-red-50 px-4 py-2.5 text-sm font-bold text-red-600 transition hover:bg-red-100 dark:bg-red-500/10 dark:text-red-300 dark:hover:bg-red-500/20">
                                                <i class="fa-solid fa-trash text-xs"></i>
                                                <span>{{ __('dashboard.Delete') }}</span>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </section>
</div>

@if($otherClasses->isNotEmpty())
    @push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const copyForm = document.querySelector('#copy-schedule-form');
            const copyTarget = document.querySelector('#copy-target');

            if (!copyForm || !copyTarget) {
                return;
            }

            copyTarget.addEventListener('change', function () {
                copyForm.action = copyForm.action.replace(/\/schedules\/copy\/\d+$/, '/schedules/copy/' + this.value);
            });
        });
    </script>
    @endpush
@endif
@endsection