@extends('layouts.site')

@section('title', trans('tools.vat_val_page_title_full'))
@section('meta_description', trans('tools.vat_val_meta_desc_full'))

@push('styles')
<link rel="stylesheet" href="{{ asset('css/tools/vat-validator.css') }}">
@endpush

@section('content')

{{-- ═══════════════════════ HERO ═══════════════════════ --}}
<header class="vat-hero-header border-b border-slate-800/60 px-5 pb-10 pt-12 text-center">
    {{-- Breadcrumb --}}
    <nav class="mb-5 text-[12px] text-slate-500">
        <a href="{{ route('home') }}" class="hover:text-slate-300 transition">{{ trans('tools.breadcrumb_home') }}</a>
        <span class="mx-1.5">/</span>
        <span>{{ trans('tools.breadcrumb_free_tools') }}</span>
    </nav>

    <h1 class="mx-auto mb-4 max-w-3xl text-3xl sm:text-[40px] font-bold leading-tight tracking-tight text-white">
        {{ trans('tools.vat_val_title_full') }}
    </h1>
    <p class="mx-auto mb-8 max-w-xl text-[15px] leading-8 text-slate-400">
        {{ trans('tools.vat_val_subtitle_full') }}
    </p>
    <a href="{{ route('register') }}" class="inline-flex items-center justify-center gap-2 rounded-xl bg-brand-500 hover:bg-brand-600 text-white font-bold text-sm px-7 py-3.5 shadow-lg shadow-brand-500/20 transition">
        {{ trans('tools.try_emzatca_free') }}
    </a>
    <p class="mt-3 text-[12px] text-slate-500">
        {{ trans('tools.phase2_compliant_no_card') }}
    </p>
</header>

