@extends('layouts.dashboard')

@php
    $isStandard = $type === 'standard';
    $isCreditDebit = in_array($type, ['credit_note', 'debit_note'], true);
    $typeTitle = match($type) {
        'standard' => trans('dashboard.b2b_tax_invoice'),
        'credit_note' => trans('dashboard.new_credit_note_btn'),
        'debit_note' => trans('dashboard.new_debit_note_btn'),
        default => trans('dashboard.b2c_simplified_invoice'),
    };
    $currency = trans('dashboard.currency_sar');
@endphp

@section('title', $typeTitle . ' | ' . trans('site.app_name'))

@push('styles')
@if(! $isCreditDebit)
<link rel="stylesheet" href="{{ asset('css/dashboard/invoices-tour.css') }}">
@endif
@endpush
@section('header_title', $isCreditDebit ? $typeTitle : trans('dashboard.new_invoice_btn'))

@section('content')
@if($isCreditDebit)
    @include('dashboard.invoices.partials.credit-note-form')
@else
<div class="max-w-[1600px] mx-auto space-y-6">

    @if($devices->isEmpty())
        <div class="p-4 sm:p-5 rounded-2xl bg-amber-50 border border-amber-200 text-amber-900 dark:bg-amber-500/10 dark:border-amber-500/30 dark:text-amber-300 text-xs flex items-center justify-between gap-4">
            <div class="flex items-center gap-2">
                <i class="fa-solid fa-triangle-exclamation text-base text-amber-600 dark:text-amber-400"></i>
                <span class="font-medium">{{ trans('dashboard.device_required_first') }}</span>
            </div>
            <a href="{{ route('dashboard.onboarding.wizard') }}" class="px-3 py-1.5 rounded-xl bg-amber-100 hover:bg-amber-200 text-amber-900 dark:bg-amber-500/20 dark:hover:bg-amber-500/30 dark:text-amber-200 font-bold underline whitespace-nowrap transition">
                {{ trans('dashboard.onboarding') }} ←
            </a>
        </div>
    @endif

    {{-- Sandbox / Test Mode Banner --}}
    @if(! $tenant->zatcaEnvironment()->isLive())
        <div class="flex items-start gap-3 p-4 rounded-2xl border border-amber-300/80 bg-amber-50/90 dark:border-amber-500/30 dark:bg-amber-500/10 text-xs shadow-xs">
            <span class="text-amber-600 dark:text-amber-400 text-lg leading-none mt-0.5">🧪</span>
            <div>
                <p class="font-bold text-amber-950 dark:text-amber-300">{{ trans('dashboard.sandbox_mode_title') }}</p>
                <p class="text-amber-800 dark:text-amber-400/90 mt-0.5 leading-relaxed">{{ trans('dashboard.sandbox_mode_desc') }}</p>
            </div>
        </div>
    @endif

    <!-- Top Controls: Breadcrumb & B2B / B2C Switcher -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 pb-2 border-b border-slate-200 dark:border-slate-800/80">
        <!-- Breadcrumb & Page Guide -->
        <div class="flex items-center gap-3">
            <nav class="flex items-center gap-2 text-xs font-semibold text-slate-500 dark:text-slate-400">
                <a href="{{ route('dashboard.invoices.index') }}" class="hover:text-slate-900 dark:hover:text-white transition">
                    {{ trans('dashboard.invoices') }}
                </a>
                <span class="text-slate-400 dark:text-slate-600">/</span>
                <span class="text-slate-900 dark:text-white font-bold">{{ trans('dashboard.new_invoice_btn') }}</span>
            </nav>

            <button type="button"
                    onclick="openGuideModal()"
                    class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-slate-800 hover:bg-slate-700 text-slate-300 hover:text-white text-[11px] font-medium border border-slate-700 transition shadow-sm">
                <i class="fa-regular fa-circle-question text-xs text-brand-500"></i>
                <span>{{ trans('dashboard.page_guide_btn') }}</span>
            </button>
        </div>

        <!-- Type Selector: B2B vs B2C Pills -->
        <div id="invoice-type-switcher" class="inline-flex items-center p-1 rounded-xl bg-navy-900 border border-slate-800 self-start sm:self-auto text-xs font-bold shadow-sm">
            <a href="{{ route('dashboard.invoices.create', ['type' => 'standard']) }}"
               class="px-3 sm:px-4 py-1.5 rounded-lg transition {{ $type === 'standard' ? 'bg-brand-500 text-white force-white shadow-md shadow-brand-500/20' : 'text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white' }}">
                {{ trans('dashboard.b2b_tax_invoice') }}
            </a>
            <a href="{{ route('dashboard.invoices.create', ['type' => 'simplified']) }}"
               class="px-3 sm:px-4 py-1.5 rounded-lg transition {{ $type === 'simplified' ? 'bg-brand-500 text-white force-white shadow-md shadow-brand-500/20' : 'text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white' }}">
                {{ trans('dashboard.b2c_simplified_invoice') }}
            </a>
            @if($isCreditDebit)
                <span class="px-3 py-1.5 rounded-lg bg-amber-500/20 text-amber-400 border border-amber-500/30 font-bold">
                    {{ $typeTitle }}
                </span>
            @endif
        </div>
    </div>

    <!-- Main Grid: Live Preview (Left in RTL) + Form Editor (Right in RTL) -->
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-6 items-start">

        <!-- =======================================================
             LEFT COLUMN (RTL): LIVE PREVIEW (معاينة حية)
        ======================================================== -->
        <div id="live-preview-panel" class="lg:col-span-5 order-2 lg:order-1 space-y-3 lg:sticky lg:top-4">
            <div class="flex items-center justify-between px-1">
                <div class="flex items-center gap-2">
                    <span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
                    <h2 class="text-xs font-black uppercase tracking-wider text-slate-700 dark:text-slate-300">
                        {{ trans('dashboard.live_preview') }}
                    </h2>
                </div>
                <span class="px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-slate-800 text-slate-300 border border-slate-700">
                    {{ trans('dashboard.final_document_look') }}
                </span>
            </div>

            <!-- Paper Invoice Sheet Preview (zatcatools.com style) -->
            <div class="bg-white text-slate-900 rounded-2xl p-5 sm:p-7 shadow-xl border border-slate-200 select-none overflow-hidden relative font-sans text-xs">
                <!-- Top Brand & Header -->
                <div class="flex items-start justify-between gap-4 pb-4">
                    <div class="space-y-0.5">
                        <div id="preview-type-title-ar" class="text-base font-black text-slate-900">
                            {{ $isStandard ? trans('dashboard.tax_invoice_title') : trans('dashboard.simplified_tax_invoice_title') }}
                        </div>
                        <div id="preview-type-title-en" class="text-[10px] uppercase font-bold tracking-wider text-slate-400">
                            {{ $isStandard ? trans('dashboard.tax_invoice_en') : trans('dashboard.simplified_tax_invoice_en') }}
                        </div>
                        <div class="text-[11px] font-bold text-emerald-700 code-font pt-1" id="preview-invoice-num">
                            {{ $nextNumber }}
                        </div>
                    </div>

                    <div class="text-end text-[10px] text-slate-500 space-y-1">
                        <div>
                            <span class="text-slate-400">{{ trans('dashboard.th_issued_at') }}:</span>
                            <span id="preview-issue-date" class="font-bold text-slate-800">{{ now()->format('Y/m/d') }}</span>
                        </div>
                        <div>
                            <span class="text-slate-400">{{ trans('dashboard.service_date_label') }}</span>
                            <span id="preview-service-date" class="font-bold text-slate-800">{{ now()->format('Y/m/d') }}</span>
                        </div>
                    </div>
                </div>

                <!-- Green Accent Divider -->
                <div class="h-1 bg-emerald-700 rounded-full w-full mb-4"></div>

                <!-- Seller & Buyer Box -->
                <div class="grid grid-cols-2 gap-3 p-3 rounded-xl bg-slate-50 border border-slate-200/80 mb-4 text-[11px]">
                    <!-- Seller (البائع) -->
                    <div class="space-y-0.5 border-e border-slate-200 pe-2">
                        <div class="text-[9px] uppercase font-bold tracking-wider text-slate-400">
                            {{ trans('dashboard.seller_label') }} (SELLER)
                        </div>
                        <div class="font-extrabold text-slate-900 truncate">{{ $tenant->name }}</div>
                        <div class="text-[10px] text-slate-500 code-font truncate">
                            {{ trans('dashboard.buyer_vat') }}: {{ $tenant->vat_number }}
                        </div>
                    </div>

                    <!-- Buyer (المشتري) -->
                    <div class="space-y-0.5 ps-1">
                        <div class="text-[9px] uppercase font-bold tracking-wider text-slate-400">
                            {{ trans('dashboard.buyer_label') }} (BUYER)
                        </div>
                        <div id="preview-buyer-name" class="font-extrabold text-slate-900 truncate">
                            {{ trans('dashboard.walk_in_customer') }}
                        </div>
                        <div id="preview-buyer-vat" class="text-[10px] text-slate-500 code-font truncate">
                            -
                        </div>
                    </div>
                </div>

                <!-- Items Table (Dark Green Header with Guaranteed White Text) -->
                <div class="overflow-x-auto -mx-2 sm:mx-0 mb-4">
                    <table class="w-full text-[10px] text-start">
                        <thead>
                            <tr class="bg-[#064e3b] text-white force-white">
                                <th class="py-1.5 px-2 text-start font-bold rounded-s-md text-white force-white">{{ trans('dashboard.line_name') }}</th>
                                <th class="py-1.5 px-1.5 text-center font-bold w-10 text-white force-white">{{ trans('dashboard.qty_label') }}</th>
                                <th class="py-1.5 px-2 text-end font-bold w-16 text-white force-white">{{ trans('dashboard.line_price') }}</th>
                                <th class="py-1.5 px-2 text-end font-bold w-16 text-white force-white">{{ trans('dashboard.line_vat') }}</th>
                                <th class="py-1.5 px-2 text-end font-bold rounded-e-md w-24 text-white force-white">{{ trans('dashboard.line_total_incl') }}</th>
                            </tr>
                        </thead>
                        <tbody id="preview-lines-body" class="divide-y divide-slate-100 text-slate-700">
                            <!-- Populated dynamically via JS -->
                        </tbody>
                    </table>
                </div>

                <!-- Totals Breakdown & Grand Total Due -->
                <div class="space-y-2 pt-2 border-t border-slate-200">
                    <div class="flex items-center justify-between text-[11px] text-slate-600 px-1">
                        <span>{{ trans('dashboard.th_subtotal') }}</span>
                        <span id="preview-subtotal" class="font-bold text-slate-900 code-font inline-flex items-center gap-1"><x-riyal-symbol class="w-[1em] h-[1em]" /> 0.00</span>
                    </div>
                    <div class="flex items-center justify-between text-[11px] text-slate-600 px-1">
                        <span>{{ trans('dashboard.th_vat') }} (15%)</span>
                        <span id="preview-vat" class="font-bold text-slate-900 code-font inline-flex items-center gap-1"><x-riyal-symbol class="w-[1em] h-[1em]" /> 0.00</span>
                    </div>
                    <div id="preview-discount-row" class="hidden flex items-center justify-between text-[11px] text-emerald-700 px-1">
                        <span>{{ trans('dashboard.line_discount') }}</span>
                        <span id="preview-discount" class="font-bold code-font inline-flex items-center gap-1">- <x-riyal-symbol class="w-[1em] h-[1em]" /> 0.00</span>
                    </div>

                    <!-- Prominent Total Due (الإجمالي المستحق - Pure White on Dark Green) -->
                    <div class="p-3.5 rounded-xl bg-[#064e3b] text-white force-white flex items-center justify-between shadow-md">
                        <div class="space-y-0.5">
                            <div class="text-[11px] font-black tracking-tight text-white force-white">{{ trans('dashboard.total_due_label') }}</div>
                            <div class="text-[8px] uppercase tracking-widest text-emerald-200 force-white">TOTAL DUE</div>
                        </div>
                        <div id="preview-total-due" class="text-base sm:text-lg font-black code-font text-white force-white inline-flex items-center gap-1.5" dir="ltr">
                            <x-riyal-symbol class="w-[1em] h-[1.1em] text-white" /> 0.00
                        </div>
                    </div>
                </div>

                <!-- Footer Guarantee -->
                <div class="mt-4 pt-3 border-t border-slate-100 text-center text-[9px] text-slate-400">
                    <span>{{ trans('dashboard.all_amounts_sar') }} (<x-riyal-symbol class="w-[0.9em] h-[0.9em] text-slate-400" />) • {{ trans('dashboard.vat_inclusive') }}</span>
                </div>
            </div>
        </div>

        <!-- =======================================================
             RIGHT COLUMN (RTL): FORM EDITOR (إدخال بيانات الفاتورة)
        ======================================================== -->
        <div class="lg:col-span-7 order-1 lg:order-2 space-y-5">

            <form method="POST" action="{{ route('dashboard.invoices.store') }}" id="invoice-form" class="space-y-5">
                @csrf
                <input type="hidden" name="type" id="invoice-type-input" value="{{ $type }}">
                <input type="hidden" name="issue_date" id="form-issue-date" value="{{ now()->format('Y-m-d') }}">
                <input type="hidden" name="service_date" id="form-service-date" value="{{ now()->format('Y-m-d') }}">

                <!-- Form Dynamic Error Banner -->
                <div id="invoice-form-error" class="hidden p-4 rounded-2xl bg-red-500/10 border border-red-500/30 text-red-500 dark:text-red-400 text-xs flex items-start gap-3 shadow-sm">
                    <i class="fa-solid fa-circle-exclamation text-base mt-0.5 shrink-0"></i>
                    <div class="flex-1 space-y-1">
                        <div id="invoice-form-error-title" class="font-bold text-sm"></div>
                        <ul id="invoice-form-error-list" class="list-disc list-inside space-y-0.5 text-[11px] text-red-400"></ul>
                    </div>
                    <button type="button" onclick="document.getElementById('invoice-form-error').classList.add('hidden')" class="text-red-400 hover:text-red-300">
                        <i class="fa-solid fa-xmark"></i>
                    </button>
                </div>

                <!-- POS Device Selector (if multiple) or Hidden (if 1) -->
                @if($devices->count() > 1)
                    <div class="p-4 sm:p-5 rounded-2xl bg-navy-900 border border-slate-800 text-xs">
                        <label class="block text-slate-400 mb-1.5 font-semibold">{{ trans('dashboard.device_th') }}</label>
                        <select name="device_id" required class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-900 dark:text-slate-100 px-3 py-2 text-xs focus:border-brand-500 focus:outline-none">
                            @foreach($devices as $device)
                                <option value="{{ $device->uuid }}" {{ old('device_id') === $device->uuid ? 'selected' : '' }}>
                                    {{ $device->name }} ({{ $device->serial_number }})
                                </option>
                            @endforeach
                        </select>
                    </div>
                @else
                    <input type="hidden" name="device_id" value="{{ $devices->first()?->uuid }}">
                @endif

                <!-- Credit/Debit Note Original Invoice & Reason -->
                @if($isCreditDebit)
                    <div class="p-5 rounded-2xl bg-navy-900 border border-slate-800 grid grid-cols-1 sm:grid-cols-2 gap-4 text-xs">
                        <div>
                            <label class="block text-slate-400 mb-1.5 font-semibold">{{ trans('dashboard.original_invoice') }} *</label>
                            <select name="original_invoice_uuid" required class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-900 dark:text-slate-100 px-3 py-2 text-xs focus:border-brand-500 focus:outline-none">
                                <option value="">{{ trans('dashboard.select_original') }}</option>
                                @foreach($originals as $original)
                                    <option value="{{ $original->uuid }}" {{ old('original_invoice_uuid') === $original->uuid ? 'selected' : '' }}>
                                        {{ $original->invoice_number }} — {{ $original->buyer_name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="block text-slate-400 mb-1.5 font-semibold">{{ trans('dashboard.note_reason') }} *</label>
                            <input type="text" name="reason" value="{{ old('reason') }}" required class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-900 dark:text-slate-100 px-3 py-2 text-xs focus:border-brand-500 focus:outline-none" placeholder="سبب الإصدار...">
                        </div>
                    </div>
                @endif

                <!-- SECTION 1: CUSTOMER (العميل) -->
                <div class="p-5 sm:p-6 rounded-2xl bg-navy-900 border border-slate-800 space-y-4">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center gap-2">
                            <span class="w-1.5 h-4 rounded-full bg-brand-500"></span>
                            <h3 class="text-sm font-bold text-slate-900 dark:text-white">{{ trans('dashboard.nav_customers') }}</h3>
                        </div>
                        <button type="button"
                                onclick="openCustomerModal()"
                                class="text-xs font-bold text-brand-600 dark:text-brand-400 hover:text-brand-500 transition flex items-center gap-1">
                            <i class="fa-solid fa-plus text-[10px]"></i>
                            <span>{{ trans('dashboard.new_customer_btn') }}</span>
                        </button>
                    </div>

                    <!-- Customer Searchable Autocomplete -->
                    <div class="relative" id="customer-picker-wrapper">
                        <div class="relative">
                            <span class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none text-slate-400 text-sm">
                                <i class="fa-solid fa-magnifying-glass"></i>
                            </span>
                            <input type="text"
                                   id="customer-search-input"
                                   autocomplete="off"
                                   placeholder="{{ trans('dashboard.search_customer_placeholder') }}"
                                   class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-900 dark:text-slate-100 ps-10 pe-10 py-2.5 text-xs focus:border-brand-500 focus:outline-none transition">
                            <button type="button"
                                    id="customer-clear-btn"
                                    onclick="clearCustomerSelection()"
                                    class="hidden absolute inset-y-0 end-0 flex items-center pe-3 text-slate-400 hover:text-slate-900 dark:hover:text-white">
                                <i class="fa-solid fa-xmark text-sm"></i>
                            </button>
                        </div>

                        <!-- Dropdown Results -->
                        <div id="customer-dropdown" class="hidden absolute z-30 start-0 end-0 mt-1.5 max-h-56 overflow-y-auto rounded-xl bg-navy-950 border border-slate-700 shadow-2xl divide-y divide-slate-200 dark:divide-slate-800 text-xs">
                            <button type="button"
                                    onclick="selectWalkInCustomer()"
                                    class="w-full text-start px-4 py-2.5 hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-700 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white flex items-center justify-between">
                                <div class="font-bold">{{ trans('dashboard.walk_in_customer') }}</div>
                                <span class="text-[10px] text-slate-400 font-mono">B2C</span>
                            </button>
                            @foreach($customers as $customer)
                                <button type="button"
                                        onclick="selectCustomer(@js($customer))"
                                        class="customer-opt-item w-full text-start px-4 py-2.5 hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-700 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white flex items-center justify-between"
                                        data-search="{{ strtolower($customer->name . ' ' . $customer->vat_number . ' ' . $customer->phone) }}">
                                    <div>
                                        <div class="font-bold text-slate-900 dark:text-white">{{ $customer->name }}</div>
                                        <div class="text-[10px] text-slate-500 font-mono">
                                            {{ $customer->vat_number ? trans('dashboard.vat_label') . ' ' . $customer->vat_number : ($customer->phone ?: trans('dashboard.no_vat_number')) }}
                                        </div>
                                    </div>
                                    <span class="text-[10px] text-slate-400">{{ $customer->address_city ?: 'SA' }}</span>
                                </button>
                            @endforeach
                        </div>
                    </div>

                    <!-- Selected Customer Badge Details -->
                    <div id="selected-customer-card" class="p-3.5 rounded-xl bg-navy-950 border border-slate-800 flex items-center justify-between text-xs">
                        <div class="flex items-center gap-2.5">
                            <div class="w-8 h-8 rounded-lg bg-slate-800 border border-slate-700 text-brand-500 font-bold flex items-center justify-center text-xs" id="selected-customer-initial">
                                {{ trans('dashboard.customer_initial') }}
                            </div>
                            <div>
                                <div class="font-bold text-slate-900 dark:text-white text-xs" id="selected-customer-name-display">
                                    {{ trans('dashboard.walk_in_customer') }}
                                </div>
                                <div class="text-[10px] text-slate-500 dark:text-slate-400 font-mono" id="selected-customer-vat-display">
                                    {{ $isStandard ? trans('dashboard.b2b_requires_customer') : trans('dashboard.b2c_walk_in') }}
                                </div>
                            </div>
                        </div>
                        <button type="button" onclick="toggleBuyerInputs()" class="text-[11px] text-brand-600 dark:text-brand-400 hover:underline font-bold">
                            {{ trans('dashboard.edit_data') }}
                        </button>
                    </div>

                    <!-- Hidden Buyer Inputs -->
                    <input type="hidden" name="customer_id" id="form-customer-id" value="{{ old('customer_id') }}">

                    <div id="manual-buyer-fields" class="hidden grid grid-cols-1 sm:grid-cols-2 gap-3 pt-2 text-xs border-t border-slate-200 dark:border-slate-800/80">
                        <div>
                            <label class="block text-slate-400 mb-1">{{ trans('dashboard.buyer_name') }} *</label>
                            <input id="buyer-name" type="text" name="buyer[name]" value="{{ old('buyer.name', $isStandard ? '' : trans('dashboard.walk_in_customer')) }}" required class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-900 dark:text-slate-100 px-3 py-2 text-xs focus:border-brand-500 focus:outline-none">
                        </div>
                        <div>
                            <label class="block text-slate-400 mb-1">{{ trans('dashboard.buyer_vat') }} {{ $isStandard ? '*' : '(اختياري)' }}</label>
                            <input id="buyer-vat" type="text" name="buyer[vat_number]" value="{{ old('buyer.vat_number') }}" maxlength="15" class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-900 dark:text-slate-100 px-3 py-2 text-xs font-mono focus:border-brand-500 focus:outline-none" placeholder="3xxxxxxxxxxxx03">
                        </div>
                        <div>
                            <label class="block text-slate-400 mb-1">{{ trans('dashboard.buyer_cr') }}</label>
                            <input id="buyer-cr" type="text" name="buyer[cr_number]" value="{{ old('buyer.cr_number') }}" class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-900 dark:text-slate-100 px-3 py-2 text-xs focus:border-brand-500 focus:outline-none">
                        </div>
                        <div>
                            <label class="block text-slate-400 mb-1">{{ trans('dashboard.buyer_city') }}</label>
                            <input id="buyer-city" type="text" name="buyer[address][city]" value="{{ old('buyer.address.city', trans('dashboard.default_city')) }}" class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-900 dark:text-slate-100 px-3 py-2 text-xs focus:border-brand-500 focus:outline-none">
                        </div>
                        <input id="buyer-street" type="hidden" name="buyer[address][street]" value="{{ old('buyer.address.street', trans('dashboard.default_street')) }}">
                        <input id="buyer-country" type="hidden" name="buyer[address][country]" value="{{ old('buyer.address.country', trans('dashboard.default_country')) }}">
                    </div>
                </div>

                <!-- SECTION 2: ITEMS (البنود) -->
                <div class="p-5 sm:p-6 rounded-2xl bg-navy-900 border border-slate-800 space-y-4">
                    <!-- Header with Saved Items & Add Line -->
                    <div class="flex flex-wrap items-center justify-between gap-3">
                        <div class="flex items-center gap-2">
                            <span class="w-1.5 h-4 rounded-full bg-brand-500"></span>
                            <h3 class="text-sm font-bold text-slate-900 dark:text-white">{{ trans('dashboard.line_items') }}</h3>
                        </div>

                        <div class="flex items-center gap-2">
                            <!-- Saved Items Dropdown Picker -->
                            <div class="relative" id="catalog-picker-container" class="{{ $items->isEmpty() ? 'hidden' : '' }}">
                                <button type="button"
                                        id="catalog-toggle-btn"
                                        onclick="toggleCatalogDropdown()"
                                        class="px-3 py-1.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-200 hover:text-white text-xs font-semibold border border-slate-700 transition flex items-center gap-1.5 shadow-sm">
                                    <i class="fa-regular fa-bookmark text-slate-400 text-xs"></i>
                                    <span>{{ trans('dashboard.saved_items_btn') }}</span>
                                    <i class="fa-solid fa-chevron-down text-[10px] text-slate-400"></i>
                                </button>
                                <div id="catalog-dropdown" class="hidden absolute z-30 end-0 mt-1.5 w-64 max-h-56 overflow-y-auto rounded-xl bg-navy-950 border border-slate-700 shadow-2xl divide-y divide-slate-200 dark:divide-slate-800 text-xs">
                                    <div id="catalog-dropdown-items" class="divide-y divide-slate-200 dark:divide-slate-800">
                                        @foreach($items as $item)
                                            <button type="button"
                                                    onclick="addSavedCatalogItem(@js($item))"
                                                    class="w-full text-start px-3 py-2 hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-700 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white flex items-center justify-between">
                                                <span class="truncate font-semibold">{{ $item->name }}</span>
                                                <span class="text-[11px] font-mono text-emerald-600 dark:text-emerald-400 shrink-0 inline-flex items-center gap-1">
                                                    <x-riyal-symbol class="w-[0.95em] h-[0.95em]" />
                                                    <span>{{ number_format($item->unit_price, 2) }}</span>
                                                </span>
                                            </button>
                                        @endforeach
                                    </div>
                                </div>
                            </div>

                            <!-- Add Line Button -->
                            <button type="button"
                                    id="add-line-btn"
                                    onclick="addLineRow()"
                                    class="px-3 py-1.5 rounded-xl bg-brand-500 hover:bg-brand-600 text-white force-white text-xs font-bold transition flex items-center gap-1.5 shadow-md shadow-brand-500/20">
                                <i class="fa-solid fa-plus text-xs"></i>
                                <span>{{ trans('dashboard.add_line') }}</span>
                            </button>
                        </div>
                    </div>

                    <!-- Tax Mode Switcher: Inclusive vs Exclusive (zatcatools.com style) -->
                    <div id="tax-mode-switcher" class="flex flex-col sm:flex-row sm:items-center justify-between gap-2 p-2.5 rounded-xl bg-navy-950 border border-slate-800 text-xs">
                        <div class="inline-flex items-center p-1 rounded-lg bg-slate-800 border border-slate-700">
                            <button type="button"
                                    id="tax-mode-incl-btn"
                                    onclick="setTaxMode(true)"
                                    class="px-3 py-1 rounded-md text-xs font-bold transition bg-brand-500 text-white force-white shadow-sm">
                                {{ trans('dashboard.prices_tax_inclusive') }}
                            </button>
                            <button type="button"
                                    id="tax-mode-excl-btn"
                                    onclick="setTaxMode(false)"
                                    class="px-3 py-1 rounded-md text-xs font-bold transition text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white">
                                {{ trans('dashboard.prices_tax_exclusive') }}
                            </button>
                        </div>
                        <div class="text-[11px] text-slate-500 dark:text-slate-400 ps-1" id="tax-mode-hint">
                            {{ trans('dashboard.tax_inclusive_hint') }}
                        </div>
                    </div>

                    <!-- Line Items Column Headers -->
                    <div class="hidden sm:grid sm:grid-cols-12 gap-2 text-[11px] font-semibold text-slate-500 dark:text-slate-400 px-2">
                        <div class="col-span-5">{{ trans('dashboard.line_name') }}</div>
                        <div class="col-span-2 text-center">{{ trans('dashboard.qty_label') }}</div>
                        <div class="col-span-2 text-center" id="header-unit-price-label">{{ trans('dashboard.unit_price_incl') }}</div>
                        <div class="col-span-2 text-center" id="header-line-total-label">{{ trans('dashboard.line_total_incl') }}</div>
                        <div class="col-span-1 text-end"></div>
                    </div>

                    <!-- Items Rows Container -->
                    <div id="lines-editor-container" class="space-y-3">
                        <!-- Rows injected dynamically via JS -->
                    </div>
                </div>

                <!-- SECTION 3: TOTAL DISCOUNT & INVOICE DATE (خصم على الإجمالي وتاريخ الفاتورة) -->
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <!-- Total Discount Card -->
                    <div class="p-5 rounded-2xl bg-navy-900 border border-slate-800 space-y-2 text-xs">
                        <label class="block font-bold text-slate-900 dark:text-white">
                            {{ trans('dashboard.total_discount_label') }}
                        </label>
                        <div class="relative">
                            <input type="number"
                                   step="0.01"
                                   min="0"
                                   id="overall-discount-input"
                                   value="0"
                                   class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-900 dark:text-slate-100 ps-3 pe-12 py-2.5 text-xs font-mono focus:border-brand-500 focus:outline-none">
                            <span class="absolute inset-y-0 end-0 flex items-center pe-3 text-slate-500 dark:text-slate-400 font-bold pointer-events-none text-xs">
                                <x-riyal-symbol class="w-[1.05em] h-[1.05em]" />
                            </span>
                        </div>
                        <p class="text-[10px] text-slate-500">
                            {{ trans('dashboard.item_discount_hint') }}
                        </p>
                    </div>

                    <!-- Invoice Date & Calendar Card -->
                    <div class="p-5 rounded-2xl bg-navy-900 border border-slate-800 space-y-2 text-xs">
                        <div class="flex items-center justify-between">
                            <label class="block font-bold text-slate-900 dark:text-white">
                                {{ trans('dashboard.invoice_date_label') }}
                            </label>
                            <button type="button"
                                    onclick="setTodayDate()"
                                    class="px-2 py-0.5 rounded-md bg-slate-800 hover:bg-slate-700 text-brand-500 dark:text-brand-400 text-[10px] font-bold border border-slate-700 transition">
                                {{ trans('dashboard.today_btn') }}
                            </button>
                        </div>
                        <div class="relative">
                            <input type="date"
                                   id="invoice-date-picker"
                                   value="{{ now()->format('Y-m-d') }}"
                                   onchange="updateInvoiceDate(this.value)"
                                   class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-900 dark:text-slate-100 px-3 py-2 text-xs focus:border-brand-500 focus:outline-none">
                        </div>
                        <div class="text-[10px] text-slate-500 flex items-center justify-between pt-1">
                            <span class="text-slate-400">{{ trans('dashboard.service_date_same') }}</span>
                            <span id="service-date-display" class="font-mono text-slate-700 dark:text-slate-300 font-bold">{{ now()->format('Y-m-d') }}</span>
                        </div>
                    </div>
                </div>

                <!-- SECTION 4: NOTES (ملاحظات) -->
                <div class="p-4 rounded-2xl bg-navy-900 border border-slate-800">
                    <button type="button"
                            onclick="toggleNotesSection()"
                            class="w-full flex items-center justify-between text-xs font-bold text-slate-700 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white">
                        <span class="flex items-center gap-2">
                            <i class="fa-regular fa-comment-dots text-brand-500"></i>
                            <span>{{ trans('dashboard.notes_label') }}</span>
                        </span>
                        <i id="notes-chevron" class="fa-solid fa-chevron-down text-slate-400 text-[10px] transition-transform duration-200"></i>
                    </button>
                    <div id="notes-content" class="hidden mt-3 pt-3 border-t border-slate-200 dark:border-slate-800/80">
                        <textarea name="notes"
                                  rows="2"
                                  placeholder="ملاحظات أو شروط إضافية تظهر أسفل الفاتورة..."
                                  class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-900 dark:text-slate-100 p-3 text-xs focus:border-brand-500 focus:outline-none resize-none"></textarea>
                    </div>
                </div>

                <!-- SECTION 5: BOTTOM ACTION BAR (شريط الحفظ والإصدار) -->
                <div id="tour-final-step" class="p-4 sm:p-5 rounded-2xl bg-navy-900 border border-slate-800 flex flex-col sm:flex-row items-center justify-between gap-4 shadow-xl">
                    <div class="flex items-center gap-2 text-xs font-semibold text-slate-700 dark:text-slate-300">
                        <span class="w-6 h-6 rounded-full bg-emerald-500/20 text-emerald-500 flex items-center justify-center text-xs">
                            <i class="fa-solid fa-shield-halved"></i>
                        </span>
                        <span>{{ trans('dashboard.zatca_instant_sign_notice') }}</span>
                    </div>

                    <div class="flex items-center gap-3 w-full sm:w-auto justify-end">
                        <button type="submit"
                                id="btn-save-draft"
                                name="intent"
                                value="draft"
                                class="px-5 py-2.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-200 hover:text-white text-xs font-bold border border-slate-700 transition flex items-center gap-2">
                            <i class="fa-solid fa-spinner fa-spin hidden" id="spinner-draft"></i>
                            <span id="text-draft">{{ trans('dashboard.save_draft') }}</span>
                        </button>
                        <button type="submit"
                                id="btn-issue-now"
                                name="intent"
                                value="issue"
                                class="px-6 py-2.5 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white force-white text-xs font-extrabold shadow-lg shadow-emerald-600/30 transition flex items-center gap-2">
                            <i class="fa-solid fa-spinner fa-spin hidden" id="spinner-issue"></i>
                            <i class="fa-solid fa-bolt" id="icon-issue"></i>
                            <span id="text-issue">{{ trans('dashboard.issue_now') }}</span>
                        </button>
                    </div>
                </div>

            </form>
        </div>

    </div>
</div>

<!-- Quick Add Customer Modal (Full-Featured) -->
<div id="customer-modal" class="fixed inset-0 z-50 hidden" aria-modal="true" role="dialog">
    <div class="absolute inset-0 bg-navy-950/80 backdrop-blur-sm" onclick="closeCustomerModal()"></div>
    <div class="relative flex items-center justify-center min-h-screen p-4">
        <div class="bg-navy-900 border border-slate-700 rounded-2xl w-full max-w-lg shadow-2xl text-xs flex flex-col max-h-[90vh] overflow-hidden">

            {{-- Modal Header --}}
            <div class="flex items-center justify-between px-5 py-4 border-b border-slate-800 shrink-0">
                <div class="flex items-center gap-2">
                    <span class="w-7 h-7 rounded-lg bg-brand-500/15 text-brand-400 flex items-center justify-center text-sm">
                        <i class="fa-solid fa-user-plus"></i>
                    </span>
                    <h3 class="text-sm font-extrabold text-slate-900 dark:text-white">{{ trans('dashboard.add_customer') }}</h3>
                </div>
                <button type="button" onclick="closeCustomerModal()" class="text-slate-400 hover:text-white transition p-1 rounded-lg">
                    <i class="fa-solid fa-xmark text-base"></i>
                </button>
            </div>

            {{-- Modal Body (scrollable) --}}
            <div class="overflow-y-auto flex-1 p-5 space-y-4">

                {{-- Mini Preview Card --}}
                <div class="flex items-center gap-3 p-3 rounded-xl bg-navy-950 border border-slate-800">
                    <div id="modal-preview-initial"
                         class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-500 to-emerald-600 text-white force-white font-black text-base flex items-center justify-center shrink-0">
                        ؟
                    </div>
                    <div class="min-w-0 flex-1">
                        <div id="modal-preview-name" class="font-bold text-slate-900 dark:text-white text-sm truncate">
                            {{ app()->getLocale() === 'ar' ? 'اسم العميل' : 'Customer Name' }}
                        </div>
                        <div id="modal-preview-vat" class="text-[11px] text-slate-500 font-mono">
                            {{ app()->getLocale() === 'ar' ? 'بدون رقم ضريبي' : 'No VAT number' }}
                        </div>
                    </div>
                    <span id="modal-preview-badge"
                          class="px-2 py-0.5 rounded-full text-[10px] font-bold bg-slate-700 text-slate-400 border border-slate-700 shrink-0">
                        B2C
                    </span>
                </div>

                {{-- REQUIRED: Name --}}
                <div>
                    <label class="block text-slate-400 mb-1.5 font-semibold">
                        {{ trans('dashboard.buyer_name') }} *
                    </label>
                    <input type="text"
                           id="modal-cust-name"
                           required
                           placeholder="{{ app()->getLocale() === 'ar' ? 'اسم المنشأة أو العميل' : 'Company or customer name' }}"
                           class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-900 dark:text-white px-3 py-2.5 text-xs focus:border-brand-500 focus:outline-none transition">
                </div>

                {{-- VAT + CR --}}
                <div class="grid grid-cols-2 gap-3">
                    <div>
                        <label class="block text-slate-400 mb-1.5 font-semibold">
                            {{ trans('dashboard.buyer_vat') }}
                            <span class="font-normal text-slate-500">(15 رقم)</span>
                        </label>
                        <input type="text"
                               id="modal-cust-vat"
                               maxlength="15"
                               placeholder="3xxxxxxxxxxxx3"
                               class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-900 dark:text-white px-3 py-2.5 text-xs font-mono focus:border-brand-500 focus:outline-none transition">
                    </div>
                    <div>
                        <label class="block text-slate-400 mb-1.5 font-semibold">{{ trans('dashboard.buyer_cr') }}</label>
                        <input type="text"
                               id="modal-cust-cr"
                               placeholder="{{ app()->getLocale() === 'ar' ? 'السجل التجاري' : 'CR number' }}"
                               class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-900 dark:text-white px-3 py-2.5 text-xs focus:border-brand-500 focus:outline-none transition">
                    </div>
                </div>

                {{-- City + Street --}}
                <div class="grid grid-cols-2 gap-3">
                    <div>
                        <label class="block text-slate-400 mb-1.5 font-semibold">{{ trans('dashboard.buyer_city') }}</label>
                        <input type="text"
                               id="modal-cust-city"
                               value="{{ app()->getLocale() === 'ar' ? 'الرياض' : 'Riyadh' }}"
                               class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-900 dark:text-white px-3 py-2.5 text-xs focus:border-brand-500 focus:outline-none transition">
                    </div>
                    <div>
                        <label class="block text-slate-400 mb-1.5 font-semibold">{{ trans('dashboard.address_street') }}</label>
                        <input type="text"
                               id="modal-cust-street"
                               placeholder="{{ app()->getLocale() === 'ar' ? 'الشارع' : 'Street' }}"
                               class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-900 dark:text-white px-3 py-2.5 text-xs focus:border-brand-500 focus:outline-none transition">
                    </div>
                </div>

                {{-- Phone --}}
                <div>
                    <label class="block text-slate-400 mb-1.5 font-semibold">{{ trans('dashboard.customer_phone') }}</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 start-0 flex items-center ps-3 text-slate-500 pointer-events-none">
                            <i class="fa-solid fa-phone text-xs"></i>
                        </span>
                        <input type="text"
                               id="modal-cust-phone"
                               placeholder="+966 5x xxx xxxx"
                               class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-900 dark:text-white ps-9 pe-3 py-2.5 text-xs focus:border-brand-500 focus:outline-none transition">
                    </div>
                </div>

                {{-- ZATCA info note --}}
                <div class="flex items-start gap-2 p-2.5 rounded-xl bg-slate-800/60 border border-slate-700/60 text-slate-400 text-[11px]">
                    <i class="fa-solid fa-circle-info text-brand-400 mt-0.5 shrink-0"></i>
                    <span>{{ app()->getLocale() === 'ar' ? 'العميل يُحفظ لهذه الفاتورة فقط — لحفظه بشكل دائم استخدم صفحة العملاء' : 'Customer is applied to this invoice only — to save permanently use the Customers page' }}</span>
                </div>
            </div>

            {{-- Modal Footer --}}
            <div class="flex items-center justify-between px-5 py-4 border-t border-slate-800 shrink-0">
                <button type="button" onclick="closeCustomerModal()" class="px-4 py-2 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-300 hover:text-white text-xs font-bold border border-slate-700 transition">
                    {{ trans('dashboard.cancel') }}
                </button>
                <button type="button" onclick="saveCustomerFromModal()" class="px-5 py-2 rounded-xl bg-brand-600 hover:bg-brand-500 text-white force-white text-xs font-extrabold transition shadow-md shadow-brand-500/20 flex items-center gap-2">
                    <i class="fa-solid fa-check"></i>
                    <span>{{ app()->getLocale() === 'ar' ? 'تطبيق العميل' : 'Apply Customer' }}</span>
                </button>
            </div>
        </div>
    </div>
</div>


<!-- =====================================================
     INTERACTIVE STEP-BY-STEP TOUR SYSTEM
====================================================== -->

<!-- Tour Backdrop Overlay -->
<div id="tour-overlay" class="hidden fixed inset-0 z-[60]" aria-hidden="true"></div>

<!-- Tour Tooltip Card -->
<div id="tour-tooltip"
     class="hidden fixed z-[70] w-72 sm:w-80 bg-white dark:bg-slate-900 rounded-2xl shadow-2xl border border-slate-200 dark:border-slate-700 overflow-hidden">

    <!-- Tooltip Arrow (positioned dynamically via JS) -->
    <div id="tour-arrow"
         class="absolute w-3 h-3 bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-700 rotate-45"></div>

    <!-- Tooltip Header -->
    <div class="flex items-center justify-between px-4 pt-4 pb-3 border-b border-slate-100 dark:border-slate-800">
        <div class="flex items-center gap-2">
            <span id="tour-step-icon" class="w-7 h-7 rounded-lg bg-brand-500/15 text-brand-600 dark:text-brand-400 flex items-center justify-center text-sm">
                <i class="fa-solid fa-circle-question"></i>
            </span>
            <h4 id="tour-step-title" class="text-sm font-extrabold text-slate-900 dark:text-white leading-tight"></h4>
        </div>
        <button type="button" onclick="closeTour()" class="text-slate-400 hover:text-slate-600 dark:hover:text-white p-1 rounded-lg transition">
            <i class="fa-solid fa-xmark text-sm"></i>
        </button>
    </div>

    <!-- Tooltip Body -->
    <div class="px-4 py-3">
        <p id="tour-step-body" class="text-[12px] leading-relaxed text-slate-600 dark:text-slate-300"></p>
    </div>

    <!-- Tooltip Footer: Progress & Buttons -->
    <div class="flex items-center justify-between px-4 pb-4">
        <span id="tour-step-counter" class="text-[11px] font-semibold text-slate-400 dark:text-slate-500"></span>
        <div class="flex items-center gap-2">
            <button type="button"
                    id="tour-prev-btn"
                    onclick="tourPrev()"
                    class="px-3 py-1.5 rounded-xl bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-300 text-xs font-bold border border-slate-200 dark:border-slate-700 transition">
                {{ app()->getLocale() === 'ar' ? 'السابق' : 'Back' }}
            </button>
            <button type="button"
                    id="tour-next-btn"
                    onclick="tourNext()"
                    class="px-4 py-1.5 rounded-xl bg-brand-600 hover:bg-brand-500 text-white force-white text-xs font-extrabold shadow-md shadow-brand-500/30 transition">
                {{ app()->getLocale() === 'ar' ? 'التالي' : 'Next' }}
            </button>
        </div>
    </div>

    <!-- Step Progress Dots -->
    <div id="tour-dots" class="flex items-center justify-center gap-1.5 pb-3">
        <!-- Populated by JS -->
    </div>
</div>

<!-- Spotlight Highlight Ring (drawn around the target element) -->
<div id="tour-spotlight"
     class="hidden fixed z-[65] pointer-events-none rounded-2xl"></div>


<!-- =========================================================
     JAVASCRIPT: REACTIVE CALCULATOR & INTERACTIVE UI
========================================================== -->
<script>
(function() {
    let isTaxInclusive = true;
    let lineCounter = 0;
    const currencySymbol = @js(view('components.riyal-symbol', ['class' => 'inline-block w-[1.05em] h-[1.05em] align-middle me-1'])->render());
    const linesContainer = document.getElementById('lines-editor-container');
    const previewLinesBody = document.getElementById('preview-lines-body');

    window.setTaxMode = function(inclusive) {
        isTaxInclusive = inclusive;
        const inclBtn = document.getElementById('tax-mode-incl-btn');
        const exclBtn = document.getElementById('tax-mode-excl-btn');
        const hintEl = document.getElementById('tax-mode-hint');
        const headerUnit = document.getElementById('header-unit-price-label');
        const headerTotal = document.getElementById('header-line-total-label');

        if (inclusive) {
            inclBtn.className = 'px-3 py-1 rounded-md text-xs font-bold transition bg-brand-500 text-white force-white shadow-sm';
            exclBtn.className = 'px-3 py-1 rounded-md text-xs font-bold transition text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white';
            hintEl.textContent = 'اكتب ما يدفعه العميل — نحسب الصافي والضريبة';
            headerUnit.textContent = 'سعر الوحدة (شامل)';
            headerTotal.textContent = 'الإجمالي (شامل)';
        } else {
            exclBtn.className = 'px-3 py-1 rounded-md text-xs font-bold transition bg-brand-500 text-white force-white shadow-sm';
            inclBtn.className = 'px-3 py-1 rounded-md text-xs font-bold transition text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white';
            hintEl.textContent = 'الأسعار المدخلة غير شاملة للضريبة — يتم إضافة 15%';
            headerUnit.textContent = 'سعر الوحدة (قبل الضريبة)';
            headerTotal.textContent = 'الإجمالي (قبل الضريبة)';
        }

        recalculateAll();
    };

    window.addLineRow = function(initData = {}) {
        const id = lineCounter++;
        const rowDiv = document.createElement('div');
        rowDiv.id = `line-row-${id}`;
        rowDiv.className = 'line-item-row p-3 rounded-xl bg-navy-950 border border-slate-800 hover:border-slate-700 transition space-y-2';

        const name = initData.name || '';
        const qty = initData.quantity || 1;
        const price = initData.unit_price != null ? initData.unit_price : 0;
        const vatRate = initData.vat_rate != null ? initData.vat_rate : 15;
        const discount = initData.discount || 0;

        rowDiv.innerHTML = `
            <div class="grid grid-cols-1 sm:grid-cols-12 gap-2 items-center">
                <!-- Description -->
                <div class="sm:col-span-5 relative">
                    <input type="text"
                           name="lines[${id}][name]"
                           value="${escapeHtml(name)}"
                           required
                           placeholder="{{ trans('dashboard.item_description_placeholder') }}"
                           class="line-input-name w-full rounded-xl bg-navy-900 border border-slate-700 text-slate-900 dark:text-slate-100 px-3 py-2 text-xs focus:border-brand-500 focus:outline-none">
                    <input type="hidden" name="lines[${id}][unit]" value="PCE">
                    <!-- Net price submitted to backend -->
                    <input type="hidden" name="lines[${id}][unit_price]" class="line-hidden-net-price" value="${price}">
                </div>

                <!-- Quantity -->
                <div class="sm:col-span-2">
                    <input type="number"
                           step="0.001"
                           min="0.001"
                           name="lines[${id}][quantity]"
                           value="${qty}"
                           required
                           class="line-input-qty w-full text-center rounded-xl bg-navy-900 border border-slate-700 text-slate-900 dark:text-slate-100 px-2 py-2 text-xs font-mono focus:border-brand-500 focus:outline-none">
                </div>

                <!-- Display Unit Price Input -->
                <div class="sm:col-span-2">
                    <input type="number"
                           step="0.01"
                           min="0"
                           value="${price}"
                           required
                           class="line-display-price w-full text-center rounded-xl bg-navy-900 border border-slate-700 text-slate-900 dark:text-slate-100 px-2 py-2 text-xs font-mono focus:border-brand-500 focus:outline-none">
                </div>

                <!-- Line Computed Total Display -->
                <div class="sm:col-span-2 text-center">
                    <span class="line-computed-total-badge inline-block font-mono font-bold text-emerald-600 dark:text-emerald-400 text-xs py-2">
                        ${currencySymbol} 0.00
                    </span>
                </div>

                <!-- Actions: Save to items, Toggle Discount & Delete -->
                <div class="sm:col-span-1 flex items-center justify-end gap-1 sm:gap-1.5 text-xs">
                    <button type="button"
                            id="save-item-btn-${id}"
                            onclick="saveCatalogItemFromRow(${id})"
                            title="{{ app()->getLocale() === 'ar' ? 'حفظ في البنود' : 'Save to items' }}"
                            class="text-slate-400 hover:text-emerald-500 p-1 transition">
                        <i class="fa-regular fa-bookmark"></i>
                    </button>
                    <button type="button"
                            onclick="toggleRowExtras(${id})"
                            title="{{ trans('dashboard.explain_discount_btn') }}"
                            class="text-slate-400 hover:text-brand-500 p-1 transition">
                        <i class="fa-solid fa-sliders"></i>
                    </button>
                    <button type="button"
                            onclick="removeLineRow(${id})"
                            class="text-slate-400 hover:text-rose-500 p-1 transition">
                        <i class="fa-solid fa-xmark text-sm"></i>
                    </button>
                </div>
            </div>

            <!-- Extra Collapsible Row for Line Discount and VAT Selection -->
            <div id="line-extras-${id}" class="hidden pt-2 border-t border-slate-200 dark:border-slate-800/80 grid grid-cols-1 sm:grid-cols-3 gap-2 text-xs">
                <div>
                    <label class="block text-[10px] text-slate-500 dark:text-slate-400 mb-0.5">{{ trans('dashboard.line_discount') }} (${currencySymbol})</label>
                    <input type="number"
                           step="0.01"
                           min="0"
                           name="lines[${id}][discount]"
                           value="${discount}"
                           class="line-input-discount w-full rounded-lg bg-navy-900 border border-slate-700 text-slate-900 dark:text-slate-100 px-2.5 py-1 text-xs font-mono focus:border-brand-500 focus:outline-none">
                </div>
                <div>
                    <label class="block text-[10px] text-slate-500 dark:text-slate-400 mb-0.5">{{ trans('dashboard.line_vat') }}</label>
                    <select name="lines[${id}][vat_rate]" class="line-select-vat w-full rounded-lg bg-navy-900 border border-slate-700 text-slate-900 dark:text-slate-100 px-2 py-1 text-xs focus:border-brand-500 focus:outline-none">
                        <option value="15" ${vatRate == 15 ? 'selected' : ''}>15%</option>
                        <option value="5" ${vatRate == 5 ? 'selected' : ''}>5%</option>
                        <option value="0" ${vatRate == 0 ? 'selected' : ''}>0%</option>
                    </select>
                </div>
                <div class="flex items-end text-[10px] text-slate-500 dark:text-slate-400 pb-1">
                    <span class="line-summary-subtext">صافي + ضريبة</span>
                </div>
            </div>
        `;

        linesContainer.appendChild(rowDiv);

        // Attach listeners
        const nameInput = rowDiv.querySelector('.line-input-name');
        const qtyInput = rowDiv.querySelector('.line-input-qty');
        const priceInput = rowDiv.querySelector('.line-display-price');
        const discountInput = rowDiv.querySelector('.line-input-discount');
        const vatSelect = rowDiv.querySelector('.line-select-vat');

        [nameInput, qtyInput, priceInput, discountInput].forEach(el => {
            el.addEventListener('input', recalculateAll);
        });
        vatSelect.addEventListener('change', recalculateAll);

        recalculateAll();
    };

    window.removeLineRow = function(id) {
        const rows = linesContainer.querySelectorAll('.line-item-row');
        if (rows.length <= 1) {
            // Keep at least one row, just clear it
            const row = document.getElementById(`line-row-${id}`);
            if (row) {
                row.querySelector('.line-input-name').value = '';
                row.querySelector('.line-display-price').value = '0';
                recalculateAll();
            }
            return;
        }
        const row = document.getElementById(`line-row-${id}`);
        if (row) {
            row.remove();
            recalculateAll();
        }
    };

    window.toggleRowExtras = function(id) {
        const el = document.getElementById(`line-extras-${id}`);
        if (el) el.classList.toggle('hidden');
    };

    window.saveCatalogItemFromRow = async function(id) {
        const row = document.getElementById(`line-row-${id}`);
        if (!row) return;

        const nameInput = row.querySelector('.line-input-name');
        const priceInput = row.querySelector('.line-display-price');
        const netPriceInput = row.querySelector('.line-hidden-net-price');
        const vatSelect = row.querySelector('.line-select-vat');
        const btn = document.getElementById(`save-item-btn-${id}`);

        const name = nameInput ? nameInput.value.trim() : '';
        // Save the net unit price (before VAT) as required by catalog
        const unitPrice = parseFloat(netPriceInput ? netPriceInput.value : (priceInput ? priceInput.value : 0)) || 0;
        const vatRate = parseFloat(vatSelect ? vatSelect.value : 15) || 15;

        if (!name) {
            alert('{{ app()->getLocale() === 'ar' ? 'يرجى كتابة وصف البند أولاً لحفظه.' : 'Please enter an item description first.' }}');
            nameInput?.focus();
            return;
        }

        const originalBtnHtml = btn ? btn.innerHTML : '';
        if (btn) {
            btn.disabled = true;
            btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin text-emerald-500"></i>';
        }

        try {
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content || '';
            const formData = new FormData();
            formData.append('_token', csrfToken);
            formData.append('name', name);
            formData.append('unit_price', unitPrice.toFixed(4));
            formData.append('vat_rate', vatRate);
            formData.append('unit', 'PCE');

            const resp = await fetch('{{ route('dashboard.items.store') }}', {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': csrfToken
                },
                body: formData,
                credentials: 'same-origin'
            });

            const data = await resp.json().catch(() => ({}));

            if (!resp.ok) {
                const errMsg = data.message || Object.values(data.errors || {})[0]?.[0] || '{{ app()->getLocale() === 'ar' ? 'حدث خطأ أثناء الحفظ.' : 'Failed to save item.' }}';
                alert(errMsg);
                if (btn) {
                    btn.disabled = false;
                    btn.innerHTML = originalBtnHtml;
                }
                return;
            }

            // Success feedback
            if (btn) {
                btn.innerHTML = '<i class="fa-solid fa-check text-emerald-500"></i>';
                btn.title = '{{ app()->getLocale() === 'ar' ? 'تم الحفظ في البنود' : 'Saved to items' }}';
                setTimeout(() => {
                    btn.disabled = false;
                    btn.innerHTML = '<i class="fa-solid fa-bookmark text-emerald-500"></i>';
                }, 2000);
            }

            // Append new item to saved items dropdown dynamically
            if (data.item) {
                const dropdownItems = document.getElementById('catalog-dropdown-items');
                const pickerContainer = document.getElementById('catalog-picker-container');
                if (pickerContainer) pickerContainer.classList.remove('hidden');

                if (dropdownItems) {
                    const newBtn = document.createElement('button');
                    newBtn.type = 'button';
                    newBtn.className = 'w-full text-start px-3 py-2 hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-700 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white flex items-center justify-between';
                    newBtn.onclick = () => window.addSavedCatalogItem(data.item);
                    newBtn.innerHTML = `
                        <span class="truncate font-semibold">${escapeHtml(data.item.name)}</span>
                        <span class="text-[11px] font-mono text-emerald-600 dark:text-emerald-400 shrink-0 inline-flex items-center gap-1">${currencySymbol} <span>${parseFloat(data.item.unit_price).toFixed(2)}</span></span>
                    `;
                    dropdownItems.insertBefore(newBtn, dropdownItems.firstChild);
                }
            }

        } catch (e) {
            alert('{{ app()->getLocale() === 'ar' ? 'تعذر الحفظ، يرجى المحاولة لاحقاً.' : 'Network error, please try again.' }}');
            if (btn) {
                btn.disabled = false;
                btn.innerHTML = originalBtnHtml;
            }
        }
    };

    window.addSavedCatalogItem = function(item) {
        addLineRow({
            name: item.name,
            unit_price: item.unit_price,
            vat_rate: item.vat_rate ?? 15,
            quantity: 1,
            discount: 0
        });
        const catDropdown = document.getElementById('catalog-dropdown');
        if (catDropdown) catDropdown.classList.add('hidden');
    };

    window.toggleCatalogDropdown = function() {
        const el = document.getElementById('catalog-dropdown');
        if (el) el.classList.toggle('hidden');
    };

    function escapeHtml(str) {
        if (!str) return '';
        return str.replace(/[&<>"']/g, function(m) {
            return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#039;'}[m];
        });
    }

    function recalculateAll() {
        let grandSubtotal = 0.0;
        let grandVat = 0.0;
        let grandDiscount = 0.0;
        let grandTotal = 0.0;

        previewLinesBody.innerHTML = '';
        const rows = linesContainer.querySelectorAll('.line-item-row');

        rows.forEach((row, idx) => {
            const name = row.querySelector('.line-input-name').value.trim() || `بند رقم ${idx + 1}`;
            const qty = parseFloat(row.querySelector('.line-input-qty').value) || 0;
            const inputPrice = parseFloat(row.querySelector('.line-display-price').value) || 0;
            const discount = parseFloat(row.querySelector('.line-input-discount').value) || 0;
            const vatRate = parseFloat(row.querySelector('.line-select-vat').value) || 15;

            let netUnitPrice = 0.0;
            let lineNet = 0.0;
            let lineVat = 0.0;
            let lineTotal = 0.0;

            if (isTaxInclusive) {
                // Input price is inclusive of VAT
                const factor = 1 + (vatRate / 100);
                netUnitPrice = factor > 0 ? (inputPrice / factor) : inputPrice;
                const grossLine = Math.max(0, (qty * inputPrice) - discount);
                lineNet = grossLine / factor;
                lineVat = grossLine - lineNet;
                lineTotal = grossLine;
            } else {
                // Input price is exclusive of VAT
                netUnitPrice = inputPrice;
                lineNet = Math.max(0, (qty * netUnitPrice) - discount);
                lineVat = lineNet * (vatRate / 100);
                lineTotal = lineNet + lineVat;
            }

            // Write net unit price to hidden input for backend ZATCA storage
            row.querySelector('.line-hidden-net-price').value = netUnitPrice.toFixed(4);

            // Update row displayed badge with Saudi currency
            const badge = row.querySelector('.line-computed-total-badge');
            badge.innerHTML = currencySymbol + ' ' + lineTotal.toFixed(2);

            grandSubtotal += lineNet;
            grandVat += lineVat;
            grandDiscount += discount;
            grandTotal += lineTotal;

            // Append to Live Preview Table
            const tr = document.createElement('tr');
            tr.className = 'border-b border-slate-100 hover:bg-slate-50';
            tr.innerHTML = `
                <td class="py-1.5 px-2 font-bold text-slate-800 text-start truncate max-w-[140px]">${escapeHtml(name)}</td>
                <td class="py-1.5 px-1.5 text-center font-mono">${qty}</td>
                <td class="py-1.5 px-2 text-end font-mono">${netUnitPrice.toFixed(2)}</td>
                <td class="py-1.5 px-2 text-end font-mono">${lineVat.toFixed(2)}</td>
                <td class="py-1.5 px-2 text-end font-mono font-bold text-slate-900">${lineTotal.toFixed(2)}</td>
            `;
            previewLinesBody.appendChild(tr);
        });

        // Apply overall discount if any
        const overallDiscount = parseFloat(document.getElementById('overall-discount-input')?.value) || 0;
        grandDiscount += overallDiscount;
        const finalDue = Math.max(0, grandTotal - overallDiscount);

        // Update preview totals with localized Saudi currency symbol
        document.getElementById('preview-subtotal').innerHTML = currencySymbol + ' ' + grandSubtotal.toFixed(2);
        document.getElementById('preview-vat').innerHTML = currencySymbol + ' ' + grandVat.toFixed(2);
        document.getElementById('preview-total-due').innerHTML = currencySymbol + ' ' + finalDue.toFixed(2);

        const discountRow = document.getElementById('preview-discount-row');
        if (grandDiscount > 0) {
            discountRow.classList.remove('hidden');
            document.getElementById('preview-discount').innerHTML = '- ' + currencySymbol + ' ' + grandDiscount.toFixed(2);
        } else {
            discountRow.classList.add('hidden');
        }
    }

    document.getElementById('overall-discount-input')?.addEventListener('input', recalculateAll);

    // Initial first line
    addLineRow({
        name: '',
        quantity: 1,
        unit_price: 0,
        vat_rate: 15
    });

    // Customer Picker logic
    const searchInput = document.getElementById('customer-search-input');
    const dropdown = document.getElementById('customer-dropdown');
    const clearBtn = document.getElementById('customer-clear-btn');

    searchInput?.addEventListener('focus', () => dropdown.classList.remove('hidden'));
    searchInput?.addEventListener('input', function() {
        const query = this.value.trim().toLowerCase();
        dropdown.classList.remove('hidden');
        dropdown.querySelectorAll('.customer-opt-item').forEach(item => {
            const searchData = item.dataset.search || '';
            item.style.display = searchData.includes(query) ? 'flex' : 'none';
        });
    });

    document.addEventListener('click', function(e) {
        if (!document.getElementById('customer-picker-wrapper')?.contains(e.target)) {
            dropdown?.classList.add('hidden');
        }
        if (!document.getElementById('catalog-toggle-btn')?.contains(e.target) && !document.getElementById('catalog-dropdown')?.contains(e.target)) {
            document.getElementById('catalog-dropdown')?.classList.add('hidden');
        }
    });

    window.selectCustomer = function(cust) {
        document.getElementById('form-customer-id').value = cust.uuid;
        document.getElementById('buyer-name').value = cust.name;
        document.getElementById('buyer-vat').value = cust.vat_number || '';
        document.getElementById('buyer-cr').value = cust.cr_number || '';
        document.getElementById('buyer-city').value = cust.address_city || 'الرياض';
        document.getElementById('buyer-street').value = cust.address_street || 'شارع عام';
        document.getElementById('buyer-country').value = cust.address_country || 'SA';

        // Update Selected Card UI
        document.getElementById('selected-customer-initial').textContent = cust.name.charAt(0);
        document.getElementById('selected-customer-name-display').textContent = cust.name;
        document.getElementById('selected-customer-vat-display').textContent = cust.vat_number ? `ضريبي: ${cust.vat_number}` : (cust.phone || 'مسجل بدون رقم ضريبي');

        // Update Live Preview
        document.getElementById('preview-buyer-name').textContent = cust.name;
        document.getElementById('preview-buyer-vat').textContent = cust.vat_number ? `الرقم الضريبي: ${cust.vat_number}` : '-';

        searchInput.value = cust.name;
        clearBtn.classList.remove('hidden');
        dropdown.classList.add('hidden');
    };

    window.selectWalkInCustomer = function() {
        document.getElementById('form-customer-id').value = '';
        document.getElementById('buyer-name').value = '{{ trans('dashboard.walk_in_customer') }}';
        document.getElementById('buyer-vat').value = '';
        document.getElementById('buyer-cr').value = '';
        document.getElementById('buyer-city').value = 'الرياض';

        document.getElementById('selected-customer-initial').textContent = 'ع';
        document.getElementById('selected-customer-name-display').textContent = '{{ trans('dashboard.walk_in_customer') }}';
        document.getElementById('selected-customer-vat-display').textContent = 'عميل نقدي أفراد (مبسطة)';

        document.getElementById('preview-buyer-name').textContent = '{{ trans('dashboard.walk_in_customer') }}';
        document.getElementById('preview-buyer-vat').textContent = '-';

        searchInput.value = '';
        clearBtn.classList.add('hidden');
        dropdown.classList.add('hidden');
    };

    window.clearCustomerSelection = function() {
        selectWalkInCustomer();
    };

    window.toggleBuyerInputs = function() {
        document.getElementById('manual-buyer-fields')?.classList.toggle('hidden');
    };

    // Date Picker logic
    window.setTodayDate = function() {
        const today = new Date().toISOString().split('T')[0];
        document.getElementById('invoice-date-picker').value = today;
        updateInvoiceDate(today);
    };

    window.updateInvoiceDate = function(dateVal) {
        document.getElementById('form-issue-date').value = dateVal;
        document.getElementById('form-service-date').value = dateVal;
        document.getElementById('service-date-display').textContent = dateVal;
        document.getElementById('preview-issue-date').textContent = dateVal.replaceAll('-', '/');
        document.getElementById('preview-service-date').textContent = dateVal.replaceAll('-', '/');
    };

    // Notes Toggle
    window.toggleNotesSection = function() {
        const content = document.getElementById('notes-content');
        const chevron = document.getElementById('notes-chevron');
        content.classList.toggle('hidden');
        chevron.classList.toggle('rotate-180');
    };

    // =====================================================
    //  STEP-BY-STEP SPOTLIGHT TOUR ENGINE
    // =====================================================
    const TOUR_STEPS = [
        {
            targetId: null,  // No element → centred intro card
            icon: '<i class="fa-solid fa-rocket"></i>',
            title: 'صفحة الفاتورة',
            body: 'جولة قصيرة جداً — نصف دقيقة — تشرح لك الصفحة. تقدر تتخطاها وترجع لها من «شرح الصفحة» فوق.',
        },
        {
            targetId: 'invoice-type-switcher',
            icon: '<i class="fa-solid fa-arrows-left-right"></i>',
            title: 'نوع الفاتورة',
            body: '«ضريبية B2B» للمشتري ضريبي — تحتاج رقم ضريبي للعميل وتُعتمد. «مبسطة B2C» البيع النقدي للأفراد، تكفي بدون أي بيانات.',
        },
        {
            targetId: 'customer-picker-wrapper',
            icon: '<i class="fa-solid fa-user"></i>',
            title: 'العميل',
            body: 'ابحث عن عميل مسجل عندك، أو أضف واحداً جديداً. بياناته تُحفظ مرة وتُطبع في كل فاتورة بعدها.',
        },
        {
            targetId: 'tax-mode-switcher',
            icon: '<i class="fa-solid fa-percent"></i>',
            title: 'السعر: قبل الضريبة أم شامل؟',
            body: 'هذا أهم خيار في الصفحة. إن كان سعرك المعلن للزبون شاملاً الضريبة «شاملة الضريبة» ونحن نستخرج الصافي. وإن كنت تسعّر قبل الضريبة فاختر الخيار الأول ونضيف 15% فوقه.',
        },
        {
            targetId: 'live-preview-panel',
            icon: '<i class="fa-solid fa-eye"></i>',
            title: 'المعاينة الحية',
            body: 'هذه هي الورقة كما ستصل عميلك — بقاليك وشعارك. تتحدث مع كل حرف تكتبه، فما تراه هنا هو ما ستطبع.',
        },
        {
            targetId: 'tour-final-step',
            icon: '<i class="fa-solid fa-check-circle"></i>',
            title: 'جاهز! 🎉',
            body: 'بعد ملء البيانات اضغط «إصدار الفاتورة» وسيتم التوقيع الرقمي وإرسالها لـ ZATCA فوراً. أو «حفظ كمسودة» للمراجعة لاحقاً.',
        },
    ];

    let currentTourStep = 0;
    let tourActive = false;

    function getTourElement(stepIndex) {
        const step = TOUR_STEPS[stepIndex];
        if (!step.targetId) return null;
        return document.getElementById(step.targetId);
    }

    function renderTourDots() {
        const dotsEl = document.getElementById('tour-dots');
        dotsEl.innerHTML = '';
        TOUR_STEPS.forEach((_, i) => {
            const dot = document.createElement('span');
            dot.className = i === currentTourStep
                ? 'w-5 h-1.5 rounded-full bg-brand-500 transition-all duration-300'
                : 'w-1.5 h-1.5 rounded-full bg-slate-300 dark:bg-slate-600 transition-all duration-300';
            dotsEl.appendChild(dot);
        });
    }

    function positionTooltip(targetEl) {
        const tooltip = document.getElementById('tour-tooltip');
        const spotlight = document.getElementById('tour-spotlight');
        const GAP = 12;
        const PADDING = 12;

        if (!targetEl) {
            // Centred modal style (no target)
            spotlight.classList.add('hidden');
            tooltip.style.top = '50%';
            tooltip.style.left = '50%';
            tooltip.style.transform = 'translate(-50%, -50%)';
            tooltip.style.right = 'auto';
            return;
        }

        tooltip.style.transform = '';
        spotlight.classList.remove('hidden');

        const rect = targetEl.getBoundingClientRect();
        const sw = window.innerWidth;
        const sh = window.innerHeight;
        const tw = tooltip.offsetWidth || 320;
        const th = tooltip.offsetHeight || 200;

        // Position spotlight ring
        spotlight.style.top = (rect.top - PADDING) + 'px';
        spotlight.style.left = (rect.left - PADDING) + 'px';
        spotlight.style.width = (rect.width + PADDING * 2) + 'px';
        spotlight.style.height = (rect.height + PADDING * 2) + 'px';

        // Try below first, then above, then centre
        let top, left;
        if (rect.bottom + GAP + th < sh) {
            // Below
            top = rect.bottom + GAP;
        } else if (rect.top - GAP - th > 0) {
            // Above
            top = rect.top - GAP - th;
        } else {
            top = Math.max(8, Math.min(rect.top, sh - th - 8));
        }

        // Horizontal: try to align with element, clamp within viewport
        const isRTL = document.documentElement.dir === 'rtl';
        if (isRTL) {
            left = Math.max(8, Math.min(rect.right - tw, sw - tw - 8));
        } else {
            left = Math.max(8, Math.min(rect.left, sw - tw - 8));
        }

        tooltip.style.top = top + 'px';
        tooltip.style.left = left + 'px';
        tooltip.style.right = 'auto';

        // Scroll element into view smoothly
        targetEl.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    }

    function showTourStep(index) {
        currentTourStep = index;
        const step = TOUR_STEPS[index];
        const total = TOUR_STEPS.length;
        const isLast = index === total - 1;

        // Populate content
        document.getElementById('tour-step-icon').innerHTML = step.icon;
        document.getElementById('tour-step-title').textContent = step.title;
        document.getElementById('tour-step-body').textContent = step.body;
        document.getElementById('tour-step-counter').textContent = `${index + 1} من ${total}`;
        document.getElementById('tour-prev-btn').style.display = index === 0 ? 'none' : '';
        document.getElementById('tour-next-btn').textContent = isLast
            ? (document.documentElement.lang === 'ar' ? 'إنهاء ✓' : 'Finish ✓')
            : (document.documentElement.lang === 'ar' ? 'التالي' : 'Next');

        renderTourDots();

        // Show/position tooltip
        const tooltip = document.getElementById('tour-tooltip');
        const overlay = document.getElementById('tour-overlay');
        tooltip.classList.remove('hidden');
        overlay.classList.remove('hidden');

        // Re-position after a tick (tooltip may need to render first)
        requestAnimationFrame(() => {
            positionTooltip(getTourElement(index));
        });
    }

    window.openGuideModal = function() {
        currentTourStep = 0;
        tourActive = true;
        showTourStep(0);
    };

    window.closeTour = function() {
        tourActive = false;
        document.getElementById('tour-tooltip').classList.add('hidden');
        document.getElementById('tour-overlay').classList.add('hidden');
        document.getElementById('tour-spotlight').classList.add('hidden');
    };

    window.tourNext = function() {
        if (currentTourStep >= TOUR_STEPS.length - 1) {
            closeTour();
        } else {
            showTourStep(currentTourStep + 1);
        }
    };

    window.tourPrev = function() {
        if (currentTourStep > 0) {
            showTourStep(currentTourStep - 1);
        }
    };

    // Close tour on overlay click (not spotlight/tooltip)
    document.getElementById('tour-overlay').addEventListener('click', closeTour);

    // Close tour on Escape
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape' && tourActive) closeTour();
    });

    // Reposition tour tooltip on scroll/resize
    window.addEventListener('scroll', function() {
        if (tourActive && TOUR_STEPS[currentTourStep].targetId) {
            requestAnimationFrame(() => positionTooltip(getTourElement(currentTourStep)));
        }
    }, true);

    window.addEventListener('resize', function() {
        if (tourActive) {
            requestAnimationFrame(() => positionTooltip(getTourElement(currentTourStep)));
        }
    });

    // Customer Modal
    window.openCustomerModal = function() {
        document.getElementById('customer-modal').classList.remove('hidden');
        document.getElementById('modal-cust-name').focus();
    };
    window.closeCustomerModal = function() {
        document.getElementById('customer-modal').classList.add('hidden');
    };

    window.saveCustomerFromModal = function() {
        const name = document.getElementById('modal-cust-name').value.trim();
        const vat = document.getElementById('modal-cust-vat').value.trim();
        const city = document.getElementById('modal-cust-city').value.trim() || 'الرياض';
        const cr = document.getElementById('modal-cust-cr').value.trim();

        if (!name) {
            alert('يرجى إدخال اسم العميل');
            return;
        }

        selectCustomer({
            uuid: '',
            name: name,
            vat_number: vat,
            cr_number: cr,
            address_city: city,
            address_street: 'شارع عام',
            address_country: 'SA',
            phone: ''
        });

        closeCustomerModal();
    };

    // AJAX Invoice Submission without Page Reload
    const invoiceForm = document.getElementById('invoice-form');
    let lastSubmitIntent = 'issue';

    document.getElementById('btn-save-draft')?.addEventListener('click', () => { lastSubmitIntent = 'draft'; });
    document.getElementById('btn-issue-now')?.addEventListener('click', () => { lastSubmitIntent = 'issue'; });

    invoiceForm?.addEventListener('submit', async function(e) {
        e.preventDefault();

        const errorBanner = document.getElementById('invoice-form-error');
        const errorTitle = document.getElementById('invoice-form-error-title');
        const errorList = document.getElementById('invoice-form-error-list');

        // Hide old errors
        if (errorBanner) errorBanner.classList.add('hidden');
        if (errorList) errorList.innerHTML = '';

        // Clear existing input-level error styling
        document.querySelectorAll('.is-invalid-input').forEach(el => {
            el.classList.remove('is-invalid-input', 'border-red-500', 'focus:border-red-500');
            el.classList.add('border-slate-700');
        });

        // Toggle Loading State on Buttons
        const draftBtn = document.getElementById('btn-save-draft');
        const issueBtn = document.getElementById('btn-issue-now');
        const draftSpinner = document.getElementById('spinner-draft');
        const issueSpinner = document.getElementById('spinner-issue');
        const issueIcon = document.getElementById('icon-issue');

        if (draftBtn) draftBtn.disabled = true;
        if (issueBtn) issueBtn.disabled = true;

        if (lastSubmitIntent === 'draft') {
            if (draftSpinner) draftSpinner.classList.remove('hidden');
        } else {
            if (issueSpinner) issueSpinner.classList.remove('hidden');
            if (issueIcon) issueIcon.classList.add('hidden');
        }

        try {
            const formData = new FormData(invoiceForm);
            // Guarantee the chosen intent is included
            formData.set('intent', lastSubmitIntent);

            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content || '';

            const response = await fetch(invoiceForm.action, {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': csrfToken,
                },
                body: formData,
                credentials: 'same-origin',
            });

            const data = await response.json().catch(() => ({}));

            if (!response.ok) {
                // Show errors inline without reloading
                if (errorBanner) {
                    const fallbackMsg = '{{ app()->getLocale() === 'ar' ? 'تعذر حفظ الفاتورة، يرجى مراجعة الحقول أدناه:' : 'Failed to save invoice, please check the fields below:' }}';
                    errorTitle.textContent = data.message || fallbackMsg;
                    errorList.innerHTML = '';

                    const errorsObj = data.errors || {};
                    const errorKeys = Object.keys(errorsObj);

                    if (errorKeys.length > 0) {
                        errorKeys.forEach(key => {
                            (errorsObj[key] || []).forEach(msg => {
                                const li = document.createElement('li');
                                li.textContent = msg;
                                errorList.appendChild(li);
                            });

                            // Highlight inputs where possible
                            const matchedInput = invoiceForm.querySelector(`[name="${key}"], [name="${key.replace(/\./g, '][')}"]`);
                            if (matchedInput) {
                                matchedInput.classList.remove('border-slate-700');
                                matchedInput.classList.add('is-invalid-input', 'border-red-500', 'focus:border-red-500');
                            }
                        });
                    } else if (data.message) {
                        const li = document.createElement('li');
                        li.textContent = data.message;
                        errorList.appendChild(li);
                    }

                    errorBanner.classList.remove('hidden');
                    errorBanner.scrollIntoView({ behavior: 'smooth', block: 'center' });
                }

                return;
            }

            // Success: redirect to invoice view page or dashboard
            if (data.redirect_url) {
                window.location.assign(data.redirect_url);
            } else if (data.invoice_uuid) {
                window.location.assign(`/dashboard/invoices/${data.invoice_uuid}`);
            }

        } catch (err) {
            if (errorBanner) {
                errorTitle.textContent = '{{ app()->getLocale() === 'ar' ? 'حدث خطأ في الاتصال بالخادم، يرجى المحاولة مجدداً.' : 'Connection error, please try again.' }}';
                errorList.innerHTML = '';
                errorBanner.classList.remove('hidden');
                errorBanner.scrollIntoView({ behavior: 'smooth', block: 'center' });
            }
        } finally {
            if (draftBtn) draftBtn.disabled = false;
            if (issueBtn) issueBtn.disabled = false;
            if (draftSpinner) draftSpinner.classList.add('hidden');
            if (issueSpinner) issueSpinner.classList.add('hidden');
            if (issueIcon) issueIcon.classList.remove('hidden');
        }
    });

})();
</script>
@endif
@endsection