@extends('layouts.school')
@section('title', 'Website')
@section('header', 'Website')

@php
    $tab = request('tab', 'branding');
    $tabs = [
        'branding' => 'Branding & Contact',
        'theme' => 'Theme',
        'content' => 'Homepage Content',
        'sections' => 'Homepage Sections',
        'navigation' => 'Navigation & Footer',
        'seo' => 'SEO',
    ];
    $branding = $ws->branding();
    $contact = $ws->contact();
    $social = $ws->social();
    $seo = $ws->seo();
@endphp

@section('content')
    <div class="space-y-6">
        <div class="flex flex-wrap items-center justify-between gap-3">
            <p class="text-sm text-gray-500">
                Public site:
                <a href="{{ $publicUrl }}" target="_blank" rel="noopener" class="font-semibold text-primary-600 hover:underline">{{ $publicUrl }}</a>
            </p>
        </div>

        {{-- Tabs --}}
        <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-1.5 flex flex-wrap gap-1">
            @foreach ($tabs as $key => $label)
                <a href="?tab={{ $key }}"
                   class="rounded-lg px-4 py-2 text-sm font-semibold transition {{ $tab === $key ? 'bg-primary-600 text-white shadow-sm' : 'text-gray-600 hover:bg-gray-100' }}">
                    {!! $label !!}
                </a>
            @endforeach
        </div>

        @if (session('success'))
            <div class="rounded-xl border border-green-200 bg-green-50 px-4 py-3 text-sm font-medium text-green-700">{{ session('success') }}</div>
        @endif
        @if ($errors->any())
            <div class="rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm font-medium text-red-600">{{ $errors->first() }}</div>
        @endif

        @if ($tab === 'branding')
            <form method="POST" action="{{ route('school.website.update', request()->route('schoolId')) }}" enctype="multipart/form-data" class="space-y-6">
                @csrf
                @method('PUT')
                <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-6 space-y-6">
                    <h2 class="text-base font-semibold text-gray-900">Identity</h2>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Tagline</label>
                            <input type="text" name="tagline" value="{{ old('tagline', $branding['tagline']) }}" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Logo</label>
                            <div class="mt-1 flex items-center gap-4">
                                @if ($branding['logo'])
                                    <img src="{{ $branding['logo'] }}" alt="Logo" class="h-12 w-12 rounded-lg object-contain ring-1 ring-gray-200">
                                @endif
                                <input type="file" name="logo" accept=".jpg,.jpeg,.png,.svg,.webp" class="block w-full text-sm text-gray-500 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>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Favicon</label>
                            <div class="mt-1 flex items-center gap-4">
                                <img src="{{ $favicon['href'] }}" alt="Favicon" class="h-12 w-12 rounded-lg object-contain ring-1 ring-gray-200 bg-white p-1">
                                <div class="min-w-0 flex-1">
                                    <input type="file" name="favicon" accept=".ico,.png,.jpg,.jpeg,.webp" class="block w-full text-sm text-gray-500 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">PNG, ICO, JPG or WebP up to 2MB. Leave empty to keep the current one.</p>
                                </div>
                            </div>
                            @if ($favicon['is_default'])
                                <p class="mt-1 text-xs font-medium text-gray-400">Using platform default favicon. Upload a file above to set a custom one.</p>
                            @else
                                <div class="mt-1 flex items-center gap-2 text-xs">
                                    <span class="inline-flex items-center rounded-full bg-green-50 px-2 py-0.5 font-medium text-green-700">Custom favicon active</span>
                                    <form id="remove-favicon-form" method="POST" action="{{ route('school.website.favicon.remove', request()->route('schoolId')) }}" class="inline">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="text-primary-600 hover:underline">Restore default</button>
                                    </form>
                                </div>
                            @endif
                        </div>

                    </div>

                    <h2 class="border-t border-gray-100 pt-6 text-base font-semibold text-gray-900">Brand colors</h2>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                        @foreach ([['color_primary', 'Primary', $branding['primary']], ['color_secondary', 'Secondary', $branding['secondary']], ['color_accent', 'Accent', $branding['accent']]] as [$name, $label, $value])
                            <div>
                                <label class="block text-sm font-medium text-gray-700">{{ $label }}</label>
                                <div class="mt-1 flex items-center gap-3">
                                    <input type="color" name="{{ $name }}" value="{{ old($name, $value) }}" class="h-10 w-14 cursor-pointer rounded-lg border border-gray-300 p-1">
                                    <span class="font-mono text-xs text-gray-400">{{ strtoupper($value) }}</span>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <h2 class="border-t border-gray-100 pt-6 text-base font-semibold text-gray-900">Fonts</h2>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Heading font</label>
                            <select name="font_heading" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                                @foreach ($fonts as $name => $google)
                                    <option value="{{ $name }}" @selected(old('font_heading', $branding['font_heading']) === $name)>{{ $name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Body font</label>
                            <select name="font_body" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                                @foreach ($fonts as $name => $google)
                                    <option value="{{ $name }}" @selected(old('font_body', $branding['font_body']) === $name)>{{ $name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>

                <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-6 space-y-6">
                    <h2 class="text-base font-semibold text-gray-900">Contact information</h2>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Email</label>
                            <input type="email" name="email" value="{{ old('email', $contact['email']) }}" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Phone</label>
                            <input type="text" name="phone" value="{{ old('phone', $contact['phone']) }}" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Alternate phone</label>
                            <input type="text" name="phone_alt" value="{{ old('phone_alt', $contact['phone_alt']) }}" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">WhatsApp number</label>
                            <input type="text" name="whatsapp" value="{{ old('whatsapp', $contact['whatsapp']) }}" placeholder="+234..." class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                        </div>
                        <div class="flex items-center">
                            <input type="checkbox" id="whatsapp_enabled" name="whatsapp_enabled" value="1"
                                   class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500"
                                   @checked($ws->whatsapp()['enabled'])>
                            <label for="whatsapp_enabled" class="ml-2 block text-sm font-medium text-gray-700">Enable WhatsApp chat button</label>
                        </div>
                        <div class="md:col-span-2">
                            <label class="block text-sm font-medium text-gray-700">WhatsApp welcome message (optional)</label>
                            <input type="text" name="whatsapp_message" value="{{ old('whatsapp_message', $ws->whatsapp()['message']) }}" placeholder="Hello, I would like to make an enquiry" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                        </div>
                        <div class="md:col-span-2">
                            <label class="block text-sm font-medium text-gray-700">Address</label>
                            <textarea name="address" rows="2" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">{{ old('address', $contact['address']) }}</textarea>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">City</label>
                            <input type="text" name="city" value="{{ old('city', $contact['city']) }}" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">State</label>
                            <input type="text" name="state" value="{{ old('state', $contact['state']) }}" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Office hours</label>
                            <input type="text" name="hours" value="{{ old('hours', $contact['hours']) }}" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Google Maps URL</label>
                            <input type="url" name="map_url" value="{{ old('map_url', $contact['map_url']) }}" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                        </div>
                    </div>
                </div>

                <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-6 space-y-6">
                    <h2 class="text-base font-semibold text-gray-900">Social media</h2>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        @foreach ([['social_facebook', 'Facebook', $social['facebook']], ['social_instagram', 'Instagram', $social['instagram']], ['social_x', 'X (Twitter)', $social['x']], ['social_youtube', 'YouTube', $social['youtube']], ['social_linkedin', 'LinkedIn', $social['linkedin']]] as [$field, $label, $value])
                            <div>
                                <label class="block text-sm font-medium text-gray-700">{{ $label }} URL</label>
                                <input type="url" name="{{ $field }}" value="{{ old($field, $value) }}" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                            </div>
                        @endforeach
                    </div>
                </div>

                <button type="submit" class="rounded-lg bg-primary-600 px-6 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-primary-700">Save Branding &amp; Contact</button>
            </form>

        @elseif ($tab === 'theme')
            <form method="POST" action="{{ route('school.website.theme', request()->route('schoolId')) }}" class="space-y-6">
                @csrf
                @method('PUT')
                <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-6">
                    <h2 class="text-base font-semibold text-gray-900">Choose a theme</h2>
                    <p class="mt-1 text-sm text-gray-500">Themes set the default palette and fonts. Custom colors from the Branding tab always win.</p>
                    <div class="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-3">
                        @foreach ($themes as $key => $theme)
                            <label class="relative cursor-pointer rounded-xl border-2 p-5 transition {{ old('theme', $ws->themeKey()) === $key ? 'border-primary-600 bg-primary-50/50' : 'border-gray-200 hover:border-gray-300' }}">
                                <input type="radio" name="theme" value="{{ $key }}" class="peer sr-only" @checked(old('theme', $ws->themeKey()) === $key)>
                                <div class="flex items-center justify-between">
                                    <span class="text-sm font-bold text-gray-900">{{ $theme['label'] }}</span>
                                    <span class="flex gap-1">
                                        @foreach ($theme['colors'] as $color)
                                            <span class="h-5 w-5 rounded-full ring-1 ring-black/10" style="background: {{ $color }};"></span>
                                        @endforeach
                                    </span>
                                </div>
                                <p class="mt-2 text-xs text-gray-500">{{ $theme['description'] ?? '' }}</p>
                                <p class="mt-2 text-xs italic text-gray-400">{{ $theme['font_heading'] }} + {{ $theme['font_body'] }}</p>
                            </label>
                        @endforeach
                    </div>
                </div>
                <button type="submit" class="rounded-lg bg-primary-600 px-6 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-primary-700">Apply Theme</button>
            </form>

        @elseif ($tab === 'content')
            <form method="POST" action="{{ route('school.website.content', request()->route('schoolId')) }}" enctype="multipart/form-data" class="space-y-6">
                @csrf
                @method('PUT')
                <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-6 space-y-6">
                    <h2 class="text-base font-semibold text-gray-900">Hero banner</h2>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Hero eyebrow</label>
                        <input type="text" name="hero_eyebrow" value="{{ old('hero_eyebrow', $ws->content('hero_eyebrow')) }}" placeholder="Admissions open for 2026/27" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Hero subtitle</label>
                        <textarea name="hero_subtitle" rows="2" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">{{ old('hero_subtitle', $ws->content('hero_subtitle')) }}</textarea>
                    </div>
                </div>

                <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-6 space-y-6">
                    <h2 class="text-base font-semibold text-gray-900">Welcome section</h2>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Welcome title</label>
                        <input type="text" name="welcome_title" value="{{ old('welcome_title', $ws->content('welcome_title')) }}" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Welcome text</label>
                        <textarea name="welcome_text" rows="4" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">{{ old('welcome_text', $ws->content('welcome_text')) }}</textarea>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Vision statement</label>
                            <textarea name="vision" rows="3" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">{{ old('vision', $ws->content('vision')) }}</textarea>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Mission statement</label>
                            <textarea name="mission" rows="3" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">{{ old('mission', $ws->content('mission')) }}</textarea>
                        </div>
                    </div>
                </div>

                <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-6 space-y-6">
                    <h2 class="text-base font-semibold text-gray-900">Principal&apos;s message</h2>
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
                        <div class="md:col-span-3">
                            <textarea name="principal_message" rows="5" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">{{ old('principal_message', $ws->content('principal_message')) }}</textarea>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Photo</label>
                            @if ($ws->get('website.content.principal_photo'))
                                <img src="{{ asset('storage/' . $ws->get('website.content.principal_photo')) }}" alt="Principal" class="mb-2 h-24 w-24 rounded-full object-cover ring-1 ring-gray-200">
                            @endif
                            <input type="file" name="principal_photo" accept=".jpg,.jpeg,.png,.webp" class="mt-1 block w-full text-xs text-gray-500 file:mr-2 file:rounded-lg file:border-0 file:bg-primary-50 file:px-3 file:py-1.5 file:text-xs file:font-semibold file:text-primary-700 hover:file:bg-primary-100">
                        </div>
                    </div>
                </div>

                <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-6 space-y-4">
                    <h2 class="text-base font-semibold text-gray-900">&quot;Why choose us&quot; highlights</h2>
                    @foreach ($ws->whyUs() as $i => $item)
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
                            <input type="hidden" name="why_us[{{ $i }}][title]" value="">
                            <input type="text" name="why_us[{{ $i }}][title]" value="{{ $item['title'] }}" placeholder="Title" class="block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                            <input type="text" name="why_us[{{ $i }}][text]" value="{{ $item['text'] }}" placeholder="Description" class="md:col-span-2 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                        </div>
                    @endforeach
                </div>

                <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-6 space-y-4">
                    <h2 class="text-base font-semibold text-gray-900">Facilities</h2>
                    @foreach ($ws->facilities() as $i => $item)
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
                            <input type="hidden" name="facilities[{{ $i }}][name]" value="">
                            <input type="text" name="facilities[{{ $i }}][name]" value="{{ $item['name'] }}" placeholder="Facility name" class="block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                            <input type="text" name="facilities[{{ $i }}][description]" value="{{ $item['description'] }}" placeholder="Description" class="md:col-span-2 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                        </div>
                    @endforeach
                </div>

                <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-6 space-y-6">
                    <h2 class="text-base font-semibold text-gray-900">Admissions call-to-action</h2>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Deadline / notice</label>
                        <textarea name="admission_deadline" rows="2" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">{{ old('admission_deadline', $ws->content('admission_deadline')) }}</textarea>
                    </div>
                </div>

                <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-6 space-y-6">
                    <h2 class="text-base font-semibold text-gray-900">Newsletter signup (footer)</h2>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Title</label>
                        <input type="text" name="newsletter_title" value="{{ old('newsletter_title', $ws->content('newsletter_title')) }}" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Text</label>
                        <textarea name="newsletter_text" rows="2" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">{{ old('newsletter_text', $ws->content('newsletter_text')) }}</textarea>
                    </div>
                </div>

                <button type="submit" class="rounded-lg bg-primary-600 px-6 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-primary-700">Save Content</button>
            </form>

        @elseif ($tab === 'sections')
            <form method="POST" action="{{ route('school.website.sections', request()->route('schoolId')) }}" id="sections-form" class="space-y-6">
                @csrf
                @method('PUT')
                <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-6">
                    <h2 class="text-base font-semibold text-gray-900">Homepage sections</h2>
                    <p class="mt-1 text-sm text-gray-500">Tick the sections to show on your homepage and arrange their order with the arrows.</p>
                    <ul id="sections-list" class="mt-6 space-y-2">
                        @foreach ($ws->sections() as $key)
                            @php $meta = $sectionCatalog[$key]; @endphp
                            <li class="flex items-center gap-3 rounded-lg border border-gray-200 bg-gray-50/60 px-4 py-3" data-key="{{ $key }}">
                                <span class="cursor-grab text-gray-300" title="Drag to reorder">&#9776;</span>
                                <input type="checkbox" name="enabled[]" value="{{ $key }}" data-section-toggle
                                       class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500"
                                       @checked(! in_array($key, $ws->disabledSections()))>
                                <div class="min-w-0 flex-1">
                                    <p class="text-sm font-semibold text-gray-900">{{ $meta['label'] }}</p>
                                    <p class="truncate text-xs text-gray-400">{{ $meta['description'] ?? '' }}</p>
                                </div>
                                <span class="flex gap-1">
                                    <button type="button" data-move="-1" class="rounded-md border border-gray-200 bg-white px-2 py-1 text-xs text-gray-500 hover:bg-gray-100">&uarr;</button>
                                    <button type="button" data-move="1" class="rounded-md border border-gray-200 bg-white px-2 py-1 text-xs text-gray-500 hover:bg-gray-100">&darr;</button>
                                </span>
                            </li>
                        @endforeach
                    </ul>
                    <input type="hidden" name="order" id="sections-order">
                    <input type="hidden" name="disabled" id="sections-disabled">
                </div>
                <button type="submit" class="rounded-lg bg-primary-600 px-6 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-primary-700">Save Sections</button>
            </form>
            <script>
                (function () {
                    var list = document.getElementById('sections-list');
                    var form = document.getElementById('sections-form');

                    function sync() {
                        var keys = Array.prototype.map.call(list.querySelectorAll('li'), function (li) { return li.dataset.key; });
                        var disabled = Array.prototype.map.call(list.querySelectorAll('input[data-section-toggle]:not(:checked)'), function (cb) { return cb.closest('li').dataset.key; });
                        document.getElementById('sections-order').value = JSON.stringify(keys);
                        document.getElementById('sections-disabled').value = JSON.stringify(disabled);
                    }

                    form.addEventListener('click', function (e) {
                        var btn = e.target.closest('[data-move]');
                        if (!btn) return;
                        var li = btn.closest('li');
                        if (btn.dataset.move === '-1' && li.previousElementSibling) li.parentNode.insertBefore(li, li.previousElementSibling);
                        if (btn.dataset.move === '1' && li.nextElementSibling) li.parentNode.insertBefore(li.nextElementSibling, li);
                        sync();
                    });
                    form.addEventListener('change', sync);
                    sync();

                    form.addEventListener('submit', function () {
                        // Convert JSON hidden fields into repeated inputs for Laravel array validation
                        ['order', 'disabled'].forEach(function (name) {
                            var input = document.getElementById(name === 'order' ? 'sections-order' : 'sections-disabled');
                            var values = JSON.parse(input.value || '[]');
                            input.name = '';
                            values.forEach(function (v) {
                                var hidden = document.createElement('input');
                                hidden.type = 'hidden';
                                hidden.name = name + '[]';
                                hidden.value = v;
                                form.appendChild(hidden);
                            });
                        });
                    });
                })();
            </script>

        @elseif ($tab === 'navigation')
            <form method="POST" action="{{ route('school.website.navigation', request()->route('schoolId')) }}" id="nav-form" class="space-y-6">
                @csrf
                @method('PUT')
                <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-6 space-y-4">
                    <h2 class="text-base font-semibold text-gray-900">Navigation menu</h2>
                    <p class="text-sm text-gray-500">Leave the URL empty for Home. Use paths like <code class="rounded bg-gray-100 px-1">about</code>, <code class="rounded bg-gray-100 px-1">news</code>, <code class="rounded bg-gray-100 px-1">admissions</code> or a full URL.</p>
                    <div id="nav-items" class="space-y-3">
                        @foreach ($ws->navigation() as $item)
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-3 nav-row">
                                <input type="text" name="navigation[][label]" value="{{ $item['label'] }}" placeholder="Label" class="block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                                <div class="flex gap-2">
                                    <input type="text" name="navigation[][url]" value="{{ $item['url'] }}" placeholder="URL / path" class="block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                                    <button type="button" data-remove-row class="shrink-0 rounded-lg border border-red-200 px-3 text-sm font-bold text-red-500 hover:bg-red-50">&times;</button>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <template id="nav-template">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-3 nav-row">
                            <input type="text" name="navigation[][label]" placeholder="Label" class="block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                            <div class="flex gap-2">
                                <input type="text" name="navigation[][url]" placeholder="URL / path" class="block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                                <button type="button" data-remove-row class="shrink-0 rounded-lg border border-red-200 px-3 text-sm font-bold text-red-500 hover:bg-red-50">&times;</button>
                            </div>
                        </div>
                    </template>
                    <button type="button" id="add-nav" class="rounded-lg border border-dashed border-gray-300 px-4 py-2 text-sm font-semibold text-gray-500 hover:border-primary-400 hover:text-primary-600">+ Add link</button>
                </div>

                <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-6">
                    <h2 class="text-base font-semibold text-gray-900">Footer text</h2>
                    <textarea name="footer_text" rows="2" class="mt-3 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">{{ old('footer_text', $ws->footerText()) }}</textarea>
                    <p class="mt-2 text-xs text-gray-400">Note: footer text also saves with the Branding tab; either place works.</p>
                </div>

                <button type="submit" class="rounded-lg bg-primary-600 px-6 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-primary-700">Save Navigation</button>
            </form>
            <script>
                (function () {
                    var items = document.getElementById('nav-items');
                    var template = document.getElementById('nav-template');
                    document.getElementById('add-nav').addEventListener('click', function () {
                        items.appendChild(template.content.cloneNode(true));
                    });
                    items.addEventListener('click', function (e) {
                        var btn = e.target.closest('[data-remove-row]');
                        if (btn) btn.closest('.nav-row').remove();
                    });
                })();
            </script>

        @elseif ($tab === 'seo')
            <form method="POST" action="{{ route('school.website.seo', request()->route('schoolId')) }}" enctype="multipart/form-data" class="space-y-6">
                @csrf
                @method('PUT')
                <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-6 space-y-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Meta title template</label>
                        <input type="text" name="seo_title_template" value="{{ old('seo_title_template', $seo['title_template']) }}" placeholder=":page | School Name" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                        <p class="mt-1 text-xs text-gray-400"><code>:page</code> is replaced by the page name.</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Meta description</label>
                        <textarea name="seo_meta_description" rows="3" maxlength="500" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">{{ old('seo_meta_description', $seo['meta_description']) }}</textarea>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Robots directive</label>
                            <select name="seo_robots" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                                @foreach (['index,follow' => 'index, follow', 'noindex,nofollow' => 'noindex, nofollow'] as $value => $label)
                                    <option value="{{ $value }}" @selected(old('seo_robots', $seo['robots']) === $value)>{{ $label }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Search console verification code</label>
                            <input type="text" name="seo_verification" value="{{ old('seo_verification', $seo['verification']) }}" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Social share image (og:image)</label>
                        @if ($seo['og_image'])
                            <img src="{{ asset('storage/' . $seo['og_image']) }}" alt="OG image" class="mb-2 h-20 rounded-lg object-cover ring-1 ring-gray-200">
                        @endif
                        <input type="file" name="og_image" accept=".jpg,.jpeg,.png,.webp" class="mt-1 block w-full text-sm text-gray-500 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>
                <button type="submit" class="rounded-lg bg-primary-600 px-6 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-primary-700">Save SEO Settings</button>
            </form>
        @endif
    </div>
@endsection