@extends('layouts.app')

@section('title', 'Billing Profile & Sequence Numbering')

@section('content')
<div class="max-w-4xl mx-auto space-y-6">
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-xl font-bold text-slate-900 dark:text-white">Billing Profile & Document Numbering</h1>
            <p class="text-xs text-slate-500">Configure legal business TRN, UAE 5% VAT rules, and sequence numbering prefixes.</p>
        </div>
        <a href="{{ route('app.settings.invoice_design') }}" class="px-4 py-2 bg-sky-600 text-white font-bold text-xs rounded-xl shadow-sm">
            Invoice & Thermal Receipt Design ➔
        </a>
    </div>

    <form action="{{ route('app.settings.billing.update') }}" method="POST" class="bg-white dark:bg-slate-800 rounded-3xl p-6 border border-slate-200 dark:border-slate-700/60 shadow-sm space-y-6 text-xs">
        @csrf

        <!-- Section 1: Billing & Tax Profile (Requirements 30-32) -->
        <div class="space-y-4">
            <h3 class="font-bold text-slate-900 dark:text-white uppercase tracking-wider text-xs border-b border-slate-100 dark:border-slate-700 pb-2">Billing & Tax Profile</h3>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block font-semibold mb-1">Legal Business Name</label>
                    <input type="text" name="legal_business_name" value="{{ $profile->legal_business_name }}" class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-xl font-bold">
                </div>

                <div>
                    <label class="block font-semibold mb-1">TRN (Tax Reg # 15 digits)</label>
                    <input type="text" name="trn" value="{{ $profile->trn }}" placeholder="100293847500003" class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-xl font-mono text-sky-600 font-bold">
                </div>

                <div>
                    <label class="block font-semibold mb-1">Default Currency</label>
                    <input type="text" name="default_currency" value="{{ $profile->default_currency }}" readonly class="w-full px-3 py-2 bg-slate-100 dark:bg-slate-800 border border-slate-300 dark:border-slate-700 rounded-xl font-bold text-slate-500">
                </div>

                <div>
                    <label class="block font-semibold mb-1">Default VAT Rate (%)</label>
                    <input type="number" name="default_vat_percentage" step="0.01" value="{{ $profile->default_vat_percentage }}" class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-xl font-bold">
                </div>
            </div>
        </div>

        <!-- Section 2: Reference Sequence Numbering (Requirements 33-34) -->
        <div class="space-y-4">
            <h3 class="font-bold text-slate-900 dark:text-white uppercase tracking-wider text-xs border-b border-slate-100 dark:border-slate-700 pb-2">Document Reference Numbering Prefixes</h3>

            <div class="grid grid-cols-2 md:grid-cols-3 gap-4 font-mono">
                <div>
                    <label class="block font-semibold text-slate-700 dark:text-slate-300 mb-1">Customer Ref Prefix</label>
                    <input type="text" name="customer_prefix" value="{{ $profile->customer_prefix }}" class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-xl uppercase font-bold">
                    <span class="text-[10px] text-slate-400 font-sans">e.g. {{ $profile->customer_prefix }}-2026-00001</span>
                </div>

                <div>
                    <label class="block font-semibold text-slate-700 dark:text-slate-300 mb-1">Application Prefix</label>
                    <input type="text" name="application_prefix" value="{{ $profile->application_prefix }}" class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-xl uppercase font-bold">
                    <span class="text-[10px] text-slate-400 font-sans">e.g. {{ $profile->application_prefix }}-2026-00001</span>
                </div>

                <div>
                    <label class="block font-semibold text-slate-700 dark:text-slate-300 mb-1">Invoice Prefix</label>
                    <input type="text" name="invoice_prefix" value="{{ $profile->invoice_prefix }}" class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-xl uppercase font-bold text-sky-600">
                    <span class="text-[10px] text-slate-400 font-sans">e.g. {{ $profile->invoice_prefix }}-2026-00001</span>
                </div>

                <div>
                    <label class="block font-semibold text-slate-700 dark:text-slate-300 mb-1">Receipt Prefix</label>
                    <input type="text" name="receipt_prefix" value="{{ $profile->receipt_prefix }}" class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-xl uppercase font-bold">
                </div>

                <div>
                    <label class="block font-semibold text-slate-700 dark:text-slate-300 mb-1">Quotation Prefix</label>
                    <input type="text" name="quotation_prefix" value="{{ $profile->quotation_prefix }}" class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-xl uppercase font-bold">
                </div>

                <div>
                    <label class="block font-semibold text-slate-700 dark:text-slate-300 mb-1">Employee Code Prefix</label>
                    <input type="text" name="employee_prefix" value="{{ $profile->employee_prefix }}" class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-xl uppercase font-bold">
                </div>
            </div>
        </div>

        <div class="flex justify-end pt-4 border-t border-slate-100 dark:border-slate-700">
            <button type="submit" class="px-6 py-2.5 bg-sky-600 hover:bg-sky-700 text-white font-bold rounded-xl shadow-sm">Save Billing Profile</button>
        </div>
    </form>
</div>
@endsection