@extends('layouts.app')
@section('title', 'Yearly Planner')
@section('page_title', 'Yearly Planner')
@section('breadcrumbs')
    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Home</a></li>
    <li class="breadcrumb-item active">Yearly Planner</li>
@endsection
@section('page_actions')
    @php $planExp = request()->except('export'); @endphp
    <a href="{{ route('yearly-plans.index', array_merge($planExp, ['export' => 'pdf'])) }}" class="btn btn-light border"><i class="bi bi-file-earmark-pdf text-danger me-1"></i>PDF</a>
    <a href="{{ route('yearly-plans.index', array_merge($planExp, ['export' => 'word'])) }}" class="btn btn-light border"><i class="bi bi-file-earmark-word text-primary me-1"></i>Word</a>
    @can('academics.create')
        <a href="{{ route('yearly-plans.create') }}" class="btn btn-primary"><i class="bi bi-plus-lg me-1"></i>New Plan</a>
    @endcan
@endsection

@section('content')
    {{-- Filters --}}
    <div class="card mb-3"><div class="card-body">
        <form method="GET" class="row g-2 align-items-end">
            <div class="col-md-3">
                <label class="form-label small mb-1">Class</label>
                <select name="class_id" id="yp_f_class" class="form-select form-select-sm">
                    <option value="">All Classes</option>
                    @foreach($classes as $class)
                        <option value="{{ $class->id }}" @selected(($filters['class_id'] ?? '') == $class->id)>{{ $class->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label small mb-1">Section</label>
                <select name="section_id" id="yp_f_section" class="form-select form-select-sm">
                    <option value="">All Sections</option>
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label small mb-1">Subject</label>
                <select name="subject_id" class="form-select form-select-sm">
                    <option value="">All Subjects</option>
                    @foreach($subjects as $subject)
                        <option value="{{ $subject->id }}" @selected(($filters['subject_id'] ?? '') == $subject->id)>{{ $subject->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3 d-flex gap-2">
                <button class="btn btn-sm btn-primary"><i class="bi bi-funnel me-1"></i>Filter</button>
                <a href="{{ route('yearly-plans.index') }}" class="btn btn-sm btn-light border">Reset</a>
            </div>
        </form>
        @push('scripts')
        <script>
            const YPF_SECTIONS = @json($sections);
            const ypfSelected = @json($filters['section_id'] ?? '');
            function ypfLoad() {
                const classId = document.getElementById('yp_f_class').value;
                const sel = document.getElementById('yp_f_section');
                sel.innerHTML = '<option value="">All Sections</option>';
                YPF_SECTIONS.filter(s => !classId || String(s.class_id) === String(classId)).forEach(s => {
                    const o = document.createElement('option');
                    o.value = s.id; o.textContent = s.name;
                    if (String(s.id) === String(ypfSelected)) o.selected = true;
                    sel.appendChild(o);
                });
            }
            document.getElementById('yp_f_class').addEventListener('change', ypfLoad);
            ypfLoad();
        </script>
        @endpush
    </div></div>

    @if($plans->isEmpty())
        <div class="card"><div class="card-body text-center text-muted py-5">
            <i class="bi bi-calendar3 fs-1 d-block mb-2"></i>No yearly plans yet.
            @can('academics.create')<div class="mt-2"><a href="{{ route('yearly-plans.create') }}" class="btn btn-sm btn-primary">Create the first plan</a></div>@endcan
        </div></div>
    @else
        <div class="row g-3">
            @foreach($plans as $plan)
                <div class="col-md-6 col-xl-4">
                    <div class="card h-100">
                        @if($plan->image_url)
                            <a href="{{ route('yearly-plans.show', $plan) }}"><img src="{{ $plan->image_url }}" class="card-img-top" style="height:160px;object-fit:cover"></a>
                        @else
                            <div class="bg-light d-flex align-items-center justify-content-center" style="height:160px"><i class="bi bi-image text-muted fs-1"></i></div>
                        @endif
                        <div class="card-body">
                            <h6 class="mb-1"><a href="{{ route('yearly-plans.show', $plan) }}" class="text-decoration-none">{{ $plan->title }}</a></h6>
                            <div class="small text-muted mb-2">
                                <span class="badge bg-soft-primary">{{ $plan->schoolClass?->name }}{{ $plan->section ? ' / '.$plan->section->name : '' }}</span>
                                <span class="badge bg-soft-secondary">{{ $plan->subject?->name }}</span>
                                @if($plan->period)<span class="badge bg-soft-info">{{ $plan->period }}</span>@endif
                            </div>
                            <p class="small text-muted mb-0">{{ \Illuminate\Support\Str::limit($plan->description, 90) }}</p>
                        </div>
                        <div class="card-footer bg-white d-flex gap-2">
                            <a href="{{ route('yearly-plans.show', $plan) }}" class="btn btn-sm btn-light border">View</a>
                            @can('academics.update')<a href="{{ route('yearly-plans.edit', $plan) }}" class="btn btn-sm btn-light border"><i class="bi bi-pencil"></i></a>@endcan
                            @can('academics.delete')
                                <form method="POST" action="{{ route('yearly-plans.destroy', $plan) }}" class="ms-auto" data-confirm="Delete this plan?">
                                    @csrf @method('DELETE')<button class="btn btn-sm btn-light border text-danger"><i class="bi bi-trash"></i></button>
                                </form>
                            @endcan
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    @endif
@endsection
