@extends('layouts.app')
@section('title', 'Bulk Batch Explorer')

@section('content')
<script src="https://unpkg.com/pdf-lib@1.17.1/dist/pdf-lib.min.js"></script>

<style>
    .force-panel-width { width: 750px !important; }
    @media (max-width: 768px) { .force-panel-width { width: 100% !important; } }
    .group-row { border-left: 4px solid #e5e7eb; transition: all 0.2s; }
    .group-row:hover { border-left-color: #3C50E0; background: rgba(60, 80, 224, 0.02); }
    .dark .group-row:hover { background: rgba(255,255,255,0.02); }
</style>

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

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

                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));
                            filesAdded++;
                        }
                    } catch (err) { console.error('Doc load fail:', url); }
                }

                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));
                        filesAdded++;
                    }
                } catch (err) { console.warn('Cert missing'); }

                if(filesAdded === 0) {
                    alert('No documents found. They might still be uploading to storage.');
                    this.showOffcanvas = false;
                    return;
                }

                const mergedPdfBytes = await mergedPdf.save();
                const blob = new Blob([mergedPdfBytes], { type: 'application/pdf' });
                this.offcanvasPdfUrl = URL.createObjectURL(blob);
                this.offcanvasTitle = 'Package Bundle';
            } catch (error) {
                console.error(error);
                alert('Error processing PDF. Check console for details.');
                this.showOffcanvas = false;
            } finally {
                this.isMerging = false;
            }
        }
    }" 
    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-black text-gray-900 dark:text-white tracking-tight">Bulk Explorer</h2>
            <p class="text-[10px] font-bold text-primary mt-1 uppercase tracking-widest italic">Batch GUID: ...{{ substr($batch->bulk_guid, -12) }}</p>
        </div>
        <div class="flex items-center gap-2">
            <a href="{{ route('bulk.list') }}" class="bg-white dark:bg-meta-4 border border-stroke dark:border-strokedark px-4 py-2 rounded-lg text-xs font-bold shadow-sm">
                <i class="bi bi-arrow-left"></i> History
            </a>
        </div>
    </div>

    <!-- STATS -->
    <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-10 w-10 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-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><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-[9px] text-gray-400 font-bold uppercase tracking-widest">Signatures</p>
                <p class="text-lg font-black text-gray-800 dark:text-white">{{ $signed_count }} / {{ $batch->total_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-10 w-10 rounded-lg bg-blue-50 dark:bg-blue-900/20 flex items-center justify-center text-blue-600">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>
            </div>
            <div>
                <p class="text-[9px] text-gray-400 font-bold uppercase tracking-widest">Status</p>
                <p class="text-lg font-black text-blue-600 uppercase">{{ $display_status ?? $batch->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-10 w-10 rounded-lg bg-orange-50 dark:bg-orange-900/20 flex items-center justify-center text-orange-500">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><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></svg>
            </div>
            <div>
                <p class="text-[9px] text-gray-400 font-bold uppercase tracking-widest">Sent Date</p>
                <p class="text-sm font-bold text-gray-800 dark:text-white">{{ date('M d, Y', strtotime($batch->created_at)) }}</p>
            </div>
        </div>
    </div>

    <!-- INCLUDED TEMPLATES -->
    <div class="bg-white dark:bg-boxdark rounded-xl border border-stroke p-4 mb-6 shadow-sm">
        <p class="text-[9px] font-bold text-gray-400 uppercase tracking-widest mb-3">Grouped Templates</p>
        <div class="flex flex-wrap gap-2">
            @foreach($batchTemplates as $t)
                <span class="bg-gray-100 dark:bg-meta-4 text-gray-600 dark:text-gray-300 text-[10px] px-3 py-1 rounded-md font-bold border border-stroke">
                    <i class="bi bi-file-earmark-pdf text-danger"></i> {{ $t->template_title }}
                </span>
            @endforeach
        </div>
    </div>

    <!-- COMPACT TABLE -->
    <div class="bg-white dark:bg-boxdark rounded-xl border border-stroke dark:border-strokedark shadow-sm overflow-hidden">
        <table class="w-full table-auto">
            <thead>
                <tr class="bg-gray-50/50 dark:bg-meta-4/20 text-left border-b border-stroke">
                    <th class="px-6 py-4 text-[10px] font-black text-gray-400 uppercase tracking-widest">Group / Signer</th>
                    <th class="px-6 py-4 text-[10px] font-black text-gray-400 uppercase tracking-widest">Progress</th>
                    <th class="px-6 py-4 text-[10px] font-black text-gray-400 uppercase tracking-widest text-right">Action</th>
                </tr>
            </thead>
            <tbody>
                @php $grouped = $packages->groupBy('package_id'); @endphp
                @foreach($grouped as $pid => $signers)
                @php $first = $signers->first(); @endphp
                
                <!-- Spacer/Separator for groups -->
                <tr class="bg-gray-100/30 dark:bg-white/5"><td colspan="3" class="py-1"></td></tr>
                
                @foreach($signers as $index => $s)
                <tr class="group-row border-b border-stroke dark:border-strokedark last:border-0">
                    <td class="px-6 py-4">
                        @if($index === 0)
                            <div class="text-[9px] font-black text-primary uppercase mb-1">GROUP #{{ $loop->parent->iteration }}</div>
                        @endif
                        <div class="flex items-center gap-3">
                            <div class="h-8 w-8 rounded-full bg-gray-100 dark:bg-meta-4 flex items-center justify-center text-gray-400 text-xs font-bold">
                                {{ strtoupper(substr($s->recipient_name, 0, 1)) }}
                            </div>
                            <div>
                                <div class="text-sm font-bold text-gray-800 dark:text-white">{{ $s->recipient_name }}</div>
                                <div class="text-[10px] text-gray-500">{{ $s->recipient_email }}</div>
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-4">
                        <span class="text-[10px] font-black uppercase tracking-tighter {{ $s->package_status == 'Completed' ? 'text-green-600' : 'text-orange-500' }}">
                            {{ $s->package_status }}
                        </span>
                        <div class="text-[9px] text-gray-400 font-mono">GUID: ...{{ substr($s->package_guid, -8) }}</div>
                    </td>
                    <td class="px-6 py-4 text-right">
                        @if($index === 0 && $first->package_status == 'Completed')
                            @php
                                $signed_urls = [];
                                foreach($signers as $sig) {
                                    $json_docs = json_decode($sig->email_template_json);
                                    if($json_docs) {
                                        foreach($json_docs as $jd) {
                                            $signed_urls[] = $baseUrl . "/tenant_user/" . $company_uuid . "/signed_documents/" . $pid . "_" . $jd->template_id . ".pdf";
                                        }
                                    }
                                }
                                $cert_url = $baseUrl . "/tenant_user/" . $company_uuid . "/certificate/" . $pid . ".pdf";
                            @endphp
                            <button @click="viewMergedDocument({{ json_encode(array_unique($signed_urls)) }}, '{{ $cert_url }}')" 
                                    class="bg-primary text-white px-3 py-1.5 rounded-lg text-[10px] font-black uppercase tracking-widest hover:shadow-lg transition-all">
                                <i class="bi bi-file-earmark-zip"></i> View Bundle
                            </button>
                        @elseif($s->package_status != 'Completed' && $s->email_template_guid)
                            <a href="{{ url('/sign/' . $s->email_template_guid) }}" target="_blank" 
                               class="inline-flex items-center gap-1.5 bg-brand-500 text-white px-3 py-1 rounded text-[10px] font-bold hover:opacity-90 shadow-sm">
                                <i class="bi bi-pencil-square"></i> Sign
                            </a>
                        @endif
                    </td>
                </tr>
                @endforeach
                @endforeach
            </tbody>
        </table>
    </div>

    <!-- PDF OFF-CANVAS -->
    <div x-show="showOffcanvas" x-cloak class="fixed inset-0 overflow-hidden" style="z-index: 99999999;">
        <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-black text-gray-900 dark:text-white uppercase tracking-tight" x-text="offcanvasTitle"></h2>
                            <p class="text-[10px] text-gray-500 font-bold uppercase tracking-[0.2em] mt-0.5">Bulk Archive 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 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">Merging Files...</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>
@endsection