@extends('layouts.school')
@section('title', 'Academic Programs')
@section('header', 'Academic Programs')
@section('content')
    <div class="mb-6 rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-900/5">
        <h3 class="mb-1 font-display text-lg font-semibold text-gray-900">About this section</h3>
        <p class="mb-4 text-sm text-gray-500">These are the programs shown in the <strong>Academic Programs</strong> section of your public website. They are independent of your internal class management records — only the programs configured here appear publicly, and only for your school.</p>
        <form method="POST" action="{{ route('school.cms.store-academic-program', request()->route('schoolId')) }}" enctype="multipart/form-data" class="space-y-4">
            @csrf
            <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
                <div><label class="block text-xs font-medium text-gray-700">Program name *</label><input type="text" name="title" value="{{ old('title') }}" required placeholder="e.g. Primary School" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"></div>
                <div><label class="block text-xs font-medium text-gray-700">Icon</label>
                    <select name="icon" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                        <option value="">— None (use image or default) —</option>
                        @foreach (\App\Services\Website\ProgramVisuals::ICONS as $key => $label)
                            <option value="{{ $key }}" @selected(old('icon') === $key)>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div><label class="block text-xs font-medium text-gray-700">Short description</label><textarea name="description" rows="2" maxlength="1000" placeholder="A short sentence describing this program." class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">{{ old('description') }}</textarea></div>
            <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
                <div>
                    <label class="block text-xs font-medium text-gray-700">Program image <span class="font-normal text-gray-400">(optional)</span></label>
                    <input type="file" name="image" accept="image/jpeg,image/png,image/jpg,image/webp" class="mt-1 block w-full text-sm text-gray-600 file:mr-3 file:rounded-lg file:border-0 file:bg-primary-50 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-primary-700 hover:file:bg-primary-100">
                </div>
                <div><label class="block text-xs font-medium text-gray-700">Learn more link <span class="font-normal text-gray-400">(optional)</span></label><input type="text" name="link" value="{{ old('link') }}" placeholder="academics, admissions or https://..." class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"></div>
            </div>
            <div class="flex flex-wrap items-center justify-between gap-3">
                <label class="flex items-center gap-2 text-sm text-gray-700"><input type="checkbox" name="is_active" value="1" checked class="rounded border-gray-300 text-primary-600 focus:ring-primary-500"> Active (visible publicly)</label>
                <button type="submit" class="rounded-lg bg-primary-600 px-5 py-2 text-sm font-semibold text-white shadow-sm hover:bg-primary-700">Add Program</button>
            </div>
        </form>
    </div>

    <h3 class="mb-3 text-sm font-semibold uppercase tracking-wide text-gray-500">Current programs ({{ $programs->count() }})</h3>
    <div class="space-y-4">
        @forelse($programs as $program)
            <div class="overflow-hidden rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5">
                <div class="flex flex-wrap items-center justify-between gap-3 p-4">
                    <div class="flex flex-wrap items-center gap-3">
                        @if ($program->image)
                            <img src="{{ asset('storage/' . $program->image) }}" alt="{{ $program->title }}" class="h-14 w-14 rounded-lg object-cover ring-1 ring-gray-200">
                        @elseif ($program->icon)
                            <span class="flex h-14 w-14 items-center justify-center rounded-lg bg-primary-50 text-primary-600"><svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">{!! \App\Services\Website\ProgramVisuals::path($program->icon) !!}</svg></span>
                        @else
                            <span class="flex h-14 w-14 items-center justify-center rounded-lg bg-primary-50 text-primary-600">{!! \App\Services\Website\ProgramVisuals::svg() !!}</span>
                        @endif
                        <div>
                            <p class="font-medium text-gray-900">{{ $program->title }}</p>
                            @if ($program->description)<p class="mt-0.5 line-clamp-2 max-w-md text-sm text-gray-500">{{ $program->description }}</p>@endif
                            <span class="mt-1 inline-flex items-center gap-1.5 text-xs text-gray-400">
                                <span class="inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 font-medium text-gray-600">#{{ $program->display_order }}</span>
                                @if ($program->link)<span class="inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 font-medium text-gray-600">{{ $program->link }}</span>@endif
                            </span>
                        </div>
                    </div>
                    <div class="flex flex-wrap items-center gap-3 whitespace-nowrap text-xs">
                        <form method="POST" action="{{ route('school.cms.move-academic-program', [request()->route('schoolId'), $program->id]) }}" class="inline">@csrf @method('PATCH')<input type="hidden" name="direction" value="up"><button type="submit" title="Move up" class="rounded-md border border-gray-200 px-2 py-1 text-gray-500 hover:bg-gray-50">&uarr;</button></form>
                        <form method="POST" action="{{ route('school.cms.move-academic-program', [request()->route('schoolId'), $program->id]) }}" class="inline">@csrf @method('PATCH')<input type="hidden" name="direction" value="down"><button type="submit" title="Move down" class="rounded-md border border-gray-200 px-2 py-1 text-gray-500 hover:bg-gray-50">&darr;</button></form>
                        <button type="button" data-toggle-edit="{{ $program->id }}" class="font-medium text-primary-600 hover:text-primary-800">Edit</button>
                        <span class="inline-flex items-center rounded-full px-2.5 py-0.5 font-medium {{ $program->is_active ? 'bg-emerald-50 text-emerald-700' : 'bg-gray-100 text-gray-500' }}">{{ $program->is_active ? 'Active' : 'Hidden' }}</span>
                        <form method="POST" action="{{ route('school.cms.toggle-academic-program', [request()->route('schoolId'), $program->id]) }}" class="inline">@csrf @method('PATCH')<button type="submit" class="text-gray-500 hover:text-gray-800">{{ $program->is_active ? 'Deactivate' : 'Activate' }}</button></form>
                        <form method="POST" action="{{ route('school.cms.delete-academic-program', [request()->route('schoolId'), $program->id]) }}" class="inline" onsubmit="return confirm('Delete this program?')">@csrf @method('DELETE')<button type="submit" class="text-red-600 hover:text-red-800">Delete</button></form>
                    </div>
                </div>

                <form method="POST" action="{{ route('school.cms.update-academic-program', [request()->route('schoolId'), $program->id]) }}" enctype="multipart/form-data" class="hidden space-y-4 border-t border-gray-100 bg-gray-50/60 p-4" data-edit-panel="{{ $program->id }}">
                    @csrf
                    @method('PUT')
                    <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
                        <div><label class="block text-xs font-medium text-gray-700">Program name *</label><input type="text" name="title" value="{{ $program->title }}" required class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm"></div>
                        <div><label class="block text-xs font-medium text-gray-700">Icon</label>
                            <select name="icon" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm">
                                <option value="">— None —</option>
                                @foreach (\App\Services\Website\ProgramVisuals::ICONS as $key => $label)
                                    <option value="{{ $key }}" @selected($program->icon === $key)>{{ $label }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div><label class="block text-xs font-medium text-gray-700">Short description</label><textarea name="description" rows="2" maxlength="1000" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm">{{ $program->description }}</textarea></div>
                    <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
                        <div>
                            <label class="block text-xs font-medium text-gray-700">Replace image</label>
                            <input type="file" name="image" accept="image/jpeg,image/png,image/jpg,image/webp" class="mt-1 block w-full text-sm text-gray-600 file:mr-3 file:rounded-lg file:border-0 file:bg-primary-50 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-primary-700 hover:file:bg-primary-100">
                            <p class="mt-1 text-xs text-gray-400">Leave empty to keep the current image.</p>
                            @if ($program->image)
                                <label class="mt-2 flex items-center gap-2 text-sm text-gray-600"><input type="checkbox" name="remove_image" value="1" class="rounded border-gray-300 text-primary-600 focus:ring-primary-500"> Remove current image</label>
                            @endif
                        </div>
                        <div><label class="block text-xs font-medium text-gray-700">Learn more link</label><input type="text" name="link" value="{{ $program->link }}" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm"></div>
                    </div>
                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                        <div><label class="block text-xs font-medium text-gray-700">Display order</label><input type="number" name="display_order" value="{{ $program->display_order }}" min="0" max="9999" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm"></div>
                        <div class="flex items-end"><label class="flex items-center gap-2 text-sm text-gray-700"><input type="hidden" name="is_active" value="0"><input type="checkbox" name="is_active" value="1" @checked($program->is_active) class="rounded border-gray-300 text-primary-600 focus:ring-primary-500"> Active</label></div>
                    </div>
                    <div class="flex justify-end"><button type="submit" class="rounded-lg bg-primary-600 px-5 py-2 text-sm font-semibold text-white shadow-sm hover:bg-primary-700">Save Program</button></div>
                </form>
            </div>
        @empty
            <div class="rounded-xl bg-white p-12 text-center text-sm text-gray-500 shadow-sm ring-1 ring-gray-900/5">No programs yet. Add your first program above.</div>
        @endforelse
    </div>

    <script>
        document.addEventListener('click', function (e) {
            var btn = e.target.closest('[data-toggle-edit]');
            if (!btn) return;
            var panel = document.querySelector('[data-edit-panel="' + btn.dataset.toggleEdit + '"]');
            if (panel) panel.classList.toggle('hidden');
        });
    </script>
@endsection