<!DOCTYPE html>
<html class="light" lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta content="width=device-width, initial-scale=1.0" name="viewport">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <title>Create Link - {{ config('app.name', 'urless') }}</title>
        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Manrope:wght@700;800;900&family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
        @vite(['resources/css/app.css', 'resources/js/app.js'])
        @include('partials.website-theme')
        <style>
            :root {
                --primary: #4648d4;
                --secondary: #515f74;
                --surface: #f7f9fb;
                --surface-container-low: #f2f4f6;
                --surface-container-lowest: #ffffff;
                --surface-container: #eceef0;
                --on-surface: #191c1e;
                --tertiary: #006c49;
                --error: #ba1a1a;
            }

            .font-manrope,
            .font-headline { font-family: "Manrope", ui-sans-serif, system-ui, sans-serif; }
            .font-body,
            .font-label { font-family: "Inter", ui-sans-serif, system-ui, sans-serif; }
            .bg-surface { background-color: var(--surface); }
            .bg-primary { background-color: var(--primary); }
            .bg-secondary { background-color: var(--secondary); }
            .bg-on-surface { background-color: var(--on-surface); }
            .bg-surface-container-low { background-color: var(--surface-container-low); }
            .bg-surface-container-lowest { background-color: var(--surface-container-lowest); }
            .bg-surface-container { background-color: var(--surface-container); }
            .text-primary { color: var(--primary); }
            .text-secondary { color: var(--secondary); }
            .text-on-surface { color: var(--on-surface); }
            .text-tertiary { color: var(--tertiary); }
            .text-error { color: var(--error); }
            .hover\:text-primary:hover { color: var(--primary); }
            .hover\:bg-primary:hover { background-color: var(--primary); }
            .material-symbols-outlined {
                font-family: "Material Symbols Outlined";
                font-weight: normal;
                font-style: normal;
                font-size: 24px;
                line-height: 1;
                letter-spacing: normal;
                text-transform: none;
                display: inline-block;
                white-space: nowrap;
                word-wrap: normal;
                direction: ltr;
                -webkit-font-feature-settings: "liga";
                -webkit-font-smoothing: antialiased;
                font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
            }
            .glass-panel {
                background: rgba(255, 255, 255, 0.7);
                backdrop-filter: blur(20px);
            }
            .sidebar-create-link {
                position: relative;
                overflow: hidden;
                background: linear-gradient(135deg, #4648d4 0%, #006c49 100%);
                color: #ffffff;
                box-shadow: 0 14px 28px rgba(70, 72, 212, 0.24);
                animation: sidebar-create-pulse 2.8s ease-in-out infinite;
            }
            .sidebar-create-link::after {
                content: "";
                position: absolute;
                inset: -60% auto -60% -50%;
                width: 42%;
                transform: rotate(14deg);
                background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.34), transparent);
                animation: sidebar-create-shine 3.4s ease-in-out infinite;
            }
            .sidebar-create-link > * {
                position: relative;
                z-index: 1;
            }
            @keyframes sidebar-create-pulse {
                0%, 100% { transform: translateY(0); box-shadow: 0 14px 28px rgba(70, 72, 212, 0.24); }
                50% { transform: translateY(-1px); box-shadow: 0 18px 34px rgba(70, 72, 212, 0.34); }
            }
            @keyframes sidebar-create-shine {
                0% { left: -55%; }
                45%, 100% { left: 130%; }
            }
            [x-cloak] { display: none !important; }
            .wysiwyg-html-editor {
                min-height: 15rem;
                outline: none;
            }
            .wysiwyg-html-editor:empty::before {
                color: #94a3b8;
                content: attr(data-placeholder);
            }
            .wysiwyg-html-editor a {
                color: var(--primary);
                font-weight: 700;
                text-decoration: underline;
            }
            .wysiwyg-html-editor ul,
            .wysiwyg-html-editor ol {
                margin: 0.75rem 0;
                padding-left: 1.25rem;
            }
            .wysiwyg-html-editor blockquote {
                border-left: 3px solid var(--primary);
                color: var(--secondary);
                margin: 0.75rem 0;
                padding-left: 1rem;
            }
            .share-result-container {
                display: flex;
                gap: 20px;
            }
            .share-result-card {
                background: #f1f2f6;
                border-radius: 10px;
                flex: 1;
                padding: 20px;
            }
            .share-result-title {
                color: var(--primary);
                font-weight: 700;
                margin-bottom: 10px;
            }
            .share-result-link {
                color: #515f74;
                display: block;
                font-weight: 700;
                margin-bottom: 15px;
                overflow-wrap: anywhere;
            }
            .share-copy-btn {
                align-items: center;
                background: #5a5cf6;
                border: 0;
                border-radius: 8px;
                color: #ffffff;
                cursor: pointer;
                display: inline-flex;
                gap: 8px;
                padding: 12px 18px;
            }
            .share-copy-btn:hover {
                background: #4a4ce0;
            }
            .share-qr-card {
                align-items: center;
                display: flex;
                justify-content: space-between;
            }
            .share-qr-box {
                text-align: center;
            }
            .share-qr-box img {
                background: #ffffff;
                border-radius: 8px;
                padding: 8px;
            }
            .share-actions {
                display: flex;
                flex-direction: column;
                gap: 10px;
                min-width: 180px;
            }
            .share-view-btn,
            .share-download-btn {
                align-items: center;
                border: 0;
                border-radius: 6px;
                color: #ffffff;
                cursor: pointer;
                display: inline-flex;
                font-weight: 800;
                gap: 8px;
                justify-content: center;
                padding: 12px 20px;
            }
            .share-view-btn {
                background: #1e9e63;
            }
            .share-view-btn:hover {
                background: #188a55;
            }
            .share-download-btn {
                background: linear-gradient(90deg, #5a5cf6, #7a7cfb);
            }
            .share-download-btn:hover {
                opacity: 0.9;
            }
            @media (max-width: 768px) {
                .share-result-container {
                    flex-direction: column;
                }
                .share-qr-card {
                    flex-direction: column;
                    gap: 15px;
                }
                .share-actions {
                    width: 100%;
                }
            }
        </style>
    </head>
    <body class="bg-surface font-body text-on-surface selection:bg-[#4648d4]/20">
        <div class="flex min-h-screen">
            <aside class="fixed left-0 top-0 z-50 hidden h-screen w-64 flex-col gap-2 bg-slate-50 p-4 md:flex">
                <div class="mb-8 px-2">
                    <div class="min-w-0">
                        @include('partials.website-brand', [
                            'showText' => false,
                            'class' => 'font-manrope text-xl font-black text-indigo-600',
                            'imageClass' => 'h-10 max-w-40 object-contain',
                        ])
                        <p class="mt-1 text-[10px] font-bold uppercase tracking-normal text-secondary">{{ auth()->user()->plan?->name ?? 'Starter' }} Plan</p>
                    </div>
                </div>

                <nav class="flex-1 space-y-1">
                    @foreach ([
                        [route('dashboard'), 'dashboard', 'Overview', false, false],
                        [route('links.create'), 'add_link', 'Create New Link', true, true],
                        [route('links.index'), 'link', 'My Links', false, false],
                        [route('dashboard.analytics'), 'monitoring', 'Analytics', false, false],
                        [route('dashboard.subscription'), 'workspace_premium', 'Subscription', false, false],
                        [route('profile.edit'), 'settings', 'Settings', false, false],
                    ] as [$href, $icon, $label, $active, $highlight])
                        <a class="flex items-center gap-3 rounded-xl px-4 py-3 transition-all duration-200 {{ $highlight ? 'sidebar-create-link' : ($active ? 'bg-white text-indigo-600 shadow-sm' : 'text-slate-500 hover:bg-indigo-50/50 hover:text-indigo-500') }}" href="{{ $href }}">
                            <span class="material-symbols-outlined">{{ $icon }}</span>
                            <span class="font-manrope text-sm font-medium">{{ $label }}</span>
                        </a>
                    @endforeach
                </nav>

                <div class="mt-auto space-y-1 border-t border-slate-200/50 pt-4">
                    <a class="flex items-center gap-3 rounded-xl px-4 py-3 text-slate-500 transition-all duration-200 hover:bg-indigo-50/50 hover:text-indigo-500" href="{{ route('pages.public', 'contact') }}">
                        <span class="material-symbols-outlined">help</span>
                        <span class="font-manrope text-sm font-medium">Help Center</span>
                    </a>
                    <form method="POST" action="{{ route('logout') }}">
                        @csrf
                        <button type="submit" class="flex w-full items-center gap-3 rounded-xl px-4 py-3 text-left text-slate-500 transition-all duration-200 hover:bg-indigo-50/50 hover:text-indigo-500">
                            <span class="material-symbols-outlined">logout</span>
                            <span class="font-manrope text-sm font-medium">Log Out</span>
                        </button>
                    </form>
                </div>
            </aside>

            <main class="min-h-screen flex-1 md:ml-64">
                <header class="glass-panel sticky top-0 z-40 flex w-full items-center justify-between border-b border-slate-100/50 px-6 py-3">
                    <div class="flex items-center gap-4">
                        <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-[#4648d4]/10 text-primary md:hidden">
                            <span class="material-symbols-outlined">menu</span>
                        </div>
                        <div class="flex flex-col">
                            <h2 class="font-manrope text-lg font-bold text-on-surface">Create Link</h2>
                            <p class="text-xs text-secondary">Build the redirect path and ad page before the short link opens.</p>
                        </div>
                    </div>
                    <div class="flex items-center gap-4">
                        <div class="hidden items-center gap-2 rounded-full bg-surface-container-low px-4 py-2 text-secondary transition-all focus-within:ring-2 focus-within:ring-[#4648d4]/20 sm:flex">
                            <span class="material-symbols-outlined text-sm">search</span>
                            <input class="w-48 border-none bg-transparent text-sm focus:ring-0" placeholder="Search links..." type="text">
                        </div>
                        <x-user-notification-bell />
                        <a href="{{ route('dashboard.analytics') }}" class="hidden rounded-full bg-primary px-4 py-2 text-sm font-semibold text-white transition-transform hover:scale-95 active:scale-90 lg:block">View Analytics</a>
                        <div class="flex h-9 w-9 items-center justify-center rounded-full border-2 border-white bg-indigo-100 text-sm font-black text-indigo-700 shadow-sm">
                            {{ Str::of(auth()->user()->name)->substr(0, 1)->upper() }}
                        </div>
                    </div>
                </header>

                <div class="mx-auto max-w-7xl space-y-6 p-6">
                    @php
                        $previewScheme = parse_url((string) config('app.url'), PHP_URL_SCHEME) ?: 'https';
                        $defaultPreviewDomain = $domains->firstWhere('is_default', true);
                        $defaultPreviewTemplate = $defaultPreviewDomain
                            ? $previewScheme.'://'.$defaultPreviewDomain->domain.'/u/__code__'
                            : route('short-links.redirect', '__code__');
                        $domainPreviewTemplates = $domains
                            ->mapWithKeys(fn ($domain): array => [(string) $domain->id => $previewScheme.'://'.$domain->domain.'/u/__code__'])
                            ->all();
                    @endphp

                    @if (session('created_link'))
                        @php($createdQr = session('created_qr'))
                        <section
                            class="rounded-xl border border-[#4648d4]/20 bg-white p-5 shadow-sm"
                            x-data="{
                                copied: false,
                                showQrModal: false,
                                copyLink() {
                                    navigator.clipboard?.writeText(@js(session('created_link')))
                                    this.copied = true
                                    setTimeout(() => this.copied = false, 1800)
                                },
                            }"
                        >
                            <div class="share-result-container">
                                <div class="share-result-card">
                                    <p class="share-result-title">Ready to share</p>
                                    <a href="{{ session('created_link') }}" class="share-result-link hover:text-primary">{{ session('created_link') }}</a>
                                    <button type="button" @click="copyLink()" class="share-copy-btn">
                                        <span class="material-symbols-outlined text-lg" x-text="copied ? 'check' : 'content_copy'"></span>
                                        <span x-text="copied ? 'Copied' : 'Copy Link'"></span>
                                    </button>
                                </div>

                                @if ($createdQr)
                                    <div class="share-result-card share-qr-card">
                                        <div class="share-qr-box">
                                            <p class="share-result-title">
                                                <span class="material-symbols-outlined text-base">visibility</span>
                                                Qr Code
                                            </p>
                                            <button type="button" @click="showQrModal = true" aria-label="View QR code preview">
                                                <img src="{{ $createdQr['show_url'] }}" alt="QR code for {{ session('created_link') }}" height="80" width="80">
                                            </button>
                                        </div>

                                        <div class="share-actions">
                                            <button type="button" @click="showQrModal = true" class="share-view-btn">
                                                <span class="material-symbols-outlined text-lg">visibility</span>
                                                <span>View QR</span>
                                            </button>
                                            <a href="{{ $createdQr['download_url'] }}" class="share-download-btn">
                                                <span class="material-symbols-outlined text-lg">download</span>
                                                <span>Download</span>
                                            </a>
                                        </div>
                                    </div>
                                @endif
                            </div>

                            @if ($createdQr)
                                <div
                                    x-show="showQrModal"
                                    x-cloak
                                    x-transition.opacity
                                    class="fixed inset-0 z-[70] flex items-center justify-center bg-slate-950/70 p-4 backdrop-blur-sm"
                                    role="dialog"
                                    aria-modal="true"
                                    aria-label="QR code preview"
                                    @click.self="showQrModal = false"
                                    @keydown.escape.window="showQrModal = false"
                                >
                                    <div class="w-full max-w-sm rounded-xl bg-white p-6 shadow-2xl">
                                        <div class="flex items-start justify-between gap-4">
                                            <div>
                                                <p class="text-[10px] font-bold uppercase tracking-normal text-secondary">QR preview</p>
                                                <h3 class="font-manrope mt-2 text-lg font-black text-on-surface">Scan-ready code</h3>
                                            </div>
                                            <button type="button" @click="showQrModal = false" class="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-surface-container-low text-secondary transition-colors hover:text-primary" aria-label="Close QR preview">
                                                <span class="material-symbols-outlined">close</span>
                                            </button>
                                        </div>
                                        <div class="mt-5 rounded-xl border border-slate-100 bg-white p-4">
                                            <img src="{{ $createdQr['show_url'] }}" alt="QR code for {{ session('created_link') }}" class="mx-auto aspect-square w-full max-w-64 rounded-lg bg-white object-contain p-2">
                                        </div>
                                        <a href="{{ $createdQr['download_url'] }}" class="mt-5 inline-flex w-full items-center justify-center gap-2 rounded-lg bg-primary px-5 py-3 text-sm font-bold text-white transition-transform hover:scale-95 active:scale-90">
                                            <span class="material-symbols-outlined text-lg">download</span>
                                            Download QR
                                        </a>
                                    </div>
                                </div>
                            @endif
                        </section>
                    @endif

                    <form
                        method="POST"
                        action="{{ route('links.store') }}"
                        class="grid grid-cols-1 gap-6 xl:grid-cols-[1fr_0.42fr]"
                        x-data="{
                            mode: @js(old('redirect_type') === 'interstitial' ? old('ad_type', 'direct_link') : 'no_ads'),
                            duration: @js(old('duration_seconds', 5)),
                            customHtml: @js(old('custom_html', '')),
                            shortCode: @js(old('custom_alias', '')),
                            domainId: @js((string) old('domain_id', '')),
                            defaultPreviewTemplate: @js($defaultPreviewTemplate),
                            domainPreviewTemplates: @js($domainPreviewTemplates),
                            previewCopied: false,
                            redirectType() { return this.mode === 'no_ads' ? 'direct' : 'interstitial' },
                            adType() { return this.mode === 'no_ads' ? '' : this.mode },
                            previewCode() {
                                const code = (this.shortCode || '').trim()

                                return code
                            },
                            previewUrl() {
                                const template = this.domainPreviewTemplates[this.domainId] || this.defaultPreviewTemplate

                                return template.replace('__code__', this.previewCode())
                            },
                            copyPreviewUrl() {
                                navigator.clipboard?.writeText(this.previewUrl())
                                this.previewCopied = true
                                setTimeout(() => this.previewCopied = false, 1800)
                            },
                            syncCustomHtml() {
                                if (this.$refs.customHtmlEditor) {
                                    this.customHtml = this.$refs.customHtmlEditor.innerHTML.trim()
                                }
                            },
                            formatCustomHtml(command, value = null) {
                                this.$refs.customHtmlEditor.focus()
                                document.execCommand(command, false, value)
                                this.syncCustomHtml()
                            },
                            addCustomHtmlLink() {
                                const url = prompt('Sponsor URL')

                                if (! url) {
                                    return
                                }

                                this.formatCustomHtml('createLink', url)
                            },
                        }"
                        @submit="syncCustomHtml()"
                    >
                        @csrf
                        <input type="hidden" name="redirect_type" :value="redirectType()">
                        <input type="hidden" name="ad_type" :value="adType()">

                        <div class="space-y-6">
                            <section class="rounded-xl bg-surface-container-lowest p-6 shadow-sm">
                                <div class="mb-6 flex items-start justify-between gap-4">
                                    <div>
                                        <h3 class="font-manrope text-xl font-bold">Destination Details</h3>
                                        <p class="mt-1 text-sm text-secondary">Set the final URL, public alias, and optional campaign timing.</p>
                                    </div>
                                    <span class="material-symbols-outlined text-primary">route</span>
                                </div>

                                <div class="grid gap-5">
                                    <div>
                                        <label for="title" class="text-sm font-bold text-on-surface">Campaign title</label>
                                        <input id="title" name="title" type="text" value="{{ old('title') }}" placeholder="Spring launch campaign" class="mt-2 w-full rounded-lg border-0 bg-surface-container-low px-4 py-4 text-sm text-on-surface placeholder:text-slate-400 focus:ring-2 focus:ring-[#4648d4]/30">
                                        @error('title') <p class="mt-2 text-sm font-semibold text-error">{{ $message }}</p> @enderror
                                    </div>

                                    <div>
                                        <label for="original_url" class="text-sm font-bold text-on-surface">Final destination URL</label>
                                        <input id="original_url" name="original_url" type="url" required value="{{ old('original_url') }}" placeholder="https://example.com/checkout" class="mt-2 w-full rounded-lg border-0 bg-surface-container-low px-4 py-4 text-sm text-on-surface placeholder:text-slate-400 focus:ring-2 focus:ring-[#4648d4]/30">
                                        @error('original_url') <p class="mt-2 text-sm font-semibold text-error">{{ $message }}</p> @enderror
                                    </div>

                                    <div class="grid gap-5 md:grid-cols-2">
                                        <div>
                                            <label for="custom_alias" class="text-sm font-bold text-on-surface">Custom alias</label>
                                            <input id="custom_alias" name="custom_alias" type="text" value="{{ old('custom_alias') }}" x-model="shortCode" placeholder="launch-offer" class="mt-2 w-full rounded-lg border-0 bg-surface-container-low px-4 py-4 text-sm text-on-surface placeholder:text-slate-400 focus:ring-2 focus:ring-[#4648d4]/30">
                                            @error('custom_alias') <p class="mt-2 text-sm font-semibold text-error">{{ $message }}</p> @enderror
                                        </div>
                                        <div>
                                            <label for="domain_id" class="text-sm font-bold text-on-surface">Short link domain</label>
                                            <select id="domain_id" name="domain_id" x-model="domainId" class="mt-2 w-full rounded-lg border-0 bg-surface-container-low px-4 py-4 text-sm text-on-surface focus:ring-2 focus:ring-[#4648d4]/30">
                                                <option value="">Default short domain (free for every plan)</option>
                                                @foreach ($domains as $domain)
                                                    <option value="{{ $domain->id }}" @selected((string) old('domain_id') === (string) $domain->id)>
                                                        {{ $domain->domain }}{{ $domain->is_default ? ' (default)' : ($domain->plan?->name ? ' ('.$domain->plan->name.' plan)' : '') }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            @error('domain_id') <p class="mt-2 text-sm font-semibold text-error">{{ $message }}</p> @enderror
                                        </div>
                                    </div>

                                    <div class="grid gap-5 md:grid-cols-2">
                                        <div>
                                            <div class="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between">
                                                <label for="expires_at" class="text-sm font-bold text-on-surface">Expiry</label>
                                                <span class="text-xs font-semibold leading-5 text-secondary">(Left blank/empty for Unlimited)</span>
                                            </div>
                                            <input id="expires_at" name="expires_at" type="datetime-local" value="{{ old('expires_at') }}" class="mt-2 w-full rounded-lg border-0 bg-surface-container-low px-4 py-4 text-sm text-on-surface focus:ring-2 focus:ring-[#4648d4]/30">
                                            @error('expires_at') <p class="mt-2 text-sm font-semibold text-error">{{ $message }}</p> @enderror
                                        </div>
                                    </div>
                                </div>
                            </section>

                            <section class="rounded-xl bg-surface-container-lowest p-6 shadow-sm">
                                <div class="mb-6">
                                    <h3 class="font-manrope text-xl font-bold">Redirect Experience</h3>
                                    <p class="mt-1 text-sm text-secondary">Choose what visitors see before they go to the final destination.</p>
                                </div>

                                <div class="grid gap-3 lg:grid-cols-4">
                                    @foreach ([
                                        ['no_ads', 'bolt', 'No Ads', 'Send visitors straight to the final URL without an ad page.'],
                                        ['direct_link', 'ads_click', 'Direct Link', 'Show an ad network direct link before the final redirect.'],
                                        ['iframe', 'web_asset', 'Iframe Ad Page', 'Show an iframe sponsor page with a timer.'],
                                        ['image_link', 'image', 'Image/Text + Link', 'Show creative, text, and a CTA before redirect.'],
                                        ['custom_html', 'code_blocks', 'Custom Code', 'Paste your own HTML ad block before redirect.'],
                                    ] as [$value, $icon, $label, $body])
                                        <label class="cursor-pointer rounded-xl border p-4 transition-all" :class="mode === '{{ $value }}' ? 'border-[#4648d4] bg-[#4648d4]/5 shadow-sm' : 'border-transparent bg-surface hover:bg-[#4648d4]/5'">
                                            <input type="radio" value="{{ $value }}" x-model="mode" class="sr-only">
                                            <span class="mb-4 flex h-11 w-11 items-center justify-center rounded-lg" :class="mode === '{{ $value }}' ? 'bg-primary text-white' : 'bg-white text-primary'">
                                                <span class="material-symbols-outlined">{{ $icon }}</span>
                                            </span>
                                            <span class="font-manrope block text-base font-bold">{{ $label }}</span>
                                            <span class="mt-2 block text-sm leading-6 text-secondary">{{ $body }}</span>
                                        </label>
                                    @endforeach
                                </div>
                                @error('ad_type') <p class="mt-3 text-sm font-semibold text-error">{{ $message }}</p> @enderror
                            </section>

                            <section class="rounded-xl bg-surface-container-lowest p-6 shadow-sm" x-show="mode !== 'no_ads'" x-cloak>
                                <div class="mb-6 flex items-start justify-between gap-4">
                                    <div>
                                        <h3 class="font-manrope text-xl font-bold">Ad Page Setup</h3>
                                        <p class="mt-1 text-sm text-secondary">This screen appears before the visitor reaches the final short link destination.</p>
                                    </div>
                                    <span class="material-symbols-outlined text-primary">timer</span>
                                </div>

                                <div class="grid gap-5 md:grid-cols-2">
                                    <div>
                                        <label for="ad_title" class="text-sm font-bold text-on-surface">Ad page title</label>
                                        <input id="ad_title" name="ad_title" type="text" value="{{ old('ad_title') }}" placeholder="Your link is almost ready" class="mt-2 w-full rounded-lg border-0 bg-surface-container-low px-4 py-4 text-sm text-on-surface placeholder:text-slate-400 focus:ring-2 focus:ring-[#4648d4]/30">
                                        @error('ad_title') <p class="mt-2 text-sm font-semibold text-error">{{ $message }}</p> @enderror
                                    </div>
                                    <div class="grid gap-5 sm:grid-cols-2">
                                        <div>
                                            <label for="duration_seconds" class="text-sm font-bold text-on-surface">Custom duration</label>
                                            <input id="duration_seconds" name="duration_seconds" type="number" min="3" max="120" x-model="duration" class="mt-2 w-full rounded-lg border-0 bg-surface-container-low px-4 py-4 text-sm text-on-surface focus:ring-2 focus:ring-[#4648d4]/30">
                                            @error('duration_seconds') <p class="mt-2 text-sm font-semibold text-error">{{ $message }}</p> @enderror
                                        </div>
                                        <div>
                                            <label for="skippable_after" class="text-sm font-bold text-on-surface">Skip after</label>
                                            <input id="skippable_after" name="skippable_after" type="number" min="1" max="120" value="{{ old('skippable_after') }}" placeholder="Optional" class="mt-2 w-full rounded-lg border-0 bg-surface-container-low px-4 py-4 text-sm text-on-surface placeholder:text-slate-400 focus:ring-2 focus:ring-[#4648d4]/30">
                                            @error('skippable_after') <p class="mt-2 text-sm font-semibold text-error">{{ $message }}</p> @enderror
                                        </div>
                                    </div>
                                </div>

                                <div class="mt-5">
                                    <label for="body_text" class="text-sm font-bold text-on-surface">Ad page message</label>
                                    <textarea id="body_text" name="body_text" rows="4" placeholder="A short sponsor stop supports this link before redirect." class="mt-2 w-full rounded-lg border-0 bg-surface-container-low px-4 py-4 text-sm text-on-surface placeholder:text-slate-400 focus:ring-2 focus:ring-[#4648d4]/30">{{ old('body_text') }}</textarea>
                                    @error('body_text') <p class="mt-2 text-sm font-semibold text-error">{{ $message }}</p> @enderror
                                </div>

                                <div class="mt-5 rounded-xl bg-surface p-5" x-show="mode === 'direct_link' || mode === 'iframe'" x-cloak>
                                    <div class="mb-4 flex items-center gap-3">
                                        <span class="material-symbols-outlined text-primary" x-text="mode === 'direct_link' ? 'ads_click' : 'web_asset'"></span>
                                        <h4 class="font-manrope text-lg font-bold" x-text="mode === 'direct_link' ? 'Direct link ad settings' : 'Iframe settings'"></h4>
                                    </div>
                                    <label for="iframe_url" class="text-sm font-bold text-on-surface" x-text="mode === 'direct_link' ? 'Ad network direct link URL' : 'Iframe URL'"></label>
                                    <input id="iframe_url" name="iframe_url" type="url" value="{{ old('iframe_url') }}" :placeholder="mode === 'direct_link' ? 'https://adsterra.example/direct-link' : 'https://sponsor.example.com/embed'" class="mt-2 w-full rounded-lg border-0 bg-white px-4 py-4 text-sm text-on-surface placeholder:text-slate-400 focus:ring-2 focus:ring-[#4648d4]/30">
                                    <p class="mt-2 text-xs font-semibold text-secondary" x-text="mode === 'direct_link' ? 'Use this for Adsterra, Monetag, PropellerAds, or similar direct-link ad URLs. It will be shown before the visitor continues.' : 'Use this when your sponsor/ad page is designed for iframe embedding.'"></p>
                                    @error('iframe_url') <p class="mt-2 text-sm font-semibold text-error">{{ $message }}</p> @enderror
                                </div>

                                <div class="mt-5 rounded-xl bg-surface p-5" x-show="mode === 'image_link'" x-cloak>
                                    <div class="mb-4 flex items-center gap-3">
                                        <span class="material-symbols-outlined text-primary">image</span>
                                        <h4 class="font-manrope text-lg font-bold">Image/Text + Link settings</h4>
                                    </div>
                                    <div class="grid gap-5 md:grid-cols-2">
                                        <div>
                                            <label for="image_path" class="text-sm font-bold text-on-surface">Image URL</label>
                                            <input id="image_path" name="image_path" type="url" value="{{ old('image_path') }}" placeholder="https://cdn.example.com/banner.jpg" class="mt-2 w-full rounded-lg border-0 bg-white px-4 py-4 text-sm text-on-surface placeholder:text-slate-400 focus:ring-2 focus:ring-[#4648d4]/30">
                                            @error('image_path') <p class="mt-2 text-sm font-semibold text-error">{{ $message }}</p> @enderror
                                        </div>
                                        <div>
                                            <label for="button_text" class="text-sm font-bold text-on-surface">CTA button text</label>
                                            <input id="button_text" name="button_text" type="text" value="{{ old('button_text') }}" placeholder="Visit sponsor" class="mt-2 w-full rounded-lg border-0 bg-white px-4 py-4 text-sm text-on-surface placeholder:text-slate-400 focus:ring-2 focus:ring-[#4648d4]/30">
                                            @error('button_text') <p class="mt-2 text-sm font-semibold text-error">{{ $message }}</p> @enderror
                                        </div>
                                        <div class="md:col-span-2">
                                            <label for="button_url" class="text-sm font-bold text-on-surface">CTA link URL</label>
                                            <input id="button_url" name="button_url" type="url" value="{{ old('button_url') }}" placeholder="https://sponsor.example.com/deal" class="mt-2 w-full rounded-lg border-0 bg-white px-4 py-4 text-sm text-on-surface placeholder:text-slate-400 focus:ring-2 focus:ring-[#4648d4]/30">
                                            @error('button_url') <p class="mt-2 text-sm font-semibold text-error">{{ $message }}</p> @enderror
                                        </div>
                                    </div>
                                </div>

                                <div class="mt-5 rounded-xl bg-surface p-5" x-show="mode === 'custom_html'" x-cloak>
                                    <div class="mb-4 flex items-center gap-3">
                                        <span class="material-symbols-outlined text-primary">code_blocks</span>
                                        <h4 class="font-manrope text-lg font-bold">Custom Code settings</h4>
                                    </div>
                                    <label for="custom_html_editor" class="text-sm font-bold text-on-surface">Custom HTML ad body</label>
                                    <input type="hidden" name="custom_html" x-model="customHtml">
                                    <div class="mt-2 overflow-hidden rounded-lg bg-white shadow-sm ring-1 ring-slate-100 focus-within:ring-2 focus-within:ring-[#4648d4]/30">
                                        <div class="flex flex-wrap gap-2 border-b border-slate-100 bg-surface-container-low p-2">
                                            <button type="button" class="rounded bg-white px-3 py-2 text-xs font-bold text-on-surface shadow-sm hover:text-primary" @click="formatCustomHtml('formatBlock', 'h3')">Heading</button>
                                            <button type="button" class="rounded bg-white px-3 py-2 text-xs font-bold text-on-surface shadow-sm hover:text-primary" @click="formatCustomHtml('formatBlock', 'p')">Text</button>
                                            <button type="button" class="rounded bg-white px-3 py-2 text-xs font-bold text-on-surface shadow-sm hover:text-primary" @click="formatCustomHtml('bold')">Bold</button>
                                            <button type="button" class="rounded bg-white px-3 py-2 text-xs font-bold text-on-surface shadow-sm hover:text-primary" @click="formatCustomHtml('italic')">Italic</button>
                                            <button type="button" class="rounded bg-white px-3 py-2 text-xs font-bold text-on-surface shadow-sm hover:text-primary" @click="formatCustomHtml('insertUnorderedList')">Bullet List</button>
                                            <button type="button" class="rounded bg-white px-3 py-2 text-xs font-bold text-on-surface shadow-sm hover:text-primary" @click="formatCustomHtml('formatBlock', 'blockquote')">Quote</button>
                                            <button type="button" class="rounded bg-white px-3 py-2 text-xs font-bold text-on-surface shadow-sm hover:text-primary" @click="addCustomHtmlLink()">Link</button>
                                        </div>
                                        <div
                                            id="custom_html_editor"
                                            x-ref="customHtmlEditor"
                                            x-init="$refs.customHtmlEditor.innerHTML = customHtml"
                                            contenteditable="true"
                                            data-placeholder="Design the sponsor/ad block visually. Add text, links, lists, or paste formatted HTML."
                                            class="wysiwyg-html-editor w-full bg-white px-4 py-4 text-sm leading-7 text-on-surface"
                                            role="textbox"
                                            aria-multiline="true"
                                            @input="syncCustomHtml()"
                                            @blur="syncCustomHtml()"
                                        ></div>
                                    </div>
                                    <p class="mt-2 text-xs font-semibold text-secondary">WYSIWYG HTML editor. This content renders on the interstitial ad page before the timed redirect.</p>
                                    @error('custom_html') <p class="mt-2 text-sm font-semibold text-error">{{ $message }}</p> @enderror
                                </div>
                            </section>

                            <section class="rounded-xl bg-surface-container-lowest p-6 shadow-sm" x-show="mode === 'no_ads'" x-cloak>
                                <div class="flex items-center gap-4">
                                    <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-[#4648d4]/10 text-primary">
                                        <span class="material-symbols-outlined">bolt</span>
                                    </div>
                                    <div>
                                        <h3 class="font-manrope text-lg font-bold">No Ads selected</h3>
                                        <p class="text-sm text-secondary">Visitors will skip every ad page and go straight to the final destination.</p>
                                    </div>
                                </div>
                            </section>

                            <div class="flex flex-col gap-3 sm:flex-row">
                                <button type="submit" class="inline-flex items-center justify-center gap-2 rounded-lg bg-primary px-8 py-4 text-sm font-bold text-white shadow-lg shadow-[#4648d4]/20 transition-transform hover:scale-95 active:scale-90">
                                    Create Short Link
                                    <span class="material-symbols-outlined text-xl">arrow_forward</span>
                                </button>
                                <a href="{{ route('links.index') }}" class="inline-flex items-center justify-center rounded-lg bg-surface-container-low px-8 py-4 text-sm font-bold text-secondary transition-colors hover:text-primary">Cancel</a>
                            </div>
                        </div>

                        <aside class="space-y-6">
                            <section class="rounded-xl bg-surface-container-lowest p-6 shadow-sm">
                                <div class="flex items-start justify-between gap-4">
                                    <div>
                                        <p class="text-[10px] font-bold uppercase tracking-normal text-secondary">Live short link preview</p>
                                        <h3 class="font-manrope mt-2 text-lg font-black text-on-surface">Preview & copy</h3>
                                    </div>
                                    <span class="material-symbols-outlined text-primary">content_copy</span>
                                </div>

                                <div class="mt-5 rounded-xl border border-[#4648d4]/10 bg-[#4648d4]/5 p-4">
                                    <p class="text-[10px] font-bold uppercase tracking-normal text-secondary">Short link</p>
                                    <a :href="previewUrl()" target="_blank" rel="noopener" class="font-manrope mt-2 block break-all text-sm font-extrabold text-primary hover:underline" x-text="previewUrl()"></a>
                                </div>

                                <div class="mt-4 grid gap-3 sm:grid-cols-2 xl:grid-cols-1">
                                    <div class="rounded-lg bg-surface p-4">
                                        <p class="text-[10px] font-bold uppercase tracking-normal text-secondary">Alias status</p>
                                        <p class="font-manrope mt-1 text-sm font-black text-on-surface" x-text="shortCode.trim() === '' ? 'Auto-generated after submit' : 'Custom alias ready'"></p>
                                    </div>
                                    <div class="rounded-lg bg-surface p-4">
                                        <p class="text-[10px] font-bold uppercase tracking-normal text-secondary">Selected domain</p>
                                        <p class="font-manrope mt-1 break-all text-sm font-black text-on-surface" x-text="new URL(previewUrl()).host"></p>
                                    </div>
                                </div>

                                <button type="button" @click="copyPreviewUrl()" class="mt-5 inline-flex w-full items-center justify-center gap-2 rounded-lg bg-primary px-5 py-3 text-sm font-bold text-white shadow-lg shadow-[#4648d4]/20 transition-transform hover:scale-95 active:scale-90">
                                    <span class="material-symbols-outlined text-lg" x-text="previewCopied ? 'check' : 'content_copy'"></span>
                                    <span x-text="previewCopied ? 'Preview copied' : 'Copy preview link'"></span>
                                </button>

                                <p class="mt-3 text-xs font-semibold leading-5 text-secondary">If custom alias is empty, the final random code is generated after submit.</p>
                            </section>

                            <section class="rounded-xl bg-primary p-6 text-white shadow-sm">
                                <span class="rounded-full bg-white/15 px-3 py-1 text-xs font-bold uppercase tracking-normal text-white">Redirect flow</span>
                                <h3 class="font-manrope mt-5 text-2xl font-black leading-tight">Ad page first, final destination after the timer.</h3>
                                <div class="mt-6 space-y-3">
                                    @foreach ([['Short link clicked', 'link'], ['Ad page rendered', 'ads_click'], ['Countdown duration', 'timer'], ['Final URL redirect', 'open_in_new']] as [$label, $icon])
                                        <div class="flex items-center gap-3 rounded-lg bg-white/10 p-3">
                                            <span class="material-symbols-outlined">{{ $icon }}</span>
                                            <span class="text-sm font-bold">{{ $label }}</span>
                                        </div>
                                    @endforeach
                                </div>
                            </section>

                            <section class="rounded-xl bg-surface-container-lowest p-6 shadow-sm">
                                <h3 class="font-manrope text-lg font-bold">Live Mode Preview</h3>
                                <div class="mt-5 space-y-4">
                                    <div class="rounded-lg bg-surface p-4">
                                        <p class="text-[10px] font-bold uppercase tracking-normal text-secondary">Selected type</p>
                                        <p class="font-manrope mt-1 text-lg font-black text-on-surface" x-text="mode === 'no_ads' ? 'No Ads' : (mode === 'direct_link' ? 'Direct Link' : (mode === 'iframe' ? 'Iframe Ad Page' : (mode === 'image_link' ? 'Image/Text + Link' : 'Custom Code')))"></p>
                                    </div>
                                    <div class="rounded-lg bg-surface p-4">
                                        <p class="text-[10px] font-bold uppercase tracking-normal text-secondary">Ad duration</p>
                                        <p class="font-manrope mt-1 text-lg font-black text-on-surface"><span x-text="duration || 5"></span>s</p>
                                    </div>
                                    <p class="text-sm leading-6 text-secondary">No Ads mode skips monetization. Direct Link, Iframe, Image/Text + Link, and Custom Code create a timed interstitial page before the visitor reaches the final URL.</p>
                                </div>
                            </section>
                        </aside>
                    </form>
                </div>
            </main>
        </div>
    </body>
</html>
