@extends('layouts.main_dashboard.app')

@section('title', __('dashboard.Add New Term'))
@section('page_heading', __('dashboard.Add New Term'))
@section('page_subtitle', 'أضف فصلًا دراسيًا جديدًا وحدد السنة الدراسية المرتبط بها.')
@section('page_actions')
    <a href="{{ route('admin.terms.index', $year_id) }}" class="inline-flex items-center gap-2 rounded-xl border border-surface-200 bg-white px-4 py-2 text-sm font-bold text-surface-700 transition hover:bg-surface-50 dark:border-surface-700 dark:bg-surface-900 dark:text-surface-200 dark:hover:bg-surface-800">
        <i class="fa-solid fa-list"></i>
        <span>{{ __('dashboard.View All Terms') }}</span>
    </a>
@endsection

@section('content')
@php
    $termLocales = [
        'ar' => 'العربية',
        'en' => 'English',
    ];
@endphp
<div class="space-y-8">
    <section class="rounded-xl border border-surface-200 p-6 dark:border-surface-800">
        <form action="{{ route('admin.terms.store') }}" method="POST" class="space-y-6">
            @csrf

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

            <div class="grid gap-6 lg:grid-cols-2">
                @foreach($termLocales as $locale => $label)
                    <div>
                        <label for="name_translations_{{ $locale }}" class="mb-2 block text-sm font-bold text-surface-700 dark:text-surface-200">
                            {{ __('dashboard.Name') }} ({{ $label }}){{ $locale === 'ar' ? ' *' : '' }}
                        </label>
                        <input
                            id="name_translations_{{ $locale }}"
                            type="text"
                            name="name_translations[{{ $locale }}]"
                            value="{{ old("name_translations.$locale") }}"
                            class="w-full rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-900"
                            {{ $locale === 'ar' ? 'required' : '' }}
                            dir="{{ $locale === 'ar' ? 'rtl' : 'ltr' }}"
                        >
                        @if($locale === 'ar')
                            <p class="mt-2 text-xs font-medium text-surface-500 dark:text-surface-400">العربية هي الاسم الأساسي المعتمد في النظام.</p>
                        @endif
                        @error("name_translations.$locale")
                            <p class="mt-2 text-sm font-medium text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                @endforeach
            </div>

            <div class="flex flex-wrap justify-end gap-3">
                <a href="{{ route('admin.terms.index', $year_id) }}" class="inline-flex items-center gap-2 rounded-2xl border border-surface-200 px-4 py-2 text-sm font-bold text-surface-700 transition hover:bg-surface-50 dark:border-surface-700 dark:text-surface-200 dark:hover:bg-surface-800">{{ __('dashboard.Cancel') }}</a>
                <button type="submit" class="inline-flex items-center gap-2 rounded-2xl bg-brand-600 px-4 py-2 text-sm font-bold text-white transition hover:bg-brand-700">
                    <i class="fa-solid fa-floppy-disk"></i>
                    <span>{{ __('dashboard.Save') }}</span>
                </button>
            </div>
        </form>
    </section>
</div>
@endsection