@extends('layouts.site')

@section('title', trans('tools.calc_page_title'))
@section('meta_description', trans('tools.calc_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.calc_title') }}</h1>
        <p class="text-slate-300 text-sm max-w-xl mx-auto">
            {{ trans('tools.calc_subtitle') }}
        </p>
    </div>
</section>

<section class="py-12 bg-navy-950">
    <div class="max-w-2xl mx-auto px-4">
        <div class="bg-navy-900 border border-slate-800 rounded-2xl p-6 sm:p-8 shadow-xl">
            <form id="calcForm" class="space-y-5">
                <div>
                    <label class="block text-xs font-bold text-slate-300 mb-2">{{ trans('tools.calc_amount_label') }}</label>
                    <input type="number" step="0.01" min="0" id="amountInput" placeholder="{{ trans('tools.calc_placeholder') }}" class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-100 p-3.5 text-base focus:border-brand-500 focus:outline-none transition code-font font-bold">
                </div>

                <div class="grid grid-cols-2 gap-4">
                    <label class="flex items-center gap-3 p-3.5 rounded-xl bg-navy-950 border border-slate-800 cursor-pointer hover:border-brand-500 transition">
                        <input type="radio" name="calcType" value="exclusive" checked class="text-brand-500 focus:ring-brand-500">
                        <div>
                            <span class="block text-xs font-bold text-white">{{ trans('tools.calc_exclusive') }}</span>
                            <span class="block text-[10px] text-slate-400">{{ trans('tools.calc_exclusive_desc') }}</span>
                        </div>
                    </label>

                    <label class="flex items-center gap-3 p-3.5 rounded-xl bg-navy-950 border border-slate-800 cursor-pointer hover:border-brand-500 transition">
                        <input type="radio" name="calcType" value="inclusive" class="text-brand-500 focus:ring-brand-500">
                        <div>
                            <span class="block text-xs font-bold text-white">{{ trans('tools.calc_inclusive') }}</span>
                            <span class="block text-[10px] text-slate-400">{{ trans('tools.calc_inclusive_desc') }}</span>
                        </div>
                    </label>
                </div>

                <button type="submit" class="w-full py-3 rounded-xl bg-brand-500 hover:bg-brand-600 text-white font-bold text-xs shadow-lg shadow-brand-500/25 transition">
                    {{ trans('tools.calc_submit_btn') }}
                </button>
            </form>

            <div id="calcResults" 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.calc_results_title') }}
                </h3>
                <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-xs">
                    <div class="p-3.5 rounded-xl bg-navy-950 border border-slate-800/80 text-center">
                        <span class="text-slate-500 block mb-1">{{ trans('tools.calc_subtotal') }}</span>
                        <span id="resSubtotal" class="font-bold text-white text-base code-font inline-flex items-center justify-center gap-1.5" dir="ltr"></span>
                    </div>
                    <div class="p-3.5 rounded-xl bg-navy-950 border border-slate-800/80 text-center">
                        <span class="text-slate-500 block mb-1">{{ trans('tools.calc_vat') }}</span>
                        <span id="resVat" class="font-bold text-emerald-400 text-base code-font inline-flex items-center justify-center gap-1.5" dir="ltr"></span>
                    </div>
                    <div class="p-3.5 rounded-xl bg-navy-950 border border-slate-800/80 text-center">
                        <span class="text-slate-500 block mb-1">{{ trans('tools.calc_total') }}</span>
                        <span id="resTotal" class="font-bold text-white text-base code-font inline-flex items-center justify-center gap-1.5" dir="ltr"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@section('scripts')
<script>
    const form = document.getElementById('calcForm');
    const amountInput = document.getElementById('amountInput');
    const calcResults = document.getElementById('calcResults');

    form.addEventListener('submit', async (e) => {
        e.preventDefault();
        const amount = parseFloat(amountInput.value);
        if(isNaN(amount) || amount < 0) return;

        const isInclusive = document.querySelector('input[name="calcType"]:checked').value === 'inclusive';

        try {
            const res = await fetch('/api/v1/tools/vat/calculate', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
                body: JSON.stringify({ amount: amount, rate: 15, inclusive: isInclusive })
            });
            const data = await res.json();

            const riyalSvg = @js(view('components.riyal-symbol', ['class' => 'inline-block w-[1.1em] h-[1.1em] align-middle'])->render());
            document.getElementById('resSubtotal').innerHTML = `${riyalSvg} <span>${Number(data.subtotal).toFixed(2)}</span>`;
            document.getElementById('resVat').innerHTML = `${riyalSvg} <span>${Number(data.vat_amount).toFixed(2)}</span>`;
            document.getElementById('resTotal').innerHTML = `${riyalSvg} <span>${Number(data.total).toFixed(2)}</span>`;

            calcResults.classList.remove('hidden');
        } catch(err) {
            alert("{{ trans('tools.calc_err_msg') }}");
        }
    });
</script>
@endsection