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

@section('content')
<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>
            <p class="text-sm text-gray-500 mt-1">Package ID: {{ $package_id }}</p>
        </div>
        <button type="button" onclick="document.getElementById('howItWorksModal').classList.remove('hidden')" class="text-sm text-gray-600 hover:text-gray-900 flex items-center gap-2">
            <i class="bi bi-info-circle"></i> How it works
        </button>
    </div>

    @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">
            <h3 class="mb-4 text-2xl font-bold text-black dark:text-white">No Templates Found</h3>
            <a href="/add_form" class="inline-flex items-center justify-center rounded-md bg-primary py-3 px-10 hover:bg-opacity-90">+ 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">
                             <!-- (1) Individual preview button is now inside the list for each template -->
                             <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Select Documents</h2>
                        </div>
                        <div class="relative w-64">
                            <input type="text" id="templateSearch" placeholder="Search..." class="w-full pl-10 pr-4 py-2 border border-stroke rounded-lg outline-none focus:border-primary dark:bg-meta-4">
                            <i class="bi bi-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></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('pdf_img/{{ $row->template_file }}_1.jpg')" 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">
                                <i class="bi bi-eye text-lg"></i>
                            </button> -->
                            <button type="button" 
                                    onclick="openPreview('pdf_img/{{ $row->template_file }}_1.jpg')" 
                                    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 Eye Icon -->
                                <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$z" />
                                </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">
                
                <!-- 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">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">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">Signers</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">Select documents first</div>
                </div>

                <!-- Message 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">Email Message</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 (All hidden within form) -->
        <!-- ----------------------------------------- -->

        <!-- 1. 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 unique links to signers</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 on this device</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>

        <!-- 2. 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">Signer Information</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">
                <!-- Dynamically injected based on checkboxes -->
                <p class="text-center text-gray-400 py-10">Please select templates on the main page first.</p>
            </div>
            <div class="p-6 border-t border-stroke">
                <button type="button" onclick="saveSignerSummary(); closeOffcanvas();" class="w-full bg-brand-500 text-white px-4 py-2 rounded-lg text-sm ">Save Signers</button>
            </div>
        </div>

        <!-- 3. 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">
                <label class="block text-sm font-medium">Custom message to recipients:</label>
                <textarea name="txt_message" id="txt_message" rows="10" class="w-full border border-stroke rounded-lg p-3 dark:bg-meta-4">{{ $email_settings_data->signature_email_body ?? '' }}</textarea>
            </div>
            <div class="p-6 border-t border-stroke mt-auto">
                <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>

        <!-- 4. REVIEW OFFCANVAS (FINAL STEP) -->
        <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">Selected 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">Signing 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" 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
</div>

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

