@extends('admin.layout')
@section('title', 'Stamp QR Code')

@php
    $initialMode = 'all';
    $initialPagesInput = '';

    if ($document->qr_pages !== 'all') {
        $decodedPages = json_decode($document->qr_pages, true);
        if (is_array($decodedPages) && count($decodedPages) > 0) {
            $normalizedPages = array_values(array_filter(array_map('intval', $decodedPages), fn ($page) => $page > 0));
            if (count($normalizedPages) > 0) {
                $initialMode = count($normalizedPages) === 1 ? 'single' : 'multiple';
                $initialPagesInput = implode(',', $normalizedPages);
            }
        }
    }
@endphp

@push('scripts')
<script>
    let updateTimeout;

    function normalizePageNumbers(rawValue) {
        const parsed = String(rawValue || '')
            .split(/[^0-9]+/)
            .map(v => parseInt(v, 10))
            .filter(v => Number.isInteger(v) && v > 0);

        return [...new Set(parsed)];
    }

    function syncQrPagesField() {
        const mode = document.getElementById('page_mode').value;
        const pagesContainer = document.getElementById('page-numbers-container');
        const pagesInput = document.getElementById('page_numbers');
        const pagesLabel = document.getElementById('page-numbers-label');
        const pagesHint = document.getElementById('page-numbers-hint');
        const qrPagesHidden = document.getElementById('qr_pages');

        if (mode === 'all') {
            pagesContainer.classList.add('hidden');
            pagesInput.required = false;
            qrPagesHidden.value = 'all';
            return;
        }

        pagesContainer.classList.remove('hidden');
        pagesInput.required = true;

        let pages = normalizePageNumbers(pagesInput.value);
        if (pages.length === 0) {
            pages = [1];
            pagesInput.value = '1';
        }

        if (mode === 'single') {
            const firstPage = pages[0];
            pagesInput.value = String(firstPage);
            pagesLabel.textContent = 'Page Number';
            pagesHint.textContent = 'Single mode: only one page is allowed.';
            pagesInput.placeholder = 'Example: 1';
            qrPagesHidden.value = JSON.stringify([firstPage]);
            return;
        }

        pagesLabel.textContent = 'Page Numbers';
        pagesHint.textContent = 'Multiple mode: use comma-separated values, for example 1,3,5.';
        pagesInput.placeholder = 'Example: 1,3,5';
        pagesInput.value = pages.join(',');
        qrPagesHidden.value = JSON.stringify(pages);
    }

    function updatePreview() {
        clearTimeout(updateTimeout);
        updateTimeout = setTimeout(() => {
            syncQrPagesField();
            const form = document.getElementById('stamp-form');
            const params = new URLSearchParams(new FormData(form));
            params.set('page', document.getElementById('preview-page').value);
            document.getElementById('preview-img').src = '{{ route("admin.documents.stamp-preview", $document->id) }}?' + params.toString() + '&t=' + Date.now();
        }, 400);
    }

    document.addEventListener('DOMContentLoaded', () => {
        const form = document.getElementById('stamp-form');
        form.querySelectorAll('input, select').forEach(el => {
            el.addEventListener('input', updatePreview);
            el.addEventListener('change', updatePreview);
        });

        syncQrPagesField();

        form.addEventListener('submit', () => {
            syncQrPagesField();
        });
    });
</script>
@endpush

@section('content')

<div class="mb-6">
    <a href="{{ route('admin.documents.index') }}" class="inline-flex items-center gap-2 text-gray-500 hover:text-primary transition-colors text-sm">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
        </svg>
        Back to Documents
    </a>
</div>

