@extends('layouts.app')
@section('title', 'Create Public Link')

@section('content')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">

<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">
    <div class="mb-6">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-white/90">New Public Signing Link</h2>
        <p class="text-sm text-gray-500">Configure a reusable link for anonymous signers.</p>
    </div>

    <form action="{{ route('public_links.store') }}" method="POST" id="public-link-form">
        @csrf
        <div class="grid grid-cols-12 gap-6">
            
            <!-- Template Selection -->
            <div class="col-span-12 lg:col-span-7">
                <div class="bg-white dark:bg-boxdark rounded-lg border border-stroke p-6 shadow-sm">
                    <h3 class="font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
                        <i class="bi bi-file-earmark-pdf text-primary"></i> 1. Select Template
                    </h3>
                    <!--<div class="space-y-3 max-h-[400px] overflow-y-auto pr-2">
                        @foreach($templates as $row)
                        <label class="relative flex items-center gap-4 p-4 border border-stroke rounded-lg hover:bg-gray-50 cursor-pointer transition-all">
                            <input type="radio" name="template_id" value="{{ $row->template_id }}" 
                                   class="template-radio w-5 h-5 text-primary" 
                                   data-title="{{ $row->template_title }}"
                                   data-json="{{ $row->template_json }}" required>
                            <div class="flex-1">
                                <span class="font-medium text-gray-900 dark:text-white">{{ $row->template_title }}</span>
                                <p class="text-xs text-gray-500">Single Signer Document</p>
                            </div>
                        </label>
                        @endforeach
                    </div>-->
                    <div class="space-y-3 max-h-[400px] overflow-y-auto pr-2">
                        @foreach($templates as $row)
                        <label class="relative flex items-center gap-4 p-4 border border-stroke rounded-lg hover:bg-gray-50 cursor-pointer transition-all">
                            <!-- Changed to Checkbox -->
                            <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-json="{{ $row->template_json }}">
                            <div class="flex-1">
                                <span class="font-medium text-gray-900 dark:text-white">{{ $row->template_title }}</span>
                                <p class="text-xs text-gray-500">Single Signer Document</p>
                            </div>
                        </label>
                        @endforeach
                    </div>

                    <div id="prefill-section" class="mt-8 pt-8 border-t border-stroke hidden">
                        <h3 class="font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
                            <i class="bi bi-input-cursor-text text-primary"></i> 2. Configure Prefills
                        </h3>
                        <p class="text-xs text-gray-500 mb-4 italic">Set fixed values for sender fields on this link.</p>
                        <div id="prefill-container" class="space-y-4 bg-gray-50 dark:bg-meta-4 p-4 rounded-lg"></div>
                    </div>
                </div>
            </div>

            <!-- Settings -->
            <div class="col-span-12 lg:col-span-5 space-y-6">
                <div class="bg-white dark:bg-boxdark rounded-lg border border-stroke p-6 shadow-sm">
                    <h3 class="font-bold text-gray-900 dark:text-white mb-4">3. Link Settings</h3>
                    
                    <div class="mb-4">
                        <label class="block text-sm font-medium mb-1">Link Name (e.g. Rafting Waiver 2026)</label>
                        <input type="text" name="link_name" id="in_link_name" required class="w-full rounded-lg border border-stroke bg-transparent py-2 px-4 outline-none focus:border-primary dark:border-strokedark" placeholder="Enter link name...">
                    </div>

                    <div class="grid grid-cols-2 gap-4 mb-4">
                        <div>
                            <label class="block text-sm font-medium mb-1">Expiry</label>
                            <select name="expiry_type" id="expiry_type" class="w-full rounded-lg border border-stroke bg-transparent py-2 px-4 outline-none focus:border-primary">
                                <option value="never">Never</option>
                                <option value="date">On Date</option>
                                <option value="30_days">30 Days</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium mb-1">Limit</label>
                            <input type="number" name="submission_limit" id="in_limit" value="0" class="w-full rounded-lg border border-stroke bg-transparent py-2 px-4 outline-none focus:border-primary" placeholder="0 = ∞">
                        </div>
                    </div>
                    <div id="date_input_wrapper" class="hidden mb-4">
                        <label class="block text-sm font-medium mb-1">Expiry Date</label>
                        <input type="date" name="expiry_date" class="w-full rounded-lg border border-stroke bg-transparent py-2 px-4">
                    </div>
                </div>

                <div class="bg-white dark:bg-boxdark rounded-lg border border-stroke p-6 shadow-sm">
                    <h3 class="font-bold text-gray-900 dark:text-white mb-4">4. Security & completion</h3>
                    <div class="space-y-3">
                        <label class="flex items-center gap-2 cursor-pointer">
                            <input type="checkbox" name="capture_ip" checked class="w-4 h-4 rounded text-primary">
                            <span class="text-sm">Capture Signer IP</span>
                        </label>
                        <label class="flex items-center gap-2 cursor-pointer">
                            <input type="checkbox" name="capture_device" checked class="w-4 h-4 rounded text-primary">
                            <span class="text-sm">Capture Device Info</span>
                        </label>
                    </div>
                    <hr class="my-4 border-stroke">
                    <label class="block text-sm font-medium mb-1">Completion Behavior</label>
                    <select name="completion_type" id="comp_type" class="w-full rounded-lg border border-stroke bg-transparent py-2 px-4 mb-3">
                        <option value="confirmation">Show Confirmation Page</option>
                        <option value="redirect">Redirect to URL</option>
                    </select>
                    <input type="url" name="redirect_url" id="redir_url" class="hidden w-full rounded-lg border border-stroke bg-transparent py-2 px-4" placeholder="https://">
                </div>

                <button type="button" onclick="openReview()" class="w-full bg-brand-500 text-white py-4 rounded-lg font-bold shadow-lg flex items-center justify-center gap-2">
                    Review & Generate Link
                </button>
            </div>
        </div>

        <!-- REVIEW OFFCANVAS -->
        <div id="review-offcanvas" class="offcanvas-panel">
            <div class="p-6 border-b border-stroke flex justify-between items-center bg-gray-50 dark:bg-meta-4">
                <h2 class="text-xl font-semibold text-success">Review Signing Link</h2>
                <button type="button" onclick="closeReview()" 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-1">Template</h4><p id="rev-tmpl" class="font-bold"></p></div>
                <div><h4 class="text-xs font-bold uppercase text-gray-400 mb-1">Link Name</h4><p id="rev-name" class="font-bold"></p></div>
                <div class="grid grid-cols-2 gap-4">
                    <div><h4 class="text-xs font-bold uppercase text-gray-400 mb-1">Expiry</h4><p id="rev-expiry" class="font-bold"></p></div>
                    <div><h4 class="text-xs font-bold uppercase text-gray-400 mb-1">Limit</h4><p id="rev-limit" class="font-bold"></p></div>
                </div>
                <div class="border-t pt-4">
                    <h4 class="text-xs font-bold uppercase text-gray-400 mb-2">Prefills</h4>
                    <div id="rev-prefills" class="text-sm italic text-gray-500">None configured</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-3 rounded-lg font-bold">Confirm & Create Link</button>
            </div>
        </div>
    </form>
