@extends('layouts.admin')
@section('title', $page->exists ? 'Edit — ' . $page->title : 'New Landing Page')

@section('admin')
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    @include('admin._nav')

    <nav class="flex items-center gap-2 text-xs text-gray-600 mb-5">
        <a href="{{ route('admin.landing-pages.index') }}" class="hover:text-gray-400 transition-colors">Landing Pages</a>
        <i class="fa-solid fa-chevron-right text-[9px]"></i>
        <span class="text-gray-400">{{ $page->exists ? Str::limit($page->title, 40) : 'New' }}</span>
    </nav>

    <div class="flex items-center justify-between mb-6">
        <h1 class="text-2xl font-bold text-white">{{ $page->exists ? 'Edit Landing Page' : 'New Landing Page' }}</h1>
        @if($page->exists && $page->status === 'published')
            <a href="{{ route('landing.show', $page->slug) }}" target="_blank"
               class="text-sm text-blue-400 hover:text-blue-300 inline-flex items-center gap-1">
                <i class="fa-solid fa-arrow-up-right-from-square text-[10px]"></i> View live
            </a>
        @endif
    </div>

    @if(session('success'))
    <div class="mb-5 p-3 rounded-xl bg-emerald-900/30 border border-emerald-700/50 text-emerald-300 text-sm">{{ session('success') }}</div>
    @endif
    @if($errors->any())
    <div class="mb-5 p-3 rounded-xl bg-red-900/30 border border-red-700/50 text-red-300 text-sm">
        <ul class="list-disc pl-5 space-y-0.5">
        @foreach($errors->all() as $err)<li>{{ $err }}</li>@endforeach
        </ul>
    </div>
    @endif

    <form method="POST" action="{{ $page->exists ? route('admin.landing-pages.update', $page) : route('admin.landing-pages.store') }}" class="space-y-5">
        @csrf
        @if($page->exists)@method('PUT')@endif

        <div class="bg-gradient-to-br from-gray-900 to-gray-950 border border-gray-800 rounded-xl p-6 space-y-4">
            <h2 class="text-sm font-semibold text-white uppercase tracking-wider">Page Details</h2>

            <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                <div class="sm:col-span-2">
                    <label class="block text-xs text-gray-400 mb-1">Title (browser tab + admin label)</label>
                    <input name="title" required value="{{ old('title', $page->title) }}"
                           class="w-full px-3 py-2.5 bg-gray-950 border border-gray-700 rounded-lg text-white text-sm focus:outline-none focus:border-red-600">
                </div>
                <div>
                    <label class="block text-xs text-gray-400 mb-1">Slug</label>
                    <div class="flex items-center bg-gray-950 border border-gray-700 rounded-lg overflow-hidden focus-within:border-red-600">
                        <span class="px-2 text-xs text-gray-600 border-r border-gray-700">/lp/</span>
                        <input name="slug" required value="{{ old('slug', $page->slug) }}"
                               pattern="[-a-z0-9]+" placeholder="welcome-friend"
                               class="flex-1 px-2 py-2.5 bg-transparent text-white text-sm focus:outline-none">
                    </div>
                </div>
            </div>

            <div>
                <label class="block text-xs text-gray-400 mb-1">Headline (large hero text)</label>
                <input name="headline" required value="{{ old('headline', $page->headline) }}"
                       class="w-full px-3 py-2.5 bg-gray-950 border border-gray-700 rounded-lg text-white text-sm focus:outline-none focus:border-red-600">
            </div>
            <div>
                <label class="block text-xs text-gray-400 mb-1">Subheadline</label>
                <input name="subheadline" value="{{ old('subheadline', $page->subheadline) }}"
                       class="w-full px-3 py-2.5 bg-gray-950 border border-gray-700 rounded-lg text-white text-sm focus:outline-none focus:border-red-600">
            </div>
            <div>
                <div class="flex items-center justify-between mb-2">
                    <label class="block text-xs text-gray-400">Page Body — Drag &amp; Drop Builder</label>
                    <span class="text-[10px] text-gray-600">Powered by GrapesJS</span>
                </div>
                <div id="landing-builder" class="border border-gray-800 rounded-lg overflow-hidden bg-white"></div>
                <input type="hidden" name="body_html"    id="lp-body-html"    value="{{ old('body_html', $page->body_html) }}">
                <input type="hidden" name="builder_data" id="lp-builder-data" value="{{ old('builder_data', $page->builder_data) }}">
                <input type="hidden" name="compiled_css" id="lp-compiled-css" value="{{ old('compiled_css', $page->compiled_css) }}">
                <p class="text-[11px] text-gray-600 mt-2">Tip: Open the <strong>Blocks</strong> panel (left), drag a section onto the canvas, then click any element to style it.</p>
            </div>
            <div>
                <label class="block text-xs text-gray-400 mb-1">Hero Image URL (optional, used as fallback background)</label>
                <input name="hero_image_url" type="url" value="{{ old('hero_image_url', $page->hero_image_url) }}"
                       placeholder="https://..."
                       class="w-full px-3 py-2.5 bg-gray-950 border border-gray-700 rounded-lg text-white text-sm focus:outline-none focus:border-red-600">
            </div>
        </div>

        <div class="bg-gradient-to-br from-gray-900 to-gray-950 border border-gray-800 rounded-xl p-6 space-y-4">
            <h2 class="text-sm font-semibold text-white uppercase tracking-wider">Form &amp; Tags</h2>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                <div>
                    <label class="block text-xs text-gray-400 mb-1">Button Text</label>
                    <input name="cta_button_text" required value="{{ old('cta_button_text', $page->cta_button_text) }}"
                           class="w-full px-3 py-2.5 bg-gray-950 border border-gray-700 rounded-lg text-white text-sm focus:outline-none focus:border-red-600">
                </div>
                <div>
                    <label class="block text-xs text-gray-400 mb-1">Source Label (attribution)</label>
                    <input name="source_label" value="{{ old('source_label', $page->source_label) }}"
                           placeholder="defaults to landing:&lt;slug&gt;"
                           class="w-full px-3 py-2.5 bg-gray-950 border border-gray-700 rounded-lg text-white text-sm focus:outline-none focus:border-red-600">
                </div>
            </div>

            <div>
                <label class="block text-xs text-gray-400 mb-1">Thank-you Message</label>
                <input name="thank_you_message" required value="{{ old('thank_you_message', $page->thank_you_message) }}"
                       class="w-full px-3 py-2.5 bg-gray-950 border border-gray-700 rounded-lg text-white text-sm focus:outline-none focus:border-red-600">
            </div>

            <div>
                <label class="block text-xs text-gray-400 mb-1">Redirect URL after submit (optional, overrides thank-you page)</label>
                <input name="redirect_url" type="url" value="{{ old('redirect_url', $page->redirect_url) }}"
                       placeholder="https://..."
                       class="w-full px-3 py-2.5 bg-gray-950 border border-gray-700 rounded-lg text-white text-sm focus:outline-none focus:border-red-600">
            </div>

            <div>
                <label class="block text-xs text-gray-400 mb-2">Tags applied on signup</label>
                @php
                    $allTags = \App\Models\Tag::orderBy('name')->get();
                    $selected = old('tag_slugs', $page->tag_slugs ?? []);
                @endphp
                <div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
                    @foreach($allTags as $tag)
                    <label class="flex items-center gap-2 p-2 rounded-lg bg-gray-950/60 border border-gray-800/60 hover:border-gray-700 cursor-pointer transition-colors">
                        <input type="checkbox" name="tag_slugs[]" value="{{ $tag->slug }}"
                               {{ in_array($tag->slug, (array) $selected) ? 'checked' : '' }}
                               class="w-4 h-4 rounded border-gray-600 bg-gray-900 text-red-500 focus:ring-red-500">
                        <span class="text-xs text-gray-300">{{ $tag->name }}</span>
                    </label>
                    @endforeach
                </div>
            </div>
        </div>

        <div class="bg-gradient-to-br from-gray-900 to-gray-950 border border-gray-800 rounded-xl p-6">
            <h2 class="text-sm font-semibold text-white uppercase tracking-wider mb-4">Publishing</h2>
            <div class="flex flex-wrap items-center gap-4 mb-5">
                @foreach(['draft'=>'Draft','published'=>'Published'] as $val => $label)
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="radio" name="status" value="{{ $val }}"
                           {{ old('status', $page->status) === $val ? 'checked' : '' }}
                           class="w-4 h-4 text-red-500 bg-gray-900 border-gray-600 focus:ring-red-500">
                    <span class="text-sm text-gray-200">{{ $label }}</span>
                </label>
                @endforeach
            </div>
            <div class="flex items-center justify-between gap-3">
                <a href="{{ route('admin.landing-pages.index') }}" class="text-sm text-gray-500 hover:text-gray-300">← Back to list</a>
                <div class="flex items-center gap-2">
                    @if($page->exists)
                        @if($page->status === 'published')
                            <button type="submit" form="lp-unpublish"
                                    class="inline-flex items-center gap-2 px-4 py-2.5 bg-amber-900/30 hover:bg-amber-900/50 border border-amber-700/40 text-amber-300 text-sm font-semibold rounded-xl transition-colors">
                                <i class="fa-solid fa-eye-slash text-xs"></i> Unpublish
                            </button>
                        @else
                            <button type="submit" form="lp-publish"
                                    class="inline-flex items-center gap-2 px-4 py-2.5 bg-emerald-700 hover:bg-emerald-600 text-white text-sm font-semibold rounded-xl transition-colors">
                                <i class="fa-solid fa-rocket text-xs"></i> Publish now
                            </button>
                        @endif
                    @endif
                    <button class="inline-flex items-center gap-2 px-5 py-2.5 bg-red-600 hover:bg-red-500 text-white text-sm font-semibold rounded-xl shadow-lg shadow-red-900/30 transition-colors">
                        <i class="fa-solid fa-save text-xs"></i> Save Landing Page
                    </button>
                </div>
            </div>
        </div>
    </form>

    @if($page->exists)
        <form id="lp-publish"   method="POST" action="{{ route('admin.landing-pages.publish',   $page) }}" class="hidden">@csrf</form>
        <form id="lp-unpublish" method="POST" action="{{ route('admin.landing-pages.unpublish', $page) }}" class="hidden" onsubmit="return confirm('Unpublish — the /lp/{{ $page->slug }} URL will 404 immediately. Continue?');">@csrf</form>
    @endif
</div>
@endsection

@push('scripts')
@vite(['resources/js/landing-builder.js'])
<script>
document.addEventListener('DOMContentLoaded', async () => {
    const initialBuilderData = @json(old('builder_data', $page->builder_data));
    const initialHtml        = @json(old('body_html', $page->body_html));

    const builder = await window.LandingBuilder.mount({
        containerId: 'landing-builder',
        initialBuilderData,
        initialHtml,
        uploadUrl: '{{ route('admin.media.editorUpload') }}',
    });

    // Intercept form submit, serialize the canvas into the hidden inputs.
    const form = document.querySelector('form[action*="landing-pages"]');
    if (form) {
        form.addEventListener('submit', () => {
            const out = builder.save();
            document.getElementById('lp-body-html').value    = out.html || '';
            document.getElementById('lp-compiled-css').value = out.css  || '';
            document.getElementById('lp-builder-data').value = JSON.stringify(out.builderData || {});
        });
    }
});
</script>
@endpush