@extends('admin.layout')
@section('title', 'Upload Document')

@php
    $oldQrPages = old('qr_pages', 'all');
    $initialMode = 'all';
    $initialPagesInput = '';

    if ($oldQrPages !== 'all') {
        $decodedPages = json_decode($oldQrPages, 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>
    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 syncCreateQrPages() {
        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);
    }

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

        syncCreateQrPages();

        form.addEventListener('submit', () => {
            syncCreateQrPages();
        });
    });
</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="max-w-2xl">
    <div class="bg-white rounded-xl shadow-md p-6 md:p-8">
        <h2 class="text-2xl font-bold text-primary mb-6">Upload PDF Document</h2>

        <form id="create-document-form" action="{{ route('admin.documents.store') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
            @csrf

            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-1">PDF File *</label>
                <input type="file" name="pdf" accept=".pdf" required
                       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 @error('pdf') border-red-500 @enderror">
                <p class="mt-1 text-xs text-gray-400">Max size: 20MB. Format: PDF only.</p>
                @error('pdf')
                    <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                @enderror
            </div>

            <hr class="border-gray-200">

            <div>
                <h3 class="font-semibold text-gray-800 mb-4">QR Code Settings</h3>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-5 mb-5">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1">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="{{ $oldQrPages }}">
                        <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="mt-1 text-xs text-gray-400">Single mode: only one page is allowed.</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" value="20" min="10" max="5000" required
                               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="mt-1 text-xs text-gray-400">Width & height in millimeters. Default: 20mm.</p>
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-5">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1">Position X (mm from left)</label>
                        <input type="number" name="qr_position_x" value="10" min="0" max="5000" required
                               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">
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1">Position Y (mm from bottom)</label>
                        <input type="number" name="qr_position_y" value="10" min="0" max="5000" required
                               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">
                    </div>
                </div>
                <p class="mt-2 text-xs text-gray-400">
                    A4 size: 210mm wide &times; 297mm tall. Position Y is measured from the bottom edge.
                </p>
            </div>

            <div class="flex items-center gap-3 pt-4">
                <button type="submit"
                        class="bg-accent hover:bg-accent-dark text-white font-semibold px-6 py-2.5 rounded-lg transition-colors">
                    Upload & Preview
                </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