</div>

<div id="offcanvas-overlay" onclick="closeReview()" class="fixed inset-0 bg-black/50 z-[999] hidden"></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; }
</style>

<script>
    /*
    document.querySelectorAll('.template-radio').forEach(radio => {
        radio.addEventListener('change', function() {
            const container = document.getElementById('prefill-container');
            const section = document.getElementById('prefill-section');
            container.innerHTML = '';
            
            try {
                let json = JSON.parse(this.dataset.json);
                let prefillFields = json.fields.filter(f => f.recipient && f.recipient.id === 'prefill');
                
                if(prefillFields.length > 0) {
                    section.classList.remove('hidden');
                    prefillFields.forEach(f => {
                        container.innerHTML += `
                            <div>
                                <label class="text-[10px] font-bold uppercase text-gray-400">${f.name}</label>
                                <input type="hidden" name="prefill_label-${f.id}" value="${f.name}">
                                <input type="text" name="prefill_val-${f.id}" class="prefill-input w-full rounded border-stroke p-2 text-sm dark:bg-boxdark" placeholder="Enter value...">
                            </div>`;
                    });
                } else {
                    section.classList.add('hidden');
                }
            } catch(e) { section.classList.add('hidden'); }
        });
    });

    document.getElementById('expiry_type').addEventListener('change', function() {
        document.getElementById('date_input_wrapper').classList.toggle('hidden', this.value !== 'date');
    });

    document.getElementById('comp_type').addEventListener('change', function() {
        document.getElementById('redir_url').classList.toggle('hidden', this.value !== 'redirect');
    });

    function openReview() {
        const selectedTmpl = document.querySelector('.template-radio:checked');
        if(!selectedTmpl || !document.getElementById('in_link_name').value) {
            alert("Please select a template and enter a link name.");
            return;
        }

        document.getElementById('rev-tmpl').innerText = selectedTmpl.dataset.title;
        document.getElementById('rev-name').innerText = document.getElementById('in_link_name').value;
        document.getElementById('rev-expiry').innerText = document.getElementById('expiry_type').value;
        document.getElementById('rev-limit').innerText = document.getElementById('in_limit').value || 'Unlimited';

        const prefBox = document.getElementById('rev-prefills');
        prefBox.innerHTML = '';
        const prefInputs = document.querySelectorAll('.prefill-input');
        if(prefInputs.length > 0) {
            prefInputs.forEach(i => {
                if(i.value) prefBox.innerHTML += `<p class="flex justify-between border-b py-1"><span>${i.previousElementSibling.value}:</span> <span class="font-bold">${i.value}</span></p>`;
            });
        }
        if(!prefBox.innerHTML) prefBox.innerHTML = 'None configured';

        document.getElementById('offcanvas-overlay').classList.remove('hidden');
        document.getElementById('review-offcanvas').classList.add('active');
    }

    function closeReview() {
        document.getElementById('offcanvas-overlay').classList.add('hidden');
        document.getElementById('review-offcanvas').classList.remove('active');
    }
    */