{{-- ═══════════════════════ MAIN ═══════════════════════ --}}
<main class="mx-auto max-w-[720px] px-5 pb-20 sm:px-8 pt-10">

    {{-- ── Search Card ── --}}
    <form id="vat-form" novalidate
          class="rounded-[20px] border border-slate-800 bg-navy-900 p-6 shadow-xl sm:p-8">

        {{-- Label + counter --}}
        <div class="mb-2 flex items-baseline justify-between gap-3">
            <label for="vat-input" class="text-[13.5px] font-semibold text-slate-200">
                {{ trans('tools.vat_val_input_label_full') }}
            </label>
            <span id="vat-count" class="font-mono text-[12px] text-slate-500" dir="ltr">0/15</span>
        </div>

        {{-- Input --}}
        <div class="relative">
            <input id="vat-input" name="vat" type="text" inputmode="numeric" autocomplete="off"
                   dir="ltr" maxlength="15" placeholder="3XXXXXXXXXXXXX3"
                   class="w-full rounded-xl border border-slate-700 bg-navy-950 px-4 py-4 pe-11 text-center font-mono text-[17px] font-semibold text-slate-100 outline-none transition focus:border-brand-500 tracking-[0.16em]">
            {{-- Valid checkmark (shown when format passes) --}}
            <span id="vat-valid" class="pointer-events-none absolute inset-y-0 end-4 hidden items-center text-brand-500" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5"><path d="m4.5 12.5 5 5 10-11"/></svg>
            </span>
        </div>
        <p class="mt-2 text-[12px] leading-7 text-slate-500">
            {{ trans('tools.vat_val_hint') }}
        </p>

        {{-- Submit button --}}
        <button id="vat-submit" type="submit" disabled
                class="mt-5 w-full cursor-pointer rounded-xl bg-brand-500 py-3.5 text-[14px] font-bold text-white transition hover:bg-brand-600 disabled:cursor-not-allowed disabled:opacity-40">
            {{ trans('tools.vat_val_submit_btn') }}
        </button>

        <p class="mt-3 text-center text-[11.5px] leading-6 text-slate-500">
            {{ trans('tools.vat_val_fetch_hint') }}
        </p>

        {{-- Progress bar (shown during fetch) --}}
        <div id="vat-progress" class="mt-5 hidden">
            <div class="h-1.5 overflow-hidden rounded-full bg-slate-800">
                <span id="vat-progress-bar" class="block h-full w-0 rounded-full bg-brand-500 transition-[width]"></span>
            </div>
            <p id="vat-stage" class="mt-3 text-center text-[12.5px] text-slate-400 animate-pulse"></p>
        </div>
    </form>

    {{-- ── Result area ── --}}
    <div id="vat-result" aria-live="polite" class="mt-4"></div>

    {{-- ── Quota notice ── --}}
    <p id="vat-quota" class="mt-4 hidden text-center text-[12px] text-slate-500"></p>

    {{-- ═══════════════════════ ARTICLE ═══════════════════════ --}}
    <div class="mt-14 space-y-4 text-[15px] leading-[2.1] text-slate-400">

        <h2 class="text-[20px] font-bold text-white">{{ trans('tools.why_verify_title') }}</h2>
        <p>{{ trans('tools.vat_not_formality') }}</p>

        <h2 class="text-[20px] font-bold text-white">{{ trans('tools.vat_vs_similar') }}</h2>
        <ul class="space-y-2 pe-4">
            <li><strong class="text-slate-200">{{ trans('tools.vat_number_desc') }}</strong></li>
            <li><strong class="text-slate-200">{{ trans('tools.unified_national_number') }}</strong> — {{ trans('tools.unified_national_number_desc') }}</li>
            <li><strong class="text-slate-200">{{ trans('tools.commercial_registration') }}</strong> — {{ trans('tools.commercial_registration_desc') }}</li>
        </ul>

        <h2 class="text-[20px] font-bold text-white">{{ trans('tools.result_source') }}</h2>
        <p>{{ trans('tools.result_source_desc') }}</p>
    </div>

    {{-- ══════════════════════ RELATED TOOLS ══════════════════ --}}
    <section class="mt-12 rounded-[18px] border border-slate-800 bg-navy-900/60 p-6">
        <h2 class="mb-4 text-[15px] font-bold text-white">{{ trans('tools.related_tools') }}</h2>
        <div class="grid gap-3 sm:grid-cols-2">
            <a href="{{ route('tools.qr') }}" class="flex items-start gap-3 rounded-xl border border-slate-800 bg-navy-950 p-4 transition hover:border-brand-500/30 hover:bg-navy-900">
                <span class="mt-0.5 text-brand-500">
                    <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8.5V6a3 3 0 0 1 3-3h2.5"/><path d="M15.5 3H18a3 3 0 0 1 3 3v2.5"/><path d="M21 15.5V18a3 3 0 0 1-3 3h-2.5"/><path d="M8.5 21H6a3 3 0 0 1-3-3v-2.5"/><path d="M3.4 12h17.2"/></svg>
                </span>
                <span>
                    <span class="block text-[13.5px] font-bold text-slate-200">{{ trans('tools.invoice_qr_reader') }}</span>
                    <span class="block text-[12px] leading-6 text-slate-500">{{ trans('tools.invoice_qr_reader_desc') }}</span>
                </span>
            </a>
            <a href="{{ route('tools.vat-calc') }}" class="flex items-start gap-3 rounded-xl border border-slate-800 bg-navy-950 p-4 transition hover:border-brand-500/30 hover:bg-navy-900">
                <span class="mt-0.5 text-brand-500">
                    <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="2.5" width="16" height="19" rx="3.2"/><rect x="7.5" y="6" width="9" height="3.6" rx="1.2"/><path d="M8.2 13h.01M12 13h.01M15.8 13h.01M8.2 17h.01M12 17h.01M15.8 17h.01"/></svg>
                </span>
                <span>
                    <span class="block text-[13.5px] font-bold text-slate-200">{{ trans('tools.vat_calculator') }}</span>
                    <span class="block text-[12px] leading-6 text-slate-500">{{ trans('tools.vat_calculator_desc') }}</span>
                </span>
            </a>
        </div>
    </section>

    {{-- ══════════════════════ FAQ ══════════════════════════════ --}}
    <section class="mt-12">
        <h2 class="mb-5 text-[22px] font-bold text-white">{{ trans('tools.faq') }}</h2>
        <div class="flex flex-col divide-y divide-slate-800">
            @foreach([
                [
                    'q' => trans('tools.faq_verify_q'),
                    'a' => trans('tools.faq_verify_a'),
                ],
                [
                    'q' => trans('tools.faq_format_q'),
                    'a' => trans('tools.faq_format_a'),
                ],
                [
                    'q' => trans('tools.faq_delay_q'),
                    'a' => trans('tools.faq_delay_a'),
                ],
                [
                    'q' => trans('tools.faq_not_registered_q'),
                    'a' => trans('tools.faq_not_registered_a'),
                ],
            ] as $faq)
            <details class="group py-5">
                <summary class="flex cursor-pointer list-none items-center justify-between gap-4 text-[15px] font-semibold text-slate-200">
                    <span>{{ $faq['q'] }}</span>
                    <span class="shrink-0 text-xl font-light text-slate-500 transition-transform group-open:rotate-45">+</span>
                </summary>
                <div class="pt-2.5 text-[13.5px] leading-9 text-slate-400">{{ $faq['a'] }}</div>
            </details>
            @endforeach
        </div>
    </section>

