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

@section('content')
<!-- Include PDF-LIB for merging multiple documents in the browser -->
<script src="https://unpkg.com/pdf-lib@1.17.1/dist/pdf-lib.min.js"></script>

<!-- Force Width Styles to override Tailwind issues for the PDF panel -->
<style>
    .force-panel-width { width: 750px !important; }
    @media (max-width: 768px) {
        .force-panel-width { width: 100% !important; }
    }
</style>

<div x-data="{ 
        showOffcanvas: false, 
        offcanvasPdfUrl: '', 
        offcanvasTitle: '',
        isMerging: false,
        async viewMergedDocument(urls, certUrl) {
            this.isMerging = true;
            this.offcanvasTitle = 'Merging Documents...';
            this.showOffcanvas = true;
            this.offcanvasPdfUrl = ''; 

            try {
                const { PDFDocument } = PDFLib;
                const mergedPdf = await PDFDocument.create();

                // 1. Loop and Merge each signed document from the provided array
                for (const url of urls) {
                    try {
                        const docResp = await fetch(url);
                        if (docResp.ok) {
                            const docBytes = await docResp.arrayBuffer();
                            const pdf = await PDFDocument.load(docBytes);
                            const copiedPages = await mergedPdf.copyPages(pdf, pdf.getPageIndices());
                            copiedPages.forEach((page) => mergedPdf.addPage(page));
                        }
                    } catch (err) { console.warn('Could not load doc:', url); }
                }

                // 2. Fetch and append the Certificate at the end
                try {
                    const certResp = await fetch(certUrl);
                    if (certResp.ok) {
                        const certBytes = await certResp.arrayBuffer();
                        const certPdf = await PDFDocument.load(certBytes);
                        const copiedPages = await mergedPdf.copyPages(certPdf, certPdf.getPageIndices());
                        copiedPages.forEach((page) => mergedPdf.addPage(page));
                    }
                } catch (err) { console.warn('Could not load certificate'); }

                // 3. Generate the final merged result
                const mergedPdfBytes = await mergedPdf.save();
                const blob = new Blob([mergedPdfBytes], { type: 'application/pdf' });
                
                // Revoke old URL if exists to save memory
                if (this.offcanvasPdfUrl) URL.revokeObjectURL(this.offcanvasPdfUrl);
                
                this.offcanvasPdfUrl = URL.createObjectURL(blob);
                this.offcanvasTitle = 'Full Signed Package + Certificate';
            } catch (error) {
                console.error('Merge Error:', error);
                alert('Error processing documents.');
                this.showOffcanvas = false;
            } finally {
                this.isMerging = false;
            }
        },
        toggleBodyScroll(show) {
            document.body.style.overflow = show ? 'hidden' : '';
        }
    }" 
    x-init="$watch('showOffcanvas', value => toggleBodyScroll(value))"
    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 Section -->
    <div class="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div>
            <h2 class="text-2xl font-bold text-gray-900 dark:text-white">Public Link Details</h2>
            <p class="text-sm text-gray-500 mt-1">Name: <span class="font-bold text-gray-700 dark:text-gray-300">{{ $link->link_name }}</span></p>
            <p class="text-xs text-gray-400">Templates: {{ $link->template_title_list }}</p>
        </div>
        <a href="{{ route('public_links.index') }}" class="inline-flex items-center gap-2 px-4 py-2 bg-white dark:bg-meta-4 border border-stroke dark:border-strokedark rounded-lg text-sm font-medium text-gray-700 dark:text-white hover:bg-gray-100 transition-all shadow-sm">
            <i class="bi bi-arrow-left"></i> Back to Dashboard
        </a>
    </div>

    <!-- STATS BLOCKS (HORIZONTAL LINE) -->
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-6 mb-6">
        <div class="bg-white dark:bg-boxdark rounded-xl border border-stroke dark:border-strokedark p-5 shadow-sm flex items-center gap-4">
            <!-- <div class="h-12 w-12 rounded-lg bg-blue-50 dark:bg-blue-900/20 flex items-center justify-center text-blue-600">
                <i class="bi bi-person-check-fill text-xl"></i>
            </div> -->
            <div class="h-12 w-12 rounded-lg bg-green-50 dark:bg-green-900/20 flex items-center justify-center text-green-600">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
                    <circle cx="9" cy="7" r="4"></circle>
                    <polyline points="16 11 18 13 22 9"></polyline>
                </svg>
            </div>
            <div>
                <p class="text-[10px] text-gray-400 font-bold uppercase tracking-widest">Total Signatures</p>
                <p class="text-xl font-black text-gray-800 dark:text-white">{{ $link->submission_count }}</p>
            </div>
        </div>

        <div class="bg-white dark:bg-boxdark rounded-xl border border-stroke dark:border-strokedark p-5 shadow-sm flex items-center gap-4">
            <!-- <div class="h-12 w-12 rounded-lg bg-success-50 dark:bg-success-900/20 flex items-center justify-center text-success">
                <i class="bi bi-activity text-xl"></i>
            </div> -->
            <div class="h-12 w-12 rounded-lg bg-green-50 dark:bg-green-900/20 flex items-center justify-center text-green-600">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
                </svg>
            </div>
            <div>
                <p class="text-[10px] text-gray-400 font-bold uppercase tracking-widest">Status</p>
                <p class="text-xl font-black text-success">{{ $link->status }}</p>
            </div>
        </div>

        <div class="bg-white dark:bg-boxdark rounded-xl border border-stroke dark:border-strokedark p-5 shadow-sm flex items-center gap-4">
            <!-- <div class="h-12 w-12 rounded-lg bg-orange-50 dark:bg-orange-900/20 flex items-center justify-center text-orange-500">
                <i class="bi bi-calendar-x text-xl"></i>
            </div> -->
            <div class="h-12 w-12 rounded-lg bg-green-50 dark:bg-green-900/20 flex items-center justify-center text-green-600">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                    <line x1="16" y1="2" x2="16" y2="6"></line>
                    <line x1="8" y1="2" x2="8" y2="6"></line>
                    <line x1="3" y1="10" x2="21" y2="10"></line>
                    <!-- The X Mark -->
                    <path d="m14 14-4 4m0-4 4 4"></path>
                </svg>
            </div>
            <div>
                <p class="text-[10px] text-gray-400 font-bold uppercase tracking-widest">Expiry</p>
                <p class="text-sm font-bold text-gray-800 dark:text-white">{{ $link->expires_at ? date('M d, Y', strtotime($link->expires_at)) : 'Never' }}</p>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-12 gap-6">
        
        <!-- LEFT COLUMN: QR & SHARING -->
        <div class="col-span-12 lg:col-span-4 space-y-6">
            
            <!-- QR Access Card -->
            <div class="bg-white dark:bg-boxdark rounded-xl border border-stroke dark:border-strokedark p-6 text-center shadow-sm">
                <h3 class="font-bold mb-4 text-gray-700 dark:text-white">QR Code</h3>
                <div class="bg-white p-4 inline-block rounded-xl mb-4 border border-stroke shadow-sm">
                    <img src="https://quickchart.io/qr?text={{ urlencode($main_url) }}&size=220" alt="QR" class="mx-auto">
                </div>
                <div class="flex gap-2 justify-center">
                    <button class="bg-primary text-white px-4 py-2 rounded-lg text-xs font-bold hover:bg-opacity-90 transition-all" onclick="window.print()">
                        <i class="bi bi-printer"></i> Print
                    </button>
                    <a href="https://quickchart.io/qr?text={{ urlencode($main_url) }}&size=600&download=true" class="bg-gray-100 dark:bg-meta-4 px-4 py-2 rounded-lg text-xs font-bold hover:bg-gray-200 transition-all">
                        <i class="bi bi-download"></i> Download PNG
                    </a>
                </div>
            </div>

            <!-- Access URLs Card -->
            <div class="bg-white dark:bg-boxdark rounded-xl border border-stroke dark:border-strokedark p-6 shadow-sm">
                <h3 class="font-bold mb-5 text-gray-700 dark:text-white flex items-center gap-2">
                    <i class="bi bi-link-45deg text-primary"></i> Access URLs
                </h3>
                <div class="space-y-6">
                    <div>
                        <label class="text-[10px] font-bold text-gray-400 uppercase block mb-1.5">Secure Link (Main)</label>
                        <div class="flex">
                            <input type="text" id="mainUrl" readonly value="{{ $main_url }}" class="flex-1 border border-stroke dark:border-strokedark p-2 rounded-l-lg text-xs bg-gray-50 dark:bg-meta-4 dark:text-white outline-none">
                            <button onclick="copyToClipboard('mainUrl')" class="bg-primary text-white px-4 rounded-r-lg text-xs font-bold">Copy</button>
                        </div>
                    </div>
                    <div>
                        <label class="text-[10px] font-bold text-gray-400 uppercase block mb-1.5">Short Link</label>
                        <div class="flex">
                            <input type="text" id="shortUrl" readonly value="{{ $short_url }}" class="flex-1 border border-stroke dark:border-strokedark p-2 rounded-l-lg text-xs bg-gray-50 dark:bg-meta-4 dark:text-white outline-none">
                            <button onclick="copyToClipboard('shortUrl')" class="bg-brand-500 text-white px-4 rounded-r-lg text-xs font-bold">Copy</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- RIGHT COLUMN: SUBMISSIONS TABLE -->
        <div class="col-span-12 lg:col-span-8">
            <div class="bg-white dark:bg-boxdark rounded-xl border border-stroke dark:border-strokedark shadow-sm overflow-hidden">
                <div class="px-6 py-4 border-b border-stroke dark:border-strokedark bg-gray-50/50 dark:bg-meta-4/20">
                    <h3 class="font-bold text-gray-800 dark:text-white">Recent Signers</h3>
                </div>
                <div class="max-w-full overflow-x-auto">
                    <table class="w-full table-auto">
                        <thead>
                            <tr class="bg-gray-50 dark:bg-meta-4 text-left">
                                <th class="px-6 py-4 text-xs font-bold text-gray-500 uppercase tracking-widest">Signer / IP</th>
                                <th class="px-6 py-4 text-xs font-bold text-gray-500 uppercase tracking-widest">Date Signed</th>
                                <th class="px-6 py-4 text-xs font-bold text-gray-500 uppercase text-right tracking-widest">Action</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-stroke dark:divide-strokedark">
                            @forelse($submissions as $sub)
                            @php
                                $docs = json_decode($sub->email_template_json);
                                $signed_urls_array = [];
                                $company_uuid = session('company_uuid');
                                
                                if($docs) {
                                    foreach($docs as $d) {
                                        $signed_urls_array[] = $baseUrl . "/tenant_user/" . $company_uuid . "/signed_documents/" . $sub->package_id . "_" . $d->template_id . ".pdf";
                                    }
                                }
                                $cert_url = $baseUrl . "/tenant_user/" . $company_uuid . "/certificate/" . $sub->package_id . ".pdf";
                            @endphp
                            <tr class="hover:bg-gray-50 dark:hover:bg-white/[0.02] transition-colors">
                                <td class="px-6 py-5">
                                    <div class="text-sm font-bold text-gray-800 dark:text-white">Public Signer</div>
                                    <div class="text-[10px] text-gray-400 font-mono">IP: {{ $sub->email_template_signed_ip ?: 'Unknown' }}</div>
                                </td>
                                <td class="px-6 py-5">
                                    <div class="text-xs text-gray-700 dark:text-gray-300">
                                        @if($sub->email_template_status == 'Completed')
                                            <span class="block font-medium">{{ date('M d, Y', strtotime($sub->email_template_signed_date)) }}</span>
                                            <span class="text-[10px] text-gray-500">{{ date('h:i A', strtotime($sub->email_template_signed_date)) }}</span>
                                        @else
                                            <span class="text-warning font-bold italic text-[10px]">Abandoned / In-Progress</span>
                                        @endif
                                    </div>
                                </td>
                                <td class="px-6 py-5 text-right">
                                    @if($sub->email_template_status == 'Completed')
                                    <button @click="viewMergedDocument({{ json_encode($signed_urls_array) }}, '{{ $cert_url }}')" 
                                            class="inline-flex items-center gap-2 bg-primary text-white px-3 py-1.5 rounded-lg text-xs font-bold hover:bg-opacity-90 transition-all shadow-sm">
                                        <i class="bi bi-file-earmark-pdf"></i> View Signed + Cert
                                    </button>
                                    @endif
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="3" class="p-12 text-center text-gray-400 italic text-sm">
                                    No submissions recorded yet.
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- PDF PREVIEW OFF-CANVAS -->
    <div x-show="showOffcanvas" x-cloak class="fixed inset-0 overflow-hidden" style="z-index: 99999999;" role="dialog" aria-modal="true">
        <div @click="showOffcanvas = false" class="fixed inset-0 bg-black/60 backdrop-blur-sm transition-opacity"></div>
        <div class="fixed inset-y-0 right-0 flex max-w-full">
            <div x-show="showOffcanvas" 
                 x-transition:enter="transform transition ease-in-out duration-500" 
                 x-transition:enter-start="translate-x-full" 
                 x-transition:enter-end="translate-x-0" 
                 x-transition:leave="transform transition ease-in-out duration-500" 
                 x-transition:leave-start="translate-x-0" 
                 x-transition:leave-end="translate-x-full" 
                 class="force-panel-width pointer-events-auto h-screen">
                
                <div class="flex h-full flex-col bg-white shadow-2xl dark:bg-gray-900 border-l border-stroke dark:border-strokedark">
                    <div class="px-6 py-5 border-b border-stroke dark:border-gray-800 shrink-0 flex items-center justify-between bg-gray-50 dark:bg-meta-4">
                        <div>
                            <h2 class="text-lg font-bold text-gray-900 dark:text-white" x-text="offcanvasTitle"></h2>
                            <p class="text-[10px] text-gray-500 uppercase font-bold tracking-widest mt-0.5">Package Viewer</p>
                        </div>
                        <button type="button" @click="showOffcanvas = false" class="h-10 w-10 flex items-center justify-center rounded-full text-gray-400 hover:bg-gray-200 dark:hover:bg-white/10 transition-all">
                            <i class="bi bi-x-lg text-xl"></i>
                        </button>
                    </div>
                    <div class="relative flex-1 bg-slate-100 dark:bg-gray-800 overflow-hidden flex items-center justify-center">
                        <template x-if="isMerging">
                            <div class="text-center">
                                <div class="animate-spin h-12 w-12 border-4 border-primary border-t-transparent rounded-full mx-auto mb-4"></div>
                                <p class="text-sm font-bold text-gray-600 dark:text-gray-400">Processing all documents...</p>
                            </div>
                        </template>
                        <template x-if="!isMerging && offcanvasPdfUrl">
                            <iframe :src="offcanvasPdfUrl + '#view=FitH'" class="w-full h-full border-none"></iframe>
                        </template>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    function copyToClipboard(id) {
        var copyText = document.getElementById(id);
        copyText.select();
        copyText.setSelectionRange(0, 99999); 
        navigator.clipboard.writeText(copyText.value);
        
        const btn = event.currentTarget;
        const originalHTML = btn.innerHTML;
        btn.innerHTML = '<i class="bi bi-check-lg"></i> Copied';
        btn.classList.add('bg-success');
        setTimeout(() => {
            btn.innerHTML = originalHTML;
            btn.classList.remove('bg-success');
        }, 2000);
    }
</script>
@endsection