@extends('layouts.app')
@section('title', 'Signature Request')

@section('content')
<!-- QUILL EDITOR STYLES -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
<style>
    /* Customizing Quill to match your theme */
    .ql-toolbar.ql-snow {
        border-color: #E2E8F0;
        background-color: #F8FAFC;
        border-radius: 8px 8px 0 0;
    }
    .ql-container.ql-snow {
        border-color: #E2E8F0;
        border-radius: 0 0 8px 8px;
        /* min-height: 250px; */
        min-height: 50px;
        font-family: inherit;
    }
    .dark .ql-toolbar.ql-snow {
        border-color: #313d4a;
        background-color: #24303f;
    }
    .dark .ql-container.ql-snow {
        border-color: #313d4a;
        background-color: #1a222c;
        color: #fff;
    }
    .dark .ql-snow .ql-stroke { stroke: #d1d5db; }
    .dark .ql-snow .ql-fill { fill: #d1d5db; }
    .dark .ql-snow .ql-picker { color: #d1d5db; }

    /* 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; /* Primary color */
    }
    input:focus + .slider {
        box-shadow: 0 0 1px #1a7a6e;
    }
    input:checked + .slider:before {
        transform: translateX(22px);
    }

    /* AUTOCOMPLETE STYLES */
    .autocomplete-results {
        position: absolute;
        z-index: 10000;
        background: white;
        border: 1px solid #E2E8F0;
        width: 100%;
        max-height: 200px;
        overflow-y: auto;
        border-radius: 8px;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        margin-top: 2px;
    }
    .dark .autocomplete-results {
        background: #1a222c;
        border-color: #313d4a;
    }
    .autocomplete-item {
        padding: 10px 15px;
        cursor: pointer;
        font-size: 13px;
        border-bottom: 1px solid #F1F5F9;
    }
    .dark .autocomplete-item {
        border-bottom-color: #313d4a;
    }
    .autocomplete-item:hover {
        background-color: #F8FAFC;
    }
    .dark .autocomplete-item:hover {
        background-color: #24303f;
    }
    .autocomplete-item .name { font-weight: 600; color: #1e293b; }
    .dark .autocomplete-item .name { color: #e2e8f0; }
    .autocomplete-item .email { font-size: 11px; color: #64748b; }

    /* CUSTOM 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: #1e293b;
        color: #fff;
        text-align: left;
        border-radius: 8px;
        padding: 12px;
        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 10px 15px -3px rgba(0, 0, 0, 0.3);
        pointer-events: none;
        text-transform: none; /* Prevents uppercase headers from affecting help text */
    }
    .help-popover-text::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -6px;
        border-width: 6px;
        border-style: solid;
        border-color: #1e293b transparent transparent transparent;
    }
    .help-icon-wrapper:hover .help-popover-text {
        visibility: visible;
        opacity: 1;
    }
    .dark .help-popover-text {
        background-color: #0f172a;
        border: 1px solid #334155;
    }
    .dark .help-popover-text::after {
        border-color: #334155 transparent transparent transparent;
    }
</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 -->
    <div class="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div>
            <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Request a Signature</h1>
			@if(session('is_plan_has_storage') === 'Yes' && $templates->isNotEmpty())
            <p class="text-sm text-gray-500 mt-1">Package ID: {{ $package_id }}</p>
            @endif
        </div>
        <!-- UPDATED: HOW IT WORKS BUTTON -->
        @if(session('is_plan_has_storage') === 'Yes' && $templates->isNotEmpty())
        <button type="button" onclick="openOffcanvas('how-it-works')" class="inline-flex items-center gap-2 px-4 py-2 bg-white dark:bg-meta-4 text-gray-700 dark:text-white border border-stroke dark:border-strokedark rounded-lg hover:bg-gray-100 dark:hover:bg-opacity-80 transition-all text-sm font-medium shadow-sm">
            <i class="bi bi-info-circle-fill text-primary"></i> How it works
        </button>
        @endif
    </div>


    @if(session('is_plan_has_storage') !== 'Yes')
        <!-- LIMIT REACHED MESSAGE -->
        <div class="rounded-2xl border border-red-200 bg-red-50 p-8 text-center dark:border-red-900/30 dark:bg-red-900/10">
                    <div class="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-100 dark:bg-red-900/30">
                        <svg class="h-8 w-8 text-red-600" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
                        </svg>
                    </div>
                    <h3 class="text-xl font-bold text-red-800 dark:text-red-500">Plan Storage Limit Reached</h3>
                    <p class="mt-2 text-gray-600 dark:text-gray-400">You reached your plan storage limit. Please upgrade your plan to continue requesting signatures.</p>
                    <div class="mt-6">
                        <a href="#" class="inline-flex items-center justify-center rounded-lg bg-brand-500 px-5 py-2.5 text-sm font-medium text-white ">
                            Upgrade Plan
                        </a>
                    </div>
                </div>
    @else


        @if($templates->isEmpty())
            <div class="rounded-sm border border-stroke bg-white py-20 px-4 text-center shadow-default dark:border-strokedark dark:bg-boxdark mb-5 pb-5">
                <div class="empty mt-4 mb-5 text-center p-4 text-gray-500">No templates yet — click "Add Template" to get started.</div>
                <a href="/tmplts/create" class="bg-brand-500 inline-flex items-center justify-center gap-2 rounded-lg py-3 text-sm font-medium text-white p-2">
                    <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <line x1="12" y1="5" x2="12" y2="19"></line>
                        <line x1="5" y1="12" x2="19" y2="12"></line>
                    </svg>Add Template
                </a>
            </div>
        @else

        <!-- MAIN FORM START -->
        <form id="master-signature-form" method="post" action="{{ route('save_signature_request') }}">
            @csrf
            <input type="hidden" name="txt_package_id" value="{{ $package_id }}">

            <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 Documents
                                    <!-- ADDED POPOVER -->
                                    <span class="help-icon-wrapper">
                                        <i class="bi bi-question-circle text-gray-400"></i>
                                        <span class="help-popover-text">Choose one or more document templates to send for signature. Only templates that contain configured fillable fields are available for selection.</span>
                                    </span>
                                    <!-- DOCUMENT STEP CHECKMARK -->
                                    <span id="check-icon-docs" class="hidden text-meta-3">
                                        <svg class="w-5 h-5 fill-current" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                            <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..." class="w-full pl-4 pr-10 py-2 border border-stroke rounded-lg outline-none focus:border-primary dark:bg-meta-4">
                                <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="chk_template[]" value="{{ $row->template_id }}" 
                                    class="template-checkbox w-5 h-5 text-primary rounded border-stroke"
                                    data-title="{{ $row->template_title }}"
                                    data-signers-json="{{ $row->template_json }}"
                                    data-img="pdf_img/{{ $row->template_file }}_1.jpg">
                                
                                <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"></i>
                                        <span class="font-medium text-gray-900 dark:text-white template-title-cell">{{ $row->template_title }}</span>
                                        
                                    </div>
                                    <div class="flex items-center gap-1 mt-1 text-xs text-gray-500">
                                        <span><i class="bi bi-people"></i> {{ $row->template_no_of_signers }} signers</span>
                                    </div>
                                </div>
                                
                                <!-- INDIVIDUAL PREVIEW BUTTON -->
                                <button type="button" 
                                        onclick="openPreview('{{ asset('templates/' . $row->template_file) }}')" 
                                        class="inline-flex items-center justify-center w-10 h-10 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-full transition-colors" 
                                        title="View Document">
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.644C3.483 8.612 7.957 4.5 12 4.5c4.043 0 8.517 4.112 9.963 7.178.07.142.07.307 0 .449-1.446 3.066-5.92 7.178-9.963 7.178-4.043 0-8.517-4.112-9.963-7.178Z" />
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0" />
                                    </svg>
                                </button>
                            </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 SUMMARY -->
                <div class="col-span-12 lg:col-span-4 space-y-6">
                    
                    <!-- Preferences 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">
                                Signature Preferences
                                <!-- ADDED POPOVER -->
                                <span class="help-icon-wrapper">
                                    <i class="bi bi-question-circle text-gray-400"></i>
                                    <span class="help-popover-text">Configure options such as sequential signing order and field visibility settings.</span>
                                </span>
                                <span id="check-icon-preferences" 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>
                            <button type="button" onclick="openOffcanvas('preferences')" class="text-sm text-primary hover:underline font-medium">Configure</button>
                        </div>
                        <div id="summary-preferences" class="text-sm text-gray-500 italic">Default settings applied</div>
                    </div>

                    <!-- Signing Mode 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">
                                Signing Mode
                                <!-- ADDED POPOVER -->
                                <span class="help-icon-wrapper">
                                    <i class="bi bi-question-circle text-gray-400"></i>
                                    <span class="help-popover-text">Choose whether to send signature requests by email or collect signatures in person during a face-to-face session.</span>
                                </span>
                                <span id="check-icon-mode" 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>
                            <button type="button" onclick="openOffcanvas('signing-mode')" class="text-sm text-primary hover:underline font-medium">Configure</button>
                        </div>
                        <div id="summary-mode" class="text-sm text-gray-500 italic">No mode selected</div>
                    </div>

                    <!-- Signers 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">
                                Add Signers
                                <!-- ADDED POPOVER -->
                                <span class="help-icon-wrapper">
                                    <i class="bi bi-question-circle text-gray-400"></i>
                                    <span class="help-popover-text">Add the names, email addresses, and other details for each signer.</span>
                                </span>
                                <span id="check-icon-signers" 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>
                            <button type="button" id="btn-config-signers" onclick="openOffcanvas('signers')" class="text-sm text-primary hover:underline font-medium opacity-50 cursor-not-allowed" disabled>Add Details</button>
                        </div>
                        <div id="summary-signers" class="space-y-2 text-sm text-gray-500 italic">Signer details not added</div>
                    </div>

                    <!-- ADDED: PREFILL 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">
                                Prefill Data
                                <span class="help-icon-wrapper">
                                    <i class="bi bi-question-circle text-gray-400"></i>
                                    <span class="help-popover-text">Enter initial values for document fields designated for the sender. This information will be populated in the document before it is sent to the signers.</span>
                                </span>
                                
                                <span id="check-icon-prefills" 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>
                            <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">Prefill data not added</div>
                    </div>

                    <!-- Message Card -->
                    <div id="message-card-wrapper" 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">
                                Message To Recepients
                                <!-- ADDED POPOVER -->
                                <span class="help-icon-wrapper">
                                    <i class="bi bi-question-circle text-gray-400"></i>
                                    <span class="help-popover-text">Enter a custom message to include with the signature request. If left blank, the default email template message will be used.</span>
                                </span>
                                <span id="check-icon-message" 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>
                            <button type="button" onclick="openOffcanvas('message')" class="text-sm text-primary hover:underline font-medium">Edit Message</button>
                        </div>
                        <div id="summary-message" class="text-sm text-gray-500 italic">Default message will be used</div>
                    </div>

                    <!-- Action Button -->
                    <button type="button" onclick="openOffcanvas('review')" 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 & Send
                    </button>
                </div>
            </div>

            <!-- OFFCANVAS PANELS -->

            <!-- 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">Prefill Information</h2>
                    <button type="button" onclick="closeOffcanvas()" class="text-2xl">&times;</button>
                </div>
                <div id="prefill-inputs-wrapper" 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>

            <!-- HOW IT WORKS OFFCANVAS -->
            <div id="how-it-works-offcanvas" class="offcanvas-panel flex flex-col h-full">
                <!-- Header -->
                <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 flex items-center gap-2">
                        <i class="bi bi-info-circle text-primary"></i> How it works
                    </h2>
                    <button type="button" onclick="closeOffcanvas()" class="text-2xl text-gray-500 hover:text-gray-700 dark:hover:text-white">&times;</button>
                </div>

                <!-- Scrollable Content -->
                <div class="p-6 space-y-8 overflow-y-auto flex-1">
                    <div class="relative pl-8 border-l-2 border-primary/20 space-y-10">
                        <div class="relative"><h4 class="font-bold text-gray-900 dark:text-white">1. Select Documents</h4><p class="text-sm text-gray-500 mt-1">Choose one or more templates. Use the Preview icon to view.</p></div>
                        <div class="relative"><h4 class="font-bold text-gray-900 dark:text-white">2. Configure Preferences</h4><p class="text-sm text-gray-500 mt-1">Set Sequential Signing or Field Visibility.</p></div>
                        <div class="relative"><h4 class="font-bold text-gray-900 dark:text-white">3. Choose a Signing Mode</h4><p class="text-sm text-gray-500 mt-1">Select Remote via Email or In-Person.</p></div>
                        <div class="relative"><h4 class="font-bold text-gray-900 dark:text-white">4. Add Signer Information</h4><p class="text-sm text-gray-500 mt-1">Enter name and email for each signer.</p></div>
                        <div class="relative"><h4 class="font-bold text-gray-900 dark:text-white">5. Customize the Email Message</h4><p class="text-sm text-gray-500 mt-1">Add a personalized message using the rich text editor.</p></div>
                        <div class="relative"><h4 class="font-bold text-gray-900 dark:text-white">6. Review and Send</h4><p class="text-sm text-gray-500 mt-1">Review everything and confirm to send.</p></div>
                    </div>
                </div>

                <!-- Footer -->
                <div class="p-6 border-t border-stroke bg-white dark:bg-boxdark">
                    <button type="button" onclick="closeOffcanvas()" class="w-full bg-primary hover:bg-opacity-90 transition-all px-4 py-2.5 rounded-lg text-white text-sm font-medium">Got it, let's start</button>
                </div>
            </div>

            <!-- PREFERENCES OFFCANVAS -->
            <div id="preferences-offcanvas" class="offcanvas-panel">
                <div class="p-6 border-b border-stroke flex justify-between items-center">
                    <h2 class="text-xl font-semibold">Preferences</h2>
                    <button type="button" onclick="closeOffcanvas()" class="text-2xl">&times;</button>
                </div>
                <div class="p-6 space-y-6">
                    <div class="space-y-4">
                        <div class="flex items-center justify-between p-4 border border-stroke dark:border-strokedark rounded-lg bg-gray-50 dark:bg-meta-4">
                            <div><div class="font-medium text-gray-900 dark:text-white">Sequential signing</div><div class="text-xs text-gray-500">Signers must sign in order</div></div>
                            <label class="switch"><input type="checkbox" name="sequential_signing" id="sequential_signing" value="Yes"><span class="slider"></span></label>
                        </div>
                        <div class="flex items-center justify-between p-4 border border-stroke dark:border-strokedark rounded-lg bg-gray-50 dark:bg-meta-4">
                            <div><div class="font-medium text-gray-900 dark:text-white">Field Visible</div><div class="text-xs text-gray-500">Visible to all signers</div></div>
                            <label class="switch"><input type="checkbox" name="field_visible" id="field_visible" value="Yes"><span class="slider"></span></label>
                        </div>
                    </div>
                </div>
                <div class="p-6 border-t border-stroke mt-auto">
                    <button type="button" onclick="savePreferencesSummary(); closeOffcanvas();" class="w-full bg-brand-500 text-white px-4 py-2 rounded-lg text-sm ">Apply Preferences</button>
                </div>
            </div>

            <!-- SIGNING MODE OFFCANVAS -->
            <div id="signing-mode-offcanvas" class="offcanvas-panel">
                <div class="p-6 border-b border-stroke flex justify-between items-center">
                    <h2 class="text-xl font-semibold">Signing Mode</h2>
                    <button type="button" onclick="closeOffcanvas()" class="text-2xl">&times;</button>
                </div>
                <div class="p-6 space-y-6">
                    <label class="block text-sm font-medium text-gray-700 dark:text-white mb-3">How will recipients sign?</label>
                    <div class="space-y-3">
                        <label class="flex items-start gap-3 p-4 border border-stroke rounded-lg cursor-pointer hover:border-primary transition-all">
                            <input type="radio" name="choose_mode" value="email" class="mt-1 mode-radio">
                            <div><div class="font-medium">Remote via Email</div><div class="text-xs text-gray-500">Send links</div></div>
                        </label>
                        <label class="flex items-start gap-3 p-4 border border-stroke rounded-lg cursor-pointer hover:border-primary transition-all">
                            <input type="radio" name="choose_mode" value="local" class="mt-1 mode-radio">
                            <div><div class="font-medium">In-Person Signing</div><div class="text-xs text-gray-500">Sign directly</div></div>
                        </label>
                    </div>
                </div>
                <div class="p-6 border-t border-stroke mt-auto">
                    <button type="button" onclick="saveModeSummary(); closeOffcanvas();" class="w-full bg-brand-500 text-white px-4 py-2 rounded-lg text-sm ">Apply Settings</button>
                </div>
            </div>

            <!-- SIGNERS OFFCANVAS -->
            <div id="signers-offcanvas" class="offcanvas-panel">
                <div class="p-6 border-b border-stroke flex justify-between items-center">
                    <h2 class="text-xl font-semibold flex items-center">
                        Signer Information
                        <span class="help-icon-wrapper signer-popover-wrapper">
                            <i class="bi bi-question-circle text-gray-400 text-sm ml-2"></i>
                            <span class="help-popover-text" style="height:100px">
                                Enter recipient details below. Syncs if Sequential is ON.
                            </span>
                        </span>
                    </h2>
                    <button type="button" onclick="closeOffcanvas()" class="text-2xl">&times;</button>
                </div>
                <div id="signer-inputs-wrapper" class="p-6 space-y-6 overflow-y-auto flex-1">
                    <p class="text-center text-gray-400 py-10">Select templates first.</p>
                </div>
                <div class="p-6 border-t border-stroke">
                    <button type="button" onclick="saveSignerSummary();" class="w-full bg-brand-500 text-white px-4 py-2 rounded-lg text-sm ">Save Signers</button>
                </div>
            </div>

            <!-- MESSAGE OFFCANVAS -->
            <div id="message-offcanvas" class="offcanvas-panel">
                <div class="p-6 border-b border-stroke flex justify-between items-center">
                    <h2 class="text-xl font-semibold">Email Message</h2>
                    <button type="button" onclick="closeOffcanvas()" class="text-2xl">&times;</button>
                </div>
                <div class="p-6 space-y-4 mb-10">
                    <label class="block text-sm font-medium">Custom message:</label>
                    <div id="quill-editor-container"><div id="editor">{!! $email_settings_data->signature_email_body ?? '' !!}</div></div>
                    <input type="hidden" name="txt_message" id="txt_message">
                </div>
                <div class="p-6 border-stroke mt-auto mt-4">
                    <button type="button" onclick="saveMessageSummary(); closeOffcanvas();" class="w-full bg-brand-500 text-white px-4 py-2 rounded-lg text-sm ">Save Message</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 & Send</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-docs" 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">Prefill Values</h4><div id="rev-prefills" class="space-y-1 text-sm font-medium italic text-gray-400">None</div></div>
                    <div class="border-t pt-4"><h4 class="text-xs font-bold uppercase text-gray-400 mb-2">Mode</h4><p id="rev-mode" class="text-sm font-bold text-primary"></p></div>
                    <div class="border-t pt-4"><h4 class="text-xs font-bold uppercase text-gray-400 mb-2">Signers</h4><div id="rev-signers" class="space-y-3"></div></div>
                </div>
                <div class="p-6 border-t border-stroke bg-white dark:bg-boxdark">
                    <button type="submit" id="submit-request-btn" class="w-full bg-brand-500 text-white px-4 py-2 rounded-lg text-sm ">Confirm & Send Request</button>
                    <button type="button" onclick="closeOffcanvas()" class="w-full mt-2 text-sm text-gray-500">Back to editing</button>
                </div>
            </div>
        </form>
        @endif
    @endif
</div>

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

<!-- PREVIEW OFFCANVAS -->
<div id="offcanvas-preview" class="fixed top-0 right-0 h-full bg-white dark:bg-boxdark shadow-2xl transform translate-x-full transition-transform duration-300 ease-in-out border-l border-stroke flex flex-col" style="z-index:100000;width:450px">
    <div class="p-4 border-b border-stroke flex items-center justify-between"><h3 class="font-bold">Preview</h3><button type="button" onclick="closePreview()" class="text-2xl">&times;</button></div>
    <div class="flex-1 overflow-hidden bg-gray-100 dark:bg-meta-4"><iframe id="pdf-preview-frame" src="" class="w-full h-full border-none"></iframe></div>
</div>

<style>
    .offcanvas-panel {
        position: fixed; top: 0; right: -500px; width: 100%; max-width: 500px; height: 100vh;
        background: #fff; z-index: 1000; 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; }
    .document-card input:checked + div { border-color: #1a7a6e; }
    .signer-popover-wrapper { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
    .signer-popover-wrapper .help-popover-text { visibility: hidden; width: 220px; background-color: #333; color: #fff; text-align: center; border-radius: 6px; padding: 10px; position: absolute; z-index: 9999; top: 150%; left: 50%; transform: translateX(-50%); white-space: normal; font-weight: normal; font-size: 12px; line-height: 1.4; box-shadow: 0px 4px 12px rgba(0,0,0,0.3); opacity: 0; transition: opacity 0.2s, transform 0.2s; pointer-events: none; }
    .signer-popover-wrapper .help-popover-text::after { content: ""; position: absolute; bottom: 100%; left: 50%; margin-left: -6px; border-width: 6px; border-style: solid; border-color: transparent transparent #333 transparent; }
    .signer-popover-wrapper:hover .help-popover-text { visibility: visible; opacity: 1; transform: translateX(-50%) translateY(0); }
</style>

<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

<script>
    let quill;

    document.querySelectorAll('.template-checkbox').forEach(cb => {
        cb.addEventListener('change', () => {
            const checked = document.querySelectorAll('.template-checkbox:checked');
            document.getElementById('doc-count-badge').innerText = checked.length;
            
            if(checked.length > 0) {
                document.getElementById('check-icon-docs').classList.remove('hidden');
                document.getElementById('btn-config-signers').disabled = false;
                document.getElementById('btn-config-signers').classList.remove('opacity-50', 'cursor-not-allowed');
                document.getElementById('btn-config-prefills').disabled = false;
                document.getElementById('btn-config-prefills').classList.remove('opacity-50', 'cursor-not-allowed');
            } else {
                document.getElementById('check-icon-docs').classList.add('hidden');
                document.getElementById('btn-config-signers').disabled = true;
                document.getElementById('btn-config-signers').classList.add('opacity-50', 'cursor-not-allowed');
                document.getElementById('btn-config-prefills').disabled = true;
                document.getElementById('btn-config-prefills').classList.add('opacity-50', 'cursor-not-allowed');
            }
            renderSignerInputs(checked);
            renderPrefillInputs(checked);
        });
    });

    function renderPrefillInputs(checkedNodes) {
        const wrapper = document.getElementById('prefill-inputs-wrapper');
        wrapper.innerHTML = '';
        if(checkedNodes.length === 0) {
            wrapper.innerHTML = '<p class="text-center text-gray-400 py-10">No documents selected.</p>';
            return;
        }
        let hasFields = false;
        checkedNodes.forEach(node => {
            const templateId = node.value;
            const title = node.dataset.title;
            let templateJson = {};
            try { templateJson = JSON.parse(node.dataset.signersJson); } catch(e) {}
            const prefillFields = (templateJson.fields || []).filter(f => f.recipient && f.recipient.id === 'prefill');
            if(prefillFields.length > 0) {
                hasFields = true;
                let html = `<div class="p-4 bg-gray-50 dark:bg-meta-4 rounded-lg border border-stroke mb-6"><h4 class="font-bold text-primary mb-4 truncate"><i class="bi bi-pencil-square"></i> ${title}</h4>`;
                prefillFields.forEach(field => {
                    html += `<div class="mb-4"><label class="block text-xs font-bold text-gray-400 uppercase mb-1">${field.name}</label><input type="hidden" name="prefill_label-${templateId}-${field.id}" value="${field.name}"><input type="text" name="prefill_val-${templateId}-${field.id}" class="prefill-input-field w-full rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm dark:bg-gray-900 dark:border-gray-700" placeholder="Enter value"></div>`;
                });
                html += `</div>`;
                wrapper.innerHTML += html;
            }
        });
        if(!hasFields) wrapper.innerHTML = '<p class="text-center text-gray-400 py-10">No prefill fields found.</p>';
    }

    function savePrefillSummary() {
        const fields = document.querySelectorAll('.prefill-input-field');
        let count = 0;
        fields.forEach(f => { if(f.value.trim() !== '') count++; });
        document.getElementById('summary-prefills').innerHTML = count > 0 ? `<span class="text-primary font-bold"><i class="bi bi-check-circle"></i> ${count} fields filled</span>` : `<span class="text-gray-500 italic">No fields filled</span>`;
        if(count > 0) document.getElementById('check-icon-prefills').classList.remove('hidden');
    }

    function renderSignerInputs(checkedNodes) {
        const wrapper = document.getElementById('signer-inputs-wrapper');
        wrapper.innerHTML = '';
        if(checkedNodes.length === 0) {
            wrapper.innerHTML = '<p class="text-center text-gray-400 py-10">Select templates first.</p>';
            return;
        }
        checkedNodes.forEach(node => {
            const templateId = node.value;
            const title = node.dataset.title;
            let templateJson = {};
            try { templateJson = JSON.parse(node.dataset.signersJson); } catch(e) {}
            let signers = (templateJson.signers || []).filter(s => s.id !== 'prefill');
            let html = `<div class="p-4 bg-gray-50 dark:bg-meta-4 rounded-lg border border-stroke mb-6 signer-doc-group" data-doc-title="${title}">
                        <h4 class="font-bold text-primary mb-4 truncate"><i class="bi bi-file-earmark-pdf"></i> ${title}</h4>`;
            signers.forEach((signer, idx) => {
                let num = idx + 1;
                html += `<div class="bg-white dark:bg-boxdark p-4 rounded border border-stroke mb-4 signer-input-row">
                            <p class="text-[10px] font-bold text-gray-400 uppercase mb-2 signer-label-text">Signer ${num}: ${signer.name}</p>
                            <input type="hidden" name="signer_id-${templateId}-${num}" value="${signer.id}">
                            <div class="space-y-3">
                                <div class="relative"><input type="text" name="name-${templateId}-${num}" data-signer-pos="${num}" autocomplete="off" class="signer-name-field w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm dark:border-gray-700 dark:text-white" placeholder="Name" required><div class="autocomplete-results hidden"></div></div>
                                <input type="email" name="email-${templateId}-${num}" data-signer-pos="${num}" autocomplete="off" class="signer-email-field w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm dark:border-gray-700 dark:text-white" placeholder="Email" required>
                            </div>
                        </div>`;
            });
            html += `</div>`;
            wrapper.innerHTML += html;
        });
        attachAutocompleteListeners();
    }

    function attachAutocompleteListeners() {
        document.querySelectorAll('.signer-name-field, .signer-email-field').forEach(input => {
            input.addEventListener('input', function() {
                const val = this.value;
                const pos = this.getAttribute('data-signer-pos');
                const isSequential = document.getElementById('sequential_signing').checked;

                // Sequential Syncing Logic
                if (isSequential) {
                    const isNameField = this.classList.contains('signer-name-field');
                    const selector = isNameField ? `.signer-name-field[data-signer-pos="${pos}"]` : `.signer-email-field[data-signer-pos="${pos}"]`;
                    document.querySelectorAll(selector).forEach(el => { if (el !== this) el.value = val; });
                }

                if (this.classList.contains('signer-name-field')) {
                    const resultsContainer = this.nextElementSibling;
                    if (val.length < 1) { resultsContainer.classList.add('hidden'); return; }
                    fetch(`/search_contacts?term=${encodeURIComponent(val)}`).then(res => res.json()).then(data => {
                        resultsContainer.innerHTML = '';
                        if (data.length > 0) {
                            resultsContainer.classList.remove('hidden');
                            data.forEach(contact => {
                                const fullName = `${contact.contact_firstname} ${contact.contact_lastname}`.trim();
                                const div = document.createElement('div');
                                div.className = 'autocomplete-item';
                                div.innerHTML = `<div class="name">${fullName}</div><div class="email">${contact.contact_email}</div>`;
                                div.onclick = () => {
                                    this.value = fullName;
                                    const emailField = this.closest('.space-y-3').querySelector('.signer-email-field');
                                    emailField.value = contact.contact_email;
                                    if (isSequential) {
                                        document.querySelectorAll(`.signer-name-field[data-signer-pos="${pos}"]`).forEach(el => el.value = fullName);
                                        document.querySelectorAll(`.signer-email-field[data-signer-pos="${pos}"]`).forEach(el => el.value = contact.contact_email);
                                    }
                                    resultsContainer.classList.add('hidden');
                                };
                                resultsContainer.appendChild(div);
                            });
                        } else resultsContainer.classList.add('hidden');
                    });
                }
            });
        });
    }

    function savePreferencesSummary() {
        const seq = document.getElementById('sequential_signing').checked;
        const vis = document.getElementById('field_visible').checked;
        let active = [];
        if(seq) active.push("Sequential");
        if(vis) active.push("Visible Fields");
        document.getElementById('summary-preferences').innerHTML = active.length > 0 ? `<span class="text-primary font-bold"><i class="bi bi-check-circle"></i> ${active.join(', ')}</span>` : `<span class="text-gray-500 italic">No preferences selected</span>`;
        if(active.length > 0) document.getElementById('check-icon-preferences').classList.remove('hidden');
    }

    function saveModeSummary() {
        const mode = document.querySelector('input[name="choose_mode"]:checked');
        const messageCard = document.getElementById('message-card-wrapper');
        if(mode) {
            document.getElementById('summary-mode').innerHTML = `<span class="text-primary font-bold"><i class="bi bi-check-circle"></i> ${mode.value === 'email' ? 'Remote Email' : 'In-Person'}</span>`;
            document.getElementById('check-icon-mode').classList.remove('hidden');
            if(mode.value === 'local') messageCard.classList.add('hidden');
            else messageCard.classList.remove('hidden');
        }
    }

    async function saveSignerSummary() {
        const groups = document.querySelectorAll('.signer-doc-group');
        let validationErrors = [];
        let totalSigners = 0;

        groups.forEach(group => {
            const docTitle = group.getAttribute('data-doc-title');
            const rows = group.querySelectorAll('.signer-input-row');
            rows.forEach(row => {
                const name = row.querySelector('.signer-name-field').value.trim();
                const email = row.querySelector('.signer-email-field').value.trim();
                const label = row.querySelector('.signer-label-text').innerText;
                if (!name || !email) {
                    validationErrors.push(`${docTitle}: ${label} is incomplete.`);
                }
                totalSigners++;
            });
        });

        if (validationErrors.length > 0) {
            alert("Validation Errors:\n\n" + validationErrors.join("\n"));
            return;
        }

        const names = document.querySelectorAll('.signer-name-field');
        const emails = document.querySelectorAll('.signer-email-field');
        for (let i = 0; i < names.length; i++) {
            if (names[i].value && emails[i].value) {
                await fetch('/ajax_save_contacts', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                    body: JSON.stringify({ name: names[i].value, email: emails[i].value })
                });
            }
        }
        document.getElementById('summary-signers').innerHTML = `<span class="text-primary font-bold"><i class="bi bi-person-check"></i> ${totalSigners} signers</span>`;
        document.getElementById('check-icon-signers').classList.remove('hidden');
        closeOffcanvas();
    }

    function saveMessageSummary() {
        if(quill) document.getElementById('txt_message').value = quill.root.innerHTML;
        document.getElementById('summary-message').innerHTML = `<span class="text-primary font-bold"><i class="bi bi-chat-left-text"></i> Message saved</span>`;
        document.getElementById('check-icon-message').classList.remove('hidden');
    }

    function renderReview() {
        const docBox = document.getElementById('rev-docs');
        const modeBox = document.getElementById('rev-mode');
        const signerBox = document.getElementById('rev-signers');
        const prefBox = document.getElementById('rev-prefills');
        docBox.innerHTML = ''; signerBox.innerHTML = ''; prefBox.innerHTML = '';
        
        document.querySelectorAll('.template-checkbox:checked').forEach(cb => {
            docBox.innerHTML += `<p class="flex items-center gap-2"><i class="bi bi-file-check text-success"></i> ${cb.dataset.title}</p>`;
        });
        document.querySelectorAll('.prefill-input-field').forEach(input => {
            if(input.value.trim() !== '') prefBox.innerHTML += `<p class="text-xs">${input.previousElementSibling.value}: ${input.value}</p>`;
        });
        const mode = document.querySelector('input[name="choose_mode"]:checked');
        modeBox.innerText = mode ? (mode.value === 'email' ? 'Remote Email' : 'In-Person') : 'Not selected';
        document.querySelectorAll('.signer-name-field').forEach((n, i) => {
            if(n.value) {
                const email = document.querySelectorAll('.signer-email-field')[i].value;
                signerBox.innerHTML += `<div class="bg-gray-50 p-2 rounded"><p class="font-bold text-xs">${n.value}</p><p class="text-[10px] text-gray-500">${email}</p></div>`;
            }
        });
    }

    function openOffcanvas(id) {
        if(id === 'review') {
            if(!document.querySelector('input[name="choose_mode"]:checked')) { alert("Select Signing Mode."); openOffcanvas('signing-mode'); return; }
            renderReview();
        }
        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 closeAllSidebars() { closeOffcanvas(); closePreview(); }

    function openPreview(src) {
        document.getElementById('pdf-preview-frame').src = src;
        document.getElementById('offcanvas-preview').classList.remove('translate-x-full');
        document.getElementById('offcanvas-overlay').classList.remove('hidden');
    }
    function closePreview() {
        document.getElementById('pdf-preview-frame').src = "";
        document.getElementById('offcanvas-preview').classList.add('translate-x-full');
    }

    window.onload = () => {
        quill = new Quill('#editor', { theme: 'snow', modules: { toolbar: [['bold', 'italic', 'underline'], [{ 'list': 'ordered'}, { 'list': 'bullet' }], ['link', 'clean']] } });
        const templateSearch = document.getElementById('templateSearch');
        const searchIcon = document.getElementById('searchIcon');
        templateSearch.addEventListener('input', function() {
            const query = this.value.toLowerCase();
            if (this.value.length > 0) {
                searchIcon.classList.replace('bi-search', 'bi-x-circle-fill');
                searchIcon.classList.add('cursor-pointer', 'text-primary');
            } else {
                searchIcon.classList.replace('bi-x-circle-fill', 'bi-search');
                searchIcon.classList.remove('cursor-pointer', 'text-primary');
            }
            document.querySelectorAll('.document-card').forEach(card => {
                card.style.display = card.querySelector('.template-title-cell').innerText.toLowerCase().includes(query) ? 'flex' : 'none';
            });
        });
        searchIcon.addEventListener('click', function() {
            if (this.classList.contains('bi-x-circle-fill')) {
                templateSearch.value = '';
                this.classList.replace('bi-x-circle-fill', 'bi-search');
                this.classList.remove('cursor-pointer', 'text-primary');
                document.querySelectorAll('.document-card').forEach(card => card.style.display = 'flex');
                templateSearch.focus();
            }
        });
    };
</script>
@endsection

<style type="text/css">
    .offcanvas-panel { z-index: 999999 !important; }
    .offcanvas-panel.active { right: 0; z-index: 99999; }
</style>