<!-- Document Preview Offcanvas (Individual) -->
<div id="offcanvas-preview" class="fixed top-0 right-0 h-full w-full md:w-[450px] bg-white dark:bg-boxdark z-[1001] shadow-2xl transform translate-x-full transition-transform duration-300 ease-in-out border-l border-stroke flex flex-col">
    <div class="p-4 border-b border-stroke flex items-center justify-between">
        <h3 class="font-bold">Document Preview</h3>
        <button type="button" onclick="closePreview()" class="text-2xl">&times;</button>
    </div>
    <div class="flex-1 overflow-y-auto p-4 bg-gray-100 dark:bg-meta-4 flex justify-center">
        <img id="img-preview" src="" class="max-w-full h-auto shadow-md border rounded bg-white">
    </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: #3C50E0; }
    .ck-editor__editable { min-height: 200px !important; color: #000; }
</style>

<!-- CKEditor Script -->
<script src="https://cdn.ckeditor.com/ckeditor5/36.0.1/classic/ckeditor.js"></script>

<script>
    // 1. Template Selection Logic
    document.querySelectorAll('.template-checkbox').forEach(cb => {
        cb.addEventListener('change', () => {
            const checked = document.querySelectorAll('.template-checkbox:checked');
            document.getElementById('doc-count-badge').innerText = checked.length;
            
            const signerBtn = document.getElementById('btn-config-signers');
            if(checked.length > 0) {
                signerBtn.disabled = false;
                signerBtn.classList.remove('opacity-50', 'cursor-not-allowed');
            } else {
                signerBtn.disabled = true;
                signerBtn.classList.add('opacity-50', 'cursor-not-allowed');
            }
            renderSignerInputs(checked);
        });
    });

    // 2. Generate Dynamic Signer Inputs (Maintains your exact backend flow)
    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">Please select templates on the main page 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 dark:border-strokedark mb-6">
                    <h4 class="font-bold text-primary mb-4 flex items-center gap-2 truncate">
                        <i class="bi bi-file-earmark-pdf"></i> ${title}
                    </h4>`;
            
            signers.forEach((signer, idx) => {
                let num = idx + 1;
                // NOTE: name and email attributes match your controller's expectation
                html += `
                    <div class="bg-white dark:bg-boxdark p-4 rounded border border-stroke dark:border-strokedark shadow-sm mb-4">
                        <p class="text-[10px] font-bold text-gray-400 uppercase mb-2">Signer: ${signer.name}</p>
                        <input type="hidden" name="signer_id-${templateId}-${num}" value="${signer.id}">
                        <div class="space-y-3">
                            <input type="text" name="name-${templateId}-${num}" class="signer-name-field w-full border-b border-stroke py-1 outline-none focus:border-primary dark:bg-transparent" placeholder="Full Name" required>
                            <input type="email" name="email-${templateId}-${num}" class="signer-email-field w-full border-b border-stroke py-1 outline-none focus:border-primary dark:bg-transparent" placeholder="Email Address" required>
                        </div>
                    </div>`;
            });
            html += `</div>`;
            wrapper.innerHTML += html;
        });
    }

    // 3. UI Summary Updates
    function saveModeSummary() {
        const mode = document.querySelector('input[name="choose_mode"]:checked');
        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>`;
        }
    }

    function saveSignerSummary() {
        const names = document.querySelectorAll('.signer-name-field');
        let filledCount = 0;
        names.forEach(n => { if(n.value) filledCount++; });
        document.getElementById('summary-signers').innerHTML = `<span class="text-primary font-bold"><i class="bi bi-person-check"></i> ${filledCount} signers configured</span>`;
    }

    function saveMessageSummary() {
        document.getElementById('summary-message').innerHTML = `<span class="text-primary font-bold"><i class="bi bi-chat-left-text"></i> Custom message saved</span>`;
    }

    // 4. Review Panel Rendering
    function renderReview() {
        const docBox = document.getElementById('rev-docs');
        const modeBox = document.getElementById('rev-mode');
        const signerBox = document.getElementById('rev-signers');

        docBox.innerHTML = '';
        signerBox.innerHTML = '';

        // Documents
        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>`;
        });

        // Mode
        const mode = document.querySelector('input[name="choose_mode"]:checked');
        modeBox.innerText = mode ? (mode.value === 'email' ? 'Remote Email' : 'In-Person') : 'Not selected';

        // Signers
        const names = document.querySelectorAll('.signer-name-field');
        const emails = document.querySelectorAll('.signer-email-field');
        names.forEach((n, i) => {
            if(n.value) {
                signerBox.innerHTML += `
                    <div class="flex items-center gap-3 bg-gray-50 dark:bg-meta-4 p-2 rounded">
                        <div class="w-8 h-8 rounded-full bg-primary/10 text-primary flex items-center justify-center font-bold text-xs">${i+1}</div>
                        <div class="truncate"><p class="font-bold text-xs m-0">${n.value}</p><p class="text-[10px] text-gray-500 m-0">${emails[i].value}</p></div>
                    </div>`;
            }
        });
    }

    // 5. Offcanvas Control
    function openOffcanvas(id) {
        if(id === 'review') 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('img-preview').src = src;
        document.getElementById('offcanvas-preview').classList.remove('translate-x-full');
        document.getElementById('offcanvas-overlay').classList.remove('hidden');
        document.body.style.overflow = 'hidden';
    }

    function closePreview() {
        document.getElementById('offcanvas-preview').classList.add('translate-x-full');
        document.getElementById('offcanvas-overlay').classList.add('hidden');
        document.body.style.overflow = 'auto';
    }

    // Initialize Editor
    window.onload = () => {
        ClassicEditor.create(document.querySelector('#txt_message'), {
            toolbar: [ 'bold', 'italic', 'link', 'bulletedList', 'numberedList' ],
        }).catch(error => console.error(error));
    };

    // Template Search
    document.getElementById('templateSearch').addEventListener('keyup', 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