@extends('layouts.app')
@section('title', 'Bulk 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>
    /* Reuse your existing theme styles */
    .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: 150px; 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; }
    
    .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:checked + .slider:before { transform: translateX(22px); }

    /* Offcanvas System */
    .offcanvas-panel {
        position: fixed; top: 0; right: -100%; 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; }
    #offcanvas-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 99998; display: none; }
    #offcanvas-overlay.show { display: block; }

    /* Help Tooltips */
    .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; font-size: 12px; border: 1px solid rgba(0,0,0,.2); box-shadow: 0 .5rem 1rem rgba(0,0,0,.175); pointer-events: none; }
    .help-icon-wrapper:hover .help-popover-text { visibility: visible; opacity: 1; }
    .dark .help-popover-text { background-color: #1a222c; border-color: #313d4a; color: #e2e8f0; }

    /* Popover header & body */
    .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;
    }
    .dark .popover-header {
        background-color: #24303f;
        border-bottom: 1px solid #313d4a;
        color: #fff;
    }
    .dark .popover-body {
        color: #d1d5db;
    }
</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>
            <h2 class="text-xl font-semibold text-gray-800 dark:text-white/90 flex items-center">
                Bulk Signature Request
                <span class="help-icon-wrapper">
                    <i class="bi bi-question-circle text-gray-400"></i>
                    <span class="help-popover-text p-3">
                        Bulk signing allows you to create many independent signature requests at once using a CSV file.
                    </span>
                </span>
            </h2>
            <p class="text-sm text-gray-500 dark:text-gray-400">Upload recipient data to create independent signature requests in bulk.</p>
            <p class="text-xs font-mono text-gray-400 mt-2">Batch Identifier: {{ $package_id }}</p>
        </div>
    </div>

    <!-- MAIN FORM -->
    <form id="bulk-signature-form" method="POST" action="{{ route('bulk.send') }}" enctype="multipart/form-data">
        @csrf
        <input type="hidden" name="bulk_guid" value="{{ $package_id }}">
        <!-- This hidden field will store the validated CSV data as a JSON string for the final post -->
        <input type="hidden" name="csv_json_data" id="csv_json_data">

        <div class="grid grid-cols-12 gap-6">
            
            <!-- LEFT: Template 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 flex justify-between items-center">
                        <h2 class="text-lg font-semibold text-gray-900 dark:text-white">1. Select Template(s)</h2>
                        <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 dark:bg-meta-4">
                        </div>
                    </div>
                    
                    <div class="p-6 space-y-3 overflow-y-auto max-h-[500px]">
                        @foreach($templates as $row)
                        <div class="document-card group flex items-center gap-4 p-4 border border-stroke 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"
                                data-title="{{ $row->template_title }}"
                                data-signers-count="{{ $row->template_no_of_signers }}"
                                data-signers-json="{{ $row->template_json }}">
                            
                            <div class="flex-1 cursor-pointer" onclick="this.parentElement.querySelector('.template-checkbox').click()">
                                <span class="font-medium text-gray-900 dark:text-white template-title-cell">{{ $row->template_title }}</span>
                                <div class="text-xs text-gray-500 mt-1">
                                    <i class="bi bi-people"></i> {{ $row->template_no_of_signers }} Signer Positions
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    <div class="p-4 bg-gray-50 dark:bg-meta-4/20 text-center text-xs text-gray-500">
                        <span id="doc-count-badge">0</span> templates selected
                    </div>
                </div>
            </div>

            <!-- RIGHT: Config Summary -->
            <div class="col-span-12 lg:col-span-4 space-y-6">

                <!-- Inside the Right Column (col-span-12 lg:col-span-4), above the Recipient CSV Card -->

                <!-- NEW: Batch Name Card -->
                <div class="bg-white dark:bg-boxdark rounded-lg border border-stroke 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">
                            1. Batch Name / Label
                            <span class="help-icon-wrapper">
                                <i class="bi bi-question-circle text-gray-400"></i>
                                <span class="help-popover-text p-3">Give this batch a name to identify it easily in your history (e.g., "September Payroll" or "Onboarding Group A").</span>
                            </span>
                        </h3>
                    </div>
                    <input type="text" name="batch_name" required maxlength="150" placeholder="Enter a descriptive name..." 
                        class="w-full rounded-lg border border-stroke bg-transparent py-2.5 px-4 text-sm outline-none focus:border-primary dark:border-strokedark dark:bg-meta-4">
                    <p class="text-[10px] text-gray-400 mt-2 italic">This name is for your internal reference.</p>
                </div>
                
                <!-- Recipient CSV Card -->
                <div class="bg-white dark:bg-boxdark rounded-lg border border-stroke p-6 shadow-sm">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="font-semibold text-gray-900 dark:text-white">2. Add Recipients</h3>
                        <button type="button" id="btn-open-csv" onclick="openOffcanvas('csv')" class="text-sm text-primary hover:underline font-medium opacity-50 cursor-not-allowed" disabled>Upload CSV</button>
                    </div>
                    <div id="summary-csv" class="text-sm text-gray-500 italic">Select templates to enable upload</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">
                            3. 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">Prefill Data</span>
                                    <span class="popover-body">Enter initial values for document fields designated for the sender. This information will be populated across the generated batch.</span>
                                </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>

                <!-- Preferences Card -->
                <div class="bg-white dark:bg-boxdark rounded-lg border border-stroke p-6 shadow-sm">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="font-semibold text-gray-900 dark:text-white">4. Preferences</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>

                <!-- Mode/Settings Card -->
                <div class="bg-white dark:bg-boxdark rounded-lg border border-stroke p-6 shadow-sm">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="font-semibold text-gray-900 dark:text-white">5. Signing Mode</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 text-primary font-bold"><i class="bi bi-check-circle"></i> Remote Email</div>
                    <input type="hidden" name="signing_mode" id="signing_mode_val" value="email">
                </div>

                <!-- Message Card -->
                <div class="bg-white dark:bg-boxdark rounded-lg border border-stroke p-6 shadow-sm">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="font-semibold text-gray-900 dark:text-white">6. Custom Message</h3>
                        <button type="button" onclick="openOffcanvas('message')" class="text-sm text-primary hover:underline font-medium">Edit</button>
                    </div>
                    <div id="summary-message" class="text-sm text-gray-500 italic">Default message will be used</div>
                    <input type="hidden" name="txt_message" id="txt_message">
                </div>

                <!-- Action Button -->
                <button type="button" id="btn-review-main" 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 opacity-50 cursor-not-allowed" disabled>
                    <i class="bi bi-send-check"></i> Review & Create Bulk Batch
                </button>
            </div>
        </div>

        <!-- OFFCANVAS: CSV UPLOAD -->
        <div id="csv-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">Recipient CSV Upload</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 class="bg-blue-50 dark:bg-blue-900/20 p-4 rounded-lg text-sm text-blue-800 dark:text-blue-300">
                    Recipient data must be provided in a CSV file following the required format.
                    <button type="button" onclick="downloadSample()" class="mt-2 block font-bold underline"><i class="bi bi-download"></i> Download Sample CSV for Selected Templates</button>
                </div>

                <div id="csv-dropzone" class="border-2 border-dashed border-stroke p-10 text-center rounded-lg hover:border-primary cursor-pointer transition-all" onclick="document.getElementById('csv_file_input').click()">
                    <input type="file" id="csv_file_input" class="hidden" accept=".csv">
                    <i id="csv-upload-icon" class="bi bi-cloud-arrow-up text-4xl text-gray-400"></i>
                    <p class="mt-2 text-sm text-gray-500" id="file-name-display">Click to select CSV file</p>
                </div>

                <!-- SUCCESS MESSAGE BANNER ON VALIDATION -->
                <div id="csv-success-banner" class="hidden p-4 rounded-lg bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 text-green-800 dark:text-green-300 text-sm">
                    <div class="flex items-center gap-2 font-bold mb-1">
                        <i class="bi bi-check-circle-fill text-green-600 dark:text-green-400 text-lg"></i>
                        <span>CSV File Successfully Verified</span>
                    </div>
                    <p class="text-xs text-green-700 dark:text-green-300 pl-6" id="csv-success-details"></p>
                </div>

                <div id="csv-preview-container" class="hidden">
                    <h4 class="text-xs font-bold text-gray-400 uppercase mb-2">CSV Validated: First 5 Rows</h4>
                    <div id="preview-table-wrapper" class="overflow-x-auto text-[10px] border border-stroke rounded"></div>
                    <p id="total-rows-text" class="mt-2 text-meta-3 font-bold text-sm"></p>
                </div>
            </div>
            <!-- BUTTON ACTIONS FOOTER -->
            <div class="p-6 border-t border-stroke">
                <button type="button" id="btn-validate-csv" class="w-full bg-brand-500 text-white py-3 rounded-lg font-bold">Validate CSV & Save</button>
                <button type="button" id="btn-done-csv" onclick="finishCsvOffcanvas()" class="w-full bg-brand-500 text-white py-3 rounded-lg font-bold hidden items-center justify-center gap-2">
                    <i class="bi bi-check-circle"></i> <!-- Done & Close --> Save
                </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
                    <span class="help-icon-wrapper">
                        <i class="bi bi-question-circle text-gray-400 text-sm ml-2"></i>
                        <span class="help-popover-text" style="height:130px;width:400px">
                            <span class="popover-header">Pre-filled Document Fields</span>
                            <span class="popover-body">These fields were configured as pre-fill fields when the template was prepared. Enter any required values before generating the bulk batch. Pre-fill fields are completed by you and are applied across all generated requests.</span>
                        </span>
                    </span>
                </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>

        <!-- OFFCANVAS: PREFERENCES -->
        <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">Batch Preferences</h2>
                <button type="button" onclick="closeOffcanvas()" class="text-2xl">&times;</button>
            </div>
            <div class="p-6 space-y-6">
                <div class="flex items-center justify-between p-4 border border-stroke rounded-lg">
                    <div><div class="font-medium">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" value="Yes"><span class="slider"></span></label>
                </div>

                <!-- RESTORED: Field Visible -->
                <div class="flex items-center justify-between p-4 border border-stroke rounded-lg">
                    <div><div class="font-medium">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" value="Yes"><span class="slider"></span></label>
                </div>

                <div class="flex items-center justify-between p-4 border border-stroke rounded-lg">
                    <div><div class="font-medium">Random Sending Delay</div><div class="text-xs text-gray-500">Gap between emails (3s)</div></div>
                    <label class="switch"><input type="checkbox" name="random_delay" value="3" checked><span class="slider"></span></label>
                </div>
            </div>
            <div class="mt-auto p-6 border-t"><button type="button" onclick="closeOffcanvas()" class="w-full bg-brand-500 text-white py-3 rounded-lg">Apply</button></div>
        </div>

        <!-- OFFCANVAS: SIGNING MODE -->
        <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-3">
                <label class="flex items-center gap-3 p-4 border border-stroke rounded-lg cursor-pointer">
                    <input type="radio" name="mode_select" value="email" checked onchange="updateMode(this)">
                    <div><div class="font-medium">Remote via Email</div><div class="text-xs text-gray-500">Recipients get independent links</div></div>
                </label>
                <label class="flex items-center gap-3 p-4 border border-stroke rounded-lg cursor-pointer">
                    <input type="radio" name="mode_select" value="local" onchange="updateMode(this)">
                    <div><div class="font-medium">In-Person Signing</div><div class="text-xs text-gray-500">Manage links via Dashboard</div></div>
                </label>
            </div>
        </div>

        <!-- OFFCANVAS: MESSAGE -->
        <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">Shared Email Message</h2>
                <button type="button" onclick="closeOffcanvas()" class="text-2xl">&times;</button>
            </div>
            <div class="p-6 space-y-4">
                <div id="editor-container"><div id="quill-editor">{!! $email_settings_data->signature_email_body ?? '' !!}</div></div>
                <p class="text-xs text-gray-400">This message applies to all requests in this batch.</p>
            </div>
            <div class="mt-auto p-6 border-t"><button type="button" onclick="saveMessage()" class="w-full bg-brand-500 text-white py-3 rounded-lg">Save Message</button></div>
        </div>

        <!-- OFFCANVAS: REVIEW -->
        <div id="review-offcanvas" class="offcanvas-panel">
            <div class="p-6 border-b border-stroke flex justify-between items-center bg-success/10">
                <h2 class="text-xl font-semibold text-success">Review Bulk Request</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 id="rev-warning-smtp" class="bg-orange-50 border border-orange-200 p-4 rounded-lg text-sm text-orange-800 mb-4 hidden">
                    <i class="bi bi-exclamation-triangle"></i> <strong>Email Volume Warning:</strong> <span id="rev-count-text">0</span> emails will be sent. Ensure your SMTP provider allows this volume.
                </div>
                <div><h4 class="text-xs font-bold uppercase text-gray-400 mb-2">Selected Templates</h4><div id="rev-templates" class="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">Recipient Count</h4><p id="rev-recipients" class="text-lg font-bold text-primary"></p></div>
                <div class="border-t pt-4"><h4 class="text-xs font-bold uppercase text-gray-400 mb-2">Signing Mode</h4><p id="rev-mode" class="text-sm font-bold"></p></div>
            </div>
            <div class="p-6 border-t bg-gray-50 dark:bg-meta-4">
                <button type="submit" id="submit-bulk-btn" class="w-full bg-brand-500 text-white py-4 rounded-lg font-bold shadow-lg">Confirm & Send Bulk Request</button>
                <p class="text-[10px] text-center mt-3 text-gray-400">Each recipient will receive their own independent signing request.</p>
            </div>
        </div>
    </form>
