@extends('layouts.app')
@section('title', 'Create Public Link')

@section('content')
<!-- STYLE SYNC FROM SIGNATURE_REQUEST -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
<style>
    /* CUSTOM TOGGLE SWITCH STYLES */
    .switch { position: relative; display: inline-block; width: 44px; height: 22px; }
    .switch input { opacity: 0; width: 0; height: 0; }
    .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; }
    .slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
    input:checked + .slider { background-color: #1a7a6e; }
    input:focus + .slider { box-shadow: 0 0 1px #1a7a6e; }
    input:checked + .slider:before { transform: translateX(22px); }

    /* BOOTSTRAP-LIKE POPOVER TOOLTIP STYLES */
    .help-icon-wrapper { position: relative; display: inline-flex; align-items: center; margin-left: 6px; cursor: help; }
    .help-popover-text { visibility: hidden; width: 260px; background-color: #fff; color: #212529; text-align: left; border-radius: .3rem; position: absolute; z-index: 100000; bottom: 150%; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity 0.3s, visibility 0.3s; font-size: 12px; line-height: 1.5; font-weight: 400; box-shadow: 0 .5rem 1rem rgba(0,0,0,.175); pointer-events: none; text-transform: none; border: 1px solid rgba(0,0,0,.2); overflow: hidden; }
    .help-popover-text.popover-right { left: auto; right: -10px; transform: none; }
    .help-popover-text.popover-right::after { left: auto; right: 16px; margin-left: 0; }
    .help-popover-text.popover-left { left: -10px; right: auto; transform: none; }
    .help-popover-text.popover-left::after { left: 16px; margin-left: 0; }
    .popover-header { padding: .5rem .75rem; margin-bottom: 0; font-size: 13px; background-color: #f7f7f7; border-bottom: 1px solid #ebebeb; font-weight: 600; color: #212529; display: block; }
    .popover-body { padding: .5rem .75rem; color: #212529; display: block; }
    .help-popover-text::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -6px; border-width: 6px; border-style: solid; border-color: rgba(0,0,0,.2) transparent transparent transparent; }
    .help-icon-wrapper:hover .help-popover-text { visibility: visible; opacity: 1; }
    .dark .help-popover-text { background-color: #1a222c; border: 1px solid #313d4a; color: #e2e8f0; }
    .dark .popover-header { background-color: #24303f; border-bottom: 1px solid #313d4a; color: #fff; }
    .dark .popover-body { color: #d1d5db; }
    .dark .help-popover-text::after { border-color: #313d4a transparent transparent transparent; }

    .offcanvas-panel { position: fixed; top: 0; right: -500px; width: 100%; max-width: 500px; height: 100vh; background: #fff; z-index: 99999; box-shadow: -10px 0 30px rgba(0,0,0,0.1); transition: right 0.3s ease-in-out; display: flex; flex-direction: column; }
    .dark .offcanvas-panel { background: #24303f; color: #fff; border-left: 1px solid #313d4a; }
    .offcanvas-panel.active { right: 0; }
</style>

<div class="mx-auto max-w-screen-2xl p-4 md:p-6 2xl:p-10 bg-gray-50 dark:bg-boxdark-2 min-h-screen">
    
    <!-- Header Sync -->
    <div class="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div>
            <h2 class="text-xl font-semibold text-gray-800 dark:text-white/90 flex items-center">
                New Public Signing Link
                <span class="help-icon-wrapper">
                    <svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
                    <span class="help-popover-text" style="bottom: 100%; width:350px">
                        <span class="popover-header">Public Signing Link</span>
                        <span class="popover-body">Create a reusable link or QR code. Anyone with access to the link can sign the document(s) without an individual invitation.</span>
                    </span>
                </span>
            </h2>
            <p class="text-sm text-gray-500 dark:text-gray-400">Set up templates and link configurations.</p>
        </div>
    </div>

    <!-- MAIN FORM START -->
    <form action="{{ route('public_links.store') }}" method="POST" id="public-link-form">
        @csrf
        <div class="grid grid-cols-12 gap-6">
            
            <!-- LEFT COLUMN: DOCUMENT SELECTION -->
            <div class="col-span-12 lg:col-span-8">
                <div class="bg-white dark:bg-boxdark rounded-lg border border-stroke dark:border-strokedark shadow-sm">
                    <div class="p-6 border-b border-stroke dark:border-strokedark flex justify-between items-center">
                        <div class="flex items-center gap-4">
                            <h2 class="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
                                Select Templates
                                <span class="help-icon-wrapper">
                                    <i class="bi bi-question-circle text-gray-400"></i>
                                    <span class="help-popover-text">
                                        <span class="popover-header">Template Selection</span>
                                        <span class="popover-body">Select one or more single-signer templates to combine into this public self-signing link.</span>
                                    </span>
                                </span>
                                <span id="check-icon-docs" class="hidden text-meta-3">
                                    <svg class="w-5 h-5 fill-current" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
                                </span>
                            </h2>
                        </div>
                        <div class="relative w-64">
                            <input type="text" id="templateSearch" placeholder="Search templates..." class="w-full pl-4 pr-10 py-2 border border-stroke rounded-lg outline-none focus:border-primary dark:bg-meta-4 dark:border-strokedark">
                            <i id="searchIcon" class="bi bi-search absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 transition-all"></i>
                        </div>
                    </div>
                    
                    <div class="p-6 space-y-3 overflow-y-auto max-h-[600px]">
                        @foreach($templates as $row)
                        <div class="document-card group relative flex items-center gap-4 p-4 border border-stroke dark:border-strokedark rounded-lg hover:bg-gray-50 dark:hover:bg-meta-4 transition-all">
                            <input type="checkbox" name="template_ids[]" value="{{ $row->template_id }}" 
                                class="template-checkbox w-5 h-5 text-primary rounded border-stroke"
                                data-title="{{ $row->template_title }}"
                                data-json="{{ $row->template_json }}">
                            
                            <div class="flex-1 cursor-pointer" onclick="this.parentElement.querySelector('.template-checkbox').click()">
                                <div class="flex items-center">
                                    <i class="bi bi-file-earmark-pdf text-danger text-xl mr-2"></i>
                                    <span class="font-medium text-gray-900 dark:text-white template-title-cell">{{ $row->template_title }}</span>
                                </div>
                                <div class="text-[10px] text-gray-500 uppercase font-bold mt-1">Single Signer</div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    <div class="p-4 bg-gray-50 dark:bg-meta-4/20 text-center">
                        <p class="text-xs text-gray-500"><span id="doc-count-badge">0</span> templates selected</p>
                    </div>
                </div>
            </div>

            <!-- RIGHT COLUMN: CONFIGURATION -->
            <div class="col-span-12 lg:col-span-4 space-y-6">
                
                <!-- Link Name & Details Card -->
                <div class="bg-white dark:bg-boxdark rounded-lg border border-stroke dark:border-strokedark p-6 shadow-sm">
                    <h3 class="font-semibold text-gray-900 dark:text-white flex items-center gap-2 mb-4">
                        Link Configuration
                        <span class="help-icon-wrapper">
                            <i class="bi bi-question-circle text-gray-400"></i>
                            <span class="help-popover-text">
                                <span class="popover-header">Configuration</span>
                                <span class="popover-body">Define general parameters, expiration policies, and submission limits for this signing link.</span>
                            </span>
                        </span>
                        <span id="check-icon-linkname" class="hidden text-meta-3">
                            <svg class="w-5 h-5 fill-current" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
                        </span>
                    </h3>
                    <div class="space-y-4">
                        <div>
                            <label class="block text-xs font-bold text-gray-400 uppercase mb-1 flex items-center">
                                Link Name
                                <span class="help-icon-wrapper">
                                    <i class="bi bi-question-circle text-gray-400 text-[11px]"></i>
                                    <span class="help-popover-text">
                                        <span class="popover-header">Link Identifier</span>
                                        <span class="popover-body">A recognizable title for internal tracking across your dashboard and submission lists.</span>
                                    </span>
                                </span>
                            </label>
                            <input type="text" name="link_name" id="in_link_name" required class="w-full rounded-lg border border-stroke bg-transparent py-2 px-4 text-sm outline-none focus:border-primary dark:border-strokedark dark:text-white" placeholder="e.g. Rafting Waiver 2026">
                        </div>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-xs font-bold text-gray-400 uppercase mb-1 flex items-center">
                                    Expiry
                                    <span class="help-icon-wrapper">
                                        <i class="bi bi-question-circle text-gray-400 text-[11px]"></i>
                                        <span class="help-popover-text popover-left">
                                            <span class="popover-header">Link Expiration</span>
                                            <span class="popover-body">Choose when this public link stops accepting submissions automatically.</span>
                                        </span>
                                    </span>
                                </label>
                                <select name="expiry_type" id="expiry_type" class="w-full rounded-lg border border-stroke bg-transparent py-2 px-2 text-xs outline-none focus:border-primary dark:border-strokedark">
                                    <option value="never">Never</option>
                                    <option value="date">Specific Date</option>
                                    <option value="30_days">30 Days</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-xs font-bold text-gray-400 uppercase mb-1 flex items-center">
                                    Limit
                                    <span class="help-icon-wrapper">
                                        <i class="bi bi-question-circle text-gray-400 text-[11px]"></i>
                                        <span class="help-popover-text popover-right">
                                            <span class="popover-header">Submission Cap</span>
                                            <span class="popover-body">Maximum number of completed signatures permitted. Enter 0 for unlimited responses.</span>
                                        </span>
                                    </span>
                                </label>
                                <input type="number" name="submission_limit" id="in_limit" value="0" class="w-full rounded-lg border border-stroke bg-transparent py-2 px-2 text-xs outline-none focus:border-primary dark:border-strokedark" placeholder="0 = ∞">
                            </div>
                        </div>
                        <div id="date_input_wrapper" class="hidden">
                            <label class="block text-xs font-bold text-gray-400 uppercase mb-1 flex items-center">
                                Select Expiry Date
                                <span class="help-icon-wrapper">
                                    <i class="bi bi-question-circle text-gray-400 text-[11px]"></i>
                                    <span class="help-popover-text">
                                        <span class="popover-header">Specific Date</span>
                                        <span class="popover-body">The link will automatically expire at 11:59 PM on the selected date.</span>
                                    </span>
                                </span>
                            </label>
                            <input type="date" name="expiry_date" class="w-full rounded-lg border border-stroke bg-transparent py-2 px-4 text-sm dark:border-strokedark">
                        </div>
                    </div>
                </div>

                <!-- Pre-Form Card -->
                <div class="bg-white dark:bg-boxdark rounded-lg border border-stroke dark:border-strokedark p-6 shadow-sm">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="font-semibold text-gray-900 dark:text-white flex items-center gap-2">
                            Pre-Form Settings
                            <span class="help-icon-wrapper">
                                <i class="bi bi-question-circle text-gray-400"></i>
                                <span class="help-popover-text">
                                    <span class="popover-header">Signer Identity</span>
                                    <span class="popover-body">Require the signer to provide their details before accessing the document.</span>
                                </span>
                            </span>
                        </h3>
                        <label class="switch"><input type="checkbox" name="pre_form_enabled" value="1" id="pre_form_toggle"><span class="slider"></span></label>
                    </div>
                    <div id="pre_form_options" class="hidden space-y-3 bg-gray-50 dark:bg-meta-4/10 p-4 rounded-lg border border-stroke dark:border-strokedark">
                        <p class="text-[10px] font-bold text-gray-400 uppercase">Requirements</p>
                        <div class="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400 mb-2">
                            <i class="bi bi-check-circle-fill text-success"></i> Name (Always Required)
                        </div>
                        
                        <div class="pt-2 border-t border-stroke dark:border-strokedark">
                            <p class="text-[10px] font-bold text-gray-400 uppercase mb-2 flex items-center">
                                Additional Fields (Select at least one):
                                <span class="help-icon-wrapper">
                                    <i class="bi bi-question-circle text-gray-400 text-[11px]"></i>
                                    <span class="help-popover-text">
                                        <span class="popover-header">Identity Validation</span>
                                        <span class="popover-body">Select contact methods used to identify the signer and populate agreement fields.</span>
                                    </span>
                                </span>
                            </p>
                            <div class="flex flex-col gap-2 mb-2">
                                <label class="flex items-center gap-2 cursor-pointer text-xs">
                                    <input type="checkbox" name="pre_form_fields[]" value="email" checked class="rounded text-primary pre-form-checkbox"> Email Address
                                </label>
                                <label class="flex items-center gap-2 cursor-pointer text-xs">
                                    <input type="checkbox" name="pre_form_fields[]" value="phone" class="rounded text-primary pre-form-checkbox"> Phone Number
                                </label>
                            </div>
                        </div>

                        <div class="pt-2 border-t border-stroke dark:border-strokedark mb-2">
                            <p class="text-[10px] font-bold text-gray-400 uppercase mb-2 flex items-center">
                                Custom Welcome Message
                                <span class="help-icon-wrapper">
                                    <i class="bi bi-question-circle text-gray-400 text-[11px]"></i>
                                    <span class="help-popover-text">
                                        <span class="popover-header">Signer Welcome Note</span>
                                        <span class="popover-body">Instructional message shown to the signer at the entry screen before starting.</span>
                                    </span>
                                </span>
                            </p>
                            <textarea name="pre_form_message" id="pre_form_message" rows="2" class="w-full rounded border border-stroke bg-white py-2 px-3 text-xs outline-none focus:border-primary dark:bg-boxdark dark:border-strokedark" placeholder="e.g. Please provide your details to access the waiver."></textarea>
                        </div>
                    </div>
                </div>

                <!-- Prefill Card Sync -->
                <div class="bg-white dark:bg-boxdark rounded-lg border border-stroke dark:border-strokedark p-6 shadow-sm">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="font-semibold text-gray-900 dark:text-white flex items-center gap-2">
                            Prefill Data
                            <span class="help-icon-wrapper">
                                <i class="bi bi-question-circle text-gray-400"></i>
                                <span class="help-popover-text">
                                    <span class="popover-header">Pre-Populated Data</span>
                                    <span class="popover-body">Supply predetermined answers for fields configured with prefill sender tags in your templates.</span>
                                </span>
                            </span>
                        </h3>
                        <button type="button" id="btn-config-prefills" onclick="openOffcanvas('prefills')" class="text-sm text-primary hover:underline font-medium opacity-50 cursor-not-allowed" disabled>Edit Fields</button>
                    </div>
                    <div id="summary-prefills" class="text-sm text-gray-500 italic">No templates selected</div>
                </div>

                <!-- Security & Completion Card -->
                <div class="bg-white dark:bg-boxdark rounded-lg border border-stroke dark:border-strokedark p-6 shadow-sm">
                    <h3 class="font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
                        Behavior & Security
                        <span class="help-icon-wrapper">
                            <i class="bi bi-question-circle text-gray-400"></i>
                            <span class="help-popover-text">
                                <span class="popover-header">Audit & Redirects</span>
                                <span class="popover-body">Configure audit trail verification settings and end-of-signing completion actions.</span>
                            </span>
                        </span>
                    </h3>
                    <div class="space-y-4">
                        <div class="flex flex-col gap-3">
                            <label class="flex items-center gap-2 cursor-pointer text-xs">
                                <input type="checkbox" name="capture_ip" checked class="rounded text-primary"> Capture Signer IP
                                <span class="help-icon-wrapper">
                                    <i class="bi bi-question-circle text-gray-400 text-[11px]"></i>
                                    <span class="help-popover-text popover-right">
                                        <span class="popover-header">IP Tracking</span>
                                        <span class="popover-body">Logs the public IP address for legal verification and Certificate of Completion records.</span>
                                    </span>
                                </span>
                            </label>
                            <label class="flex items-center gap-2 cursor-pointer text-xs">
                                <input type="checkbox" name="capture_device" checked class="rounded text-primary"> Capture Device Info
                                <span class="help-icon-wrapper">
                                    <i class="bi bi-question-circle text-gray-400 text-[11px]"></i>
                                    <span class="help-popover-text popover-right">
                                        <span class="popover-header">Device Fingerprint</span>
                                        <span class="popover-body">Stores browser, operating system, and hardware details for audit integrity.</span>
                                    </span>
                                </span>
                            </label>
                        </div>
                        <hr class="border-stroke dark:border-strokedark">
                        <div>
                            <label class="block text-xs font-bold text-gray-400 uppercase mb-1 flex items-center">
                                On Completion
                                <span class="help-icon-wrapper">
                                    <i class="bi bi-question-circle text-gray-400 text-[11px]"></i>
                                    <span class="help-popover-text">
                                        <span class="popover-header">Post-Signing Action</span>
                                        <span class="popover-body">Direct signers to an on-screen confirmation notice or immediately redirect them to an external URL.</span>
                                    </span>
                                </span>
                            </label>
                            <select name="completion_type" id="comp_type" class="w-full rounded-lg border border-stroke bg-transparent py-2 px-2 text-xs outline-none focus:border-primary dark:border-strokedark">
                                <option value="confirmation">Show Confirmation Page</option>
                                <option value="redirect">Redirect to URL</option>
                            </select>
                            <input type="url" name="redirect_url" id="redir_url" class="hidden w-full mt-2 rounded border border-stroke p-2 text-xs dark:bg-meta-4" placeholder="https://">
                        </div>
                    </div>
                </div>

                <!-- Action Button -->
                <button type="button" onclick="openReview()" class="w-full bg-brand-500 text-white py-4 rounded-lg font-bold shadow-lg flex items-center justify-center gap-2">
                    <i class="bi bi-send-check"></i> Review & Create Link
                </button>
            </div>
        </div>

        <!-- PREFILL OFFCANVAS -->
        <div id="prefills-offcanvas" class="offcanvas-panel">
            <div class="p-6 border-b border-stroke flex justify-between items-center">
                <h2 class="text-xl font-semibold">Pre-filled Document Fields</h2>
                <button type="button" onclick="closeOffcanvas()" class="text-2xl">&times;</button>
            </div>
            <div id="prefill-container" class="p-6 space-y-6 overflow-y-auto flex-1">
                <p class="text-center text-gray-400 py-10">Select documents to see available prefill fields.</p>
            </div>
            <div class="p-6 border-t border-stroke">
                <button type="button" onclick="savePrefillSummary(); closeOffcanvas();" class="w-full bg-brand-500 text-white px-4 py-2 rounded-lg text-sm">Save Prefills</button>
            </div>
        </div>

        <!-- REVIEW OFFCANVAS -->
        <div id="review-offcanvas" class="offcanvas-panel">
            <div class="p-6 border-b border-stroke flex justify-between items-center bg-gray-50 dark:bg-meta-4">
                <h2 class="text-xl font-semibold text-success">Review Signing Link</h2>
                <button type="button" onclick="closeOffcanvas()" class="text-2xl">&times;</button>
            </div>
            <div class="p-6 space-y-6 overflow-y-auto flex-1">
                <div><h4 class="text-xs font-bold uppercase text-gray-400 mb-2">Templates</h4><div id="rev-tmpl" class="space-y-1 text-sm font-medium"></div></div>
                <div class="border-t pt-4"><h4 class="text-xs font-bold uppercase text-gray-400 mb-2">Link Name</h4><p id="rev-name" class="text-sm font-bold text-primary"></p></div>
                <div class="border-t pt-4 grid grid-cols-2 gap-4">
                    <div><h4 class="text-xs font-bold uppercase text-gray-400 mb-1">Expiry</h4><p id="rev-expiry" class="text-xs font-bold"></p></div>
                    <div><h4 class="text-xs font-bold uppercase text-gray-400 mb-1">Limit</h4><p id="rev-limit" class="text-xs font-bold"></p></div>
                </div>
                <!-- Pre-Form Review Section -->
                <div id="rev-preform-section" class="border-t pt-4">
                    <h4 class="text-xs font-bold uppercase text-gray-400 mb-2">Pre-Form Settings</h4>
                    <div id="rev-preform-data" class="text-xs"></div>
                </div>
                <div class="border-t pt-4"><h4 class="text-xs font-bold uppercase text-gray-400 mb-2">Prefills</h4><div id="rev-prefills" class="text-xs italic text-gray-400">None</div></div>
            </div>
            <div class="p-6 border-t border-stroke bg-white dark:bg-boxdark">
                <button type="submit" class="w-full bg-brand-500 text-white px-4 py-2 rounded-lg text-sm">Confirm & Create Link</button>
            </div>
        </div>
    </form>
</div>

<div id="offcanvas-overlay" onclick="closeOffcanvas()" class="fixed inset-0 bg-black/50 z-[999] hidden transition-opacity duration-300"></div>

<script>
    // DOCUMENT SELECTION & SEARCH LOGIC
    const templateSearch = document.getElementById('templateSearch');
    const searchIcon = document.getElementById('searchIcon');

    templateSearch.addEventListener('input', function() {
        const query = this.value.toLowerCase();
        searchIcon.classList.toggle('bi-x-circle-fill', query.length > 0);
        searchIcon.classList.toggle('bi-search', query.length === 0);
        document.querySelectorAll('.document-card').forEach(card => {
            const title = card.querySelector('.template-title-cell').innerText.toLowerCase();
            card.style.display = title.includes(query) ? 'flex' : 'none';
        });
    });

    searchIcon.addEventListener('click', () => {
        if(searchIcon.classList.contains('bi-x-circle-fill')) {
            templateSearch.value = '';
            templateSearch.dispatchEvent(new Event('input'));
        }
    });

    document.querySelectorAll('.template-checkbox').forEach(cb => {
        cb.addEventListener('change', () => {
            const checked = document.querySelectorAll('.template-checkbox:checked');
            document.getElementById('doc-count-badge').innerText = checked.length;
            document.getElementById('check-icon-docs').classList.toggle('hidden', checked.length === 0);
            
            renderAllPrefills();
        });
    });

    function renderAllPrefills() {
        const container = document.getElementById('prefill-container');
        const summaryPrefills = document.getElementById('summary-prefills');
        const btnPrefill = document.getElementById('btn-config-prefills');
        const checkedBoxes = document.querySelectorAll('.template-checkbox:checked');

        // Retain existing values entered by user if templates are toggled
        const existingValues = {};
        document.querySelectorAll('.prefill-input-field').forEach(input => {
            if (input.value) existingValues[input.name] = input.value;
        });

        container.innerHTML = '';

        // If no templates are selected
        if (checkedBoxes.length === 0) {
            btnPrefill.disabled = true;
            btnPrefill.classList.add('opacity-50', 'cursor-not-allowed');
            summaryPrefills.innerHTML = '<span class="text-gray-500 italic">No templates selected</span>';
            container.innerHTML = '<p class="text-center text-gray-400 py-10">Select documents to see available prefill fields.</p>';
            return;
        }

        let totalPrefillFields = 0;

        checkedBoxes.forEach(cb => {
            try {
                let json = JSON.parse(cb.dataset.json);
                let tid = cb.value;
                let title = cb.dataset.title;
                let prefillFields = (json.fields || []).filter(f => f.recipient && f.recipient.id === 'prefill');

                if (prefillFields.length > 0) {
                    totalPrefillFields += prefillFields.length;
                    let html = `<div class="p-4 bg-gray-50 dark:bg-meta-4 rounded-lg border border-stroke mb-4">
                                    <h4 class="font-bold text-primary mb-3 text-xs"><i class="bi bi-file-earmark-pdf"></i> ${title}</h4>`;
                    prefillFields.forEach(f => {
                        const fieldName = `prefill_val-${tid}-${f.id}`;
                        const savedVal = existingValues[fieldName] || '';
                        html += `<div class="mb-3">
                                    <label class="block text-[10px] font-bold text-gray-400 uppercase mb-1">${f.name}</label>
                                    <input type="hidden" name="prefill_label-${tid}-${f.id}" value="${f.name}">
                                    <input type="text" name="${fieldName}" value="${savedVal}" class="prefill-input-field w-full rounded border border-stroke bg-white px-3 py-2 text-xs dark:bg-gray-900" placeholder="Enter value" data-doc="${title}" data-field="${f.name}">
                                 </div>`;
                    });
                    html += `</div>`;
                    container.innerHTML += html;
                }
            } catch(e) {}
        });

        // If template(s) are selected but none have prefill fields
        if (totalPrefillFields === 0) {
            btnPrefill.disabled = true;
            btnPrefill.classList.add('opacity-50', 'cursor-not-allowed');
            summaryPrefills.innerHTML = '<span class="text-gray-500 italic">No prefilled fields detected in the selected template</span>';
            container.innerHTML = '<p class="text-center text-gray-400 py-10">No prefill fields found in selected templates.</p>';
        } else {
            btnPrefill.disabled = false;
            btnPrefill.classList.remove('opacity-50', 'cursor-not-allowed');
            
            const filledCount = Array.from(document.querySelectorAll('.prefill-input-field')).filter(i => i.value.trim() !== '').length;
            if (filledCount > 0) {
                summaryPrefills.innerHTML = `<span class="text-primary font-bold"><i class="bi bi-check-circle"></i> ${filledCount} fields filled</span>`;
            } else {
                summaryPrefills.innerHTML = `<span class="text-primary font-medium">${totalPrefillFields} prefill field(s) available</span>`;
            }
        }
    }

    function savePrefillSummary() {
        const fields = Array.from(document.querySelectorAll('.prefill-input-field'));
        const filledCount = fields.filter(i => i.value.trim() !== '').length;

        if (fields.length === 0) {
            document.getElementById('summary-prefills').innerHTML = '<span class="text-gray-500 italic">No prefilled fields detected in the selected template</span>';
        } else if (filledCount > 0) {
            document.getElementById('summary-prefills').innerHTML = `<span class="text-primary font-bold"><i class="bi bi-check-circle"></i> ${filledCount} fields filled</span>`;
        } else {
            document.getElementById('summary-prefills').innerHTML = `<span class="text-primary font-medium">${fields.length} prefill field(s) available</span>`;
        }
    }

    // UI TOGGLES
    document.getElementById('expiry_type').addEventListener('change', function() {
        document.getElementById('date_input_wrapper').classList.toggle('hidden', this.value !== 'date');
    });

    document.getElementById('comp_type').addEventListener('change', function() {
        document.getElementById('redir_url').classList.toggle('hidden', this.value !== 'redirect');
    });

    document.getElementById('pre_form_toggle').addEventListener('change', function() {
        document.getElementById('pre_form_options').classList.toggle('hidden', !this.checked);
    });

    document.getElementById('in_link_name').addEventListener('input', function() {
        document.getElementById('check-icon-linkname').classList.toggle('hidden', this.value.trim() === '');
    });

    // OFFCANVAS LOGIC
    function openOffcanvas(id) {
        document.getElementById('offcanvas-overlay').classList.remove('hidden');
        document.getElementById(id + '-offcanvas').classList.add('active');
        document.body.style.overflow = 'hidden';
    }

    function closeOffcanvas() {
        document.getElementById('offcanvas-overlay').classList.add('hidden');
        document.querySelectorAll('.offcanvas-panel').forEach(el => el.classList.remove('active'));
        document.body.style.overflow = 'auto';
    }

    function openReview() {
        const checkedTemplates = document.querySelectorAll('.template-checkbox:checked');
        const linkName = document.getElementById('in_link_name').value.trim();
        
        // 1. Basic Validations
        if(checkedTemplates.length === 0) { alert("Select at least one template."); return; }
        if(!linkName) { alert("Enter a link name."); return; }

        // 2. Pre-Form Validation: Check if enabled and at least one checkbox is selected
        const preFormToggle = document.getElementById('pre_form_toggle');
        let preFormDisplay = 'Disabled';
        
        if (preFormToggle && preFormToggle.checked) {
            const selectedPreFormFields = document.querySelectorAll('.pre-form-checkbox:checked');
            if (selectedPreFormFields.length === 0) {
                alert("Requirement: Since Pre-Form is enabled, please select at least one field (Email Address or Phone Number).");
                return; // Stop the review from opening
            }
            
            // Collect selected field names for review display
            const fieldNames = Array.from(selectedPreFormFields).map(el => el.parentElement.innerText.trim());
            const customMsg = document.getElementById('pre_form_message').value.trim();
            preFormDisplay = `<p class="font-bold text-success">Enabled</p>
                              <p class="mt-1"><b>Fields:</b> Name, ${fieldNames.join(', ')}</p>
                              <p class="mt-1 text-gray-400 italic">"${customMsg || 'Default welcome message'}"</p>`;
        }

        // 3. Populate Review Sidebar
        const revTmpl = document.getElementById('rev-tmpl');
        revTmpl.innerHTML = '';
        checkedTemplates.forEach(c => revTmpl.innerHTML += `<p class="flex items-center gap-2"><i class="bi bi-file-check text-success"></i> ${c.dataset.title}</p>`);
        
        document.getElementById('rev-name').innerText = linkName;
        document.getElementById('rev-expiry').innerText = document.getElementById('expiry_type').value.replace('_', ' ');
        document.getElementById('rev-limit').innerText = document.getElementById('in_limit').value || 'Unlimited';
        
        // Set Pre-Form Review Data
        document.getElementById('rev-preform-data').innerHTML = preFormDisplay;

        const revPref = document.getElementById('rev-prefills');
        revPref.innerHTML = '';
        document.querySelectorAll('.prefill-input-field').forEach(i => {
            if(i.value.trim() !== '') revPref.innerHTML += `<p class="text-[10px]"><b>${i.dataset.field}:</b> ${i.value} <span class="text-gray-400">(${i.dataset.doc})</span></p>`;
        });
        if(revPref.innerHTML === '') revPref.innerHTML = 'None';

        openOffcanvas('review');
    }
</script>
@endsection