@extends('layouts.legal')

@section('title', 'Review & Sign')

@section('styles')
    <style>
        .sign-indicator {
            clip-path: polygon(0% 0%, 85% 0%, 100% 50%, 85% 100%, 0% 100%);
        }
        .canvas-container {
            transition: all 0.2s ease-in-out;
        }
        .canvas-container:focus-within {
            border-color: var(--mma-blue);
            box-shadow: 0 0 0 4px rgba(0, 40, 184, 0.1);
        }
        /* PDF Viewport Styling */
        .preview-viewport {
            background-color: #525659; /* Standard PDF viewer gray */
            border: 1px solid #e2e8f0;
            height: 600px;
            overflow-y: auto;
            position: relative;
            scrollbar-width: thin;
            scrollbar-color: #cbd5e1 #f8fafc;
            /* Ensure scrolling the PDF doesn't trap the user */
            overscroll-behavior: contain;
        }
        .pdf-canvas-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px 0;
            gap: 20px;
        }
        canvas.pdf-page {
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
            max-width: 100%;
            height: auto !important;
            background: white;
        }

        /* Document Accordion Styling */
        .doc-accordion {
            border: 1px solid #e2e8f0;
            background: white;
            border-radius: 4px;
            overflow: hidden;
            margin-bottom: 0.75rem;
        }
        .doc-accordion-header {
            padding: 1rem 1.5rem;
            background: #f8fafc;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            transition: background 0.2s;
        }
        .doc-accordion-header:hover {
            background: #f1f5f9;
        }
        .doc-accordion-content {
            border-top: 1px solid #e2e8f0;
            padding: 0; /* Remove padding for edge-to-edge PDF view */
        }

        .preview-viewport::-webkit-scrollbar {
            width: 8px;
        }
        .preview-viewport::-webkit-scrollbar-track {
            background: #f8fafc;
        }
        .preview-viewport::-webkit-scrollbar-thumb {
            background-color: #cbd5e1;
            border-radius: 20px;
        }

        /* Execution Desk Button Styling */
        #save-btn {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
        }
    </style>
@endsection

@section('content')
    <!-- Header remains for branding but button is moved -->
    <div class="bg-slate-900 h-16 fixed w-full top-16 z-40 flex items-center justify-between px-4 sm:px-10 shadow-md">
        <div class="flex flex-col">
            <h1 class="text-[10px] font-bold text-white uppercase tracking-[0.15em]">Document Package Execution</h1>
            <p class="text-[9px] text-slate-400 font-medium">BUNDLE REF: {{ $sigRequest->external_id }}</p>
        </div>
        <div class="hidden sm:flex items-center text-slate-400 text-[9px] font-bold uppercase tracking-widest">
            Secure Encryption Active
        </div>
    </div>

    <main class="pt-40 pb-24 px-4 flex justify-center min-h-screen bg-slate-50">
        <div class="w-full max-w-5xl flex flex-col gap-8">

            <!-- 01. Document Review Section -->
            <div class="space-y-4">
                <div class="flex items-center gap-3 mb-2">
                    <div class="w-2 h-2 rounded-full bg-brand-blue animate-pulse"></div>
                    <h3 class="font-black text-[10px] uppercase tracking-[0.2em] text-slate-900">01. Document Review</h3>
                </div>

                @php
                    $docs = is_array($sigRequest->document_type) ? $sigRequest->document_type : explode(',', $sigRequest->document_type);
                @endphp

                @foreach($docs as $index => $doc)
                    <div class="doc-accordion shadow-sm">
                        <div class="doc-accordion-header" onclick="toggleAccordion('doc-content-{{ $index }}')">
                            <div class="flex items-center gap-4">
                                <span class="text-[10px] font-bold text-slate-400">#{{ $index + 1 }}</span>
                                <h4 class="font-bold text-xs uppercase tracking-wider text-slate-700">{{ Str::headline(trim($doc)) }}</h4>
                            </div>
                            <div class="flex items-center gap-3">
                                <span class="text-[9px] font-bold text-slate-400 uppercase tracking-tighter">Click to View</span>
                                <svg class="w-4 h-4 text-slate-400 transition-transform" id="doc-icon-{{ $index }}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                </svg>
                            </div>
                        </div>
                        <div id="doc-content-{{ $index }}" class="doc-accordion-content hidden">
                            <div class="preview-viewport" id="viewport-{{ $index }}" data-url="/templates/preview/{{ trim($doc) }}?request_uuid={{ $sigRequest->uuid }}">
                                <div id="pdf-loader-{{ $index }}" class="flex items-center justify-center h-full text-white text-xs gap-3">
                                    <svg class="animate-spin h-4 w-4" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
                                    Rendering Document...
                                </div>
                                <div class="pdf-canvas-wrapper" id="wrapper-{{ $index }}"></div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <!-- 02. Execution Desk -->
            <div class="bg-white border border-slate-200 rounded-sm p-8 sm:p-12 shadow-sm">
                <div class="flex items-center gap-3 mb-8">
                    <div class="w-2 h-2 rounded-full bg-brand-blue"></div>
                    <h3 class="font-black text-[10px] uppercase tracking-[0.2em] text-slate-900">02. Execution Desk</h3>
                </div>

                <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start">
                    <div class="lg:col-span-4">
                        <div class="border-b-2 border-slate-900 mb-6 pb-2">
                            <h2 class="legal-serif text-2xl text-slate-900 tracking-tight">Binding Acceptance</h2>
                        </div>
                        <p class="text-[11px] text-slate-500 mb-8 leading-relaxed">
                            By applying your signature below and clicking "Execute All Documents", you acknowledge that you have reviewed the
                            <span class="font-bold text-slate-800">{{ count($docs) }} documents</span> listed in Section 01 and provide your express consent to be legally bound by their terms.
                        </p>

                        <button id="save-btn" class="brand-blue px-8 py-4 rounded shadow-lg font-bold text-[11px] uppercase tracking-[0.2em] transition-all transform hover:brightness-110 active:scale-95 mb-4">
                            <span id="btn-text">Execute All Documents</span>
                            <svg id="spinner" class="animate-spin h-3.5 w-3.5 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                            </svg>
                        </button>

                        <button id="clear-btn" class="w-full text-[9px] uppercase tracking-[0.2em] font-black text-slate-400 hover:text-brand-blue transition-colors pt-4 border-t border-slate-100">Clear Signature Pad</button>
                    </div>

                    <div class="lg:col-span-8 w-full relative">
                        <div class="absolute -left-4 top-10 transform -translate-x-full hidden lg:flex items-center">
                            <div class="sign-indicator brand-blue text-[9px] font-black px-5 py-2.5 shadow-lg tracking-widest">SIGN</div>
                        </div>
                        <div class="canvas-container border-2 border-slate-200 rounded-sm bg-white relative overflow-hidden">
                            <canvas id="signature-canvas" class="w-full h-56 block touch-action-none cursor-crosshair z-10 relative"></canvas>
                            <div class="absolute bottom-12 left-8 text-[8px] uppercase tracking-[0.3em] text-slate-300 font-black pointer-events-none italic">Authorized Signature Required</div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </main>
