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

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

@section('content')
<div class="container mx-auto px-4 py-8">
    {{-- Header --}}
    <div class="flex justify-between items-center mb-8">
        <div>
            <h1 class="text-3xl font-bold text-gray-900">Academic Year Management</h1>
            <p class="mt-2 text-gray-600">Manage academic years and marking periods</p>
        </div>
        <a href="{{ route('academicyear.create') }}" 
           class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg flex items-center gap-2 transition">
            <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="M12 4v16m8-8H4"/>
            </svg>
            Create Academic Year
        </a>
    </div>

    {{-- Success Message --}}
    @if(session('success'))
        <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-6" role="alert">
            <div class="flex items-center">
                <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                </svg>
                <span>{{ session('success') }}</span>
            </div>
        </div>
    @endif

    {{-- Error Message --}}
    @if(session('error'))
        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-6" role="alert">
            <div class="flex items-center">
                <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
                </svg>
                <span>{{ session('error') }}</span>
            </div>
        </div>
    @endif

    {{-- Academic Years List --}}
    <div class="space-y-6">
        @forelse($academicYears as $year)
            <div class="bg-white rounded-lg shadow-md overflow-hidden border-l-4 {{ $year->is_active ? 'border-green-500' : 'border-gray-300' }}">
                {{-- Year Header --}}
                <div class="p-6">
                    <div class="flex justify-between items-start">
                        <div class="flex-1">
                            <div class="flex items-center gap-3 mb-2">
                                <h2 class="text-2xl font-bold text-gray-900">{{ $year->name }}</h2>
                                
                                {{-- Status Badge --}}
                                @if($year->status === 'active')
                                    <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium flex items-center gap-1">
                                        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                                        </svg>
                                        Active
                                    </span>
                                @elseif($year->status === 'completed')
                                    <span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm font-medium">
                                        Completed
                                    </span>
                                @else
                                    <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-medium">
                                        Planned
                                    </span>
                                @endif
                            </div>

                            <p class="text-gray-600 mb-4">
                                <span class="font-medium">Code:</span> {{ $year->code }} | 
                                <span class="font-medium">Duration:</span> 
                                {{ \Carbon\Carbon::parse($year->start_date)->format('M d, Y') }} - 
                                {{ \Carbon\Carbon::parse($year->end_date)->format('M d, Y') }}
                            </p>
                        </div>

                        {{-- Action Buttons --}}
                        <div class="flex gap-2">
                            @if(!$year->is_active && $year->status !== 'completed')
                                <form action="{{ route('academicyear.activate', $year) }}" method="POST" 
                                      onsubmit="return confirm('Are you sure you want to activate {{ $year->code }}? This will deactivate the current academic year.')">
                                    @csrf
                                    <button type="submit" 
                                            class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg flex items-center gap-2 transition">
                                        <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="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/>
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                        </svg>
                                        Activate Year
                                    </button>
                                </form>
                            @endif

                            <a href="{{ route('academicyear.show', $year) }}" 
                               class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center gap-2 transition">
                                <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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                                </svg>
                                View Details
                            </a>
                        </div>
                    </div>

                    {{-- Marking Periods --}}
                    <div class="mt-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-3">Marking Periods</h3>
                        <div class="grid md:grid-cols-2 gap-4">
                            @foreach($year->markingPeriods as $period)
                                <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                                    <div class="flex justify-between items-start mb-2">
                                        <div>
                                            <h4 class="font-semibold text-gray-900">{{ $period->name }}</h4>
                                            <p class="text-sm text-gray-600 mt-1">
                                                Sequence {{ $period->pivot->sequence }} | 
                                                {{ \Carbon\Carbon::parse($period->pivot->start_date)->format('M d, Y') }} - 
                                                {{ \Carbon\Carbon::parse($period->pivot->end_date)->format('M d, Y') }}
                                            </p>
                                        </div>
                                        
                                        @if($period->pivot->is_active)
                                            <span class="bg-green-100 text-green-800 px-2 py-1 rounded text-xs font-medium">
                                                Active
                                            </span>
                                        @else
                                            <span class="bg-gray-200 text-gray-700 px-2 py-1 rounded text-xs font-medium">
                                                Inactive
                                            </span>
                                        @endif
                                    </div>

                                    @if($year->is_active && !$period->pivot->is_active)
                                        <form action="{{ route('academicyear.activate-period', [$year, $period]) }}" 
                                              method="POST" 
                                              onsubmit="return confirm('Are you sure you want to activate {{ $period->name }}?')"
                                              class="mt-3">
                                            @csrf
                                            <button type="submit" 
                                                    class="w-full bg-blue-600 hover:bg-blue-700 text-white px-3 py-2 rounded text-sm transition">
                                                Activate Period
                                            </button>
                                        </form>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        @empty
            <div class="bg-white rounded-lg shadow-md p-12 text-center">
                <svg class="w-16 h-16 text-gray-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                </svg>
                <h3 class="text-xl font-semibold text-gray-900 mb-2">No Academic Years</h3>
                <p class="text-gray-600 mb-6">Get started by creating your first academic year</p>
                <a href="{{ route('academicyear.create') }}" 
                   class="inline-flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg transition">
                    <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="M12 4v16m8-8H4"/>
                    </svg>
                    Create Academic Year
                </a>
            </div>
        @endforelse
    </div>
</div>
@endsection