@extends('layouts.dashboard')

@php
    $currency = app()->getLocale() === 'ar' ? 'ر.س' : 'SAR';
@endphp

@section('title', trans('dashboard.new_quote'))
@section('header_title', trans('dashboard.new_quote'))

@section('content')
<div class="max-w-[1600px] mx-auto space-y-6">

    {{-- Top Controls Bar --}}
    <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 --}}
        <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.quotes.index') }}" class="hover:text-slate-900 dark:hover:text-white transition">
                    {{ trans('dashboard.nav_quotes') }}
                </a>
                <span class="text-slate-400 dark:text-slate-600">/</span>
                <span class="text-slate-900 dark:text-white font-bold">{{ trans('dashboard.new_quote') }}</span>
            </nav>
        </div>

        {{-- Quote number badge --}}
        <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-xl bg-navy-900 border border-slate-800 text-xs font-mono text-emerald-400 shadow-sm">
            <i class="fa-solid fa-hashtag text-slate-500 text-[10px]"></i>
            {{ $nextNumber }}
        </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="quote-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">
                    QUOTATION
                </span>
            </div>

            {{-- Paper Quotation Preview --}}
            <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">
                {{-- Header: Title + Dates --}}
                <div class="flex items-start justify-between gap-4 pb-4">
                    <div class="space-y-0.5">
                        <div class="text-base font-black text-slate-900">عرض سعر</div>
                        <div class="text-[10px] uppercase font-bold tracking-wider text-slate-400">QUOTATION</div>
                        <div class="text-[11px] font-bold text-emerald-700 code-font pt-1" id="preview-quote-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.valid_until') }}:</span>
                            <span id="preview-valid-date" class="font-bold text-slate-800">{{ now()->addDays(14)->format('Y/m/d') }}</span>
                        </div>
                    </div>
                </div>

                {{-- Emerald 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 --}}
                <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 --}}
                        </tbody>
                    </table>
                </div>

                {{-- Totals --}}
                <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') }}</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>

                    {{-- Grand Total --}}
                    <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">إجمالي العرض</div>
                            <div class="text-[8px] uppercase tracking-widest text-emerald-200 force-white">QUOTATION TOTAL</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>

                {{-- Notes preview --}}
                <div id="preview-notes-wrapper" class="hidden mt-3 pt-3 border-t border-slate-100 text-[10px] text-slate-500 italic leading-relaxed">
                    <span id="preview-notes-text"></span>
                </div>

                {{-- Footer --}}
                <div class="mt-4 pt-3 border-t border-slate-100 text-center text-[9px] text-slate-400">
                    <span>{{ app()->getLocale() === 'ar' ? 'جميع المبالغ بالريال السعودي' : 'All amounts in Saudi Riyal' }} (<x-riyal-symbol class="w-[0.9em] h-[0.9em] text-slate-400" />) • {{ app()->getLocale() === 'ar' ? 'هذا عرض سعر وليس فاتورة ضريبية' : 'This is a quotation, not a tax invoice' }}</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.quotes.store') }}" id="quote-form" class="space-y-5">
                @csrf

                {{-- 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="openQuoteCustomerModal()"
                                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="quote-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="quote-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="quote-customer-clear-btn"
                                    onclick="clearQuoteCustomer()"
                                    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 --}}
                        <div id="quote-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="selectQuoteWalkIn()"
                                    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="selectQuoteCustomer(@js($customer))"
                                        class="quote-cust-opt 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 ? 'ضريبي: ' . $customer->vat_number : ($customer->phone ?: 'بدون رقم ضريبي') }}
                                        </div>
                                    </div>
                                    <span class="text-[10px] text-slate-400">{{ $customer->address_city ?: 'SA' }}</span>
                                </button>
                            @endforeach
                        </div>
                    </div>

                    {{-- Selected Customer Card --}}
                    <div id="quote-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="quote-cust-initial">ع</div>
                            <div>
                                <div class="font-bold text-slate-900 dark:text-white text-xs" id="quote-cust-name-display">{{ trans('dashboard.walk_in_customer') }}</div>
                                <div class="text-[10px] text-slate-500 dark:text-slate-400 font-mono" id="quote-cust-vat-display">عميل أفراد</div>
                            </div>
                        </div>
                        <button type="button" onclick="toggleQuoteBuyerInputs()" class="text-[11px] text-brand-600 dark:text-brand-400 hover:underline font-bold">
                            تعديل البيانات
                        </button>
                    </div>

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

                    {{-- Manual buyer fields (hidden by default) --}}
                    <div id="quote-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="quote-buyer-name" type="text" name="buyer[name]"
                                   value="{{ old('buyer.name', 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') }} (اختياري)</label>
                            <input id="quote-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>
                </div>

                {{-- SECTION 2: LINE ITEMS (البنود) --}}
                <div class="p-5 sm:p-6 rounded-2xl bg-navy-900 border border-slate-800 space-y-4">
                    <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 --}}
                            @if($items->isNotEmpty())
                                <div class="relative">
                                    <button type="button"
                                            id="quote-catalog-toggle"
                                            onclick="toggleQuoteCatalog()"
                                            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="quote-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">
                                        @foreach($items as $item)
                                            <button type="button"
                                                    onclick="addQuoteSavedItem(@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>
                            @endif

                            {{-- Add Line --}}
                            <button type="button"
                                    onclick="addQuoteLine()"
                                    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 --}}
                    <div id="quote-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="quote-tax-incl-btn" onclick="setQuoteTaxMode(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="quote-tax-excl-btn" onclick="setQuoteTaxMode(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="quote-tax-hint">
                            {{ trans('dashboard.tax_inclusive_hint') }}
                        </div>
                    </div>

                    {{-- Line 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.line_qty') }}</div>
                        <div class="col-span-2 text-center" id="quote-header-unit-price">سعر الوحدة (شامل)</div>
                        <div class="col-span-2 text-center">ضريبة %</div>
                        <div class="col-span-1"></div>
                    </div>

                    {{-- Lines Container --}}
                    <div id="quote-lines-container" class="space-y-2"></div>

                    {{-- Totals Summary --}}
                    <div class="pt-3 border-t border-slate-800 space-y-1.5">
                        <div class="flex items-center justify-between text-xs text-slate-500 dark:text-slate-400 px-2">
                            <span>{{ trans('dashboard.th_subtotal') }}</span>
                            <span id="form-subtotal" class="font-bold code-font text-slate-900 dark:text-white 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-xs text-slate-500 dark:text-slate-400 px-2">
                            <span>{{ trans('dashboard.th_vat') }}</span>
                            <span id="form-vat" class="font-bold code-font text-slate-900 dark:text-white 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-sm font-extrabold text-emerald-600 dark:text-emerald-400 px-2 pt-1 border-t border-slate-800">
                            <span>{{ trans('dashboard.total_due_label') }}</span>
                            <span id="form-total" class="code-font inline-flex items-center gap-1"><x-riyal-symbol class="w-[1em] h-[1em]" /> 0.00</span>
                        </div>
                    </div>
                </div>

                {{-- SECTION 3: DATES (التواريخ) --}}
                <div class="p-5 sm:p-6 rounded-2xl bg-navy-900 border border-slate-800 space-y-4">
                    <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">تاريخ العرض</h3>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-xs">
                        {{-- Issue Date --}}
                        <div>
                            <label class="block text-slate-400 mb-1.5 font-semibold">{{ trans('dashboard.invoice_date_label') }}</label>
                            <div class="flex items-center gap-2">
                                <input type="date"
                                       id="quote-issue-date"
                                       value="{{ now()->toDateString() }}"
                                       class="flex-1 rounded-xl bg-navy-950 border border-slate-700 text-slate-900 dark:text-slate-100 px-3 py-2.5 text-xs focus:border-brand-500 focus:outline-none">
                                <button type="button"
                                        onclick="setQuoteIssueDateToday()"
                                        class="px-3 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 shrink-0">
                                    {{ trans('dashboard.today_btn') }}
                                </button>
                            </div>
                        </div>

                        {{-- Valid Until --}}
                        <div>
                            <label class="block text-slate-400 mb-1.5 font-semibold">{{ trans('dashboard.valid_until') }}</label>
                            <div class="flex items-center gap-2">
                                <input type="date"
                                       id="quote-valid-until"
                                       name="valid_until"
                                       value="{{ old('valid_until', now()->addDays(14)->toDateString()) }}"
                                       class="flex-1 rounded-xl bg-navy-950 border border-slate-700 text-slate-900 dark:text-slate-100 px-3 py-2.5 text-xs focus:border-brand-500 focus:outline-none">
                                <button type="button"
                                        onclick="setQuoteValidPlus14()"
                                        class="px-3 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 shrink-0 whitespace-nowrap">
                                    14 يوم
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- SECTION 4: NOTES (ملاحظات) --}}
                <div class="p-5 sm:p-6 rounded-2xl bg-navy-900 border border-slate-800">
                    <button type="button"
                            onclick="toggleQuoteNotes()"
                            class="w-full flex items-center justify-between text-xs">
                        <div class="flex items-center gap-2">
                            <span class="w-1.5 h-4 rounded-full bg-brand-500"></span>
                            <span class="font-bold text-slate-900 dark:text-white">{{ trans('dashboard.notes_label') }}</span>
                            <span class="text-slate-500 dark:text-slate-400">({{ app()->getLocale() === 'ar' ? 'اختياري' : 'optional' }})</span>
                        </div>
                        <i id="quote-notes-chevron" class="fa-solid fa-chevron-down text-slate-400 text-[10px] transition-transform duration-200"></i>
                    </button>
                    <div id="quote-notes-content" class="hidden mt-3 pt-3 border-t border-slate-200 dark:border-slate-800/80">
                        <textarea name="notes"
                                  id="quote-notes-textarea"
                                  rows="2"
                                  placeholder="{{ app()->getLocale() === 'ar' ? 'ملاحظات أو شروط الدفع أو شروط التسليم...' : 'Payment terms, delivery conditions, or any notes...' }}"
                                  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">{{ old('notes') }}</textarea>
                    </div>
                </div>

                {{-- SECTION 5: BOTTOM ACTION BAR --}}
                <div id="quote-action-bar" 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-file-invoice-dollar"></i>
                        </span>
                        <span>{{ app()->getLocale() === 'ar' ? 'يمكن تحويل هذا العرض إلى فاتورة ضريبية عند موافقة العميل' : 'This quote can be converted to a tax invoice upon customer acceptance' }}</span>
                    </div>
                    <div class="flex items-center gap-3 w-full sm:w-auto justify-end">
                        <a href="{{ route('dashboard.quotes.index') }}"
                           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">
                            {{ trans('dashboard.cancel') }}
                        </a>
                        <button type="submit"
                                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-floppy-disk"></i>
                            <span>{{ app()->getLocale() === 'ar' ? 'حفظ عرض السعر' : 'Save Quotation' }}</span>
                        </button>
                    </div>
                </div>

            </form>
        </div>
    </div>
</div>

{{-- Quick Add Customer Modal --}}
<div id="quote-customer-modal" class="fixed inset-0 z-50 hidden bg-navy-950/80 backdrop-blur-sm flex items-center justify-center p-4">
    <div class="bg-navy-900 border border-slate-800 rounded-2xl max-w-md w-full p-6 space-y-4 shadow-2xl text-xs">
        <div class="flex items-center justify-between border-b border-slate-200 dark:border-slate-800 pb-3">
            <h3 class="text-sm font-bold text-slate-900 dark:text-white">{{ trans('dashboard.add_customer') }}</h3>
            <button type="button" onclick="closeQuoteCustomerModal()" class="text-slate-400 hover:text-slate-900 dark:hover:text-white">
                <i class="fa-solid fa-xmark text-base"></i>
            </button>
        </div>
        <div class="space-y-3">
            <div>
                <label class="block text-slate-400 mb-1 font-semibold">{{ trans('dashboard.buyer_name') }} *</label>
                <input type="text" id="qm-cust-name" required class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-900 dark:text-white px-3 py-2 text-xs focus:border-brand-500 focus:outline-none">
            </div>
            <div>
                <label class="block text-slate-400 mb-1 font-semibold">{{ trans('dashboard.buyer_vat') }}</label>
                <input type="text" id="qm-cust-vat" maxlength="15" placeholder="300000000000003" class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-900 dark:text-white px-3 py-2 text-xs font-mono focus:border-brand-500 focus:outline-none">
            </div>
        </div>
        <div class="flex items-center justify-end gap-2 pt-2 border-t border-slate-200 dark:border-slate-800">
            <button type="button" onclick="closeQuoteCustomerModal()" class="px-4 py-2 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-300 text-xs font-bold transition">
                {{ trans('dashboard.cancel') }}
            </button>
            <button type="button" onclick="saveQuoteCustomerFromModal()" class="px-4 py-2 rounded-xl bg-brand-500 hover:bg-brand-600 text-white force-white text-xs font-bold transition shadow-md shadow-brand-500/20">
                {{ trans('dashboard.save') }}
            </button>
        </div>
    </div>
</div>

{{-- =========================================================
     JAVASCRIPT: QUOTE REACTIVE ENGINE
========================================================== --}}
<script>
(function () {
    let quoteTaxInclusive = true;
    let quoteLineCounter = 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('quote-lines-container');
    const previewBody     = document.getElementById('preview-lines-body');

    // ──────────────────────────────────────
    //  TAX MODE SWITCHER
    // ──────────────────────────────────────
    window.setQuoteTaxMode = function (inclusive) {
        quoteTaxInclusive = inclusive;
        const inclBtn  = document.getElementById('quote-tax-incl-btn');
        const exclBtn  = document.getElementById('quote-tax-excl-btn');
        const hint     = document.getElementById('quote-tax-hint');
        const header   = document.getElementById('quote-header-unit-price');
        const ON  = 'px-3 py-1 rounded-md text-xs font-bold transition bg-brand-500 text-white force-white shadow-sm';
        const OFF = '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';
        inclBtn.className = inclusive ? ON : OFF;
        exclBtn.className = inclusive ? OFF : ON;
        hint.textContent  = inclusive ? 'اكتب ما يدفعه العميل — نحسب الصافي والضريبة' : 'الأسعار المدخلة غير شاملة للضريبة — يتم إضافة الضريبة';
        if (header) header.textContent = inclusive ? 'سعر الوحدة (شامل)' : 'سعر الوحدة (قبل الضريبة)';
        recalcQuote();
    };

    // ──────────────────────────────────────
    //  LINE ROWS
    // ──────────────────────────────────────
    window.addQuoteLine = function (initData = {}) {
        const id = quoteLineCounter++;
        const row = document.createElement('div');
        row.className = 'quote-line-row grid grid-cols-12 gap-2 items-center p-3 rounded-xl bg-navy-950 border border-slate-800 text-xs';
        row.dataset.id = id;
        row.innerHTML = `
            <div class="col-span-5">
                <input type="text" name="lines[${id}][name]" required
                       placeholder="{{ trans('dashboard.item_description_placeholder') }}"
                       class="w-full rounded-lg bg-slate-800/60 border border-slate-700 text-slate-900 dark:text-slate-100 px-2.5 py-1.5 text-xs focus:border-brand-500 focus:outline-none">
                <input type="hidden" name="lines[${id}][unit]" value="PCE">
            </div>
            <div class="col-span-2">
                <input type="number" name="lines[${id}][quantity]" value="1" min="0.001" step="0.001" required
                       class="ql-qty w-full rounded-lg bg-slate-800/60 border border-slate-700 text-slate-900 dark:text-slate-100 px-2.5 py-1.5 text-xs text-center focus:border-brand-500 focus:outline-none">
            </div>
            <div class="col-span-2">
                <input type="number" name="lines[${id}][unit_price]" value="0" min="0" step="0.01" required
                       class="ql-price w-full rounded-lg bg-slate-800/60 border border-slate-700 text-slate-900 dark:text-slate-100 px-2.5 py-1.5 text-xs text-center focus:border-brand-500 focus:outline-none">
            </div>
            <div class="col-span-2">
                <select name="lines[${id}][vat_rate]" class="ql-vat w-full rounded-lg bg-slate-800/60 border border-slate-700 text-slate-900 dark:text-slate-100 px-2 py-1.5 text-xs focus:border-brand-500 focus:outline-none">
                    <option value="15">15%</option>
                    <option value="5">5%</option>
                    <option value="0">0%</option>
                </select>
                <input type="hidden" name="lines[${id}][discount]" value="0">
            </div>
            <div class="col-span-1 flex justify-center">
                <button type="button" class="ql-remove text-rose-400 hover:text-rose-300 hover:bg-rose-500/10 w-7 h-7 flex items-center justify-center rounded-lg transition">
                    <i class="fa-solid fa-xmark text-sm"></i>
                </button>
            </div>
        `;
        linesContainer.appendChild(row);

        // Pre-fill from saved item
        if (initData.name)       row.querySelector(`[name="lines[${id}][name]"]`).value = initData.name;
        if (initData.unit_price !== undefined) row.querySelector('.ql-price').value = initData.unit_price;
        if (initData.vat_rate  !== undefined) row.querySelector('.ql-vat').value  = String(initData.vat_rate);
        if (initData.unit)       row.querySelector(`[name="lines[${id}][unit]"]`).value = initData.unit;

        // Remove line
        row.querySelector('.ql-remove').addEventListener('click', () => {
            if (linesContainer.querySelectorAll('.quote-line-row').length > 1) {
                row.remove(); recalcQuote();
            }
        });

        row.querySelectorAll('input, select').forEach(el => el.addEventListener('input', recalcQuote));
        recalcQuote();
    };

    // ──────────────────────────────────────
    //  CALCULATOR
    // ──────────────────────────────────────
    function recalcQuote() {
        let totalSubtotal = 0, totalVat = 0, totalGross = 0;
        previewBody.innerHTML = '';

        linesContainer.querySelectorAll('.quote-line-row').forEach(row => {
            const nameEl  = row.querySelector('input[name$="[name]"]');
            const qtyEl   = row.querySelector('.ql-qty');
            const priceEl = row.querySelector('.ql-price');
            const vatEl   = row.querySelector('.ql-vat');

            const name    = nameEl?.value || '';
            const qty     = parseFloat(qtyEl?.value) || 0;
            const entered = parseFloat(priceEl?.value) || 0;
            const vatRate = parseFloat(vatEl?.value) || 0;

            let net, vatAmt, gross;
            if (quoteTaxInclusive) {
                gross  = qty * entered;
                net    = gross / (1 + vatRate / 100);
                vatAmt = gross - net;
            } else {
                net    = qty * entered;
                vatAmt = net * vatRate / 100;
                gross  = net + vatAmt;
            }

            totalSubtotal += net;
            totalVat      += vatAmt;
            totalGross    += gross;

            if (name) {
                const tr = document.createElement('tr');
                tr.innerHTML = `
                    <td class="py-1.5 px-2 text-slate-800">${name}</td>
                    <td class="py-1.5 px-1.5 text-center text-slate-600">${qty % 1 ? qty.toFixed(2) : qty}</td>
                    <td class="py-1.5 px-2 text-end code-font text-slate-800">${net.toFixed(2)}</td>
                    <td class="py-1.5 px-2 text-end code-font text-slate-600">${vatAmt.toFixed(2)}</td>
                    <td class="py-1.5 px-2 text-end code-font font-bold text-slate-900">${gross.toFixed(2)}</td>
                `;
                previewBody.appendChild(tr);
            }
        });

        const fmt = n => currencySymbol + ' ' + n.toFixed(2);

        // Update preview panel
        document.getElementById('preview-subtotal').innerHTML = fmt(totalSubtotal);
        document.getElementById('preview-vat').innerHTML      = fmt(totalVat);
        document.getElementById('preview-total-due').innerHTML = fmt(totalGross);

        // Update form summary
        document.getElementById('form-subtotal').innerHTML = fmt(totalSubtotal);
        document.getElementById('form-vat').innerHTML      = fmt(totalVat);
        document.getElementById('form-total').innerHTML    = fmt(totalGross);
    }

    // ──────────────────────────────────────
    //  CATALOG DROPDOWN
    // ──────────────────────────────────────
    window.toggleQuoteCatalog = function () {
        document.getElementById('quote-catalog-dropdown')?.classList.toggle('hidden');
    };

    window.addQuoteSavedItem = function (item) {
        addQuoteLine({ name: item.name, unit_price: item.unit_price, vat_rate: item.vat_rate, unit: item.unit });
        document.getElementById('quote-catalog-dropdown')?.classList.add('hidden');
    };

    // Close catalog on outside click
    document.addEventListener('click', function(e) {
        const toggle = document.getElementById('quote-catalog-toggle');
        const dropdown = document.getElementById('quote-catalog-dropdown');
        if (dropdown && toggle && !toggle.contains(e.target) && !dropdown.contains(e.target)) {
            dropdown.classList.add('hidden');
        }
    });

    // ──────────────────────────────────────
    //  CUSTOMER SEARCH
    // ──────────────────────────────────────
    const searchInput   = document.getElementById('quote-customer-search-input');
    const dropdown      = document.getElementById('quote-customer-dropdown');
    const clearBtn      = document.getElementById('quote-customer-clear-btn');

    searchInput?.addEventListener('focus', () => dropdown.classList.remove('hidden'));
    searchInput?.addEventListener('input', function () {
        const q = this.value.toLowerCase();
        dropdown.querySelectorAll('.quote-cust-opt').forEach(btn => {
            btn.style.display = btn.dataset.search.includes(q) ? '' : 'none';
        });
        dropdown.classList.remove('hidden');
    });

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

    window.selectQuoteCustomer = function (customer) {
        searchInput.value = customer.name;
        clearBtn?.classList.remove('hidden');
        dropdown?.classList.add('hidden');

        document.getElementById('quote-form-customer-id').value = customer.uuid || '';
        document.getElementById('quote-buyer-name').value       = customer.name || '';
        document.getElementById('quote-buyer-vat').value        = customer.vat_number || '';
        document.getElementById('quote-cust-name-display').textContent = customer.name;
        document.getElementById('quote-cust-vat-display').textContent  = customer.vat_number || 'بدون رقم ضريبي';
        document.getElementById('quote-cust-initial').textContent       = (customer.name || '?')[0];
        document.getElementById('preview-buyer-name').textContent = customer.name;
        document.getElementById('preview-buyer-vat').textContent  = customer.vat_number || '-';
    };

    window.selectQuoteWalkIn = function () {
        searchInput.value = '';
        clearBtn?.classList.add('hidden');
        dropdown?.classList.add('hidden');

        document.getElementById('quote-form-customer-id').value        = '';
        document.getElementById('quote-buyer-name').value              = '{{ trans("dashboard.walk_in_customer") }}';
        document.getElementById('quote-buyer-vat').value               = '';
        document.getElementById('quote-cust-name-display').textContent = '{{ trans("dashboard.walk_in_customer") }}';
        document.getElementById('quote-cust-vat-display').textContent  = 'عميل أفراد';
        document.getElementById('quote-cust-initial').textContent       = 'ع';
        document.getElementById('preview-buyer-name').textContent = '{{ trans("dashboard.walk_in_customer") }}';
        document.getElementById('preview-buyer-vat').textContent  = '-';
    };

    window.clearQuoteCustomer = function () {
        selectQuoteWalkIn();
    };

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

    // Sync manual buyer name/vat to preview
    document.getElementById('quote-buyer-name')?.addEventListener('input', function() {
        document.getElementById('quote-cust-name-display').textContent = this.value || '{{ trans("dashboard.walk_in_customer") }}';
        document.getElementById('preview-buyer-name').textContent = this.value || '{{ trans("dashboard.walk_in_customer") }}';
    });
    document.getElementById('quote-buyer-vat')?.addEventListener('input', function() {
        document.getElementById('preview-buyer-vat').textContent = this.value || '-';
    });

    // ──────────────────────────────────────
    //  DATES
    // ──────────────────────────────────────
    window.setQuoteIssueDateToday = function () {
        const today = new Date().toISOString().split('T')[0];
        document.getElementById('quote-issue-date').value = today;
        document.getElementById('preview-issue-date').textContent = today.replaceAll('-', '/');
    };

    window.setQuoteValidPlus14 = function () {
        const d = new Date();
        d.setDate(d.getDate() + 14);
        const val = d.toISOString().split('T')[0];
        document.getElementById('quote-valid-until').value = val;
        document.getElementById('preview-valid-date').textContent = val.replaceAll('-', '/');
    };

    document.getElementById('quote-issue-date')?.addEventListener('change', function() {
        document.getElementById('preview-issue-date').textContent = this.value.replaceAll('-', '/');
    });

    document.getElementById('quote-valid-until')?.addEventListener('change', function() {
        document.getElementById('preview-valid-date').textContent = this.value.replaceAll('-', '/');
    });

    // ──────────────────────────────────────
    //  NOTES TOGGLE
    // ──────────────────────────────────────
    window.toggleQuoteNotes = function () {
        document.getElementById('quote-notes-content')?.classList.toggle('hidden');
        document.getElementById('quote-notes-chevron')?.classList.toggle('rotate-180');
    };

    document.getElementById('quote-notes-textarea')?.addEventListener('input', function() {
        const wrapper = document.getElementById('preview-notes-wrapper');
        const text    = document.getElementById('preview-notes-text');
        if (this.value.trim()) {
            wrapper?.classList.remove('hidden');
            if (text) text.textContent = this.value.trim();
        } else {
            wrapper?.classList.add('hidden');
        }
    });

    // ──────────────────────────────────────
    //  CUSTOMER QUICK-ADD MODAL
    // ──────────────────────────────────────
    window.openQuoteCustomerModal = function () {
        document.getElementById('quote-customer-modal')?.classList.remove('hidden');
        document.getElementById('qm-cust-name')?.focus();
    };

    window.closeQuoteCustomerModal = function () {
        document.getElementById('quote-customer-modal')?.classList.add('hidden');
    };

    window.saveQuoteCustomerFromModal = function () {
        const name = document.getElementById('qm-cust-name')?.value.trim();
        const vat  = document.getElementById('qm-cust-vat')?.value.trim();
        if (!name) { alert('يرجى إدخال اسم العميل'); return; }
        selectQuoteCustomer({ uuid: '', name, vat_number: vat });
        closeQuoteCustomerModal();
    };

    // ──────────────────────────────────────
    //  INIT
    // ──────────────────────────────────────
    addQuoteLine();

})();
</script>
@endsection