</main>
@endsection

@section('scripts')
<script>
(function () {
    const form     = document.getElementById('vat-form');
    const input    = document.getElementById('vat-input');
    const counter  = document.getElementById('vat-count');
    const validIcon= document.getElementById('vat-valid');
    const submitBtn= document.getElementById('vat-submit');
    const progress = document.getElementById('vat-progress');
    const bar      = document.getElementById('vat-progress-bar');
    const stage    = document.getElementById('vat-stage');
    const result   = document.getElementById('vat-result');
    const quota    = document.getElementById('vat-quota');

    const isAr = document.documentElement.lang === 'ar';

    const STAGES = isAr
        ? ['جارٍ الاتصال بموقع الهيئة…', 'جارٍ قراءة بيانات التسجيل…', 'جارٍ معالجة النتيجة…']
        : ['Connecting to ZATCA portal…', 'Reading registration data…', 'Processing result…'];

    function isValidFormat(v) {
        return /^\d{15}$/.test(v) && v[0] === '3' && v[14] === '3';
    }

    // ── Live input handler ────────────────────────────────────────────────
    input.addEventListener('input', function () {
        // Strip non-digits
        this.value = this.value.replace(/\D/g, '').slice(0, 15);
        const v = this.value;
        counter.textContent = v.length + '/15';

        const ok = isValidFormat(v);
        submitBtn.disabled = !ok;
        validIcon.classList.toggle('hidden', !ok);
        validIcon.classList.toggle('flex',    ok);

        // Border colour feedback
        input.classList.remove('border-brand-500', 'border-red-500/60', 'border-slate-700');
        if (!v) {
            input.classList.add('border-slate-700');
        } else if (ok) {
            input.classList.add('border-brand-500');
        } else if (v.length === 15) {
            input.classList.add('border-red-500/60');
        } else {
            input.classList.add('border-slate-700');
        }
    });

    // ── Form submit ───────────────────────────────────────────────────────
    form.addEventListener('submit', async function (e) {
        e.preventDefault();
        const vat = input.value.trim();
        if (!isValidFormat(vat)) return;

        // Reset UI
        result.innerHTML = '';
        quota.classList.add('hidden');
        progress.classList.remove('hidden');
        submitBtn.disabled = true;

        // Animate progress
        bar.style.width = '0%';
        let stageIdx = 0;
        stage.textContent = STAGES[0];

        const stageTimer = setInterval(() => {
            stageIdx = Math.min(stageIdx + 1, STAGES.length - 1);
            stage.textContent = STAGES[stageIdx];
        }, 4000);

        // Fake progress animation
        let pct = 0;
        const progressTimer = setInterval(() => {
            pct = Math.min(pct + (Math.random() * 8 + 2), 88);
            bar.style.width = pct + '%';
        }, 800);

        try {
            const res = await fetch('/api/v1/tools/vat/lookup', {
                method : 'POST',
                headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
                body   : JSON.stringify({ vat_number: vat }),
            });

            clearInterval(stageTimer);
            clearInterval(progressTimer);
            bar.style.width = '100%';
            await new Promise(r => setTimeout(r, 400));
            progress.classList.add('hidden');
            bar.style.width = '0%';

            const data = await res.json();
            renderResult(data, res.status);

        } catch (err) {
            clearInterval(stageTimer);
            clearInterval(progressTimer);
            progress.classList.add('hidden');
            bar.style.width = '0%';
            renderError(@json(trans('tools.connection_failed')));
        } finally {
            submitBtn.disabled = false;
        }
    });

    // ── Render helpers ────────────────────────────────────────────────────
    function renderResult(data, status) {
        if (status === 429) {
            quota.textContent = data.error || @json(trans('tools.rate_limit'));
            quota.classList.remove('hidden');
            return;
        }

        if (data.found === true) {
            // ✅ Found
            const statusColor = data.status_ok
                ? 'bg-emerald-500/10 border-emerald-500/30 text-emerald-400'
                : 'bg-amber-500/10 border-amber-500/30 text-amber-400';

            result.innerHTML = `
                <div class="mt-4 rounded-[18px] border border-brand-500/30 bg-navy-900 p-6 shadow-xl">
                    <div class="flex items-center gap-2 text-brand-400 text-xs font-bold uppercase tracking-wider mb-4">
                        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="m4.5 12.5 5 5 10-11"/></svg>
                        <span>${@json(trans('tools.entity_found'))}</span>
                    </div>
                    <div class="space-y-3">
                        <div class="flex items-start gap-3">
                            <span class="text-slate-500 text-xs w-28 shrink-0 pt-0.5">${@json(trans('tools.entity_name'))}</span>
                            <span class="font-bold text-white text-base leading-snug">${escHtml(data.entity_name)}</span>
                        </div>
                        <div class="flex items-start gap-3">
                            <span class="text-slate-500 text-xs w-28 shrink-0 pt-0.5">${@json(trans('tools.vat_number_label'))}</span>
                            <span class="font-mono font-bold text-slate-200 tracking-widest">${escHtml(data.formatted ?? data.vat_number)}</span>
                        </div>
                        <div class="flex items-start gap-3">
                            <span class="text-slate-500 text-xs w-28 shrink-0 pt-0.5">${@json(trans('tools.registration_status'))}</span>
                            <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-bold border ${statusColor}">
                                <span class="w-1.5 h-1.5 rounded-full ${data.status_ok ? 'bg-emerald-400' : 'bg-amber-400'}"></span>
                                ${escHtml(data.status)}
                            </span>
                        </div>
                    </div>
                </div>`;

        } else if (data.found === false) {
            // ❌ Not found
            result.innerHTML = `
                <div class="mt-4 rounded-[18px] border border-red-500/20 bg-navy-900 p-6 shadow-xl">
                    <div class="flex items-center gap-2 text-red-400 text-xs font-bold uppercase tracking-wider mb-3">
                        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18M6 6l12 12"/></svg>
                        <span>${@json(trans('tools.not_registered'))}</span>
                    </div>
                    <p class="text-slate-400 text-sm leading-8">${escHtml(data.message ?? data.error ?? @json(trans('tools.not_in_registry')))}</p>
                    <p class="mt-3 text-slate-500 text-xs">${@json(trans('tools.not_registered_hint'))}</p>
                </div>`;

        } else if (data.blocked) {
            // ⚠️ CAPTCHA blocked — redirect to manual
            result.innerHTML = `
                <div class="mt-4 rounded-[18px] border border-amber-500/30 bg-navy-900 p-6 shadow-xl">
                    <div class="flex items-center gap-2 text-amber-400 text-xs font-bold uppercase tracking-wider mb-3">
                        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v4m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/></svg>
                        <span>${@json(trans('tools.captcha_required'))}</span>
                    </div>
                    <p class="text-slate-400 text-sm leading-8 mb-4">${escHtml(data.message)}</p>
                    <a href="${escHtml(data.zatca_url)}" target="_blank" rel="noopener noreferrer"
                       class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-amber-500 hover:bg-amber-400 text-black font-bold text-sm transition">
                        ${@json(trans('tools.open_zatca_portal'))}
                        <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="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
                    </a>
                </div>`;
        } else {
            // Unknown parse result
            renderError((data.message ?? data.error) + (data.zatca_url ? ` <a href="${escHtml(data.zatca_url)}" target="_blank" class="text-brand-400 underline ms-1">${@json(trans('tools.check_manually'))}</a>` : ''));
        }
    }

    function renderError(msg) {
        result.innerHTML = `
            <div class="mt-4 rounded-[18px] border border-slate-800 bg-navy-900 p-6">
                <p class="text-red-400 text-sm">${msg}</p>
            </div>`;
    }

    function escHtml(s) {
        if (typeof s !== 'string') return '';
        return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
    }
})();
</script>
@endsection