@extends('layouts.main_dashboard.app')
@section('title', __('dashboard.All School Classes'))
@section('page_heading', __('dashboard.All School Classes'))

@php $isAr = app()->getLocale() === 'ar'; @endphp

@section('content')
<div class="space-y-5" x-data="{ filtersOpen: {{ request()->hasAny(['keyword','year_id','term_id','stage_id','grade_id']) ? 'true' : 'false' }} }">

    {{-- Header --}}
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
            <h1 class="text-xl font-bold text-surface-900 dark:text-white">{{ __('dashboard.All School Classes') }}</h1>
            <p class="mt-0.5 text-sm text-surface-500 dark:text-surface-400">{{ $isAr ? 'إدارة الفصول الدراسية وربطها بالتسلسل الأكاديمي' : 'Manage school classes and their academic hierarchy' }}</p>
        </div>
        <div class="flex gap-2 shrink-0">
            <button type="button" @click="filtersOpen = !filtersOpen"
                    class="inline-flex items-center gap-2 px-4 py-2 bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-300 rounded-lg font-semibold text-sm hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors border border-surface-200 dark:border-surface-700">
                <i class="fa-solid fa-sliders text-xs"></i>{{ __('dashboard.Filter') }}
            </button>
            <a href="{{ route('admin.school-classes.create') }}"
               class="inline-flex items-center gap-2 px-4 py-2 bg-brand-600 text-white rounded-lg font-semibold text-sm hover:bg-brand-700 transition-colors shadow-sm shadow-brand-500/20">
                <i class="fa-solid fa-plus text-xs"></i>{{ __('dashboard.Add New School Class') }}
            </a>
        </div>
    </div>

    {{-- Filters --}}
    <div x-show="filtersOpen" x-collapse>
        <form method="GET" action="{{ route('admin.school-classes.index') }}"
              class="bg-white dark:bg-surface-900 border border-surface-200 dark:border-surface-800 rounded-xl p-4 grid gap-3 sm:grid-cols-2 xl:grid-cols-6">
            <input type="text" name="keyword" value="{{ $filters['keyword'] ?? '' }}"
                   placeholder="{{ __('dashboard.Search by name') }}"
                   class="rounded-lg border border-surface-200 dark:border-surface-700 bg-white dark:bg-surface-950 px-3 py-2 text-sm outline-none focus:border-brand-400 transition">
            <select name="year_id" class="rounded-lg border border-surface-200 dark:border-surface-700 bg-white dark:bg-surface-950 px-3 py-2 text-sm outline-none focus:border-brand-400 transition">
                <option value="">{{ __('dashboard.Select Year') }}</option>
                @foreach($years as $year)
                    <option value="{{ $year->id }}" @selected(($filters['year_id'] ?? '') == $year->id)>{{ $year->name }}</option>
                @endforeach
            </select>
            <select name="term_id" class="rounded-lg border border-surface-200 dark:border-surface-700 bg-white dark:bg-surface-950 px-3 py-2 text-sm outline-none focus:border-brand-400 transition">
                <option value="">{{ __('dashboard.Select Term') }}</option>
                @foreach($terms as $term)
                    <option value="{{ $term->id }}" @selected(($filters['term_id'] ?? '') == $term->id)>{{ $term->name }}</option>
                @endforeach
            </select>
            <select name="stage_id" class="rounded-lg border border-surface-200 dark:border-surface-700 bg-white dark:bg-surface-950 px-3 py-2 text-sm outline-none focus:border-brand-400 transition">
                <option value="">{{ __('dashboard.Select Stage') }}</option>
                @foreach($stages as $stage)
                    <option value="{{ $stage->id }}" @selected(($filters['stage_id'] ?? '') == $stage->id)>{{ $stage->name }}</option>
                @endforeach
            </select>
            <select name="grade_id" class="rounded-lg border border-surface-200 dark:border-surface-700 bg-white dark:bg-surface-950 px-3 py-2 text-sm outline-none focus:border-brand-400 transition">
                <option value="">{{ __('dashboard.Select Grade') }}</option>
                @foreach($grades as $grade)
                    <option value="{{ $grade->id }}" @selected(($filters['grade_id'] ?? '') == $grade->id)>{{ $grade->name }}</option>
                @endforeach
            </select>
            <div class="flex gap-2">
                <button type="submit" class="flex-1 inline-flex items-center justify-center gap-2 px-4 py-2 bg-brand-600 text-white rounded-lg font-semibold text-sm hover:bg-brand-700 transition-colors">
                    <i class="fa-solid fa-magnifying-glass text-xs"></i>{{ __('dashboard.Filter') }}
                </button>
                <a href="{{ route('admin.school-classes.index') }}" class="inline-flex items-center justify-center px-3 py-2 border border-surface-200 dark:border-surface-700 rounded-lg text-sm font-semibold text-surface-600 dark:text-surface-300 hover:bg-surface-50 dark:hover:bg-surface-800 transition-colors">
                    <i class="fa-solid fa-xmark text-xs"></i>
                </a>
            </div>
        </form>
    </div>

    {{-- Table --}}
    <div class="bg-white dark:bg-surface-900 border border-surface-200 dark:border-surface-800 rounded-xl shadow-card overflow-hidden"
         x-data="{
            selectedIds: [],
            selectAll: false,
            allIds: {{ $schoolClasses->pluck('id')->toJson() }}
         }">
        <div class="px-5 pt-3">
            <x-bulk-action-bar
                :actions="[
                    ['value' => 'delete', 'label' => app()->getLocale() === 'ar' ? 'حذف' : 'Delete'],
                ]"
                :route="route('admin.school-classes.bulk-action')"
            />
        </div>
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead>
                    <tr class="bg-surface-50 dark:bg-surface-800/50 border-b border-surface-200 dark:border-surface-700">
                        <th class="px-4 py-3 w-10">
                            <input type="checkbox" x-model="selectAll"
                                   @change="selectedIds = selectAll ? [...allIds] : []"
                                   class="rounded border-surface-300 text-brand-600 focus:ring-brand-500 dark:border-surface-600">
                        </th>
                        <th class="px-5 py-3 text-start text-[11px] font-semibold text-surface-500 dark:text-surface-400 uppercase tracking-wide">{{ __('dashboard.School Class') }}</th>
                        <th class="px-5 py-3 text-start text-[11px] font-semibold text-surface-500 dark:text-surface-400 uppercase tracking-wide hidden sm:table-cell">{{ __('dashboard.Stage') }}</th>
                        <th class="px-5 py-3 text-start text-[11px] font-semibold text-surface-500 dark:text-surface-400 uppercase tracking-wide hidden md:table-cell">{{ __('dashboard.Grade') }}</th>
                        <th class="px-5 py-3 text-center text-[11px] font-semibold text-surface-500 dark:text-surface-400 uppercase tracking-wide hidden md:table-cell">{{ __('dashboard.Students') }}</th>
                        <th class="px-5 py-3 text-center text-[11px] font-semibold text-surface-500 dark:text-surface-400 uppercase tracking-wide hidden lg:table-cell">{{ __('dashboard.Courses') }}</th>
                        <th class="px-5 py-3 text-end text-[11px] font-semibold text-surface-500 dark:text-surface-400 uppercase tracking-wide">{{ __('dashboard.Actions') }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-surface-100 dark:divide-surface-800">
                    @forelse($schoolClasses as $schoolClass)
                    <tr class="hover:bg-surface-50 dark:hover:bg-surface-800/30 transition-colors">
                        <td class="px-4 py-3.5">
                            <input type="checkbox" :value="{{ $schoolClass->id }}" x-model="selectedIds"
                                   class="rounded border-surface-300 text-brand-600 focus:ring-brand-500 dark:border-surface-600">
                        </td>
                        <td class="px-5 py-3.5">
                            <div class="text-[13px] font-semibold text-surface-900 dark:text-white">{{ $schoolClass->name }}</div>
                            <div class="text-[11px] text-surface-400 mt-0.5">
                                AR: {{ $schoolClass->getStoredTranslation('ar') ?? '—' }} · EN: {{ $schoolClass->getStoredTranslation('en') ?: '—' }}
                            </div>
                        </td>
                        <td class="px-5 py-3.5 text-[12px] text-surface-600 dark:text-surface-400 hidden sm:table-cell">
                            {{ $schoolClass->grade?->stage?->name ?? '—' }}
                        </td>
                        <td class="px-5 py-3.5 text-[12px] text-surface-600 dark:text-surface-400 hidden md:table-cell">
                            {{ $schoolClass->grade?->name ?? '—' }}
                        </td>
                        <td class="px-5 py-3.5 text-center hidden md:table-cell">
                            <span class="inline-flex items-center px-2 py-0.5 rounded-md text-[10px] font-bold uppercase bg-emerald-50 dark:bg-emerald-950/40 text-emerald-700 dark:text-emerald-400">
                                {{ $schoolClass->students->count() }}
                            </span>
                        </td>
                        <td class="px-5 py-3.5 text-center hidden lg:table-cell">
                            <span class="inline-flex items-center px-2 py-0.5 rounded-md text-[10px] font-bold uppercase bg-brand-50 dark:bg-brand-950/40 text-brand-700 dark:text-brand-400">
                                {{ $schoolClass->courses_count ?? $schoolClass->courses->count() }}
                            </span>
                        </td>
                        <td class="px-5 py-3.5">
                            <div class="flex justify-end">
                                <div class="relative" x-data="{ open: false }">
                                    <button @click="open = !open" @click.outside="open = false" type="button"
                                            class="w-8 h-8 flex items-center justify-center rounded-lg bg-surface-100 dark:bg-surface-800 text-surface-500 dark:text-surface-400 hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors">
                                        <i class="fa-solid fa-ellipsis-vertical text-xs"></i>
                                    </button>
                                    <div x-show="open" x-cloak x-transition
                                         class="absolute end-0 z-50 mt-1 w-48 rounded-xl border border-surface-200 dark:border-surface-700 bg-white dark:bg-surface-900 shadow-lg overflow-hidden">
                                        <a href="{{ route('admin.school-classes.show', $schoolClass->id) }}"
                                           class="flex items-center gap-3 px-4 py-2.5 text-sm text-surface-700 dark:text-surface-300 hover:bg-surface-50 dark:hover:bg-surface-800 transition-colors">
                                            <i class="fa-solid fa-eye w-4 text-center text-surface-400 text-xs"></i>{{ __('dashboard.View') }}
                                        </a>
                                        <a href="{{ route('admin.school-classes.edit', $schoolClass->id) }}"
                                           class="flex items-center gap-3 px-4 py-2.5 text-sm text-surface-700 dark:text-surface-300 hover:bg-surface-50 dark:hover:bg-surface-800 transition-colors">
                                            <i class="fa-solid fa-pen w-4 text-center text-surface-400 text-xs"></i>{{ __('dashboard.Edit') }}
                                        </a>
                                        <a href="{{ route('admin.school-classes.addStudentsForm', $schoolClass->id) }}"
                                           class="flex items-center gap-3 px-4 py-2.5 text-sm text-surface-700 dark:text-surface-300 hover:bg-surface-50 dark:hover:bg-surface-800 transition-colors">
                                            <i class="fa-solid fa-user-plus w-4 text-center text-surface-400 text-xs"></i>{{ __('dashboard.Add Students') }}
                                        </a>
                                        <a href="{{ route('admin.schedules.index', $schoolClass->id) }}"
                                           class="flex items-center gap-3 px-4 py-2.5 text-sm text-surface-700 dark:text-surface-300 hover:bg-surface-50 dark:hover:bg-surface-800 transition-colors">
                                            <i class="fa-solid fa-calendar-week w-4 text-center text-surface-400 text-xs"></i>{{ __('dashboard.Manage Schedule') }}
                                        </a>
                                        <div class="border-t border-surface-100 dark:border-surface-800"></div>
                                        <form method="POST" action="{{ route('admin.school-classes.destroy', $schoolClass->id) }}"
                                              onsubmit="return confirm('{{ $isAr ? 'هل أنت متأكد من الحذف؟' : 'Are you sure?' }}')">
                                            @csrf @method('DELETE')
                                            <button type="submit"
                                                    class="w-full flex items-center gap-3 px-4 py-2.5 text-sm text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-950/30 transition-colors">
                                                <i class="fa-solid fa-trash w-4 text-center text-xs"></i>{{ __('dashboard.Delete') }}
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="px-5 py-12 text-center">
                            <div class="flex flex-col items-center gap-2">
                                <div class="w-10 h-10 rounded-xl bg-surface-100 dark:bg-surface-800 flex items-center justify-center">
                                    <i class="fa-solid fa-school text-surface-400 text-sm"></i>
                                </div>
                                <p class="text-sm text-surface-400">{{ __('dashboard.No data found') }}</p>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="border-t border-surface-100 dark:border-surface-800 px-5 py-3">
            {{ $schoolClasses->links() }}
        </div>
    </div>

</div>
@endsection