@extends('layouts.site')

@section('title', trans('tools.qr_page_title'))
@section('meta_description', trans('tools.qr_meta_desc'))

@section('content')
<section class="py-16 gradient-bg border-b border-slate-800">
    <div class="max-w-4xl mx-auto px-4 text-center">
        <h1 class="text-2xl sm:text-4xl font-extrabold text-white mb-3">{{ trans('tools.qr_title') }}</h1>
        <p class="text-slate-300 text-sm max-w-xl mx-auto">
            {{ trans('tools.qr_subtitle') }}
        </p>
    </div>
</section>

<section class="py-12 bg-navy-950">
    <div class="max-w-3xl mx-auto px-4">
        <div class="bg-navy-900 border border-slate-800 rounded-2xl p-6 sm:p-8 shadow-xl">
            <form id="qrForm" class="space-y-4">
                <div>
                    <label class="block text-xs font-bold text-slate-300 mb-2">{{ trans('tools.qr_input_label') }}</label>
                    <textarea id="qrInput" rows="4" placeholder="{{ trans('tools.qr_input_placeholder') }}" class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-100 p-3 text-xs focus:border-brand-500 focus:outline-none transition code-font"></textarea>
                </div>
                <div class="flex items-center gap-3">
                    <button type="submit" id="decodeBtn" class="px-6 py-2.5 rounded-xl bg-brand-500 hover:bg-brand-600 text-white font-bold text-xs shadow-lg shadow-brand-500/25 transition">
                        {{ trans('tools.qr_decode_btn') }}
                    </button>
                    <button type="button" id="sampleBtn" class="px-4 py-2.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-300 font-semibold text-xs transition">
                        {{ trans('tools.qr_sample_btn') }}
                    </button>
                </div>
            </form>

            <div id="errorAlert" class="hidden mt-6 p-4 rounded-xl bg-red-500/10 border border-red-500/30 text-red-400 text-xs"></div>

            <div id="resultsCard" class="hidden mt-8 border-t border-slate-800 pt-6">
                <h3 class="text-sm font-bold text-brand-400 mb-4 flex items-center gap-2">
                    <span>✓</span> {{ trans('tools.qr_results_title') }}
                </h3>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-xs">
                    <div class="p-3.5 rounded-xl bg-navy-950 border border-slate-800/80">
                        <span class="text-slate-500 block mb-1">{{ trans('tools.qr_seller_name') }}</span>
                        <span id="resSellerName" class="font-bold text-white text-sm"></span>
                    </div>
                    <div class="p-3.5 rounded-xl bg-navy-950 border border-slate-800/80">
                        <span class="text-slate-500 block mb-1">{{ trans('tools.qr_vat_number') }}</span>
                        <span id="resVatNumber" class="font-bold text-white text-sm code-font"></span>
                    </div>
                    <div class="p-3.5 rounded-xl bg-navy-950 border border-slate-800/80">
                        <span class="text-slate-500 block mb-1">{{ trans('tools.qr_timestamp') }}</span>
                        <span id="resTimestamp" class="font-semibold text-slate-200"></span>
                    </div>
                    <div class="p-3.5 rounded-xl bg-navy-950 border border-slate-800/80">
                        <span class="text-slate-500 block mb-1">{{ trans('tools.qr_total') }}</span>
                        <span id="resTotal" class="font-bold text-emerald-400 text-sm inline-flex items-center gap-1.5" dir="ltr"></span>
                    </div>
                    <div class="p-3.5 rounded-xl bg-navy-950 border border-slate-800/80">
                        <span class="text-slate-500 block mb-1">{{ trans('tools.qr_vat_total') }}</span>
                        <span id="resVatTotal" class="font-bold text-slate-200 inline-flex items-center gap-1.5" dir="ltr"></span>
                    </div>
                    <div id="hashContainer" class="p-3.5 rounded-xl bg-navy-950 border border-slate-800/80 sm:col-span-2 hidden">
                        <span class="text-slate-500 block mb-1">{{ trans('tools.qr_hash') }}</span>
                        <span id="resHash" class="break-all code-font text-[11px] text-slate-400"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@section('scripts')
<script>
    const form = document.getElementById('qrForm');
    const input = document.getElementById('qrInput');
    const errorAlert = document.getElementById('errorAlert');
    const resultsCard = document.getElementById('resultsCard');
    const sampleBtn = document.getElementById('sampleBtn');

    sampleBtn.addEventListener('click', () => {
        // Built using standard TLV for testing
        input.value = "AQ/YtNix2YPYqSDYp9mE2KfYrtiq2KjYp9ixAg8zMTAxMjIzOTM1MDAwMDMDFDIwMjQtMDEtMTVUMTA6MzA6MDAEBjExNS4wMAUFMTUuMDA=";
        form.dispatchEvent(new Event('submit'));
    });

    form.addEventListener('submit', async (e) => {
        e.preventDefault();
        errorAlert.classList.add('hidden');
        resultsCard.classList.add('hidden');

        const qr = input.value.trim();
        if(!qr) {
            errorAlert.textContent = "{{ trans('tools.qr_empty_error') }}";
            errorAlert.classList.remove('hidden');
            return;
        }

        try {
            const res = await fetch('/api/v1/tools/qr/decode', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
                body: JSON.stringify({ qr })
            });
            const data = await res.json();

            if(!res.ok || !data.success) {
                errorAlert.textContent = data.error || "{{ trans('tools.qr_fail_error') }}";
                errorAlert.classList.remove('hidden');
                return;
            }

            const fields = data.data;
            document.getElementById('resSellerName').textContent = fields.sellerName || '-';
            document.getElementById('resVatNumber').textContent = fields.vatNumber || '-';
            document.getElementById('resTimestamp').textContent = fields.timestamp || '-';
            const riyalSvg = @js(view('components.riyal-symbol', ['class' => 'inline-block w-[1.1em] h-[1.1em] align-middle'])->render());
            document.getElementById('resTotal').innerHTML = `${riyalSvg} <span>${fields.totalWithVat || '0'}</span>`;
            document.getElementById('resVatTotal').innerHTML = `${riyalSvg} <span>${fields.vatTotal || '0'}</span>`;

            if(fields.invoiceHash) {
                document.getElementById('resHash').textContent = fields.invoiceHash;
                document.getElementById('hashContainer').classList.remove('hidden');
            } else {
                document.getElementById('hashContainer').classList.add('hidden');
            }

            resultsCard.classList.remove('hidden');
        } catch(err) {
            errorAlert.textContent = "{{ trans('tools.qr_net_error') }}";
            errorAlert.classList.remove('hidden');
        }
    });
</script>
@endsection