{{-- resources/views/admin/settings/academicyear/create.blade.php --}}
@extends('admin.layouts.mainlayout')

@section('title', 'Create Academic Year')

@section('content')
<div class="container mx-auto px-4 py-8 max-w-4xl">
    <!--<div class="mb-6">
        <a href="{{ route('academicyear.index') }}" 
           class="text-blue-600 hover:text-blue-800 flex items-center gap-2">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
            </svg>
            Back to Academic Years
        </a>
    </div>-->

    <div class="bg-white rounded-lg shadow-md p-8">
        <h1 class="text-3xl font-bold text-gray-900 mb-6">Create Academic Year</h1>

        @if($errors->any())
            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-6">
                <ul class="list-disc list-inside">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form action="{{ route('academicyear.store') }}" method="POST">
            @csrf

            {{-- Basic Information --}}
            <div class="mb-8">
                <h2 class="text-xl font-semibold text-gray-900 mb-4">Basic Information</h2>
                
                <div class="grid md:grid-cols-2 gap-6">
                    <div>
                        <label for="code" class="block text-sm font-medium text-gray-700 mb-2">
                            Code <span class="text-red-500">*</span>
                        </label>
                        <input type="text" 
                               name="code" 
                               id="code" 
                               value="{{ old('code') }}"
                               placeholder="e.g., 2024-2025"
                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                               required>
                        <p class="mt-1 text-sm text-gray-500">Short identifier for the academic year</p>
                    </div>

                    <div>
                        <label for="name" class="block text-sm font-medium text-gray-700 mb-2">
                            Name <span class="text-red-500">*</span>
                        </label>
                        <input type="text" 
                               name="name" 
                               id="name" 
                               value="{{ old('name') }}"
                               placeholder="e.g., 2024/2025 Academic Year"
                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                               required>
                        <p class="mt-1 text-sm text-gray-500">Display name for the academic year</p>
                    </div>

                    <div>
                        <label for="start_date" class="block text-sm font-medium text-gray-700 mb-2">
                            Start Date <span class="text-red-500">*</span>
                        </label>
                        <input type="date" 
                               name="start_date" 
                               id="start_date" 
                               value="{{ old('start_date') }}"
                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                               required>
                    </div>

                    <div>
                        <label for="end_date" class="block text-sm font-medium text-gray-700 mb-2">
                            End Date <span class="text-red-500">*</span>
                        </label>
                        <input type="date" 
                               name="end_date" 
                               id="end_date" 
                               value="{{ old('end_date') }}"
                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                               required>
                    </div>
                </div>
            </div>

            {{-- Marking Periods --}}
            <div class="mb-8">
                <h2 class="text-xl font-semibold text-gray-900 mb-4">Marking Periods</h2>
                
                @foreach($markingPeriods as $index => $period)
                    <div class="bg-gray-50 border border-gray-200 rounded-lg p-6 mb-4">
                        <h3 class="font-semibold text-gray-900 mb-4">{{ $period->name }}</h3>
                        
                        <input type="hidden" name="marking_periods[{{ $index }}][code]" value="{{ $period->code }}">
                        <input type="hidden" name="marking_periods[{{ $index }}][sequence]" value="{{ $index + 1 }}">
                        
                        <div class="grid md:grid-cols-2 gap-4">
                            <div>
                                <label for="period_start_{{ $index }}" class="block text-sm font-medium text-gray-700 mb-2">
                                    Start Date <span class="text-red-500">*</span>
                                </label>
                                <input type="date" 
                                       name="marking_periods[{{ $index }}][start_date]" 
                                       id="period_start_{{ $index }}"
                                       value="{{ old('marking_periods.' . $index . '.start_date') }}"
                                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                                       required>
                            </div>

                            <div>
                                <label for="period_end_{{ $index }}" class="block text-sm font-medium text-gray-700 mb-2">
                                    End Date <span class="text-red-500">*</span>
                                </label>
                                <input type="date" 
                                       name="marking_periods[{{ $index }}][end_date]" 
                                       id="period_end_{{ $index }}"
                                       value="{{ old('marking_periods.' . $index . '.end_date') }}"
                                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                                       required>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            {{-- Form Actions --}}
            <div class="flex gap-4">
                <button type="submit" 
                        class="bg-blue-600 hover:bg-blue-700 text-blue px-6 py-3 rounded-lg font-medium transition">
                    Create Academic Year
                </button>
                <a href="{{ route('academicyear.index') }}" 
                   class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-6 py-3 rounded-lg font-medium transition">
                    Cancel
                </a>
            </div>
        </form>
    </div>
</div>
@endsection