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

@section('content')
<style>
    .force-panel-width { width: 750px !important; }
</style>

<div x-data="{ 
        showOffcanvas: false, 
        offcanvasPdfUrl: '', 
        offcanvasTitle: '',
        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 -->
    <div class="mb-6 flex justify-between items-center">
        <div>
            <h2 class="text-2xl font-bold text-gray-900 dark:text-white">Public Link: {{ $link->link_name }}</h2>
            <p class="text-sm text-gray-500">Template: <span class="font-semibold">{{ $link->template_title }}</span></p>
        </div>
        <a href="{{ route('public_links.index') }}" class="inline-flex items-center gap-2 text-sm font-medium text-primary hover:underline">
            <i class="bi bi-arrow-left"></i> Back to Links
        </a>
    </div>

    <div class="grid grid-cols-12 gap-6">
        
        <!-- Left: QR & Sharing -->
        <div class="col-span-12 lg:col-span-4 space-y-6">
            <div class="bg-white dark:bg-boxdark rounded-xl border border-stroke p-6 text-center shadow-sm">
                <h3 class="font-bold mb-4 text-gray-700 dark:text-white">QR Access Code</h3>
                <div class="bg-white p-4 inline-block rounded-lg mb-4 shadow-sm border border-stroke">
                    <img src="https://quickchart.io/qr?text={{ urlencode($main_url) }}&size=200" alt="QR Code" 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" onclick="window.print()">Print QR</button>
                    <a href="https://quickchart.io/qr?text={{ urlencode($main_url) }}&size=500&download=true" class="bg-gray-2 text-black dark:text-white px-4 py-2 rounded-lg text-xs font-bold">Download PNG</a>
                </div>
            </div>

            <div class="bg-white dark:bg-boxdark rounded-xl border border-stroke p-6 shadow-sm">
                <h3 class="font-bold mb-4 text-gray-700 dark:text-white">Access URLs</h3>
                <div class="space-y-4">
                    <div>
                        <label class="text-[10px] font-bold text-gray-400 uppercase tracking-widest">Secure Link</label>
                        <div class="flex mt-1">
                            <input type="text" readonly value="{{ $main_url }}" class="flex-1 border border-stroke p-2 rounded-l-lg text-xs bg-gray-50 dark:bg-meta-4 dark:border-strokedark">
                            <button onclick="navigator.clipboard.writeText('{{ $main_url }}'); alert('Copied!')" class="bg-primary text-white px-3 rounded-r-lg text-xs">Copy</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Right: Stats & Submissions Table -->
        <div class="col-span-12 lg:col-span-8 space-y-6">
            
            <!-- Stats Grid -->
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                <div class="bg-white dark:bg-boxdark rounded-xl border border-stroke p-5 shadow-sm">
                    <p class="text-xs text-gray-400 font-bold uppercase">Total Submissions</p>
                    <p class="text-2xl font-black text-gray-800 dark:text-white mt-1">{{ $submissions->where('email_template_status', 'Completed')->count() }} <span class="text-gray-300 text-lg">/ {{ $link->submission_limit ?: '∞' }}</span></p>
                </div>
                <div class="bg-white dark:bg-boxdark rounded-xl border border-stroke p-5 shadow-sm">
                    <p class="text-xs text-gray-400 font-bold uppercase">Status</p>
                    <p class="text-2xl font-black text-success mt-1">{{ $link->status }}</p>
                </div>
                <div class="bg-white dark:bg-boxdark rounded-xl border border-stroke p-5 shadow-sm">
                    <p class="text-xs text-gray-400 font-bold uppercase">Link Expiry</p>
                    <p class="text-sm font-bold text-gray-800 dark:text-white mt-2">{{ $link->expires_at ? date('M d, Y', strtotime($link->expires_at)) : 'Never' }}</p>
                </div>
            </div>

            <!-- Submissions Table (The "Details" part) -->
            <div class="bg-white dark:bg-boxdark rounded-xl border border-stroke shadow-sm overflow-hidden">
                <div class="px-6 py-4 border-b border-stroke flex justify-between items-center">
                    <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-4 py-3 text-xs font-bold text-gray-500 uppercase">Signer / IP</th>
                                <th class="px-4 py-3 text-xs font-bold text-gray-500 uppercase">Date Signed</th>
                                <th class="px-4 py-3 text-xs font-bold text-gray-500 uppercase text-right">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);
                                $firstDoc = ($docs && count($docs) > 0) ? $docs[0] : null;
                                // Construct the path to the signed file
                                $signed_file_url = $baseUrl . "/tenant_user/" . session('company_uuid') . "/signed_documents/" . $sub->package_id . "_" . ($firstDoc->template_id ?? $link->template_id) . ".pdf";
                            @endphp
                            <tr class="hover:bg-gray-50 dark:hover:bg-meta-4/20 transition-colors">
                                <td class="px-4 py-4">
                                    <div class="text-sm font-bold text-gray-800 dark:text-white">Public Signer</div>
                                    <div class="text-[10px] text-gray-500 font-mono">{{ $sub->email_template_signed_ip ?? 'N/A' }}</div>
                                </td>
                                <td class="px-4 py-4">
                                    <div class="text-xs text-gray-700 dark:text-gray-300">
                                        @if($sub->email_template_status == 'Completed')
                                            {{ date('M d, Y h:i A', strtotime($sub->email_template_signed_date)) }}
                                        @else
                                            <span class="text-warning font-bold italic">Abandoned / In-Progress</span>
                                        @endif
                                    </div>
                                </td>
                                <td class="px-4 py-4 text-right">
                                    @if($sub->email_template_status == 'Completed')
                                    <button @click="offcanvasPdfUrl = '{{ $signed_file_url }}'; offcanvasTitle = 'Signed Document'; showOffcanvas = true" 
                                            class="bg-gray-100 dark:bg-white/5 px-3 py-1.5 rounded-lg text-xs font-bold text-primary hover:bg-primary hover:text-white transition-all">
                                        View Signed PDF
                                    </button>
                                    @else
                                    <span class="text-[10px] text-gray-400">No file yet</span>
                                    @endif
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="3" class="p-10 text-center text-gray-400 italic text-sm">No one has signed using this link yet.</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- PDF PREVIEW OFF-CANVAS (Same as details.blade.php) -->
    <div x-show="showOffcanvas" x-cloak class="fixed inset-0 overflow-hidden" style="z-index: 9999;" role="dialog" aria-modal="true">
        <div x-show="showOffcanvas" x-transition.opacity @click="showOffcanvas = false" class="fixed inset-0 bg-black/50 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-xl dark:bg-gray-900">
                    <div class="px-4 py-6 border-b border-gray-200 dark:border-gray-800 shrink-0 flex items-start justify-between">
                        <h2 class="text-base font-semibold truncate pr-4 text-gray-900 dark:text-white" x-text="offcanvasTitle">PDF Preview</h2>
                        <button type="button" @click="showOffcanvas = false" class="text-gray-400 hover:text-gray-500 focus:outline-none">
                            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path d="M6 18L18 6M6 6l12 12" /></svg>
                        </button>
                    </div>
                    <div class="relative flex-1 bg-gray-100 dark:bg-gray-800 overflow-hidden">
                        <template x-if="showOffcanvas">
                            <iframe :src="offcanvasPdfUrl + '#view=FitH'" class="w-full h-full border-none" style="display: block;"></iframe>
                        </template>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection