@extends('layouts.main_dashboard.app')

@section('title', __('dashboard.Academic Year Settings'))
@section('skip_page_hero', true)

@section('content')
@php
    $isAr = app()->getLocale() === 'ar';
    $currentYear = $schoolYears->firstWhere('is_current', true);
    $currentTerm = $terms->firstWhere('is_current', true);
@endphp

<div class="space-y-6">
    <section class="rounded-xl border border-surface-200 bg-white p-5 shadow-sm dark:border-surface-800 dark:bg-surface-900">
        <h1 class="text-3xl font-black text-surface-900 dark:text-white">{{ __('dashboard.Academic Year Settings') }}</h1>
        <p class="mt-3 max-w-3xl text-sm leading-7 text-surface-500 dark:text-surface-400">{{ $isAr ? 'تحديد السنة الدراسية والفصل النشطين في النظام من واجهة أبسط وأكثر وضوحًا.' : 'Set the active academic year and current term from a simpler, clearer workspace.' }}</p>
    </section>

    <section class="grid gap-4 md:grid-cols-3">
        <article class="rounded-xl border border-surface-200 bg-white p-5 shadow-sm dark:border-surface-800 dark:bg-surface-900">
            <p class="text-xs font-bold uppercase tracking-[0.24em] text-surface-400 dark:text-surface-500">{{ __('dashboard.Current School Year') }}</p>
            <p class="mt-3 text-2xl font-black text-surface-900 dark:text-white">{{ $currentYear?->name ?: '—' }}</p>
        </article>
        <article class="rounded-xl border border-surface-200 bg-white p-5 shadow-sm dark:border-surface-800 dark:bg-surface-900">
            <p class="text-xs font-bold uppercase tracking-[0.24em] text-surface-400 dark:text-surface-500">{{ __('dashboard.Current Term') }}</p>
            <p class="mt-3 text-2xl font-black text-surface-900 dark:text-white">{{ $currentTerm?->name ?: '—' }}</p>
        </article>
        <article class="rounded-xl border border-surface-200 bg-white p-5 shadow-sm dark:border-surface-800 dark:bg-surface-900">
            <p class="text-xs font-bold uppercase tracking-[0.24em] text-surface-400 dark:text-surface-500">{{ $isAr ? 'عدد السنوات' : 'Academic Years' }}</p>
            <p class="mt-3 text-2xl font-black text-surface-900 dark:text-white">{{ $schoolYears->count() }}</p>
        </article>
    </section>

    <section class="rounded-xl border border-surface-200 bg-white p-6 shadow-sm dark:border-surface-800 dark:bg-surface-900">
        <form action="{{ route('admin.settings.academic_year.update') }}" method="POST" class="space-y-6">
            @csrf
            @method('PUT')

            <div class="grid gap-6 lg:grid-cols-2">
                <div>
                    <label for="year-select" class="mb-2 block text-sm font-bold text-surface-700 dark:text-surface-200">{{ __('dashboard.Current School Year') }}</label>
                    <select id="year-select" name="current_school_year" class="w-full rounded-xl border border-surface-200 bg-white px-4 py-3 text-sm font-bold outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100" required>
                        <option value="">{{ __('dashboard.Select School Year') }}</option>
                        @foreach($schoolYears as $year)
                            <option value="{{ $year->id }}" {{ $year->is_current ? 'selected' : '' }}>{{ $year->name }}</option>
                        @endforeach
                    </select>
                    @error('current_school_year')
                        <p class="mt-2 text-sm font-medium text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="term-select" class="mb-2 block text-sm font-bold text-surface-700 dark:text-surface-200">{{ __('dashboard.Current Term') }}</label>
                    <select id="term-select" name="current_term" class="w-full rounded-xl border border-surface-200 bg-white px-4 py-3 text-sm font-bold outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100" required>
                        <option value="">{{ __('dashboard.Select Term') }}</option>
                        @foreach($terms as $term)
                            <option value="{{ $term->id }}" {{ $term->is_current ? 'selected' : '' }}>{{ $term->name }}</option>
                        @endforeach
                    </select>
                    @error('current_term')
                        <p class="mt-2 text-sm font-medium text-red-600">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <div class="flex justify-end border-t border-surface-200 pt-6 dark:border-surface-800">
                <button type="submit" class="inline-flex h-11 items-center rounded-xl bg-brand-600 px-6 text-sm font-bold text-white transition hover:bg-brand-700">
                    {{ __('dashboard.Save Settings') }}
                </button>
            </div>
        </form>
    </section>
</div>
@endsection

@section('scripts')
<script>
    $(document).ready(function() {
        $('#year-select').change(function() {
            const yearId = $(this).val();
            const termSelect = $('#term-select');

            if (!yearId) {
                termSelect.empty().append('<option value="">{{ __("dashboard.Select Term") }}</option>');
                return;
            }

            $.ajax({
                url: '{{ url("admin/years") }}/' + yearId + '/terms',
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    termSelect.empty().append('<option value="">{{ __("dashboard.Select Term") }}</option>');
                    $.each(data, function(_, value) {
                        termSelect.append('<option value="' + value.id + '">' + value.name + '</option>');
                    });
                }
            });
        });
    });
</script>
@endsection