@extends('layouts.school')

@section('title', $form->title)
@section('header', 'Form Builder')

@section('content')
    <div class="mb-6 flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
        <div class="flex items-center gap-3">
            <h2 class="text-xl font-display font-semibold text-gray-900">{{ $form->title }}</h2>
            <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold {{ match ($form->status) {
                'published' => 'bg-green-50 text-green-700',
                'archived' => 'bg-gray-100 text-gray-400',
                default => 'bg-blue-50 text-blue-700',
            } }}">{{ $form->status_label }}</span>
            <span class="text-xs text-gray-500">v{{ $form->version }}</span>
        </div>
        <div class="flex flex-wrap gap-2">
            @if ($form->status !== 'published')
                <form method="POST" action="{{ route('school.admission.forms.publish', [request()->route('schoolId'), $form->id]) }}">
                    @csrf @method('PATCH')
                    <button type="submit" class="rounded-lg bg-green-600 px-4 py-2 text-sm font-medium text-white hover:bg-green-700">Publish Form</button>
                </form>
            @endif
            <form method="POST" action="{{ route('school.admission.forms.duplicate', [request()->route('schoolId'), $form->id]) }}">
                @csrf
                <button type="submit" class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">Duplicate</button>
            </form>
            @if ($form->status === 'published' && $form->applications()->exists())
                <button disabled class="cursor-not-allowed rounded-lg border border-gray-200 bg-gray-50 px-4 py-2 text-sm font-medium text-gray-400" title="Cannot archive a form that already has applications">Archive</button>
            @elseif ($form->status !== 'archived')
                <form method="POST" action="{{ route('school.admission.forms.archive', [request()->route('schoolId'), $form->id]) }}">
                    @csrf @method('PATCH')
                    <button type="submit" class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">Archive</button>
                </form>
            @endif
        </div>
    </div>

    <div class="card mb-6 max-w-3xl">
        <form method="POST" action="{{ route('school.admission.forms.update', [request()->route('schoolId'), $form->id]) }}" class="grid gap-4 px-6 py-5 sm:grid-cols-3">
            @csrf @method('PUT')
            <div class="sm:col-span-2">
                <label class="label">Form Title</label>
                <input type="text" name="title" value="{{ old('title', $form->title) }}" class="input">
            </div>
            <div>
                <label class="label">Status</label>
                <select name="status" class="input">
                    @foreach (['draft', 'published', 'archived'] as $status)
                        <option value="{{ $status }}" {{ $form->status === $status ? 'selected' : '' }}>{{ ucfirst($status) }}</option>
                    @endforeach
                </select>
            </div>
            <div class="sm:col-span-3 flex justify-end">
                <button type="submit" class="rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200">Save Details</button>
            </div>
        </form>
    </div>

    <div class="space-y-6">
        @foreach ($form->sections as $index => $section)
            <div class="card">
                <div class="flex items-center justify-between border-b border-gray-200 px-6 py-4">
                    <div>
                        <h3 class="text-base font-display font-semibold text-gray-900">
                            @if ($form->sections->count() > 1)
                                <span class="mr-2 text-xs font-bold uppercase text-gray-400">Section {{ $index + 1 }}</span>
                            @endif
                            {{ $section->title }}
                        </h3>
                        @if ($section->description)
                            <p class="mt-0.5 text-sm text-gray-500">{{ $section->description }}</p>
                        @endif
                    </div>
                    <div class="flex items-center gap-2">
                        @if ($form->sections->count() > 1)
                            <form method="POST" action="{{ route('school.admission.forms.sections.move', [request()->route('schoolId'), $form->id, $section->id]) }}" class="inline">
                                @csrf @method('PATCH')
                                <button type="submit" name="direction" value="up" @disabled($index === 0) class="rounded border border-gray-300 px-2 py-1 text-xs font-medium text-gray-600 disabled:opacity-40">Up</button>
                            </form>
                            <form method="POST" action="{{ route('school.admission.forms.sections.move', [request()->route('schoolId'), $form->id, $section->id]) }}" class="inline">
                                @csrf @method('PATCH')
                                <button type="submit" name="direction" value="down" @disabled($index === $form->sections->count() - 1) class="rounded border border-gray-300 px-2 py-1 text-xs font-medium text-gray-600 disabled:opacity-40">Down</button>
                            </form>
                        @endif
                        <details class="relative inline-block">
                            <summary class="cursor-pointer list-none text-xs font-medium text-gray-500 hover:text-gray-700">Edit</summary>
                            <div class="absolute right-0 top-6 z-10 w-80 rounded-xl border border-gray-200 bg-white p-4 shadow-lg">
                                <form method="POST" action="{{ route('school.admission.forms.sections.update', [request()->route('schoolId'), $form->id, $section->id]) }}" class="space-y-3">
                                    @csrf @method('PUT')
                                    <div>
                                        <label class="label">Title</label>
                                        <input type="text" name="title" value="{{ $section->title }}" class="input">
                                    </div>
                                    <div>
                                        <label class="label">Description</label>
                                        <textarea name="description" rows="2" class="input">{{ $section->description }}</textarea>
                                    </div>
                                    <button type="submit" class="rounded-lg bg-primary-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-primary-700">Save</button>
                                </form>
                                @if (! $section->fields()->exists())
                                    <form method="POST" action="{{ route('school.admission.forms.sections.destroy', [request()->route('schoolId'), $form->id, $section->id]) }}" class="mt-3 border-t border-gray-100 pt-3"
                                          onsubmit="return confirm('Delete this section?');">
                                        @csrf @method('DELETE')
                                        <button type="submit" class="text-xs font-medium text-rose-600 hover:text-rose-700">Delete section</button>
                                    </form>
                                @endif
                            </div>
                        </details>
                    </div>
                </div>

                <div class="divide-y divide-gray-100">
                    @foreach ($section->fields as $fieldIndex => $field)
                        <div class="flex flex-col gap-3 px-6 py-4 sm:flex-row sm:items-center sm:justify-between">
                            <div>
                                <p class="text-sm font-medium text-gray-800">
                                    {{ $field->label }}
                                    @if ($field->is_required) <span class="text-rose-500">*</span> @endif
                                    @if ($field->is_core) <span class="ml-1 rounded bg-indigo-50 px-1.5 py-0.5 text-[10px] font-semibold text-indigo-600">CORE</span> @endif
                                </p>
                                <p class="mt-0.5 text-xs text-gray-500">
                                    <span class="font-mono">{{ $field->name }}</span>
                                    · {{ $field->type_label }}
                                    @if (in_array($field->type, ['select', 'radio', 'checkbox'], true) && $field->options)
                                        · {{ count($field->options) }} options
                                    @endif
                                </p>
                            </div>
                            <div class="flex shrink-0 items-center gap-2">
                                @if ($section->fields->count() > 1)
                                    <form method="POST" action="{{ route('school.admission.forms.fields.move', [request()->route('schoolId'), $form->id, $section->id, $field->id]) }}" class="inline">
                                        @csrf @method('PATCH')
                                        <button type="submit" name="direction" value="up" @disabled($fieldIndex === 0) class="rounded border border-gray-300 px-2 py-1 text-xs font-medium text-gray-600 disabled:opacity-40">Up</button>
                                    </form>
                                    <form method="POST" action="{{ route('school.admission.forms.fields.move', [request()->route('schoolId'), $form->id, $section->id, $field->id]) }}" class="inline">
                                        @csrf @method('PATCH')
                                        <button type="submit" name="direction" value="down" @disabled($fieldIndex === $section->fields->count() - 1) class="rounded border border-gray-300 px-2 py-1 text-xs font-medium text-gray-600 disabled:opacity-40">Down</button>
                                    </form>
                                    @if ($form->sections->count() > 1)
                                        <form method="POST" action="{{ route('school.admission.forms.fields.move', [request()->route('schoolId'), $form->id, $section->id, $field->id]) }}" class="inline">
                                            @csrf @method('PATCH')
                                            <select name="target_section" onchange="this.form.submit()" class="rounded border border-gray-300 px-2 py-1 text-xs text-gray-600">
                                                <option value="">Move to…</option>
                                                @foreach ($form->sections as $target)
                                                    @if ($target->id !== $section->id)
                                                        <option value="{{ $target->id }}">{{ $target->title }}</option>
                                                    @endif
                                                @endforeach
                                            </select>
                                        </form>
                                    @endif
                                @endif
                                <details class="relative inline-block">
                                    <summary class="cursor-pointer list-none text-xs font-medium text-gray-500 hover:text-gray-700">Edit</summary>
                                    <div class="absolute right-0 top-6 z-10 w-96 rounded-xl border border-gray-200 bg-white p-4 shadow-lg">
                                        <form method="POST" action="{{ route('school.admission.forms.fields.update', [request()->route('schoolId'), $form->id, $section->id, $field->id]) }}" class="space-y-3">
                                            @csrf @method('PUT')
                                            @include('school.admission.forms._field-inputs', ['field' => $field])
                                            <button type="submit" class="rounded-lg bg-primary-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-primary-700">Save Field</button>
                                        </form>
                                        <form method="POST" action="{{ route('school.admission.forms.fields.destroy', [request()->route('schoolId'), $form->id, $section->id, $field->id]) }}" class="mt-3 border-t border-gray-100 pt-3"
                                              onsubmit="return confirm('Delete this field? Answers for existing applications are unaffected.');">
                                            @csrf @method('DELETE')
                                            <button type="submit" class="text-xs font-medium text-rose-600 hover:text-rose-700">Delete field</button>
                                        </form>
                                    </div>
                                </details>
                            </div>
                        </div>
                    @endforeach

                    <div class="px-6 py-4">
                        <details>
                            <summary class="cursor-pointer list-none text-sm font-medium text-primary-600 hover:text-primary-700">+ Add Field</summary>
                            <form method="POST" action="{{ route('school.admission.forms.fields.store', [request()->route('schoolId'), $form->id, $section->id]) }}"
                                  class="mt-4 grid gap-3 rounded-xl border border-gray-200 bg-gray-50 p-4 sm:grid-cols-2">
                                @csrf
                                @include('school.admission.forms._field-inputs', ['field' => null])
                                <div class="sm:col-span-2 flex justify-end">
                                    <button type="submit" class="rounded-lg bg-primary-600 px-4 py-2 text-sm font-medium text-white hover:bg-primary-700">Add Field</button>
                                </div>
                            </form>
                        </details>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    <div class="card mt-6 max-w-3xl">
        <form method="POST" action="{{ route('school.admission.forms.sections.store', [request()->route('schoolId'), $form->id]) }}" class="grid gap-4 px-6 py-5 sm:grid-cols-3">
            @csrf
            <div class="sm:col-span-2">
                <label class="label">New Section Title</label>
                <input type="text" name="title" value="{{ old('title') }}" class="input" placeholder="e.g. School History">
            </div>
            <div class="flex items-end">
                <button type="submit" class="rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200">Add Section</button>
            </div>
            <div class="sm:col-span-3">
                <label class="label">Section Description (optional)</label>
                <input type="text" name="description" value="{{ old('description') }}" class="input">
            </div>
        </form>
    </div>
@endsection