@extends('layouts.admin')
@section('title', 'Form Settings')

@section('content')
<div class="max-w-4xl mx-auto">
    {{-- Breadcrumb --}}
    <div class="flex items-center gap-2 text-sm text-on-surface-variant mb-6">
        <a href="{{ route('admin.forms.index') }}" class="hover:text-primary">My Forms</a>
        <span>/</span>
        <a href="{{ route('admin.forms.builder', $form) }}" class="hover:text-primary">{{ $form->title }}</a>
        <span>/</span>
        <span class="text-on-surface font-medium">Settings</span>
    </div>

    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-2xl font-bold text-on-surface tracking-tight">Form Settings</h1>
            <p class="text-sm text-on-surface-variant mt-1">Manage your form configuration, behavior, and access permissions.</p>
        </div>
        <div class="flex items-center gap-3">
            <a href="{{ route('forms.public.show', $form->slug) }}" target="_blank"
               class="px-4 py-2 border border-outline-variant rounded-lg text-sm font-medium text-on-surface-variant hover:bg-surface-container transition">
                Preview Form
            </a>
        </div>
    </div>

    <form method="POST" action="{{ route('admin.forms.update', $form) }}" x-data="{ activeTab: 'general' }">
        @csrf
        @method('PUT')

        {{-- Tabs --}}
        <div class="flex gap-6 border-b border-outline-variant mb-6">
            <button type="button" @click="activeTab = 'general'"
                    class="pb-3 text-sm font-medium border-b-2 transition"
                    :class="activeTab === 'general' ? 'border-primary text-primary' : 'border-transparent text-on-surface-variant hover:text-on-surface'">
                General
            </button>
            <button type="button" @click="activeTab = 'behaviour'"
                    class="pb-3 text-sm font-medium border-b-2 transition"
                    :class="activeTab === 'behaviour' ? 'border-primary text-primary' : 'border-transparent text-on-surface-variant hover:text-on-surface'">
                Behaviour
            </button>
            <button type="button" @click="activeTab = 'notifications'"
                    class="pb-3 text-sm font-medium border-b-2 transition"
                    :class="activeTab === 'notifications' ? 'border-primary text-primary' : 'border-transparent text-on-surface-variant hover:text-on-surface'">
                Notifications
            </button>
            <button type="button" @click="activeTab = 'access'"
                    class="pb-3 text-sm font-medium border-b-2 transition"
                    :class="activeTab === 'access' ? 'border-primary text-primary' : 'border-transparent text-on-surface-variant hover:text-on-surface'">
                Access
            </button>
        </div>

        {{-- General Tab --}}
        <div x-show="activeTab === 'general'" class="space-y-6">
            <div class="bg-white rounded-xl border border-outline-variant p-6 shadow-sm">
                <h3 class="text-lg font-semibold text-on-surface mb-1">General Information</h3>
                <p class="text-sm text-on-surface-variant mb-6">Basic identification details for this form.</p>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-on-surface mb-1.5">Form Title</label>
                        <input type="text" name="title" value="{{ old('title', $form->title) }}" required
                               class="w-full px-4 py-2.5 border border-outline-variant rounded-lg text-sm focus:border-primary focus:ring-2 focus:ring-primary/10 outline-none">
                        @error('title') <p class="mt-1 text-sm text-error">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-on-surface mb-1.5">Status</label>
                        <div class="flex items-center gap-3 mt-2" x-data="{ active: {{ $form->status === 'active' ? 'true' : 'false' }} }">
                            <input type="hidden" name="status" :value="active ? 'active' : 'inactive'">
                            <button type="button" @click="active = !active"
                                    class="relative w-11 h-6 rounded-full transition-colors"
                                    :class="active ? 'bg-primary' : 'bg-outline-variant'">
                                <span class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full shadow transition-transform"
                                      :class="active ? 'translate-x-5' : ''"></span>
                            </button>
                            <span class="text-sm font-medium" x-text="active ? 'Active' : 'Inactive'"></span>
                        </div>
                    </div>
                </div>

                <div class="mt-6">
                    <label class="block text-sm font-medium text-on-surface mb-1.5">Description</label>
                    <textarea name="description" rows="3"
                              class="w-full px-4 py-2.5 border border-outline-variant rounded-lg text-sm focus:border-primary focus:ring-2 focus:ring-primary/10 outline-none resize-none">{{ old('description', $form->description) }}</textarea>
                </div>
            </div>

            {{-- Form Availability --}}
            <div class="bg-white rounded-xl border border-outline-variant p-6 shadow-sm">
                <h3 class="text-lg font-semibold text-on-surface mb-1">Form Availability</h3>
                <p class="text-sm text-on-surface-variant mb-6">Control when users can access and submit the form.</p>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-on-surface mb-1.5">Start Date & Time</label>
                        <input type="datetime-local" name="start_date"
                               value="{{ old('start_date', $form->start_date?->format('Y-m-d\TH:i')) }}"
                               class="w-full px-4 py-2.5 border border-outline-variant rounded-lg text-sm focus:border-primary focus:ring-2 focus:ring-primary/10 outline-none">
                        <p class="text-xs text-on-surface-variant mt-1">Form will automatically open at this time.</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-on-surface mb-1.5">End Date & Time</label>
                        <input type="datetime-local" name="end_date"
                               value="{{ old('end_date', $form->end_date?->format('Y-m-d\TH:i')) }}"
                               class="w-full px-4 py-2.5 border border-outline-variant rounded-lg text-sm focus:border-primary focus:ring-2 focus:ring-primary/10 outline-none">
                        <p class="text-xs text-on-surface-variant mt-1">Form will automatically close after this time.</p>
                    </div>
                </div>
            </div>
        </div>

        {{-- Behaviour Tab --}}
        <div x-show="activeTab === 'behaviour'" class="space-y-6">
            <div class="bg-white rounded-xl border border-outline-variant p-6 shadow-sm">
                <h3 class="text-lg font-semibold text-on-surface mb-6">After Submission</h3>

                <div class="space-y-6">
                    <div>
                        <label class="block text-sm font-medium text-on-surface mb-1.5">Success Message</label>
                        <textarea name="success_message" rows="3"
                                  class="w-full px-4 py-2.5 border border-outline-variant rounded-lg text-sm focus:border-primary focus:ring-2 focus:ring-primary/10 outline-none resize-none"
                                  placeholder="Thank you! Your submission has been received.">{{ old('success_message', $form->success_message) }}</textarea>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-on-surface mb-1.5">Redirect URL (optional)</label>
                        <input type="url" name="redirect_url" value="{{ old('redirect_url', $form->redirect_url) }}"
                               class="w-full px-4 py-2.5 border border-outline-variant rounded-lg text-sm focus:border-primary focus:ring-2 focus:ring-primary/10 outline-none"
                               placeholder="https://aopn.org/thank-you">
                        <p class="text-xs text-on-surface-variant mt-1">If set, users will be redirected here after submission.</p>
                    </div>
                </div>
            </div>
        </div>

        {{-- Notifications Tab --}}
        <div x-show="activeTab === 'notifications'" class="space-y-6">
            <div class="bg-white rounded-xl border border-outline-variant p-6 shadow-sm">
                <h3 class="text-lg font-semibold text-on-surface mb-6">Email Notifications</h3>

                <div class="space-y-6">
                    <div>
                        <label class="block text-sm font-medium text-on-surface mb-1.5">Admin Notification Email</label>
                        <input type="email" name="notification_email" value="{{ old('notification_email', $form->notification_email) }}"
                               class="w-full px-4 py-2.5 border border-outline-variant rounded-lg text-sm focus:border-primary focus:ring-2 focus:ring-primary/10 outline-none"
                               placeholder="admin@aopn.org">
                        <p class="text-xs text-on-surface-variant mt-1">Receive an email when someone submits this form.</p>
                    </div>

                    <div class="border-t border-outline-variant pt-6" x-data="{ enabled: {{ $form->autoresponder_enabled ? 'true' : 'false' }} }">
                        <div class="flex items-center justify-between mb-4">
                            <div>
                                <h4 class="text-sm font-medium text-on-surface">Auto-Response Email</h4>
                                <p class="text-xs text-on-surface-variant">Automatically send a confirmation email to submitters.</p>
                            </div>
                            <input type="hidden" name="autoresponder_enabled" :value="enabled ? '1' : '0'">
                            <button type="button" @click="enabled = !enabled"
                                    class="relative w-11 h-6 rounded-full transition-colors"
                                    :class="enabled ? 'bg-primary' : 'bg-outline-variant'">
                                <span class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full shadow transition-transform"
                                      :class="enabled ? 'translate-x-5' : ''"></span>
                            </button>
                        </div>
                        <div x-show="enabled" class="space-y-4">
                            <div>
                                <label class="block text-sm font-medium text-on-surface mb-1.5">Subject</label>
                                <input type="text" name="autoresponder_subject" value="{{ old('autoresponder_subject', $form->autoresponder_subject) }}"
                                       class="w-full px-4 py-2.5 border border-outline-variant rounded-lg text-sm focus:border-primary focus:ring-2 focus:ring-primary/10 outline-none"
                                       placeholder="Thank you for your submission">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-on-surface mb-1.5">Message</label>
                                <textarea name="autoresponder_message" rows="4"
                                          class="w-full px-4 py-2.5 border border-outline-variant rounded-lg text-sm focus:border-primary focus:ring-2 focus:ring-primary/10 outline-none resize-none"
                                          placeholder="Thank you for submitting your application...">{{ old('autoresponder_message', $form->autoresponder_message) }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Access Tab --}}
        <div x-show="activeTab === 'access'" class="space-y-6">
            <div class="bg-white rounded-xl border border-outline-variant p-6 shadow-sm">
                <h3 class="text-lg font-semibold text-on-surface mb-6">Access Settings</h3>

                <div x-data="{ isPublic: {{ $form->is_public ? 'true' : 'false' }} }">
                    <input type="hidden" name="is_public" :value="isPublic ? '1' : '0'">
                    <label class="flex items-center justify-between">
                        <div>
                            <span class="text-sm font-medium text-on-surface">Public Form</span>
                            <p class="text-xs text-on-surface-variant">Anyone with the link can access this form.</p>
                        </div>
                        <button type="button" @click="isPublic = !isPublic"
                                class="relative w-11 h-6 rounded-full transition-colors"
                                :class="isPublic ? 'bg-primary' : 'bg-outline-variant'">
                            <span class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full shadow transition-transform"
                                  :class="isPublic ? 'translate-x-5' : ''"></span>
                        </button>
                    </label>
                </div>

                <div class="mt-6 p-4 bg-primary-50/50 rounded-lg">
                    <p class="text-sm text-primary font-medium">Public URL</p>
                    <p class="text-sm text-on-surface-variant mt-1">{{ $form->getPublicUrl() }}</p>
                </div>
            </div>
        </div>

        {{-- Actions --}}
        <div class="flex items-center justify-between mt-8 pt-6 border-t border-outline-variant">
            <button type="button" onclick="if(confirm('Archive this form?')) document.getElementById('delete-form').submit()"
                    class="text-sm text-error hover:text-red-700 font-medium flex items-center gap-1">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                Archive Form
            </button>
            <div class="flex items-center gap-3">
                <a href="{{ route('admin.forms.builder', $form) }}" class="px-4 py-2.5 text-sm font-medium text-on-surface-variant hover:text-on-surface transition">Discard Changes</a>
                <button type="submit" class="bg-primary hover:bg-primary-dark text-white px-6 py-2.5 rounded-lg text-sm font-medium transition">
                    Save Settings
                </button>
            </div>
        </div>
    </form>

    <form id="delete-form" method="POST" action="{{ route('admin.forms.destroy', $form) }}" class="hidden">
        @csrf @method('DELETE')
    </form>
</div>
@endsection