</script>

<script>
    /**
     * Listener for Template Selection
     * Triggers the prefill rendering whenever a checkbox is clicked
     */
    document.querySelectorAll('.template-checkbox').forEach(cb => {
        cb.addEventListener('change', function() {
            renderAllPrefills();
        });
    });

    /**
     * Logic to generate Prefill Inputs
     * Loops through all selected templates and identifies "prefill" recipient fields
     */
    function renderAllPrefills() {
        const container = document.getElementById('prefill-container');
        const section = document.getElementById('prefill-section');
        container.innerHTML = '';
        let hasAnyPrefills = false;

        document.querySelectorAll('.template-checkbox:checked').forEach(cb => {
            try {
                let json = JSON.parse(cb.dataset.json);
                let tid = cb.value;
                let title = cb.dataset.title;
                
                // Filter fields designated for the "prefill" (Sender) role
                let prefillFields = json.fields.filter(f => f.recipient && f.recipient.id === 'prefill');

                if(prefillFields.length > 0) {
                    hasAnyPrefills = true;
                    
                    // Create a header for the specific document
                    container.innerHTML += `
                        <div class="mb-4 mt-2 first:mt-0 border-b border-stroke dark:border-strokedark pb-2">
                            <p class="text-xs font-bold text-primary flex items-center gap-1">
                                <i class="bi bi-file-earmark-pdf"></i> ${title}
                            </p>
                        </div>`;
                    
                    prefillFields.forEach(f => {
                        container.innerHTML += `
                            <div class="mb-4 pl-2 border-l-2 border-gray-200 dark:border-gray-700">
                                <label class="text-[10px] font-bold uppercase text-gray-400 block mb-1">${f.name}</label>
                                <!-- Field Label (Hidden) -->
                                <input type="hidden" name="prefill_label-${tid}-${f.id}" value="${f.name}">
                                <!-- Field Value Input -->
                                <input type="text" 
                                       name="prefill_val-${tid}-${f.id}" 
                                       class="prefill-input-field w-full rounded-lg border border-stroke bg-white px-3 py-2 text-sm dark:bg-boxdark dark:border-strokedark" 
                                       placeholder="Enter ${f.name}..."
                                       data-doc-title="${title}"
                                       data-field-name="${f.name}">
                            </div>`;
                    });
                }
            } catch (e) {
                console.error("Error parsing template JSON for ID: " + cb.value, e);
            }
        });

        // Show or hide the entire section based on whether fields were found
        if (hasAnyPrefills) {
            section.classList.remove('hidden');
        } else {
            section.classList.add('hidden');
        }
    }

    /**
     * UI Toggle: Expiry Date Input
     */
    document.getElementById('expiry_type').addEventListener('change', function() {
        const wrapper = document.getElementById('date_input_wrapper');
        wrapper.classList.toggle('hidden', this.value !== 'date');
    });

    /**
     * UI Toggle: Redirect URL Input
     */
    document.getElementById('comp_type').addEventListener('change', function() {
        const redir = document.getElementById('redir_url');
        redir.classList.toggle('hidden', this.value !== 'redirect');
        if(this.value === 'redirect') redir.setAttribute('required', 'required');
        else redir.removeAttribute('required');
    });

    /**
     * Open Review Offcanvas
     * Validates selection and prepares the summary screen
     */
    function openReview() {
        const selectedCheckboxes = document.querySelectorAll('.template-checkbox:checked');
        const linkName = document.getElementById('in_link_name').value.trim();

        // 1. Basic Validation
        if(selectedCheckboxes.length === 0) {
            alert("Please select at least one template.");
            return;
        }
        if(!linkName) {
            alert("Please enter a name for this signing link.");
            document.getElementById('in_link_name').focus();
            return;
        }

        // 2. Populate Summary Data
        let titles = [];
        selectedCheckboxes.forEach(s => titles.push(s.dataset.title));
        
        document.getElementById('rev-tmpl').innerText = titles.join(', ');
        document.getElementById('rev-name').innerText = linkName;
        
        // Expiry summary
        const expiryType = document.getElementById('expiry_type');
        document.getElementById('rev-expiry').innerText = expiryType.options[expiryType.selectedIndex].text;
        
        // Limit summary
        const limitVal = document.getElementById('in_limit').value;
        document.getElementById('rev-limit').innerText = (limitVal > 0) ? limitVal : 'Unlimited';

        // 3. Populate Prefill Summary
        const prefSummaryBox = document.getElementById('rev-prefills');
        prefSummaryBox.innerHTML = '';
        const allPrefills = document.querySelectorAll('.prefill-input-field');
        
        let filledCount = 0;
        allPrefills.forEach(input => {
            if(input.value.trim() !== '') {
                filledCount++;
                prefSummaryBox.innerHTML += `
                    <div class="flex justify-between items-start border-b border-gray-100 dark:border-strokedark py-2 text-xs">
                        <div class="text-gray-500">
                            <span class="block font-bold text-black dark:text-white">${input.dataset.fieldName}</span>
                            <span class="italic">Doc: ${input.dataset.docTitle}</span>
                        </div>
                        <div class="font-semibold text-primary">${input.value}</div>
                    </div>`;
            }
        });

        if(filledCount === 0) {
            prefSummaryBox.innerHTML = '<p class="text-sm italic text-gray-400">No prefill values entered. These will be left blank.</p>';
        }

        // 4. Show the sidebar
        document.getElementById('offcanvas-overlay').classList.remove('hidden');
        document.getElementById('review-offcanvas').classList.add('active');
        document.body.style.overflow = 'hidden'; // Prevent background scrolling
    }

    /**
     * Close Review Offcanvas
     */
    function closeReview() {
        document.getElementById('offcanvas-overlay').classList.add('hidden');
        document.getElementById('review-offcanvas').classList.remove('active');
        document.body.style.overflow = 'auto';
    }
</script>
@endsection