@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; }
</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 }}">
                            
                            <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>

                <!-- 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">3. 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">4. 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">5. 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 class="border-2 border-dashed border-stroke p-10 text-center rounded-lg hover:border-primary cursor-pointer" onclick="document.getElementById('csv_file_input').click()">
                    <input type="file" id="csv_file_input" class="hidden" accept=".csv">
                    <i 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>

                <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>
            <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>
            </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">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');
            document.getElementById('doc-count-badge').innerText = checked.length;
            
            if(checked.length > 0) {
                uploadBtn.disabled = false;
                uploadBtn.classList.remove('opacity-50', 'cursor-not-allowed');
            } else {
                uploadBtn.disabled = true;
                uploadBtn.classList.add('opacity-50', 'cursor-not-allowed');
                validatedRows = []; // Reset if templates change
                updateFinalButton();
            }
        });
    });

    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();
    }

    // CSV Validation AJAX
    document.getElementById('btn-validate-csv').addEventListener('click', async function() {
        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.");

        this.disabled = true;
        this.innerText = "Validating...";

        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 Recipients</span>`;
                renderPreviewTable(data.preview, data.count);
                updateFinalButton();
                alert("CSV Validated Successfully!");
            } else {
                alert(data.error || "Invalid CSV format.");
            }
        } catch (e) {
            alert("Error connecting to server.");
        } finally {
            this.disabled = false;
            this.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 smtpWarning = document.getElementById('rev-warning-smtp');

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

        const total = JSON.parse(document.getElementById('csv_json_data').value || "[]").length;
        recipientsBox.innerText = `${total} Recipients`;
        
        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