</div>

<div id="offcanvas-overlay" onclick="closeOffcanvas()"></div>

<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<script>
    let quill;
    let validatedRows = [];

    // Initialize Quill
    window.onload = () => {
        quill = new Quill('#quill-editor', { 
            theme: 'snow', 
            modules: { toolbar: [['bold', 'italic'], [{ 'list': 'ordered'}, { 'list': 'bullet' }], ['clean']] } 
        });
    };

    // Toggle logic for buttons based on selection
    document.querySelectorAll('.template-checkbox').forEach(cb => {
        cb.addEventListener('change', () => {
            const checked = document.querySelectorAll('.template-checkbox:checked');
            const uploadBtn = document.getElementById('btn-open-csv');
            const prefillBtn = document.getElementById('btn-config-prefills');
            document.getElementById('doc-count-badge').innerText = checked.length;
            
            if(checked.length > 0) {
                uploadBtn.disabled = false;
                uploadBtn.classList.remove('opacity-50', 'cursor-not-allowed');
                prefillBtn.disabled = false;
                prefillBtn.classList.remove('opacity-50', 'cursor-not-allowed');
            } else {
                uploadBtn.disabled = true;
                uploadBtn.classList.add('opacity-50', 'cursor-not-allowed');
                prefillBtn.disabled = true;
                prefillBtn.classList.add('opacity-50', 'cursor-not-allowed');
                validatedRows = []; // Reset if templates change
                document.getElementById('csv_json_data').value = "";
                resetCsvButtonState();
                updateFinalButton();
            }
            renderPrefillInputs(checked);
        });
    });

    // Prefill Inputs Render Function
    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-file-earmark-pdf"></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>';
    }

    // Prefill Save Summary Function
    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');
        } else {
            document.getElementById('check-icon-prefills').classList.add('hidden');
        }
    }

    // Reset button state whenever a new file is chosen
    document.getElementById('csv_file_input').addEventListener('change', function() {
        resetCsvButtonState();
        if (this.files[0]) {
            document.getElementById('file-name-display').innerText = this.files[0].name;
        	document.getElementById('file-name-display').classList.add('text-green-700');
        }
    });

    function resetCsvButtonState() {
        const validateBtn = document.getElementById('btn-validate-csv');
        const doneBtn = document.getElementById('btn-done-csv');
        const dropzone = document.getElementById('csv-dropzone');
        const uploadIcon = document.getElementById('csv-upload-icon');
        const successBanner = document.getElementById('csv-success-banner');

        validateBtn.classList.remove('hidden');
        validateBtn.disabled = false;
        validateBtn.innerText = "Validate CSV & Save";
        
        doneBtn.classList.add('hidden');
        doneBtn.classList.remove('flex');

        if (successBanner) successBanner.classList.add('hidden');
        if (dropzone) {
            dropzone.classList.remove('border-green-500', 'bg-green-50/30', 'dark:bg-green-900/10');
            dropzone.classList.add('border-stroke');
        }
        if (uploadIcon) {
            uploadIcon.className = 'bi bi-cloud-arrow-up text-4xl text-gray-400';
        }
    }

    function finishCsvOffcanvas() {
        closeOffcanvas();
        const reviewBtn = document.getElementById('btn-review-main');
        if (reviewBtn) {
            reviewBtn.scrollIntoView({ behavior: 'smooth', block: 'center' });
        }
    }

    function downloadSample() {
        const ids = Array.from(document.querySelectorAll('.template-checkbox:checked')).map(cb => cb.value);
        if(ids.length === 0) return alert("Select templates first.");
        window.location.href = `{{ route('bulk.sample') }}?ids=${ids.join(',')}`;
    }

    function openOffcanvas(id) {
        if(id === 'review') renderReview();
        document.getElementById(id + '-offcanvas').classList.add('active');
        document.getElementById('offcanvas-overlay').classList.add('show');
    }

    function closeOffcanvas() {
        document.querySelectorAll('.offcanvas-panel').forEach(el => el.classList.remove('active'));
        document.getElementById('offcanvas-overlay').classList.remove('show');
    }

    function updateMode(el) {
        document.getElementById('signing_mode_val').value = el.value;
        document.getElementById('summary-mode').innerHTML = `<span class="text-primary font-bold"><i class="bi bi-check-circle"></i> ${el.value === 'email' ? 'Remote Email' : 'In-Person'}</span>`;
        closeOffcanvas();
    }

    function saveMessage() {
        document.getElementById('txt_message').value = quill.root.innerHTML;
        document.getElementById('summary-message').innerHTML = `<span class="text-primary font-bold"><i class="bi bi-check-circle"></i> Message Saved</span>`;
        closeOffcanvas();
    }

    // Client-side CSV Text to Array Parser (handles quoted CSV values properly)
    function parseCSVText(text) {
        const lines = [];
        let row = [];
        let inQuotes = false;
        let cell = '';

        for (let i = 0; i < text.length; i++) {
            const char = text[i];
            const nextChar = text[i + 1];

            if (char === '"') {
                if (inQuotes && nextChar === '"') {
                    cell += '"';
                    i++;
                } else {
                    inQuotes = !inQuotes;
                }
            } else if (char === ',' && !inQuotes) {
                row.push(cell.trim());
                cell = '';
            } else if ((char === '\r' || char === '\n') && !inQuotes) {
                if (char === '\r' && nextChar === '\n') {
                    i++;
                }
                row.push(cell.trim());
                if (row.some(c => c !== '')) {
                    lines.push(row);
                }
                row = [];
                cell = '';
            } else {
                cell += char;
            }
        }
        if (cell !== '' || row.length > 0) {
            row.push(cell.trim());
            if (row.some(c => c !== '')) {
                lines.push(row);
            }
        }
        return lines;
    }

    // CSV Validation AJAX with strict Email Checking & Clear Status Messaging
    document.getElementById('btn-validate-csv').addEventListener('click', async function() {
        const validateBtn = this;
        const doneBtn = document.getElementById('btn-done-csv');
        const fileInput = document.getElementById('csv_file_input');
        const file = fileInput.files[0];
        const templateIds = Array.from(document.querySelectorAll('.template-checkbox:checked')).map(cb => cb.value);

        if(!file) return alert("Select a CSV file first.");
        if(templateIds.length === 0) return alert("Please select at least one template.");

        validateBtn.disabled = true;
        validateBtn.innerText = "Validating Email Formats & Structure...";

        // 1. Strict Client-side Email & Content Validation
        try {
            const fileContent = await file.text();
            const rows = parseCSVText(fileContent);

            if (rows.length < 2) {
                alert("The selected CSV file appears to be empty or missing data rows.");
                validateBtn.disabled = false;
                validateBtn.innerText = "Validate CSV & Save";
                return;
            }

            // Standard RFC compliant Email Regex pattern
            const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
            const emailErrors = [];

            // Calculate expected number of signer email columns based on templates
            let expectedSignerPositions = 0;
            document.querySelectorAll('.template-checkbox:checked').forEach(cb => {
                expectedSignerPositions += parseInt(cb.dataset.signersCount || 1);
            });

            // Iterate data rows starting from row 1 (row 0 is header)
            for (let rowIndex = 1; rowIndex < rows.length; rowIndex++) {
                const row = rows[rowIndex];
                let signerNum = 1;

                // Each signer position occupies 2 columns: Column 0 = Name, Column 1 = Email
                for (let col = 1; col < (expectedSignerPositions * 2); col += 2) {
                    const emailVal = (row[col] || '').trim();
                    const rowNumber = rowIndex + 1; // 1-based index matching spreadsheet row

                    if (!emailVal) {
                        emailErrors.push(`Row ${rowNumber}, Signer ${signerNum}: Email field is blank.`);
                    } else if (/^\d+$/.test(emailVal)) {
                        emailErrors.push(`Row ${rowNumber}, Signer ${signerNum}: '${emailVal}' contains only numbers/phone digits. A valid email address is required.`);
                    } else if (!emailRegex.test(emailVal)) {
                        emailErrors.push(`Row ${rowNumber}, Signer ${signerNum}: '${emailVal}' is not a valid email address.`);
                    }
                    signerNum++;
                }

                if (emailErrors.length >= 5) break; // Limit alerts to first few errors
            }

            if (emailErrors.length > 0) {
                alert("CSV Email Validation Failed:\n\n" + emailErrors.join("\n") + "\n\nPlease correct these email fields in your CSV file and try again.");
                validateBtn.disabled = false;
                validateBtn.innerText = "Validate CSV & Save";
                return;
            }

        } catch(readErr) {
            console.error("Error reading file:", readErr);
            alert("Could not read the uploaded CSV file. Please make sure it is a valid comma-separated file.");
            validateBtn.disabled = false;
            validateBtn.innerText = "Validate CSV & Save";
            return;
        }

        // 2. Server-side Validation
        const formData = new FormData();
        formData.append('csv_file', file);
        formData.append('template_ids', JSON.stringify(templateIds));
        formData.append('_token', '{{ csrf_token() }}');

        try {
            const res = await fetch("{{ route('bulk.validate') }}", { method: 'POST', body: formData });
            const data = await res.json();

            if(res.ok) {
                validatedRows = data.preview; // Just for preview
                document.getElementById('csv_json_data').value = JSON.stringify(data.all_rows); // Logic to pass all rows
                
                document.getElementById('summary-csv').innerHTML = `<span class="text-meta-3 font-bold"><i class="bi bi-check-circle"></i> ${data.count} Valid Signature Requests</span>`;
                renderPreviewTable(data.preview, data.count);
                updateFinalButton();

                // Visual Success Feedback
                const successBanner = document.getElementById('csv-success-banner');
                const successDetails = document.getElementById('csv-success-details');
                const dropzone = document.getElementById('csv-dropzone');
                const uploadIcon = document.getElementById('csv-upload-icon');

                if (successBanner && successDetails) {
                    successDetails.innerHTML = `<strong>${file.name}</strong> was validated successfully. <strong>${data.count}</strong> valid recipient request(s) are loaded.`;
                    successBanner.classList.remove('hidden');
                }

                if (dropzone) {
                    dropzone.classList.remove('border-stroke');
                    dropzone.classList.add('border-green-500', 'bg-green-50/30', 'dark:bg-green-900/10');
                }
                if (uploadIcon) {
                    uploadIcon.className = 'bi bi-check2-circle text-4xl text-green-600';
                }

                // Switch button to "Done & Close"
                validateBtn.classList.add('hidden');
                doneBtn.classList.remove('hidden');
                doneBtn.classList.add('flex');
            } else {
                alert(data.error || "Invalid CSV format or missing columns.");
                validateBtn.disabled = false;
                validateBtn.innerText = "Validate CSV & Save";
            }
        } catch (e) {
            alert("Error connecting to server to validate CSV.");
            validateBtn.disabled = false;
            validateBtn.innerText = "Validate CSV & Save";
        }
    });

    function renderPreviewTable(rows, total) {
        const wrapper = document.getElementById('preview-table-wrapper');
        let html = '<table class="w-full border-collapse"><tbody>';
        rows.forEach(row => {
            html += '<tr class="border-b border-stroke">';
            row.forEach(cell => { html += `<td class="p-1 truncate max-w-[120px]">${cell}</td>`; });
            html += '</tr>';
        });
        html += '</tbody></table>';
        wrapper.innerHTML = html;
        document.getElementById('total-rows-text').innerText = `${total} signature requests will be created.`;
        document.getElementById('csv-preview-container').classList.remove('hidden');
    }

    function updateFinalButton() {
        const btn = document.getElementById('btn-review-main');
        const hasTemplates = document.querySelectorAll('.template-checkbox:checked').length > 0;
        const hasCsv = document.getElementById('csv_json_data').value !== "";

        if(hasTemplates && hasCsv) {
            btn.disabled = false;
            btn.classList.remove('opacity-50', 'cursor-not-allowed');
        } else {
            btn.disabled = true;
            btn.classList.add('opacity-50', 'cursor-not-allowed');
        }
    }

    function renderReview() {
        const templatesBox = document.getElementById('rev-templates');
        const recipientsBox = document.getElementById('rev-recipients');
        const modeBox = document.getElementById('rev-mode');
        const prefBox = document.getElementById('rev-prefills');
        const smtpWarning = document.getElementById('rev-warning-smtp');

        templatesBox.innerHTML = '';
        if(prefBox) prefBox.innerHTML = '';

        document.querySelectorAll('.template-checkbox:checked').forEach(cb => {
            templatesBox.innerHTML += `<p>• ${cb.dataset.title}</p>`;
        });

        // Populate Prefills in Review
        let hasPrefills = false;
        document.querySelectorAll('.prefill-input-field').forEach(input => {
            if(input.value.trim() !== '') {
                hasPrefills = true;
                const label = input.previousElementSibling ? input.previousElementSibling.value : 'Field';
                prefBox.innerHTML += `<p class="text-xs font-normal">• <strong>${label}:</strong> ${input.value}</p>`;
            }
        });
        if (!hasPrefills && prefBox) {
            prefBox.innerHTML = '<span class="italic text-gray-400">None</span>';
        }

        const total = JSON.parse(document.getElementById('csv_json_data').value || "[]").length;
        recipientsBox.innerText = `${total} Signature Requests`;
        
        const mode = document.getElementById('signing_mode_val').value;
        modeBox.innerText = mode === 'email' ? 'Remote Email' : 'In-Person Signing';

        if(mode === 'email' && total > 10) {
            smtpWarning.classList.remove('hidden');
            document.getElementById('rev-count-text').innerText = total;
        } else {
            smtpWarning.classList.add('hidden');
        }
    }

    // Handle final submit click (idempotency)
    document.getElementById('bulk-signature-form').onsubmit = function() {
        const btn = document.getElementById('submit-bulk-btn');
        btn.disabled = true;
        btn.innerText = "Creating Batch...";
    };

    // Template Search Logic
    document.getElementById('templateSearch').addEventListener('input', function() {
        const query = this.value.toLowerCase();
        document.querySelectorAll('.document-card').forEach(card => {
            const title = card.querySelector('.template-title-cell').innerText.toLowerCase();
            card.style.display = title.includes(query) ? 'flex' : 'none';
        });
    });
</script>
@endsection