<div class="grid grid-cols-1 xl:grid-cols-2 gap-6">
    {{-- Left: Merged Preview (PDF + QR Overlay) --}}
    <div class="bg-white rounded-xl shadow-md overflow-hidden">
        <div class="bg-gray-50 px-4 py-3 border-b border-gray-200 flex items-center justify-between">
            <h3 class="font-semibold text-primary text-sm">Preview with QR Overlay</h3>
            <select id="preview-page" class="text-xs border border-gray-300 rounded px-2 py-1" onchange="updatePreview()">
                @for($p = 1; $p <= 3; $p++)
                    <option value="{{ $p }}">Page {{ $p }}</option>
                @endfor
            </select>
        </div>
        <div class="p-4 bg-gray-100">
            <div class="flex items-center justify-center">
                <img id="preview-img"
                     src="{{ route('admin.documents.stamp-preview', $document->id) }}"
                     alt="PDF Preview with QR"
                     class="max-w-full rounded-lg shadow-md"
                     style="max-height: 600px; width: auto;">
            </div>
            <p class="text-center text-xs text-gray-400 mt-3">
                Live preview — QR overlaid at selected position. Page shows first page by default.
            </p>
        </div>
    </div>

    {{-- Right: Settings Form --}}
    <div class="bg-white rounded-xl shadow-md p-6">
        <h2 class="text-2xl font-bold text-primary mb-2">Stamp QR Code</h2>
        <p class="text-gray-500 text-sm mb-6">
            File: <strong>{{ $document->original_filename }}</strong>
        </p>

        <form id="stamp-form" action="{{ route('admin.documents.do-stamp', $document->id) }}" method="POST" class="space-y-5">
            @csrf

            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-2">Pages to Stamp</label>
                <select id="page_mode"
                        class="w-full px-4 py-2.5 rounded-lg border border-gray-300 focus:ring-2 focus:ring-accent focus:border-accent outline-none transition-colors">
                    <option value="single" {{ $initialMode === 'single' ? 'selected' : '' }}>Single Page</option>
                    <option value="multiple" {{ $initialMode === 'multiple' ? 'selected' : '' }}>Multiple Page</option>
                    <option value="all" {{ $initialMode === 'all' ? 'selected' : '' }}>All Page</option>
                </select>
                <input type="hidden" name="qr_pages" id="qr_pages" value="{{ $document->qr_pages }}">
                <p class="mt-1 text-xs text-gray-400">Select mode for which pages should be stamped.</p>
            </div>

            <div id="page-numbers-container" class="hidden">
                <label id="page-numbers-label" for="page_numbers" class="block text-sm font-semibold text-gray-700 mb-1">Page Number</label>
                <input type="text" id="page_numbers" value="{{ $initialPagesInput }}"
                       class="w-full px-4 py-2.5 rounded-lg border border-gray-300 focus:ring-2 focus:ring-accent focus:border-accent outline-none transition-colors"
                       placeholder="Example: 1">
                <p id="page-numbers-hint" class="text-xs text-gray-400 mt-1">Single mode: only one page is allowed.</p>
            </div>

            <div class="grid grid-cols-3 gap-4">
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1">Position X (mm)</label>
                    <input type="number" name="qr_position_x" id="qr_position_x"
                           value="{{ $document->qr_position_x }}" min="0" max="5000"
                           class="w-full px-4 py-2.5 rounded-lg border border-gray-300 focus:ring-2 focus:ring-accent focus:border-accent outline-none transition-colors">
                    <p class="text-xs text-gray-400 mt-1">From left edge</p>
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1">Position Y (mm)</label>
                    <input type="number" name="qr_position_y" id="qr_position_y"
                           value="{{ $document->qr_position_y }}" min="0" max="5000"
                           class="w-full px-4 py-2.5 rounded-lg border border-gray-300 focus:ring-2 focus:ring-accent focus:border-accent outline-none transition-colors">
                    <p class="text-xs text-gray-400 mt-1">From bottom edge</p>
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1">QR Size (mm)</label>
                    <input type="number" name="qr_size" id="qr_size"
                           value="{{ $document->qr_size }}" min="10" max="5000"
                           class="w-full px-4 py-2.5 rounded-lg border border-gray-300 focus:ring-2 focus:ring-accent focus:border-accent outline-none transition-colors">
                    <p class="text-xs text-gray-400 mt-1">Width &amp; height</p>
                </div>
            </div>

            <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-3">
                <div class="flex items-start gap-2">
                    <svg class="w-4 h-4 text-yellow-500 mt-0.5 shrink-0" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                    </svg>
                    <p class="text-xs text-yellow-700">
                        <strong>Tip:</strong> Preview updates automatically as you change settings. Position Y is measured from the <strong>bottom</strong> of the page. A4 = 210mm &times; 297mm.
                    </p>
                </div>
            </div>

            <div class="flex items-center gap-3 pt-2">
                <button type="submit"
                        class="bg-accent hover:bg-accent-dark text-white font-semibold px-6 py-2.5 rounded-lg transition-colors">
                    Stamp QR Code
                </button>
                <a href="{{ route('admin.documents.index') }}"
                   class="px-6 py-2.5 rounded-lg border border-gray-300 text-gray-600 hover:bg-gray-50 font-medium transition-colors">
                    Cancel
                </a>
            </div>
        </form>
    </div>
</div>

@endsection