@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">
    
    <!-- Page Header -->
    <div class="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div>
            <h2 class="text-title-md2 font-bold text-black dark:">Request a Signature</h2>
            <p class="text-sm">Follow the steps to send documents for signing.</p>
        </div>
        
        <div class="flex gap-2">
            <button type="button" onclick="document.getElementById('howItWorksModal').classList.remove('hidden')" class="bg-secondary  py-2 px-4 rounded text-sm">
                How it works?
            </button>
        </div>
    </div>

    @if($templates->isEmpty())
        <!-- NO TEMPLATES STATE -->
        <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:">No Templates Found</h3>
            <p class="mb-8 mx-auto max-w-[600px]">You need to upload at least one template to request signatures.</p>
            <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
        <!-- TOP INFO SUMMARY -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> 
            <div class="flex flex-row w-full gap-4 mb-6 items-stretch">
                <div class=" flex-1 w-1/3 bg-white dark:bg-boxdark border border-stroke dark:border-strokedark p-4 rounded shadow-sm">
                    <span class="text-xs font-semibold text-gray-500 uppercase">Package ID</span>
                    <p class="text-primary font-bold">{{ $package_id }}</p>
                </div>
                <div class=" flex-1 w-1/3 bg-white dark:bg-boxdark border border-stroke dark:border-strokedark p-4 rounded shadow-sm">
                    <span class="text-xs font-semibold text-gray-500 uppercase">Selected Mode</span>
                    <p id="display-mode" class="text-primary font-bold">None</p>
                </div>
                <div class=" flex-1 w-1/3 bg-white dark:bg-boxdark border border-stroke dark:border-strokedark p-4 rounded shadow-sm">
                    <span class="text-xs font-semibold text-gray-500 uppercase">Templates Selected</span>
                    <p id="display-count" class="text-primary font-bold">0</p>
                </div>
            </div>
        </div>

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

            <!-- TABS NAVIGATION -->
            <div class="flex items-center gap-4 border-b border-stroke dark:border-strokedark mb-6 overflow-x-auto whitespace-nowrap">
                <button type="button" id="btn-1" class="tab-btn pb-3 px-2 border-b-2 border-primary text-primary font-bold">1. Templates</button>
                <button type="button" id="btn-2" class="tab-btn pb-3 px-2 border-b-2 border-transparent text-gray-400 opacity-50" disabled>2. Mode</button>
                <button type="button" id="btn-3" class="tab-btn pb-3 px-2 border-b-2 border-transparent text-gray-400 opacity-50" disabled>3. Signers</button>
                <button type="button" id="btn-4" class="tab-btn pb-3 px-2 border-b-2 border-transparent text-gray-400 opacity-50" disabled>4. Message</button>
                <button type="button" id="btn-5" class="tab-btn pb-3 px-2 border-b-2 border-transparent text-gray-400 opacity-50" disabled>5. Review</button>
            </div>

            <div class="bg-white dark:bg-boxdark border border-stroke dark:border-strokedark rounded shadow-default">
                
                <!-- STEP 1: SELECT TEMPLATES -->
                <div id="step-1" class="step-container p-6">
                    <div class="flex flex-col md:flex-row md:items-center justify-between mb-4 gap-4">
                        <h3 class="font-bold text-black mt-2 dark:">Select&nbsp;one&nbsp;or&nbsp;more&nbsp;templates:</h3>
                        
                        <!-- SEARCH INPUT -->
                        <div class="relative w-full md:w-80">
                            <input type="text" id="templateSearch" placeholder="Search templates..." class="w-100 pl-10 pr-4 py-2 border border-stroke rounded-lg outline-none focus:border-primary dark:bg-meta-4 dark:border-strokedark">
                            <i class="bi bi-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
                        </div>
                    </div>

                    <div class="w-full table-auto">
                        <table class="w-full table-auto" id="templateTable">
                            <thead>
                                <tr class="border-b dark:border-gray-800 text-left">
                                    <th class="p-4 text-left text-xs font-medium whitespace-nowrap text-gray-500 dark:text-gray-400">Select</th>
                                    <th class="p-4 text-left text-xs font-medium whitespace-nowrap text-gray-500 dark:text-gray-400">Template Title</th>
                                    <th class="p-4 text-left text-xs font-medium whitespace-nowrap text-gray-500 dark:text-gray-400">Signers</th>
                                    <th class="p-4 text-left text-xs font-medium whitespace-nowrap text-gray-500 dark:text-gray-400">Preview</th>
                                </tr>
                            </thead>
                            <tbody id="templateTableBody">
                                @foreach($templates as $row)
                                <tr class="template-row border-b border-stroke dark:border-strokedark hover:bg-gray-50 dark:hover:bg-meta-4">
                                    <td class="p-2 text-center">
                                        <input type="checkbox" name="chk_template[]" value="{{ $row->template_id }}" 
                                            class="template-checkbox h-4 w-4 rounded border-stroke"
                                            data-title="{{ $row->template_title }}"
                                            data-signers-json="{{ $row->template_json }}"
                                            data-img="pdf_img/{{ $row->template_file }}_1.jpg">
                                    </td>
                                    <td class="p-2 font-medium text-black dark: template-title-cell">
                                        <span class="text-sm font-medium text-gray-700 dark:text-gray-400">{{ $row->template_title }}</span>
                                    </td>
                                    <td class="p-4 whitespace-nowrap ">
                                        <span class="bg-primary bg-opacity-10 text-primary px-3 py-1 rounded-full text-xs">
                                            <span class="text-sm font-medium text-gray-700 dark:text-gray-400">{{ $row->template_no_of_signers }} Signer(s)</span>
                                        </span>
                                    </td>
                                    <td class="p-2 text-center">
                                        <!-- <button type="button" onclick="openPreview('pdf_img/{{ $row->template_file }}_1.jpg')" class="text-primary hover:underline font-medium">
                                            View
                                        </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-primary hover:bg-primary/10 rounded-full transition-colors" title="View Preview">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                                                <circle cx="12" cy="12" r="3"></circle>
                                            </svg>
                                        </button>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    <!-- PAGINATION CONTROLS -->
                    <div class="flex items-center justify-between mt-6">
                        <p class="text-sm text-gray-500" id="paginationInfo">Showing 0 to 0 of 0 templates</p>
                        <div class="flex gap-2" id="paginationButtons">
                            <!-- Buttons generated by JS -->
                        </div>
                    </div>
                    
                    <div class="mt-10 flex justify-end">
                        <button type="button" id="next-1" class="bg-brand-500 text-white px-4 py-2 rounded-lg text-sm cursor-not-allowed" disabled>
                            Choose Signing Mode →
                        </button>
                    </div>
                </div>

                <!-- STEP 2: CHOOSE MODE -->
                <div id="step-2" class="step-container p-6 hidden">
                    <h3 class="font-bold text-black dark: mb-6">How do you want to get these signed?</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="relative">
                            <input type="radio" name="choose_mode" value="local" id="mode_local" class="peer hidden mode-radio">
                            <label for="mode_local" class="flex flex-col items-center text-center h-full border-2 border-stroke dark:border-strokedark p-6 rounded-lg cursor-pointer transition-all 
                                peer-checked:border-primary peer-checked:bg-primary peer-checked:bg-opacity-5 
                                hover:border-primary dark:bg-boxdark group">
                                <div class="w-14 h-14 bg-gray-100 dark:bg-meta-4 rounded-full flex items-center justify-center mb-4 group-hover:bg-primary group-hover:text-white peer-checked:bg-primary peer-checked:text-white transition-colors">
                                    <i class="bi bi-tablet text-xl"></i>
                                </div>
                                <p class="font-bold text-lg mb-1 dark:text-white">In-Person Signing</p>
                                <p class="text-sm text-gray-500 dark:text-gray-400 leading-tight">Sign directly on this device (iPad, Tablet, PC).</p>
                                <div class="absolute top-4 right-4 h-6 w-6 rounded-full border-2 border-primary flex items-center justify-center opacity-0 peer-checked:opacity-100 transition-opacity">
                                    <i class="bi bi-check-lg text-primary font-bold"></i>
                                </div>
                            </label>
                        </div>

                        <div class="relative">
                            <input type="radio" name="choose_mode" value="email" id="mode_email" class="peer hidden mode-radio" {{ $smtp_status == 'In-Active' ? 'disabled' : '' }}>
                            <label for="mode_email" class="flex flex-col items-center text-center h-full border-2 border-stroke dark:border-strokedark p-6 rounded-lg cursor-pointer transition-all 
                                {{ $smtp_status == 'In-Active' ? 'opacity-40 cursor-not-allowed bg-gray-50' : 'peer-checked:border-primary peer-checked:bg-primary peer-checked:bg-opacity-5 hover:border-primary' }} 
                                dark:bg-boxdark group">
                                <div class="w-14 h-14 bg-gray-100 dark:bg-meta-4 rounded-full flex items-center justify-center mb-4 group-hover:bg-primary group-hover:text-white peer-checked:bg-primary peer-checked:text-white transition-colors">
                                    <i class="bi bi-envelope text-xl"></i>
                                </div>
                                <p class="font-bold text-lg mb-1 dark:text-white">Remote via Email</p>
                                <p class="text-sm text-gray-500 dark:text-gray-400 leading-tight">Send unique links to signers via email.</p>
                                @if($smtp_status == 'In-Active')
                                    <p class="text-[10px] text-danger font-bold mt-2 uppercase tracking-wider">SMTP Configuration Missing</p>
                                @else
                                    <div class="absolute top-4 right-4 h-6 w-6 rounded-full border-2 border-primary flex items-center justify-center opacity-0 peer-checked:opacity-100 transition-opacity">
                                        <i class="bi bi-check-lg text-primary font-bold"></i>
                                    </div>
                                @endif
                            </label>
                        </div>
                    </div>

                    <div class="mt-10 flex justify-between">
                        <button type="button" onclick="move(1)" class="bg-brand-500 text-white px-4 py-2 rounded-lg text-sm  "> ← Back</button>
                        <button type="button" id="next-2" class="bg-brand-500 text-white px-4 py-2 rounded-lg text-sm cursor-not-allowed" disabled>Next: Signer Details →</button> 
                    </div>
                </div>

                <!-- STEP 3: SIGNER INFO -->
                <div id="step-3" class="step-container p-6 hidden">
                    <div id="signer-inputs-wrapper" class="space-y-8"></div>
                    <div class="mt-10 flex justify-between">
                        <button type="button" onclick="move(2)" class="bg-brand-500 text-white px-4 py-2 rounded-lg text-sm "> ← Back</button>
                        <button type="button" onclick="validateStep3()" class="bg-brand-500 text-white px-4 py-2 rounded-lg text-sm ">Next: Message →</button>
                    </div>
                </div>

                <!-- STEP 4: MESSAGE -->
                <div id="step-4" class="step-container p-6 hidden">
                    <label class="block font-bold mb-3">Custom Email Message (Optional):</label>
                    <textarea name="txt_message" id="txt_message" rows="8" class="w-full border border-stroke dark:border-strokedark p-4 rounded outline-none focus:border-primary dark:bg-meta-4">{{ $email_settings_data->signature_email_body ?? '' }}</textarea>
                    
                    <div class="mt-10 flex justify-between">
                        <button type="button" onclick="move(3)" class="bg-brand-500 text-white px-4 py-2 rounded-lg text-sm "> ← Back</button>
                        <button type="button" onclick="move(5)" class="bg-brand-500 text-white px-4 py-2 rounded-lg text-sm ">Review & Send →</button> 
                    </div>
                </div>

                <!-- STEP 5: REVIEW -->
                <div id="step-5" class="step-container p-6 hidden">
                    <div id="review-list" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"></div>
                    <div class="mt-10 flex justify-between items-center border-t border-stroke pt-6">
                        <button type="button" onclick="move(4)" class=" bg-brand-500 text-white px-4 py-2 rounded-lg text-sm "> ← Back</button>
                        <button type="submit" class="bg-brand-500 text-white px-4 py-2 rounded-lg text-sm ">
                            Send Request Now →
                        </button>
                    </div>
                </div>

            </div>
        </form>
    @endif