@endsection

@section('scripts')
    <!-- Load PDF.js from CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/signature_pad@4.0.0/dist/signature_pad.umd.min.js"></script>

    <script>
        pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';

        function toggleAccordion(id) {
            const content = document.getElementById(id);
            const icon = document.getElementById(id.replace('content', 'icon'));
            const isOpen = !content.classList.contains('hidden');

            // Toggle
            if (isOpen) {
                content.classList.add('hidden');
                icon.style.transform = 'rotate(-90deg)';
            } else {
                content.classList.remove('hidden');
                icon.style.transform = 'rotate(0deg)';

                // Trigger PDF render if not already rendered
                const viewport = content.querySelector('.preview-viewport');
                if (viewport && !viewport.dataset.rendered) {
                    renderPDF(viewport);
                }
            }
        }

        async function renderPDF(viewport) {
            const url = viewport.dataset.url;
            const index = viewport.id.split('-')[1];
            const wrapper = document.getElementById(`wrapper-${index}`);
            const loader = document.getElementById(`pdf-loader-${index}`);

            viewport.dataset.rendered = "true";

            try {
                const loadingTask = pdfjsLib.getDocument(url);
                const pdf = await loadingTask.promise;
                loader.classList.add('hidden');

                for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
                    const page = await pdf.getPage(pageNum);
                    const scale = 1.5;
                    const viewportSettings = page.getViewport({ scale });

                    const canvas = document.createElement('canvas');
                    canvas.className = 'pdf-page';
                    const context = canvas.getContext('2d');
                    canvas.height = viewportSettings.height;
                    canvas.width = viewportSettings.width;

                    const renderContext = {
                        canvasContext: context,
                        viewport: viewportSettings
                    };

                    wrapper.appendChild(canvas);
                    await page.render(renderContext).promise;
                }
            } catch (error) {
                console.error('PDF Render Error:', error);
                loader.innerHTML = '<span class="text-red-400">Failed to load preview. Please try refreshing.</span>';
            }
        }

        document.addEventListener('DOMContentLoaded', function () {
            // Initialize Signature Pad
            const canvas = document.getElementById('signature-canvas');
            const signaturePad = new SignaturePad(canvas, { penColor: '#0028b8', minWidth: 1.2, maxWidth: 4 });

            function resizeCanvas() {
                const ratio = Math.max(window.devicePixelRatio || 1, 1);
                const container = canvas.parentElement;
                canvas.width = container.offsetWidth * ratio;
                canvas.height = 224 * ratio; // h-56 = 14rem = 224px
                canvas.getContext("2d").scale(ratio, ratio);
                signaturePad.clear();
            }

            window.addEventListener("resize", resizeCanvas);
            resizeCanvas();

            // Initial PDF Load for the first open accordion
            const firstViewport = document.querySelector('.preview-viewport:not(.hidden .preview-viewport)');
            if (firstViewport) renderPDF(firstViewport);

            document.getElementById('clear-btn').addEventListener('click', () => signaturePad.clear());

            document.getElementById('save-btn').addEventListener('click', () => {
                if (signaturePad.isEmpty()) {
                    alert("Please provide your signature before executing.");
                    return;
                }

                const btn = document.getElementById('save-btn');
                const btnText = document.getElementById('btn-text');
                btn.disabled = true;
                btnText.innerText = "Processing...";
                document.getElementById('spinner').classList.remove('hidden');

                fetch(`/sign/{{ $sigRequest->uuid }}`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                    body: JSON.stringify({ signature_data: signaturePad.toDataURL() })
                })
                    .then(r => r.json())
                    .then(d => {
                        if (d.status === 'success') {
                            window.location.reload();
                        } else {
                            alert('Submission failed. Please try again.');
                            btn.disabled = false;
                            btnText.innerText = "Execute All Documents";
                            document.getElementById('spinner').classList.add('hidden');
                        }
                    })
                    .catch(() => {
                        alert('Network error. Check your connection.');
                        btn.disabled = false;
                        btnText.innerText = "Execute All Documents";
                        document.getElementById('spinner').classList.add('hidden');
                    });
            });
        });
    </script>
@endsection