@extends('layouts.admin')
@section('title', $form->id ? 'Edit form' : 'New form')
@section('admin')
@php
    $isNew = ! $form->id;
    $styles = $form->styles ?? ['bg' => '#0f172a', 'fg' => '#f3f4f6', 'accent' => '#dc2626', 'radius' => '8'];
    $fields = old('fields', $form->fields ?? [
        ['name' => 'email',      'label' => 'Email',      'required' => true,  'type' => 'email'],
        ['name' => 'first_name', 'label' => 'First name', 'required' => false, 'type' => 'text'],
    ]);
    $publicUrl = ! $isNew ? route('signup-forms.public', $form->slug) : '';
@endphp
<div class="max-w-5xl" x-data='{ fields: @json(array_values($fields)) }'>
    <div class="mb-4"><a href="{{ route('admin.signup-forms.index') }}" class="text-sm text-gray-400 hover:text-white"><i class="fa-solid fa-arrow-left mr-1"></i>Back</a></div>

    <h1 class="text-2xl font-bold text-white mb-6">{{ $isNew ? 'New signup form' : 'Edit signup form' }}</h1>

    @if(session('success'))
        <div class="mb-4 p-3 rounded bg-emerald-900/40 border border-emerald-800 text-emerald-200 text-sm">{{ session('success') }}</div>
    @endif
    @if($errors->any())
        <div class="mb-4 p-3 rounded bg-red-900/40 border border-red-800 text-red-200 text-sm">
            <ul class="list-disc pl-5">@foreach($errors->all() as $err)<li>{{ $err }}</li>@endforeach</ul>
        </div>
    @endif

    <form method="POST" action="{{ $isNew ? route('admin.signup-forms.store') : route('admin.signup-forms.update', $form) }}" class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        @csrf @if(! $isNew)@method('PUT')@endif

        <div class="lg:col-span-2 space-y-4">
            <div class="bg-gray-900/60 border border-gray-800 rounded-lg p-5 grid grid-cols-1 md:grid-cols-2 gap-4">
                <label class="block text-sm md:col-span-2">
                    <span class="text-gray-400">Name (internal)</span>
                    <input name="name" required value="{{ old('name', $form->name) }}" class="mt-1 w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white">
                </label>
                <label class="block text-sm">
                    <span class="text-gray-400">Mode</span>
                    <select name="mode" class="mt-1 w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white">
                        <option value="inline"  @selected(old('mode', $form->mode) === 'inline')>Inline (embed)</option>
                        <option value="popup"   @selected(old('mode', $form->mode) === 'popup')>Popup (overlay)</option>
                        <option value="landing" @selected(old('mode', $form->mode) === 'landing')>Landing page (hosted)</option>
                    </select>
                </label>
                <label class="block text-sm">
                    <span class="text-gray-400">Active?</span>
                    <select name="is_active" class="mt-1 w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white">
                        <option value="1" @selected(old('is_active', $form->is_active))>Active</option>
                        <option value="0" @selected(! old('is_active', $form->is_active))>Inactive</option>
                    </select>
                </label>
                <label class="block text-sm md:col-span-2">
                    <span class="text-gray-400">Headline</span>
                    <input name="headline" value="{{ old('headline', $form->headline) }}" class="mt-1 w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white">
                </label>
                <label class="block text-sm md:col-span-2">
                    <span class="text-gray-400">Subheadline</span>
                    <textarea name="subheadline" rows="2" class="mt-1 w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white">{{ old('subheadline', $form->subheadline) }}</textarea>
                </label>
                <label class="block text-sm">
                    <span class="text-gray-400">Submit button text</span>
                    <input name="submit_text" required value="{{ old('submit_text', $form->submit_text) }}" class="mt-1 w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white">
                </label>
                <label class="block text-sm">
                    <span class="text-gray-400">Redirect URL after submit (optional)</span>
                    <input name="redirect_url" type="url" value="{{ old('redirect_url', $form->redirect_url) }}" placeholder="https://…" class="mt-1 w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white">
                </label>
                <label class="block text-sm md:col-span-2">
                    <span class="text-gray-400">Success message</span>
                    <textarea name="success_text" rows="2" required class="mt-1 w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white">{{ old('success_text', $form->success_text) }}</textarea>
                </label>
                <label class="block text-sm md:col-span-2">
                    <span class="text-gray-400">Consent text (optional — renders a required checkbox above the submit button)</span>
                    <textarea name="consent_text" rows="2" placeholder="I agree to receive emails and accept the privacy policy." class="mt-1 w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white">{{ old('consent_text', $form->consent_text) }}</textarea>
                </label>
            </div>

            <div class="bg-gray-900/60 border border-gray-800 rounded-lg p-5">
                <div class="flex items-center justify-between mb-3">
                    <h2 class="text-base font-semibold text-white">Form fields</h2>
                    <button type="button" @click="fields.push({ name:'custom_'+fields.length, label:'New field', type:'text', required:false })" class="text-xs px-2 py-1 rounded bg-gray-800 hover:bg-gray-700 text-gray-200">
                        <i class="fa-solid fa-plus mr-1"></i>Add field
                    </button>
                </div>
                <p class="text-xs text-gray-500 mb-3">Email is always required. Use lowercase names (a–z, 0–9, _). Standard names <code>first_name</code>, <code>last_name</code> map to subscriber columns.</p>
                <template x-for="(f, i) in fields" :key="i">
                    <div class="grid grid-cols-12 gap-2 mb-2 items-center">
                        <input type="text" :name="`fields[${i}][name]`" x-model="f.name" placeholder="name" class="col-span-3 bg-gray-950 border border-gray-700 rounded-md px-2 py-1.5 text-white text-sm">
                        <input type="text" :name="`fields[${i}][label]`" x-model="f.label" placeholder="Label" class="col-span-4 bg-gray-950 border border-gray-700 rounded-md px-2 py-1.5 text-white text-sm">
                        <select :name="`fields[${i}][type]`" x-model="f.type" class="col-span-2 bg-gray-950 border border-gray-700 rounded-md px-2 py-1.5 text-white text-sm">
                            <option value="text">text</option>
                            <option value="email">email</option>
                            <option value="tel">tel</option>
                            <option value="number">number</option>
                        </select>
                        <label class="col-span-2 inline-flex items-center gap-1 text-xs text-gray-300">
                            <input type="hidden" :name="`fields[${i}][required]`" :value="f.required ? '1' : '0'">
                            <input type="checkbox" x-model="f.required"> required
                        </label>
                        <button type="button" @click="fields.splice(i,1)" class="col-span-1 text-gray-500 hover:text-red-400 text-sm" :disabled="f.name==='email'" :class="f.name==='email' ? 'opacity-30 cursor-not-allowed' : ''">
                            <i class="fa-solid fa-trash"></i>
                        </button>
                    </div>
                </template>
            </div>

            <div class="bg-gray-900/60 border border-gray-800 rounded-lg p-5">
                <h2 class="text-base font-semibold text-white mb-2">Apply tags on signup</h2>
                <div class="flex flex-wrap gap-2">
                    @foreach($tags as $t)
                        <label class="text-xs text-gray-300 inline-flex items-center gap-1 px-2 py-1 rounded border border-gray-800">
                            <input type="checkbox" name="tag_ids[]" value="{{ $t->id }}" @checked(in_array($t->id, old('tag_ids', $form->tag_ids ?? [])))> {{ $t->name }}
                        </label>
                    @endforeach
                </div>
            </div>

            <div class="bg-gray-900/60 border border-gray-800 rounded-lg p-5 grid grid-cols-2 md:grid-cols-4 gap-3">
                <label class="block text-xs"><span class="text-gray-400">BG</span><input type="color" name="styles[bg]" value="{{ $styles['bg'] }}" class="mt-1 w-full h-10 rounded border border-gray-700"></label>
                <label class="block text-xs"><span class="text-gray-400">Text</span><input type="color" name="styles[fg]" value="{{ $styles['fg'] }}" class="mt-1 w-full h-10 rounded border border-gray-700"></label>
                <label class="block text-xs"><span class="text-gray-400">Accent</span><input type="color" name="styles[accent]" value="{{ $styles['accent'] }}" class="mt-1 w-full h-10 rounded border border-gray-700"></label>
                <label class="block text-xs"><span class="text-gray-400">Radius (px)</span><input type="number" name="styles[radius]" value="{{ $styles['radius'] }}" min="0" max="32" class="mt-1 w-full bg-gray-950 border border-gray-700 rounded-md px-2 py-2 text-white"></label>
            </div>
        </div>

        <aside class="space-y-4">
            <div class="bg-gray-900/60 border border-gray-800 rounded-lg p-5">
                <h3 class="text-sm font-semibold text-white mb-2">Hosted URL</h3>
                @if(! $isNew)
                    <a href="{{ $publicUrl }}" target="_blank" class="text-xs text-red-300 break-all">{{ $publicUrl }}</a>
                    <p class="mt-1 text-xs text-gray-500">Always works — even if mode is "inline" or "popup", you can share this URL directly.</p>
                @else
                    <p class="text-xs text-gray-500">Save first to get a hosted URL.</p>
                @endif
            </div>
            <div class="bg-gray-900/60 border border-gray-800 rounded-lg p-5">
                <h3 class="text-sm font-semibold text-white mb-2">Embed snippet</h3>
                @if(! $isNew)
                    <p class="text-xs text-gray-500 mb-2">Drop this iframe into any HTML page:</p>
                    <textarea readonly onclick="this.select()" rows="3" class="w-full text-[10px] text-gray-200 bg-gray-950 border border-gray-700 rounded p-2 font-mono">&lt;iframe src="{{ $publicUrl }}" width="100%" height="520" frameborder="0" style="border:0;max-width:560px;"&gt;&lt;/iframe&gt;</textarea>
                @else
                    <p class="text-xs text-gray-500">Available after save.</p>
                @endif
            </div>
            <div class="flex flex-col gap-2">
                <button type="submit" class="px-4 py-2 bg-red-700 hover:bg-red-600 text-white rounded-md text-sm w-full">Save form</button>
                @if(! $isNew)
                    <a href="{{ $publicUrl }}" target="_blank" class="px-4 py-2 bg-gray-800 hover:bg-gray-700 text-white rounded-md text-sm w-full text-center"><i class="fa-solid fa-eye mr-1"></i>Preview</a>
                @endif
            </div>
        </aside>
    </form>
</div>
@endsection