</div>

<!-- PREVIEW OFFCANVAS -->
<div id="offcanvas-backdrop" onclick="closePreview()" class="fixed inset-0 bg-black/50 z-9999 hidden transition-opacity duration-300"></div>

<div id="offcanvas-preview" style="width:30% !important" class="fixed top-0 right-0 h-full w-full md:w-[30vw] bg-white dark:bg-boxdark z-99999 shadow-2xl transform translate-x-full transition-transform duration-300 ease-in-out border-l border-stroke dark:border-strokedark flex flex-col">
    <div class="flex items-center justify-between p-4 border-b border-stroke dark:border-strokedark">
        <h3 class="font-bold text-black dark:text-white">Document Preview</h3>
        <button type="button" onclick="closePreview()" class="text-3xl leading-none hover:text-danger">&times;</button>
    </div>
    <div class="flex-1 overflow-y-auto p-6 bg-gray-100 dark:bg-meta-4 flex flex-col items-center">
        <img id="img-preview" src="" class="max-w-full h-auto shadow-lg border border-stroke dark:border-strokedark rounded bg-white">
    </div>
</div>

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

<script>
    // PAGINATION & SEARCH SETTINGS
    const itemsPerPage = 10;
    let currentPage = 1;
    let filteredRows = [];

    function initTemplateTable() {
        const searchInput = document.getElementById('templateSearch');
        const rows = Array.from(document.querySelectorAll('.template-row'));
        filteredRows = rows; // Initially show all

        // Search Listener
        searchInput.addEventListener('keyup', function() {
            const query = this.value.toLowerCase();
            filteredRows = rows.filter(row => {
                const title = row.querySelector('.template-title-cell').innerText.toLowerCase();
                return title.includes(query);
            });
            currentPage = 1; // Reset to page 1 on search
            updateTableDisplay();
        });

        updateTableDisplay();
    }

    function updateTableDisplay() {
        const rows = Array.from(document.querySelectorAll('.template-row'));
        const totalItems = filteredRows.length;
        const totalPages = Math.ceil(totalItems / itemsPerPage);

        // Hide all rows initially
        rows.forEach(row => row.style.display = 'none');

        // Calculate start and end indices
        const start = (currentPage - 1) * itemsPerPage;
        const end = start + itemsPerPage;

        // Show rows for current page
        filteredRows.slice(start, end).forEach(row => {
            row.style.display = '';
        });

        // Update Pagination Info
        const info = document.getElementById('paginationInfo');
        if(totalItems > 0) {
            info.innerText = `Showing ${start + 1} to ${Math.min(end, totalItems)} of ${totalItems} templates`;
        } else {
            info.innerText = 'No templates found matching your search.';
        }

        // Generate Pagination Buttons
        const btnContainer = document.getElementById('paginationButtons');
        btnContainer.innerHTML = '';

        if (totalPages > 1) {
            // Prev Button
            const prevBtn = createPageBtn('Prev', currentPage > 1, () => {
                currentPage--;
                updateTableDisplay();
            });
            btnContainer.appendChild(prevBtn);

            // Page Numbers
            for (let i = 1; i <= totalPages; i++) {
                const pageBtn = createPageBtn(i, true, () => {
                    currentPage = i;
                    updateTableDisplay();
                }, i === currentPage);
                btnContainer.appendChild(pageBtn);
            }

            // Next Button
            const nextBtn = createPageBtn('Next', currentPage < totalPages, () => {
                currentPage++;
                updateTableDisplay();
            });
            btnContainer.appendChild(nextBtn);
        }
    }

    function createPageBtn(text, enabled, callback, isActive = false) {
        const btn = document.createElement('button');
        btn.type = 'button';
        btn.innerText = text;
        btn.className = `px-3 py-1 rounded text-sm border ${isActive ? 'bg-primary text-blue border-primary' : 'border-stroke hover:bg-gray-100 dark:border-strokedark dark:hover:bg-meta-4'}`;
        if (!enabled) {
            btn.disabled = true;
            btn.classList.add('opacity-50', 'cursor-not-allowed');
        } else {
            btn.onclick = callback;
        }
        return btn;
    }

    // Navigation Control
    function move(step) {
        document.querySelectorAll('.step-container').forEach(el => el.classList.add('hidden'));
        document.getElementById('step-' + step).classList.remove('hidden');

        document.querySelectorAll('.tab-btn').forEach((btn, index) => {
            let s = index + 1;
            if(s <= step) {
                btn.disabled = false;
                btn.classList.remove('opacity-50', 'text-gray-400');
                if(s === step) {
                    btn.classList.add('text-primary', 'border-primary');
                    btn.classList.remove('border-transparent');
                } else {
                    btn.classList.remove('border-primary');
                    btn.classList.add('border-transparent', 'text-success');
                }
            }
        });

        if(step === 5) renderReview();
    }

    // Validation for Step 3
    function validateStep3() {
        const wrapper = document.getElementById('signer-inputs-wrapper');
        const inputs = wrapper.querySelectorAll('input[required]');
        let isValid = true;
        inputs.forEach(input => input.classList.remove('border-red-500'));
        for (let input of inputs) {
            if (!input.value.trim()) {
                isValid = false;
                input.classList.add('border-red-500');
                input.focus();
                alert('Please fill in all signer names and emails.');
                break; 
            }
            if (input.type === 'email') {
                const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                if (!emailPattern.test(input.value)) {
                    isValid = false;
                    input.classList.add('border-red-500');
                    input.focus();
                    alert('Please enter a valid email address.');
                    break;
                }
            }
        }
        if (isValid) move(4);
    }

    // Checkbox Logic (Step 1)
    document.querySelectorAll('.template-checkbox').forEach(cb => {
        cb.addEventListener('change', () => {
            // Note: querySelectorAll(':checked') works even on hidden rows (filtered/paged)
            const checked = document.querySelectorAll('.template-checkbox:checked');
            const nextBtn = document.getElementById('next-1');
            document.getElementById('display-count').innerText = checked.length;
            
            if(checked.length > 0) {
                nextBtn.disabled = false;
                nextBtn.classList.remove('opacity-50', 'cursor-not-allowed');
            } else {
                nextBtn.disabled = true;
                nextBtn.classList.add('opacity-50', 'cursor-not-allowed');
            }

            const container = document.getElementById('signer-inputs-wrapper');
            container.innerHTML = '';
            checked.forEach(item => {
                let templateId = item.value;
                let title = item.dataset.title;
                let templateJson = {};
                try { templateJson = JSON.parse(item.dataset.signersJson); } catch(e) {}
                let signers = (templateJson.signers || []).filter(s => s.id !== 'prefill');

                let section = `
                    <div class="bg-gray-50 dark:bg-meta-4 p-6 rounded border border-stroke dark:border-strokedark">
                        <h4 class="font-bold text-black dark: mb-4 flex items-center gap-2">
                            <i class="bi bi-file-earmark-pdf"></i> ${title}
                        </h4>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">`;
                
                signers.forEach((signer, index) => {
                    let signerNum = index + 1;
                    section += `
                        <div class="bg-white dark:bg-boxdark p-4 rounded shadow-sm border border-stroke">
                            <p class="font-bold text-primary text-sm mb-3 uppercase tracking-wider">SIGNER ${signerNum} - ${signer.name}</p>
                            <input type="hidden" name="signer_id-${templateId}-${signerNum}" value="${signer.id}">
                            <label class="block text-xs uppercase text-gray-500 mb-1">Full Name</label>
                            <input type="text" name="name-${templateId}-${signerNum}" class="w-full border-b border-stroke py-2 outline-none focus:border-primary mb-4 dark:bg-transparent" placeholder="Enter name" required>
                            <label class="block text-xs uppercase text-gray-500 mb-1">Email Address</label>
                            <input type="email" name="email-${templateId}-${signerNum}" class="w-full border-b border-stroke py-2 outline-none focus:border-primary dark:bg-transparent" placeholder="Enter email" required>
                        </div>`;
                });
                section += `</div></div>`;
                container.innerHTML += section;
            });
        });
    });

    document.getElementById('next-1').onclick = () => move(2);

    document.querySelectorAll('.mode-radio').forEach(rad => {
        rad.addEventListener('change', (e) => {
            const nextBtn = document.getElementById('next-2');
            document.getElementById('display-mode').innerText = e.target.value.toUpperCase();
            nextBtn.disabled = false;
            nextBtn.classList.remove('opacity-50', 'cursor-not-allowed');
            document.querySelectorAll('.mode-radio').forEach(r => r.closest('label').classList.remove('border-primary', 'bg-primary', 'bg-opacity-5'));
            e.target.closest('label').classList.add('border-primary', 'bg-primary', 'bg-opacity-5');
        });
    });

    document.getElementById('next-2').onclick = () => move(3);

    function renderReview() {
        const list = document.getElementById('review-list');
        list.innerHTML = '';
        document.querySelectorAll('.template-checkbox:checked').forEach(item => {
            list.innerHTML += `
                <div class="border border-stroke dark:border-strokedark p-2 rounded text-center">
                    <img src="${item.dataset.img}" class="h-32 mx-auto object-contain mb-2 border">
                    <p class="text-xs font-bold truncate">${item.dataset.title}</p>
                </div>
            `;
        });
    }

    function openPreview(src) {
        document.getElementById('img-preview').src = src;
        document.getElementById('offcanvas-backdrop').classList.remove('hidden');
        document.getElementById('offcanvas-preview').classList.remove('translate-x-full');
        document.body.style.overflow = 'hidden';
    }

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

    // INITIALIZE PAGE
    window.onload = () => {
        move(1);
        initTemplateTable(); // Setup Search & Pagination
        ClassicEditor.create(document.querySelector('#txt_message'), {
            toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote' ],
        }).catch(error => { console.error(error); });
    };
</script>

<style>
    .step-container { animation: fadeIn 0.3s ease-in-out; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    .mode-radio:checked + label { border-color: #3C50E0 !important; background-color: rgba(60, 80, 224, 0.05) !important; }
    .mode-radio:checked + label .w-14 { background-color: #3C50E0 !important; color: white !important; }
    .mode-radio:checked + label .opacity-0 { opacity: 1 !important; }
    .dark .mode-radio:checked + label { background-color: rgba(60, 80, 224, 0.15) !important; }
    .ck-editor__editable { min-height: 200px; color: black; }
</style>
@endsection