@extends('layouts.app')

@section('title', __('dashboard.Edit Sale'))
@section('page_heading', __('dashboard.Edit Sale'))

@section('breadcrumb')
    <li class="bc-item text-slate-500 dark:text-slate-400">
        <a href="{{ route('dashboard.home') }}" class="text-slate-500 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400">{{ __('dashboard.Home') }}</a>
    </li>
    <li class="bc-item text-slate-500 dark:text-slate-400">
        <a href="{{ route('dashboard.sales.index') }}" class="text-slate-500 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400">{{ __('dashboard.Sales') }}</a>
    </li>
    <li class="bc-item text-slate-500 dark:text-slate-400">{{ __('dashboard.Edit Sale') }} #{{$sale->id}}</li>
@endsection

@section('content')
@include('layouts.partials.workspace-page-styles')
@include('dashboard.reservations.partials.customer-lookup-styles')
<div class="workspace-page">
    <div class="workspace-shell">
        <div class="workspace-hero">
            <div class="workspace-hero__badge">
                <i class="fa-solid fa-cart-shopping"></i>
                {{ __('dashboard.Edit Sale') }}
            </div>
            <h1 class="workspace-hero__title">{{ __('dashboard.Edit Sale') }} #{{ $sale->id }}</h1>
            <p class="workspace-hero__text">تعديل عملية البيع الحالية ضمن نفس منطق المنتجات والتسعير والدفع، لكن داخل غلاف مرئي متناسق مع بقية النظام.</p>
        </div>
        <div class="workspace-body">
        <form action="{{ route('dashboard.sales.update', $sale->id) }}" method="POST" id="sale_form" x-data="saleEditForm()">
            @csrf
            @method('PATCH')

            <div class="workspace-actions">
                <a href="{{ route('dashboard.sales.index') }}" class="app-btn app-btn--secondary me-3">{{ __('dashboard.Cancel') }}</a>
                <button type="submit" class="app-btn app-btn--primary">{{ __('dashboard.Update') }}</button>
            </div>

            <div class="app-card app-card--flush mb-7">
                <div class="app-card__header">
                    <h3 class="app-card__title">{{ __('dashboard.Products') }}</h3>
                </div>
                <div class="app-card__body pt-5">
                    <div id="products_section">
                        <div class="app-input-group mb-5">
	                            <input type="text" id="global_product_search" class="app-input app-input--lg" placeholder="{{ __('dashboard.Search by name or SKU') }}">
	                            <button type="button" class="app-btn app-btn--secondary" id="global_search_product_btn">
	                                <span id="global_search_spinner" class="app-spinner" role="status" aria-hidden="true" hidden></span>
	                                <i class="fa-solid fa-magnifying-glass"></i> {{ __('dashboard.Search') }}
	                            </button>
	                            <button type="button" class="app-btn app-btn--success" id="add_product_by_sku_btn">
	                                <i class="fa-solid fa-barcode"></i> {{ __('dashboard.Add by SKU') }}
	                            </button>
	                        </div>
	                        <div id="global_search_results" class="sale-search-results-grid mb-5" hidden></div>

                        <div class="app-table-wrap">
                            <table class="app-table align-middle" id="products_table">
                                <thead>
                                    <tr class="font-bold text-slate-500 dark:text-slate-400">
                                        <th class="min-w-150px">{{ __('dashboard.Product') }}</th>
                                        <th class="min-w-150px">{{ __('dashboard.Price') }}</th>
                                        <th class="min-w-100px">{{ __('dashboard.Quantity') }}</th>
                                        <th class="min-w-125px">{{ __('dashboard.Product Discount') }}</th>
                                        <th class="min-w-150px text-end">{{ __('dashboard.Subtotal') }}</th>
                                        <th class="min-w-70px text-end">{{ __('dashboard.Actions') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($sale->saleProducts as $item)
	                                        <tr data-id="{{ $item->product_id }}">
                                            <td>
                                                <input type="hidden" name="products[{{ $loop->index }}][product_id]" value="{{ $item->product_id }}">
                                                {{ $item->product->name ?? '' }} (SKU: {{ $item->product->sku ?? '' }})
                                            </td>
                                            <td>
                                                <div class="flex items-center">
	                                                    <input type="number" step="0.01" name="products[{{ $loop->index }}][price]" class="app-input product-price" value="{{ $item->price }}">
                                                    <span class="text-emerald-600 dark:text-emerald-400 font-bold ms-2 new-price-display"></span>
                                                </div>
                                            </td>
                                            <td><input type="number" name="products[{{ $loop->index }}][quantity]" class="app-input product-quantity" value="{{ $item->quantity }}"></td>
                                            <td><input type="number" step="0.01" name="products[{{ $loop->index }}][product_discount]" class="app-input product-discount" value="{{ $item->product_discount }}"></td>
                                            <td class="text-end row-subtotal-cell">
                                                <span class="text-red-600 dark:text-red-400 line-through row-gross-subtotal me-2" style="display: none;"></span>
                                                <span class="font-bold row-net-subtotal"></span>
                                            </td>
                                            <td class="text-end"><button type="button" class="app-btn app-btn--sm app-btn--icon app-btn--danger remove-row"><i class="ki-outline ki-trash text-xl"></i></button></td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

	            <div class="my-5">
	                <button type="button" class="app-btn app-btn--primary-soft" @click="advancedOpen = !advancedOpen" :aria-expanded="advancedOpen.toString()" aria-controls="advanced_options_collapse">
                        {{ __('dashboard.Taxes, Expenses, and Shipping') }}
                    </button>
	            </div>

	            <div id="advanced_options_collapse" x-show="advancedOpen" x-transition x-cloak>
                <div class="app-grid gy-5 g-xl-8 mb-5">
                    <div class="xl:col-span-6">
                        <div class="app-card app-card--flush h-full">
                            <div class="app-card__header"><h2 class="app-card__title">{{ __('dashboard.Expenses & Taxes') }}</h2></div>
                            <div class="app-card__body pt-5">
                                <div class="mb-7">
                                    <label class="app-label">{{ __('dashboard.Taxes') }}</label>
                                    @foreach($taxes as $tax)
                                        <div class="app-check">
                                            <input class="app-check__input tax-checkbox" type="checkbox" name="taxes[]" value="{{ $tax->id }}" id="tax_{{ $tax->id }}" data-rate="{{ $tax->rate }}" {{ $sale->taxes->contains($tax->id) ? 'checked' : '' }}>
                                            <label class="app-check__label" for="tax_{{ $tax->id }}">{{ $tax->name }} ({{ $tax->rate }}%)</label>
                                        </div>
                                    @endforeach
                                </div>
                                <div class="mb-7">
                                    <label class="app-label">{{ __('dashboard.Additional Expenses') }}</label>
                                    @foreach($additionalExpenses as $expense)
                                        <div class="app-check">
                                            <input class="app-check__input expense-checkbox" type="checkbox" name="additional_expenses[]" value="{{ $expense->id }}" id="expense_{{ $expense->id }}" data-amount="{{ $expense->amount }}" {{ $sale->additionalExpenses->contains($expense->id) ? 'checked' : '' }}>
                                            <label class="app-check__label" for="expense_{{ $expense->id }}">{{ $expense->name }} ({{ $expense->amount }})</label>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="xl:col-span-6">
                        <div class="app-card app-card--flush h-full">
                            <div class="app-card__header"><h2 class="app-card__title">{{ __('dashboard.Shipping') }}</h2></div>
                            <div class="app-card__body pt-5">
                                <div class="mb-7">
                                    <label class="app-label">{{ __('dashboard.Shipping') }}</label>
                                    <div class="app-input-group">
                                        <select name="shipping_type" id="shipping_type_select" class="app-input app-select">
                                            <option value="pickup" {{ $sale->shipping_type == 'pickup' ? 'selected' : '' }}>{{ __('dashboard.Pickup from store') }}</option>
                                            <option value="free" {{ $sale->shipping_type == 'free' ? 'selected' : '' }}>{{ __('dashboard.Free Shipping') }}</option>
                                            <option value="paid" {{ $sale->shipping_type == 'paid' ? 'selected' : '' }}>{{ __('dashboard.Paid Shipping') }}</option>
                                        </select>
                                        <input type="number" step="0.01" name="shipping_cost" id="shipping_cost_input" class="app-input" value="{{ $sale->shipping_cost }}" placeholder="{{ __('dashboard.Shipping Cost') }}" {{ $sale->shipping_type != 'paid' ? 'readonly' : '' }}>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="app-grid gy-5 g-xl-8 mt-5">
                 <div class="xl:col-span-8">
                    <div class="app-card app-card--flush h-full">
                        <div class="app-card__header"><h2 class="app-card__title">{{ __('dashboard.Price Details') }}</h2></div>
                        <div class="app-card__body pt-5">
                            <div class="app-grid mb-5">
                                <div class="md:col-span-4">
                                    <label class="app-label">{{ __('dashboard.Product Discount') }}</label>
                                    <input type="text" id="products_discount_display" class="app-input" value="0.00" disabled>
                                </div>
                                <div class="md:col-span-4">
                                    <label class="app-label">{{ __('dashboard.Discount') }}</label>
                                    <div class="app-input-group">
                                        <input type="number" step="0.01" name="discount" id="discount_input" class="app-input" value="{{ $sale->discount }}">
                                        <select name="discount_type" id="discount_type_select" class="app-input app-select">
                                            <option value="fixed" {{ $sale->discount_type == 'fixed' ? 'selected' : '' }}>{{ __('dashboard.Fixed') }}</option>
                                            <option value="percent" {{ $sale->discount_type == 'percent' ? 'selected' : '' }}>{{ __('dashboard.Percent') }}</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="md:col-span-4">
                                    <label class="app-label">{{ __('dashboard.Total Discount') }}</label>
                                    <input type="text" id="total_discount_display" class="app-input" value="0.00" disabled>
                                </div>
                            </div>

                            <div class="separator separator-dashed my-8"></div>

                            <div class="app-table-wrap">
                                <table class="app-table">
                                    <tbody>
                                        <tr>
                                            <td class="text-gray-800">{{ __('dashboard.Subtotal Before Discount') }}</td>
                                            <td class="text-end" id="subtotal_cell">0.00</td>
                                        </tr>
                                        <tr>
                                            <td class="text-gray-800">{{ __('dashboard.Subtotal After Discount') }}</td>
                                            <td class="text-end" id="subtotal_after_discount_cell">0.00</td>
                                        </tr>
                                        <tr>
                                            <td class="text-gray-800">{{ __('dashboard.Total Discount') }}</td>
                                            <td class="text-end" id="total_discount_cell">0.00</td>
                                        </tr>
                                        <tr>
                                            <td class="text-gray-800">{{ __('dashboard.Shipping') }}</td>
                                            <td class="text-end" id="shipping_cell">0.00</td>
                                        </tr>
                                        <tr>
                                            <td class="text-gray-800">{{ __('dashboard.Taxes') }}</td>
                                            <td class="text-end" id="taxes_cell">0.00</td>
                                        </tr>
                                        <tr>
                                            <td class="text-gray-800">{{ __('dashboard.Additional Expenses') }}</td>
                                            <td class="text-end" id="expenses_cell">0.00</td>
                                        </tr>
                                        <tr class="font-bold text-lg">
                                            <td class="text-gray-800">{{ __('dashboard.Final Total') }}</td>
                                            <td class="text-end" id="final_total_cell">0.00</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="xl:col-span-4">
                    <div class="app-card app-card--flush h-full">
                        <div class="app-card__header"><h2 class="app-card__title">{{ __('dashboard.Payment Details') }}</h2></div>
                        <div class="app-card__body pt-5">
                            <div class="app-grid mb-7">
                                <div class="md:col-span-6">
                                    <label class="app-label">{{ __('dashboard.Payment Status') }}</label>
                                    <select name="payment_status" class="app-input">
                                        <option value="unpaid" {{ $sale->payment_status == 'unpaid' ? 'selected' : '' }}>{{ __('dashboard.Unpaid') }}</option>
                                        <option value="partial" {{ $sale->payment_status == 'partial' ? 'selected' : '' }}>{{ __('dashboard.Partial') }}</option>
                                        <option value="paid" {{ $sale->payment_status == 'paid' ? 'selected' : '' }}>{{ __('dashboard.Paid') }}</option>
                                    </select>
                                </div>
                                <div class="md:col-span-6">
                                    <label class="app-label">{{ __('dashboard.Payment Method') }}</label>
                                    <select name="payment_method" class="app-input">
                                        <option value="none" {{ $sale->payment_method == 'none' ? 'selected' : '' }}>{{ __('dashboard.None') }}</option>
                                        <option value="cash" {{ $sale->payment_method == 'cash' ? 'selected' : '' }}>{{ __('dashboard.Cash') }}</option>
                                        <option value="card" {{ $sale->payment_method == 'card' ? 'selected' : '' }}>{{ __('dashboard.Card') }}</option>
                                        <option value="bank" {{ $sale->payment_method == 'bank' ? 'selected' : '' }}>{{ __('dashboard.Bank') }}</option>
                                        <option value="wallet" {{ $sale->payment_method == 'wallet' ? 'selected' : '' }}>{{ __('dashboard.Wallet') }}</option>
                                        <option value="instapay" {{ $sale->payment_method == 'instapay' ? 'selected' : '' }}>{{ __('dashboard.Instapay') }}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="mb-7">
                                <label class="app-label">{{ __('dashboard.Payment Reference') }}</label>
                                <input type="text" name="payment_reference" class="app-input" value="{{ $sale->payment_reference }}">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="app-card app-card--flush mt-7">
                <div class="app-card__header"><h3 class="app-card__title">{{ __('dashboard.Customer Details') }}</h3></div>
                <div class="app-card__body pt-5">
                    <div id="customer_search_container" style="display: {{ $sale->customer ? 'none' : 'block' }};">
                        <label for="customer_search" class="app-label">{{ __('dashboard.Search for a customer') }}</label>
                        <div class="app-input-group">
                            <input type="text" id="customer_search" class="app-input app-input--lg" placeholder="{{ __('dashboard.Enter customer name or phone') }}">
                            <button type="button" class="app-btn app-btn--secondary" id="search_customer_btn">
                                <span id="customer_search_spinner" class="app-spinner app-spinner--sm hidden" role="status" aria-hidden="true"></span>
                                <i class="fa-solid fa-magnifying-glass"></i> {{ __('dashboard.Search') }}
                            </button>
                            <button type="button" class="app-btn app-btn--primary" data-modal-open="addCustomerModal">
                                <i class="fa-solid fa-plus"></i> {{ __('dashboard.Add New Customer') }}
                            </button>
                        </div>
                    </div>
                    <div id="selected_customer_details_container" class="mt-5" style="display: {{ $sale->customer ? 'block' : 'none' }};">
                        @if($sale->customer)
                            <div class="app-card border border-blue-200">
                                <div class="app-card__header bg-blue-50">
                                    <h3 class="app-card__title">{{ __('dashboard.Selected Customer') }}</h3>
                                    <div class="app-card__toolbar">
                                        <button type="button" class="app-btn app-btn--sm app-btn--warning" id="change_customer_btn"><i class="fa-solid fa-rotate-left"></i> {{ __('dashboard.Change Customer') }}</button>
                                    </div>
                                </div>
                                <div class="app-card__body">
                                    <div class="app-grid">
                                        <div class="md:col-span-6" id="selected_customer_info">
                                            <h4 class="font-black">{{ $sale->customer->name }}</h4>
                                            <div class="text-sm text-gray-700">
                                                <p class="mb-2"><i class="fa-solid fa-phone fa-fw me-2 text-blue-600 dark:text-blue-400"></i>{{ $sale->customer->phone ?? '-' }}</p>
                                                <p class="mb-2"><i class="fa-solid fa-mobile fa-fw me-2 text-blue-600 dark:text-blue-400"></i>{{ $sale->customer->other_phone ?? '-' }}</p>
                                                <p class="mb-2"><i class="fa-solid fa-map-location-dot fa-fw me-2 text-blue-600 dark:text-blue-400"></i>{{ $sale->customer->governorate ?? '-' }}</p>
                                                <p class="mb-0"><i class="fa-solid fa-location-arrow fa-fw me-2 text-blue-600 dark:text-blue-400"></i>{{ $sale->customer->address ?? '-' }}</p>
                                            </div>
                                        </div>
                                        <div class="md:col-span-6" id="selected_customer_stats">
                                            <table class="app-table app-table--bordered app-table--striped">
                                                <tbody>
                                                    <tr><td>{{__('dashboard.Reservations')}}</td><td>{{ $sale->customer->reservations_count ?? 0 }}</td></tr>
                                                    <tr><td>{{__('dashboard.Net Reservations Value')}}</td><td>{{ $sale->customer->net_reservations_value ?? 0 }}</td></tr>
                                                    <tr><td>{{__('dashboard.Canceled Reservations')}}</td><td>{{ $sale->customer->canceled_reservations_count ?? 0 }}</td></tr>
                                                    <tr><td>{{__('dashboard.Sales')}}</td><td>{{ $sale->customer->sales_count ?? 0 }}</td></tr>
                                                    <tr><td>{{__('dashboard.Net Sales Value')}}</td><td>{{ $sale->customer->net_sales_value ?? 0 }}</td></tr>
                                                    <tr><td>{{__('dashboard.Returned Sales')}}</td><td>{{ $sale->customer->returned_sales_count ?? 0 }}</td></tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div>
                    <input type="hidden" name="customer_id" id="customer_id" value="{{ $sale->customer_id }}">
                    <div id="customer_search_count" class="mt-4"></div>
                    <div id="customer_search_results" class="mt-2"></div>
                </div>
            </div>

            @can('change sale creator')
            <div class="app-card app-card--flush mt-7">
                <div class="app-card__header"><h3 class="app-card__title">{{ __('dashboard.Creator') }}</h3></div>
                <div class="app-card__body pt-5">
                    <div class="mb-7">
                        <label class="app-label font-bold">{{ __('dashboard.Creator') }}</label>
                        <select name="created_by" class="app-input">
                            <option value="">{{ __('dashboard.Select Creator') }}</option>
                            @foreach($adminUsers as $adminUser)
                                <option value="{{ $adminUser->id }}" {{ $sale->created_by == $adminUser->id ? 'selected' : '' }}>{{ $adminUser->name }} (ID: {{ $adminUser->id }})</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
            @endcan

            <div class="workspace-actions mt-7">
                <a href="{{ route('dashboard.sales.index') }}" class="app-btn app-btn--secondary me-3">{{ __('dashboard.Cancel') }}</a>
                <button type="submit" class="app-btn app-btn--primary">{{ __('dashboard.Update') }}</button>
            </div>

            <input type="hidden" name="sub_total" id="sub_total_hidden">
            <input type="hidden" name="total_discount" id="total_discount_hidden">
            <input type="hidden" name="total_taxes" id="total_taxes_hidden">
            <input type="hidden" name="total_additional_expenses" id="total_additional_expenses_hidden">
            <input type="hidden" name="shipping_cost_amount" id="shipping_cost_amount_hidden">
            <input type="hidden" name="final_total" id="final_total_hidden">
        </form>
        </div>
    </div>
</div>

<div class="custom-modal" id="addCustomerModal" style="display:none;position:fixed;inset:0;z-index:1050;align-items:center;justify-content:center;background:rgba(15,23,42,.55);backdrop-filter:blur(4px)">
    <div style="background:var(--bg-card);border-radius:var(--radius-2xl);box-shadow:var(--shadow-modal);width:100%;max-width:520px;margin:1rem;overflow:hidden">
        <div style="display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid var(--border)">
            <h2 style="margin:0;font-size:1rem;font-weight:900;color:var(--text-primary)">{{ __('dashboard.Add New Customer') }}</h2>
            <button type="button" class="hdr-btn" data-modal-close><i class="fa-solid fa-xmark"></i></button>
        </div>
        <div style="padding:1.5rem;display:grid;gap:1rem">
            <div><label class="ws-label">{{ __('dashboard.Customer Name') }}</label><input type="text" class="app-input" id="customer_name"></div>
            <div><label class="ws-label">{{ __('dashboard.Gender') }}</label><select class="app-input" id="gender"><option value="" disabled selected>{{ __('dashboard.Select Gender') }}</option><option value="male">{{ __('dashboard.Male') }}</option><option value="female">{{ __('dashboard.Female') }}</option></select></div>
            <div><label class="ws-label">{{ __('dashboard.Phone') }}</label><input type="text" class="app-input" id="phone"></div>
            <div><label class="ws-label">{{ __('dashboard.Other Phone') }}</label><input type="text" class="app-input" id="other_phone"></div>
            <div><label class="ws-label">{{ __('dashboard.Governorate') }}</label><input type="text" class="app-input" id="customer_governorate"></div>
            <div><label class="ws-label">{{ __('dashboard.Address') }}</label><input type="text" class="app-input" id="customer_address"></div>
            <div style="display:flex;justify-content:flex-end;gap:.75rem;padding-top:.5rem">
                <button type="button" class="app-btn app-btn--ghost" data-modal-close>{{ __('dashboard.Close') }}</button>
                <button type="button" class="app-btn app-btn--primary" id="save_customer_btn">{{ __('dashboard.Save') }}</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    let productIndex = {{ $sale->saleProducts->count() }};
    let currentProductResults = {};
    let currentCustomerResults = {};

    const urls = {
        productSearch: @json(url('dashboard/products-search')),
        skuSearch: @json(route("dashboard.reservations.findProductBySKU")),
        customerSearch: @json(route("dashboard.customers.search")),
        customerStore: @json(route("dashboard.customers.storeAjax")),
        customerShowBase: @json(url('dashboard/customers')),
    };

    const messages = {
        error: @json(__('dashboard.Error')),
        success: @json(__('dashboard.Success')),
        noResults: @json(__('dashboard.No results found')),
        noProduct: @json(__('dashboard.No product found with this SKU/ID')),
        noAddress: @json(__('dashboard.No address provided')),
        resultsFound: @json(__('dashboard.results found')),
        requestFailed: 'An error occurred.',
    };

    const csrfToken = @json(csrf_token());

    function byId(id) {
        return document.getElementById(id);
    }

    function valueOf(id) {
        return byId(id)?.value || '';
    }

    function setValue(id, value) {
        const element = byId(id);
        if (element) {
            element.value = value;
        }
    }

    function setText(id, value) {
        const element = byId(id);
        if (element) {
            element.textContent = value;
        }
    }

    function escapeHtml(value) {
        return String(value ?? '').replace(/[&<>"']/g, function(char) {
            return {
                '&': '&amp;',
                '<': '&lt;',
                '>': '&gt;',
                '"': '&quot;',
                "'": '&#039;',
            }[char];
        });
    }

    function buildUrl(baseUrl, params) {
        const url = new URL(baseUrl, window.location.origin);
        Object.entries(params).forEach(function(entry) {
            url.searchParams.set(entry[0], entry[1]);
        });
        return url;
    }

    async function fetchJson(url, options = {}) {
        const headers = new Headers(options.headers || {});
        headers.set('Accept', 'application/json');
        headers.set('X-Requested-With', 'XMLHttpRequest');

        const response = await fetch(url, { ...options, headers });
        const data = await response.json().catch(function() {
            return {};
        });

        if (!response.ok) {
            const error = new Error(data.message || messages.requestFailed);
            error.data = data;
            throw error;
        }

        return data;
    }

    function setBusy(element, busy) {
        if (!element) {
            return;
        }

        element.hidden = !busy;
        element.classList.toggle('hidden', !busy);
    }

    function clearProductSearch() {
        const results = byId('global_search_results');
        if (!results) {
            return;
        }

        results.innerHTML = '';
        results.hidden = true;
    }

    function fallbackOpenModal(id) {
        const modal = byId(id);
        if (!modal) {
            return;
        }

        modal.style.display = 'flex';
        requestAnimationFrame(function() {
            modal.classList.add('modal-visible');
        });
        document.body.style.overflow = 'hidden';
    }

    function fallbackCloseModal(id) {
        const modal = byId(id);
        if (!modal) {
            return;
        }

        let finished = false;
        const finish = function() {
            if (finished) {
                return;
            }
            finished = true;
            modal.style.display = 'none';
            document.body.style.overflow = '';
        };

        modal.classList.remove('modal-visible');
        modal.addEventListener('transitionend', finish, { once: true });
        window.setTimeout(finish, 250);
    }

    function closeAddCustomerModal() {
        if (typeof window.closeModal === 'function') {
            window.closeModal('addCustomerModal');
            return;
        }

        fallbackCloseModal('addCustomerModal');
    }

    function updateRowDisplay(row) {
        const priceInput = row.querySelector('.product-price');
        const discountInput = row.querySelector('.product-discount');
        const newPriceDisplay = row.querySelector('.new-price-display');
        const grossSubtotalSpan = row.querySelector('.row-gross-subtotal');
        const netSubtotalSpan = row.querySelector('.row-net-subtotal');

        const originalPrice = parseFloat(priceInput?.value) || 0;
        const discount = parseFloat(discountInput?.value) || 0;
        const quantity = parseInt(row.querySelector('.product-quantity')?.value, 10) || 0;

        if (discount > 0 && discount < originalPrice) {
            const newPrice = originalPrice - discount;
            priceInput?.classList.add('text-red-600', 'line-through');
            if (newPriceDisplay) {
                newPriceDisplay.textContent = newPrice.toFixed(2);
            }
        } else {
            priceInput?.classList.remove('text-red-600', 'line-through');
            if (newPriceDisplay) {
                newPriceDisplay.textContent = '';
            }
        }

        const lineGross = originalPrice * quantity;
        const lineDiscount = discount * quantity;
        const lineNetSubtotal = lineGross - lineDiscount;

        if (lineDiscount > 0) {
            if (grossSubtotalSpan) {
                grossSubtotalSpan.textContent = lineGross.toFixed(2);
                grossSubtotalSpan.style.display = '';
            }
            if (netSubtotalSpan) {
                netSubtotalSpan.textContent = lineNetSubtotal.toFixed(2);
            }
        } else {
            if (grossSubtotalSpan) {
                grossSubtotalSpan.style.display = 'none';
                grossSubtotalSpan.textContent = '';
            }
            if (netSubtotalSpan) {
                netSubtotalSpan.textContent = lineGross.toFixed(2);
            }
        }
    }

    function calculateTotals() {
        let productsGrossTotal = 0;
        let totalProductsDiscount = 0;

        document.querySelectorAll('#products_table tbody tr').forEach(function(row) {
            const price = parseFloat(row.querySelector('.product-price')?.value) || 0;
            const quantity = parseInt(row.querySelector('.product-quantity')?.value, 10) || 0;
            const perUnitDiscount = parseFloat(row.querySelector('.product-discount')?.value) || 0;

            const lineGross = price * quantity;
            const lineDiscount = perUnitDiscount * quantity;

            productsGrossTotal += lineGross;
            totalProductsDiscount += lineDiscount;
        });

        const subtotalAfterLineDiscounts = productsGrossTotal - totalProductsDiscount;
        let overallDiscountValue = parseFloat(valueOf('discount_input')) || 0;
        let overallDiscountType = valueOf('discount_type_select');
        let overallDiscountAmount = 0;

        if (overallDiscountType === 'percent') {
            overallDiscountAmount = (subtotalAfterLineDiscounts * overallDiscountValue) / 100;
        } else {
            overallDiscountAmount = overallDiscountValue;
        }

        const totalCombinedDiscount = totalProductsDiscount + overallDiscountAmount;
        const baseForExtras = productsGrossTotal - totalCombinedDiscount;
        let shippingCost = parseFloat(valueOf('shipping_cost_input')) || 0;
        let taxesCost = 0;
        let expensesCost = 0;

        document.querySelectorAll('input.tax-checkbox:checked').forEach(function(input) {
            taxesCost += (baseForExtras * (parseFloat(input.dataset.rate) || 0)) / 100;
        });

        document.querySelectorAll('input.expense-checkbox:checked').forEach(function(input) {
            expensesCost += parseFloat(input.dataset.amount) || 0;
        });

        const finalTotal = baseForExtras + shippingCost + taxesCost + expensesCost;

        setValue('products_discount_display', totalProductsDiscount.toFixed(2));
        setValue('total_discount_display', totalCombinedDiscount.toFixed(2));

        setText('subtotal_cell', productsGrossTotal.toFixed(2));
        setText('subtotal_after_discount_cell', subtotalAfterLineDiscounts.toFixed(2));
        setText('total_discount_cell', totalCombinedDiscount.toFixed(2));
        setText('shipping_cell', shippingCost.toFixed(2));
        setText('taxes_cell', taxesCost.toFixed(2));
        setText('expenses_cell', expensesCost.toFixed(2));
        setText('final_total_cell', finalTotal.toFixed(2));

        setValue('sub_total_hidden', productsGrossTotal.toFixed(2));
        setValue('total_discount_hidden', totalCombinedDiscount.toFixed(2));
        setValue('total_taxes_hidden', taxesCost.toFixed(2));
        setValue('total_additional_expenses_hidden', expensesCost.toFixed(2));
        setValue('shipping_cost_amount_hidden', shippingCost.toFixed(2));
        setValue('final_total_hidden', finalTotal.toFixed(2));
    }

    function addProductToTable(product) {
        const price = parseFloat(product.price) || 0;
        const productId = escapeHtml(product.id);
        const productName = escapeHtml(product.name);
        const productSku = escapeHtml(product.sku);
        let newRow = `
            <tr>
                <td>
                    <input type="hidden" name="products[${productIndex}][product_id]" value="${productId}">
                    ${productName} (SKU: ${productSku})
                </td>
                <td>
                    <div class="flex items-center">
                        <input type="number" step="0.01" name="products[${productIndex}][price]" class="app-input product-price" value="${price.toFixed(2)}">
                        <span class="text-emerald-600 dark:text-emerald-400 font-bold ms-2 new-price-display"></span>
                    </div>
                </td>
                <td><input type="number" name="products[${productIndex}][quantity]" class="app-input product-quantity" value="1"></td>
                <td><input type="number" step="0.01" name="products[${productIndex}][product_discount]" class="app-input product-discount" value="0"></td>
                <td class="text-end row-subtotal-cell">
                    <span class="text-red-600 dark:text-red-400 line-through row-gross-subtotal me-2" style="display: none;"></span>
                    <span class="font-bold row-net-subtotal">${price.toFixed(2)}</span>
                </td>
                <td class="text-end"><button type="button" class="app-btn app-btn--sm app-btn--icon app-btn--danger remove-row"><i class="ki-outline ki-trash text-xl"></i></button></td>
            </tr>`;
        byId('products_table')?.querySelector('tbody')?.insertAdjacentHTML('beforeend', newRow);
        productIndex++;
        calculateTotals();
    }

    async function searchProducts() {
        let keyword = valueOf('global_product_search').trim();
        if (!keyword) {
            return;
        }

        setBusy(byId('global_search_spinner'), true);
        try {
            const data = await fetchJson(buildUrl(urls.productSearch, { keyword }));
            const products = Array.isArray(data) ? data : [];
            const results = byId('global_search_results');
            currentProductResults = {};
            let resultsHtml = '';

            if (products.length > 0) {
                products.forEach(function(prod) {
                    currentProductResults[prod.id] = prod;
                    resultsHtml += `<div class="flex items-center justify-between border p-2 mb-2 product-search-result-item" style="cursor: pointer;" data-id="${escapeHtml(prod.id)}">
                        <span>#${escapeHtml(prod.id)} - ${escapeHtml(prod.name)} (SKU: ${escapeHtml(prod.sku)}) [${escapeHtml(prod.price)}]</span>
                    </div>`;
                });
            } else {
                resultsHtml = `<div class="app-alert app-alert--warning">${escapeHtml(messages.noResults)}</div>`;
            }

            if (results) {
                results.innerHTML = resultsHtml;
                results.hidden = false;
            }
        } catch (error) {
            Swal.fire({ icon: 'error', title: messages.error, text: error.message || messages.requestFailed });
        } finally {
            setBusy(byId('global_search_spinner'), false);
        }
    }

    async function addProductBySku() {
        let skuOrId = valueOf('global_product_search').trim();
        if (!skuOrId) {
            return;
        }

        try {
            const res = await fetchJson(buildUrl(urls.skuSearch, { sku: skuOrId }));
            if (res.success) {
                addProductToTable(res.product);
            } else {
                Swal.fire({ icon: 'error', title: messages.error, text: res.message || messages.noProduct });
            }
        } catch (error) {
            Swal.fire({ icon: 'error', title: messages.error, text: error.message || messages.noProduct });
        }
    }

    byId('global_search_product_btn')?.addEventListener('click', searchProducts);
    byId('add_product_by_sku_btn')?.addEventListener('click', addProductBySku);

    byId('global_search_results')?.addEventListener('click', function(event) {
        const item = event.target.closest('.product-search-result-item');
        if (!item) {
            return;
        }

        const product = currentProductResults[item.dataset.id];
        if (!product) {
            return;
        }

        addProductToTable(product);
        clearProductSearch();
    });

    byId('products_table')?.addEventListener('input', function(event) {
        if (!event.target.matches('.product-price, .product-quantity, .product-discount')) {
            return;
        }

        const row = event.target.closest('tr');
        if (row) {
            updateRowDisplay(row);
            calculateTotals();
        }
    });

    byId('products_table')?.addEventListener('click', function(event) {
        const button = event.target.closest('.remove-row');
        if (!button) {
            return;
        }

        button.closest('tr')?.remove();
        calculateTotals();
    });

    document.querySelectorAll('#discount_input, #discount_type_select, #shipping_cost_input, .tax-checkbox, .expense-checkbox').forEach(function(element) {
        element.addEventListener('change', calculateTotals);
        element.addEventListener('input', calculateTotals);
    });

    byId('shipping_type_select')?.addEventListener('change', function(event) {
        const shippingCostInput = byId('shipping_cost_input');
        if (!shippingCostInput) {
            calculateTotals();
            return;
        }

        if (event.target.value === 'paid') {
            shippingCostInput.readOnly = false;
        } else {
            shippingCostInput.value = 0;
            shippingCostInput.readOnly = true;
        }
        calculateTotals();
    });

    function selectCustomer(customer) {
        setValue('customer_id', customer.id);
        let infoHtml = `<h4 class="font-black">${escapeHtml(customer.name)}</h4><div class="text-sm text-gray-700"><p class="mb-2"><i class="fa-solid fa-phone fa-fw me-2 text-blue-600 dark:text-blue-400"></i>${escapeHtml(customer.phone || '-')}</p><p class="mb-2"><i class="fa-solid fa-mobile fa-fw me-2 text-blue-600 dark:text-blue-400"></i>${escapeHtml(customer.other_phone || '-')}</p><p class="mb-2"><i class="fa-solid fa-map-location-dot fa-fw me-2 text-blue-600 dark:text-blue-400"></i>${escapeHtml(customer.governorate || '-')}</p><p class="mb-0"><i class="fa-solid fa-location-arrow fa-fw me-2 text-blue-600 dark:text-blue-400"></i>${escapeHtml(customer.address || '-')}</p></div>`;
        let statsHtml = `<table class="app-table app-table--bordered app-table--striped"><tbody><tr><td>{{__('dashboard.Reservations')}}</td><td>${escapeHtml(customer.reservations_count || 0)}</td></tr><tr><td>{{__('dashboard.Net Reservations Value')}}</td><td>${escapeHtml(customer.net_reservations_value || 0)}</td></tr><tr><td>{{__('dashboard.Canceled Reservations')}}</td><td>${escapeHtml(customer.canceled_reservations_count || 0)}</td></tr><tr><td>{{__('dashboard.Sales')}}</td><td>${escapeHtml(customer.sales_count || 0)}</td></tr><tr><td>{{__('dashboard.Net Sales Value')}}</td><td>${escapeHtml(customer.net_sales_value || 0)}</td></tr><tr><td>{{__('dashboard.Returned Sales')}}</td><td>${escapeHtml(customer.returned_sales_count || 0)}</td></tr></tbody></table>`;
        let detailsHtml = `<div class="app-card border border-blue-200"><div class="app-card__header bg-blue-50"><h3 class="app-card__title">{{ __('dashboard.Selected Customer') }}</h3><div class="app-card__toolbar"><button type="button" class="app-btn app-btn--sm app-btn--warning" id="change_customer_btn"><i class="fa-solid fa-rotate-left"></i> {{ __('dashboard.Change Customer') }}</button></div></div><div class="app-card__body"><div class="app-grid"><div class="md:col-span-6" id="selected_customer_info">${infoHtml}</div><div class="md:col-span-6" id="selected_customer_stats">${statsHtml}</div></div></div></div>`;

        const selectedContainer = byId('selected_customer_details_container');
        if (selectedContainer) {
            selectedContainer.innerHTML = detailsHtml;
            selectedContainer.style.display = 'block';
        }

        const searchContainer = byId('customer_search_container');
        if (searchContainer) {
            searchContainer.style.display = 'none';
        }

        if (byId('customer_search_results')) {
            byId('customer_search_results').innerHTML = '';
        }
        if (byId('customer_search_count')) {
            byId('customer_search_count').innerHTML = '';
        }
        setValue('customer_search', '');
    }

    async function searchCustomers(query) {
        setBusy(byId('customer_search_spinner'), true);
        try {
            const response = await fetchJson(buildUrl(urls.customerSearch, { keyword: query }));
            const customers = Array.isArray(response) ? response : [];
            currentCustomerResults = {};
            let resultsHtml = '<div class="app-grid">';
            let countHtml = '';

            if (customers.length > 0) {
                countHtml = `<div class="app-alert app-alert--success">${customers.length} ${escapeHtml(messages.resultsFound)}</div>`;
                customers.forEach(function(customer) {
                    currentCustomerResults[customer.id] = customer;
                    let otherPhoneHtml = '';
                    if (customer.other_phone) {
                        otherPhoneHtml = `<div class="mb-1"><i class="fa-solid fa-mobile fa-fw me-1"></i>${escapeHtml(customer.other_phone)}</div>`;
                    }
                    let fullAddress = [customer.governorate, customer.address].filter(Boolean).join(', ');
                    if (!fullAddress) {
                        fullAddress = messages.noAddress;
                    }
                    resultsHtml += `
                        <div class="lg:col-span-6 mb-4">
                            <div class="app-card shadow-sm h-full">
                                <div class="app-card__body flex flex-col">
                                    <div class="flex-1">
                                        <h5 class="app-card__title text-blue-600 dark:text-blue-400 font-black">${escapeHtml(customer.name)}</h5>
                                        <h6 class="app-card__subtitle mb-2 text-slate-500 dark:text-slate-400"><i class="fa-solid fa-phone fa-fw me-1"></i>${escapeHtml(customer.phone)}</h6>
                                        <div class="app-card__text text-sm text-gray-600 mt-2">
                                            ${otherPhoneHtml}
                                            <div><i class="fa-solid fa-location-dot fa-fw me-1"></i>${escapeHtml(fullAddress)}</div>
                                        </div>
                                    </div>
                                    <div class="mt-4 flex justify-between">
                                        <button type="button" class="app-btn app-btn--sm app-btn--primary select-customer-btn" data-id="${escapeHtml(customer.id)}">
                                            <i class="fa-solid fa-check"></i> {{ __('dashboard.Select') }}
                                        </button>
                                        <a href="${urls.customerShowBase}/${encodeURIComponent(customer.id)}" target="_blank" class="app-btn app-btn--sm app-btn--secondary">
                                             <i class="fa-solid fa-arrow-up-right-from-square"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>`;
                });
            } else {
                countHtml = `<div class="app-alert app-alert--warning">${escapeHtml(messages.noResults)}</div>`;
            }

            resultsHtml += '</div>';
            if (byId('customer_search_count')) {
                byId('customer_search_count').innerHTML = countHtml;
            }
            if (byId('customer_search_results')) {
                byId('customer_search_results').innerHTML = resultsHtml;
            }
        } catch (error) {
            Swal.fire({ icon: 'error', title: messages.error, text: error.message || messages.requestFailed });
        } finally {
            setBusy(byId('customer_search_spinner'), false);
        }
    }

    byId('customer_search')?.addEventListener('input', function(event) {
        let val = event.target.value;
        if (val.length > 2) {
            searchCustomers(val);
        } else {
            if (byId('customer_search_results')) {
                byId('customer_search_results').innerHTML = '';
            }
            if (byId('customer_search_count')) {
                byId('customer_search_count').innerHTML = '';
            }
        }
    });

    byId('search_customer_btn')?.addEventListener('click', function() {
        let val = valueOf('customer_search');
        if (val) {
            searchCustomers(val);
        }
    });

    document.addEventListener('click', function(event) {
        const selectButton = event.target.closest('.select-customer-btn');
        if (selectButton) {
            event.preventDefault();
            const customer = currentCustomerResults[selectButton.dataset.id];
            if (customer) {
                selectCustomer(customer);
            }
            return;
        }

        const changeCustomerButton = event.target.closest('#change_customer_btn');
        if (changeCustomerButton) {
            setValue('customer_id', '');

            const selectedContainer = byId('selected_customer_details_container');
            if (selectedContainer) {
                selectedContainer.style.display = 'none';
                selectedContainer.innerHTML = '';
            }

            const searchContainer = byId('customer_search_container');
            if (searchContainer) {
                searchContainer.style.display = 'block';
            }

            byId('customer_search')?.focus();
            return;
        }

        if (typeof window.openModal !== 'function') {
            const openButton = event.target.closest('[data-modal-open]');
            if (openButton) {
                fallbackOpenModal(openButton.dataset.modalOpen);
            }
        }

        if (typeof window.closeModal !== 'function') {
            const closeButton = event.target.closest('[data-modal-close]');
            if (closeButton) {
                const modal = closeButton.closest('.custom-modal');
                if (modal) {
                    fallbackCloseModal(modal.id);
                }
            }
        }
    });

    byId('save_customer_btn')?.addEventListener('click', async function() {
        const formData = new FormData();
        formData.append('name', valueOf('customer_name'));
        formData.append('gender', valueOf('gender'));
        formData.append('phone', valueOf('phone'));
        formData.append('other_phone', valueOf('other_phone'));
        formData.append('governorate', valueOf('customer_governorate'));
        formData.append('address', valueOf('customer_address'));
        formData.append('_token', csrfToken);

        try {
            const resp = await fetchJson(urls.customerStore, {
                method: 'POST',
                headers: { 'X-CSRF-TOKEN': csrfToken },
                body: formData,
            });

            if (resp.success) {
                closeAddCustomerModal();
                Swal.fire({ icon: 'success', title: messages.success, text: resp.message });
                selectCustomer(resp.customer);
            }
        } catch (error) {
            let errorHtml = messages.requestFailed;
            if (error.data && error.data.errors) {
                errorHtml = Object.values(error.data.errors).flat().map(function(message) {
                    return `<li>${escapeHtml(message)}</li>`;
                }).join('');
                errorHtml = `<ul>${errorHtml}</ul>`;
            }
            Swal.fire({ icon: 'error', title: messages.error, html: errorHtml });
        }
    });

    document.querySelectorAll('#products_table tbody tr').forEach(function(row) {
        updateRowDisplay(row);
    });

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