@extends('layouts.app')

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

@php
    $saleBackRoute = auth()->user()?->hasSalesFocusModeEnabled()
        ? route('dashboard.sales-focus.index')
        : route('dashboard.sales.index');
@endphp

@section('breadcrumb')
    <li class="bc-item">
        <a href="{{ auth()->user()?->hasSalesFocusModeEnabled() ? route('dashboard.sales-focus.index') : route('dashboard.home') }}" class="bc-link">{{ __('dashboard.Home') }}</a>
    </li>
    <li class="bc-item">
        <a href="{{ $saleBackRoute }}" class="bc-link">{{ __('dashboard.Sales') }}</a>
    </li>
    <li class="bc-item bc-item--active">{{ __('dashboard.Add New Sale') }}</li>
@endsection

@section('content')
@include('layouts.partials.workspace-page-styles')
@include('dashboard.reservations.partials.customer-lookup-styles')
<style>
    .sale-create-page {
        display: grid;
        gap: 1.25rem;
    }

    .sale-create-form {
        display: grid;
        gap: 1rem;
    }

    .sale-create-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(410px, 0.42fr);
        gap: 1rem;
        align-items: start;
    }

    .sale-create-topbar {
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:1rem;
        padding:1rem 1.25rem;
        border:1px solid var(--border);
        border-radius:var(--radius-xl);
        background:var(--bg-card);
        box-shadow:var(--shadow-card);
        flex-wrap:wrap;
    }

    .sale-create-topbar__title {
        display:flex;
        align-items:center;
        gap:.65rem;
        margin:0;
        color:var(--text-primary);
        font-size:.98rem;
        font-weight:900;
    }

    .sale-create-topbar__icon {
        width:2.35rem;
        height:2.35rem;
        border-radius:var(--radius-md);
        display:inline-flex;
        align-items:center;
        justify-content:center;
        color:var(--c-primary);
        background:var(--c-primary-bg);
        flex:0 0 auto;
    }

    .sale-create-main {
        display:grid;
        gap:1rem;
        min-width:0;
    }

    .sale-pos-panel {
        border:1px solid var(--border);
        border-radius:var(--radius-lg);
        background:var(--bg-card);
        box-shadow:0 2px 8px rgba(15, 23, 42, 0.04);
        overflow:hidden;
        min-height:calc(100dvh - 190px);
    }

    .sale-pos-toolbar {
        display:grid;
        grid-template-columns:minmax(0, 1fr) auto;
        gap:.75rem;
        align-items:center;
        padding:.85rem 1rem;
        border-bottom:1px solid var(--border-subtle);
        background:var(--surface-50);
    }

    .sale-pos-search {
        position:relative;
    }

    .sale-pos-search i {
        position:absolute;
        inset-inline-start:.9rem;
        top:50%;
        transform:translateY(-50%);
        color:var(--text-muted);
        pointer-events:none;
    }

    .sale-pos-search .app-input {
        min-height:46px;
        padding-inline-start:2.5rem;
        border-radius:var(--radius-md);
    }

    .sale-pos-categories {
        display:flex;
        gap:.55rem;
        padding:.85rem 1rem 0;
        overflow-x:auto;
    }

    .sale-pos-category {
        border:1px solid var(--border);
        border-radius:999px;
        background:var(--bg-card);
        color:var(--text-secondary);
        font-size:.78rem;
        font-weight:900;
        padding:.45rem .85rem;
        white-space:nowrap;
        cursor:pointer;
    }

    .sale-pos-category.is-active {
        border-color:var(--c-primary);
        background:var(--c-primary);
        color:#fff;
    }

    .sale-pos-grid {
        display:grid;
        grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
        gap:.7rem;
        padding:.85rem 1rem 1rem;
        min-height:360px;
        max-height:calc(100dvh - 340px);
        overflow:auto;
    }

    .sale-pos-product {
        display:flex;
        flex-direction:column;
        gap:.5rem;
        min-height:184px;
        border:1px solid var(--border);
        border-radius:var(--radius-md);
        background:var(--bg-card);
        padding:.65rem;
        cursor:pointer;
        text-align:inherit;
        transition:border-color .16s, box-shadow .16s, transform .16s;
        font-family:inherit;
    }

    .sale-pos-product:hover {
        border-color:var(--c-primary-pale);
        box-shadow:0 12px 24px rgba(15, 23, 42, 0.08);
        transform:translateY(-1px);
    }

    .sale-pos-product__image {
        aspect-ratio:1 / .78;
        border-radius:var(--radius-md);
        background:var(--surface-50);
        border:1px solid var(--border-subtle);
        display:flex;
        align-items:center;
        justify-content:center;
        overflow:hidden;
    }

    .sale-pos-product__image img {
        width:100%;
        height:100%;
        object-fit:contain;
    }

    .sale-pos-product__name {
        color:var(--text-primary);
        font-size:.8rem;
        font-weight:900;
        line-height:1.45;
        min-height:2.25rem;
    }

    .sale-pos-product__meta {
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:.5rem;
        color:var(--text-muted);
        font-size:.72rem;
        font-weight:800;
    }

    .sale-pos-product__price {
        color:var(--c-primary);
        font-size:.92rem;
        font-weight:900;
    }

    .sale-pos-empty {
        grid-column:1 / -1;
        min-height:280px;
        display:flex;
        align-items:center;
        justify-content:center;
        text-align:center;
        color:var(--text-muted);
        font-size:.9rem;
        font-weight:800;
    }

    .sale-create-search-card {
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        background: var(--bg-card);
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
        overflow: hidden;
    }

    .sale-create-search-card__body {
        padding: 1.25rem;
    }

    .sale-create-search-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        gap: 0.75rem;
        align-items: center;
    }

    .sale-create-search-grid .app-input,
    .sale-create-search-grid .app-btn {
        min-height: 44px;
        border-radius: var(--radius-md);
    }

    #global_search_results {
        margin-top: 1rem;
        display: none;
    }

    #global_search_results.is-visible {
        display:grid;
    }

    .sale-search-results-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap:.75rem;
    }

    .sale-search-item {
        border:1px solid var(--border);
        border-radius:var(--radius-md);
        background:var(--bg-card);
        padding:.8rem;
        cursor:pointer;
        transition:border-color .16s, box-shadow .16s, transform .16s;
    }

    .sale-search-item:hover {
        border-color:var(--c-primary-pale);
        box-shadow:0 12px 24px rgba(15, 23, 42, 0.08);
        transform:translateY(-1px);
    }

    .sale-create-products-card {
        border-radius:var(--radius-lg);
        overflow:hidden;
    }

    .sale-create-products-card .ws-card-header {
        padding:.85rem 1rem;
    }

    .sale-create-products-card .ws-card-body {
        padding:.75rem !important;
    }

    .sale-create-products-card .sf-table-wrap {
        border-radius:0;
        overflow:visible;
    }

    .sale-create-products-card .sf-table,
    .sale-create-products-card .sf-table tbody {
        display:grid;
        gap:.6rem;
    }

    .sale-create-products-card .sf-table thead {
        display:none;
    }

    .sale-create-products-card .sf-table tbody tr {
        display:grid;
        grid-template-columns:minmax(0, 1fr) 76px 88px 38px;
        align-items:center;
        gap:.55rem;
        border:1px solid var(--border);
        border-radius:var(--radius-md);
        background:var(--bg-card);
        padding:.55rem;
    }

    .sale-create-products-card .sf-table tbody td {
        border:0;
        padding:0 !important;
    }

    .sale-create-products-card .app-input {
        min-height:36px;
        border-radius:var(--radius-md);
    }

    .sale-create-products-card .product-quantity {
        text-align:center;
        padding-inline:.35rem;
    }

    .sale-cart-item {
        display:flex;
        align-items:center;
        gap:.65rem;
        min-width:0;
    }

    .sale-cart-item__image {
        width:42px;
        height:42px;
        flex:0 0 auto;
        border:1px solid var(--border);
        border-radius:var(--radius-md);
        overflow:hidden;
        background:var(--surface-50);
    }

    .sale-cart-item__image img {
        width:100%;
        height:100%;
        object-fit:contain;
    }

    .sale-cart-item__name {
        display:block;
        color:var(--text-primary);
        font-size:.8rem;
        font-weight:900;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .sale-cart-item__meta {
        display:block;
        color:var(--text-muted);
        font-size:.72rem;
        font-weight:800;
    }

    .sale-cart-line-total {
        text-align:end;
        color:var(--text-primary);
        font-size:.82rem;
        font-weight:900;
        white-space:nowrap;
    }

    .sale-create-empty {
        min-height: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .sale-create-empty__icon {
        width: 4.25rem;
        height: 4.25rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-lg);
        background: var(--c-primary-bg);
        color: var(--c-primary);
        font-size: 1.45rem;
        margin-bottom: .75rem;
    }

    .sale-create-empty__title {
        color: #0f172a;
        font-size: 1rem;
        font-weight: 900;
    }

    .sale-create-side {
        display: grid;
        gap: .85rem;
        position: sticky;
        top: 88px;
        min-width:0;
        max-height:calc(100dvh - 104px);
        overflow:auto;
    }

    .sale-side-card {
        border:1px solid var(--border);
        border-radius:var(--radius-lg);
        background:var(--bg-card);
        box-shadow:0 2px 8px rgba(15, 23, 42, 0.04);
        overflow:hidden;
    }

    .sale-side-card__header {
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:.75rem;
        padding:.85rem 1rem;
        border-bottom:1px solid var(--border-subtle);
        background:var(--surface-50);
    }

    .sale-side-card__title {
        display:inline-flex;
        align-items:center;
        gap:.55rem;
        margin:0;
        color:var(--text-primary);
        font-size:.88rem;
        font-weight:900;
    }

    .sale-side-card__title i {
        color:var(--c-primary);
    }

    .sale-side-card__body {
        padding:.85rem;
    }

    .sale-customer-card .reservation-customer-panel__header {
        display:none !important;
    }

    .sale-customer-card .ws-card-body {
        padding:.85rem !important;
    }

    .sale-customer-card .reservation-customer-search-box {
        padding:.85rem;
        border-radius:var(--radius-md);
        border-color:var(--border);
        background:var(--surface-50);
    }

    .sale-customer-card .reservation-customer-search-box__label {
        margin-bottom:.55rem;
        font-size:.82rem;
    }

    .sale-customer-card .reservation-customer-search-grid {
        grid-template-columns:minmax(0, 1fr) 44px;
        gap:.5rem;
    }

    .sale-customer-card #search_customer_btn {
        width:44px;
        min-width:44px;
        padding:0;
    }

    .sale-customer-card #search_customer_btn i {
        margin:0;
    }

    .sale-customer-card #search_customer_btn {
        font-size:0;
    }

    .sale-customer-card #search_customer_btn .app-spinner {
        font-size:1rem;
    }

    .sale-customer-card .reservation-customer-results,
    .sale-customer-card .reservation-customer-count {
        margin-top:.65rem;
    }

    .sale-customer-card .reservation-customer-result-card,
    .sale-customer-card .reservation-customer-selected-card {
        border-radius:var(--radius-md);
        box-shadow:none;
    }

    .sale-customer-card .reservation-customer-result-card__body,
    .sale-customer-card .reservation-customer-selected-card .ws-card-body {
        padding:.85rem !important;
    }

    .sale-customer-card .reservation-customer-result-card__layout {
        grid-template-columns:minmax(0, 1fr);
        gap:.75rem;
    }

    .sale-customer-card .reservation-customer-result-card__actions {
        min-width:0;
        flex-direction:row;
        flex-wrap:wrap;
    }

    .sale-customer-card .reservation-customer-selected-card__header {
        padding:.75rem .85rem;
    }

    .sale-customer-card #selected_customer_details_container {
        margin-top:.75rem !important;
    }

    .sale-customer-card #selected_customer_details_container .ws-card-body > div {
        grid-template-columns:1fr !important;
        gap:.75rem !important;
    }

    .sale-create-summary-card {
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        background: var(--bg-card);
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
        overflow: hidden;
    }

    .sale-create-summary-card__body {
        padding: .95rem;
    }

    .sale-create-summary-line {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.45rem 0;
    }

    .sale-create-summary-line__label {
        color: #64748b;
        font-size: 0.78rem;
        font-weight: 800;
    }

    .sale-create-summary-line__value {
        color: #0f172a;
        font-size: 0.86rem;
        font-weight: 900;
    }

    .sale-create-summary-total {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: .85rem .95rem;
        margin: .8rem 0;
        border-radius: var(--radius-md);
        background: var(--c-primary-bg);
    }

    .sale-create-summary-total__label {
        color: #0f172a;
        font-size: 0.92rem;
        font-weight: 900;
    }

    .sale-create-summary-total__value {
        color: var(--c-primary);
        font-size: 1.35rem;
        font-weight: 900;
        line-height: 1;
    }

    .sale-create-summary-field {
        padding: .85rem;
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        background: var(--surface-50);
        margin-bottom: .65rem;
    }

    .sale-create-summary-field:last-child {
        margin-bottom: 0;
    }

    .sale-create-summary-field .app-label {
        color: #334155;
        font-weight: 800;
        margin-bottom: 0.55rem;
    }

    .sale-create-summary-choice-list {
        display: grid;
        gap: 0.5rem;
    }

    .sale-create-summary-choice {
        display: flex;
        align-items: flex-start;
        gap: 0.65rem;
        padding: 0.62rem 0.7rem;
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        background: var(--bg-card);
    }

    .sale-create-summary-choice .app-check__input {
        margin-top: 0.15rem;
        flex: 0 0 auto;
    }

    .sale-create-summary-choice__label {
        color: #0f172a;
        font-size: 0.82rem;
        font-weight: 800;
        line-height: 1.6;
    }

    .sale-create-summary-choice__meta {
        color: #64748b;
        font-size: 0.74rem;
        font-weight: 700;
        margin-top: 0.15rem;
    }

    .sale-create-summary-actions {
        display: grid;
        gap: 0.6rem;
        margin-top: .9rem;
    }

    .sale-create-summary-actions .app-btn {
        min-height: 46px;
        border-radius: var(--radius-md);
        font-weight: 800;
    }

    .sale-create-loyalty-meta {
        display: flex;
        flex-direction: column;
        gap: 0.45rem;
        margin-bottom: 0.65rem;
    }

    .sale-create-loyalty-meta__line {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        color: #64748b;
        font-size: 0.78rem;
        font-weight: 700;
    }

    .sale-create-loyalty-meta__line strong {
        color: #0f172a;
        font-size: 0.84rem;
        font-weight: 900;
    }

    .sale-create-payment-grid {
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:.75rem;
    }

    .sale-create-page .reservation-customer-panel {
        border-radius:var(--radius-lg);
        box-shadow:0 2px 8px rgba(15, 23, 42, 0.04);
    }

    .sale-create-page .reservation-customer-panel__header,
    .sale-create-page .reservation-customer-selected-card__header {
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:.75rem;
        flex-wrap:wrap;
    }

    #customer_search_results div:hover {
        background-color: var(--c-primary-bg);
        color: var(--c-primary);
        cursor: pointer;
    }

    .dark .sale-create-search-card,
    .dark .sale-create-summary-card,
    .dark .sale-create-summary-field,
    .dark .sale-create-summary-choice,
    .dark .sale-search-item,
    .dark .sale-side-card,
    .dark .sale-customer-card .reservation-customer-search-box,
    .dark .sale-pos-panel,
    .dark .sale-pos-product,
    .dark .sale-pos-category,
    .dark .sale-create-topbar {
        border-color: rgba(148, 163, 184, 0.18);
        background: linear-gradient(180deg, rgba(8, 8, 8, 0.94) 0%, rgba(18, 18, 18, 0.98) 100%);
        box-shadow: none;
    }

    .dark .sale-pos-toolbar,
    .dark .sale-side-card__header,
    .dark .sale-pos-product__image {
        border-color:rgba(148, 163, 184, 0.12);
        background:rgba(148, 163, 184, 0.06);
    }

    .dark .sale-pos-category.is-active {
        border-color:var(--c-primary-muted);
        background:rgba(var(--c-primary-rgb), .24);
        color:#dbeafe;
    }

    .dark .sale-create-products-card .sf-table thead th,
    .dark .sale-create-empty__icon,
    .dark #customer_search_results div:hover {
        background: rgba(20, 20, 20, 0.92);
    }

    .dark .sale-create-empty__title,
    .dark .sale-create-summary-line__value,
    .dark .sale-create-summary-total__label,
    .dark .sale-create-summary-choice__label,
    .dark .sale-create-loyalty-meta__line strong {
        color: #f8fafc;
    }

    .dark .sale-create-products-card .sf-table thead th,
    .dark .sale-create-summary-line__label,
    .dark .sale-create-summary-choice__meta,
    .dark .sale-create-loyalty-meta__line {
        color: #94a3b8;
    }

    .dark .sale-create-empty__icon {
        color: #a5b4fc;
    }

    .dark .sale-create-summary-total {
        background: rgba(67, 56, 202, 0.16);
    }

    .dark .sale-create-summary-total__value {
        color: #a5b4fc;
    }

    .dark .sale-create-products-card .sf-table tbody tr {
        border-color: rgba(148, 163, 184, 0.14);
        background: rgba(10, 10, 10, .72);
    }

    @media (max-width: 1399.98px) {
        .sale-create-layout {
            grid-template-columns:minmax(0, 1fr) minmax(370px, .48fr);
        }
    }

    @media (max-width: 1199.98px) {
        .sale-create-layout {
            grid-template-columns: minmax(0, 1fr);
        }
        .sale-create-side {
            position: static;
            max-height:none;
            overflow:visible;
        }

        .sale-pos-panel {
            min-height:auto;
        }

        .sale-pos-grid {
            max-height:none;
        }
    }

    @media (max-width: 991.98px) {
        .sale-create-search-grid,
        .sale-pos-toolbar {
            grid-template-columns: minmax(0, 1fr);
        }

    }

    @media (max-width: 767.98px) {
        .sale-create-payment-grid {
            grid-template-columns:1fr;
        }

        .sale-create-topbar,
        .sale-create-topbar .app-btn {
            width:100%;
        }

        .sale-create-products-card .sf-table tbody tr {
            grid-template-columns:minmax(0, 1fr) 70px 34px;
        }

        .sale-create-products-card .sf-table tbody td:nth-child(3) {
            grid-column:1 / 3;
            text-align:start !important;
        }
    }
</style>

<div class="workspace-page sale-create-page">
    <div class="workspace-shell">
        <div class="workspace-body">

            <form action="{{ route('dashboard.sales.store') }}" method="POST" id="sale_form" class="sale-create-form" x-data="saleCreateForm()">
                @csrf

                <div class="sale-create-topbar">
                    <h2 class="sale-create-topbar__title">
                        <span class="sale-create-topbar__icon"><i class="fa-solid fa-cart-plus"></i></span>
                        {{ __('dashboard.Add New Sale') }}
                    </h2>
                    <a href="{{ $saleBackRoute }}" class="app-btn app-btn--secondary">
                        <i class="fa-solid fa-arrow-right"></i>
                        {{ __('dashboard.Cancel') }}
                    </a>
                </div>

                <div class="sale-create-layout">
                    <div class="sale-create-main">
                        <div class="sale-pos-panel">
                            <div class="sale-pos-toolbar">
                                <div class="sale-pos-search">
                                    <i class="fa-solid fa-magnifying-glass"></i>
                                    <input type="text" id="global_product_search" class="app-input" placeholder="{{ __('dashboard.Search by name or SKU') }}" autocomplete="off">
                                </div>
                                <div style="display:flex;gap:.5rem;flex-wrap:wrap">
                                    <button type="button" class="app-btn app-btn--ghost" id="global_search_product_btn">
                                        <i class="fa-solid fa-magnifying-glass"></i>{{ __('dashboard.Search') }}
                                    </button>
                                    <button type="button" class="app-btn app-btn--ghost" id="add_product_by_sku_btn">
                                        <i class="fa-solid fa-barcode"></i>{{ __('dashboard.Add by SKU') }}
                                    </button>
                                </div>
                            </div>

                            <div class="sale-pos-categories" id="pos_category_tabs">
                                <button type="button" class="sale-pos-category is-active" data-category="all">{{ __('dashboard.all') }}</button>
                                @foreach($posCategories as $category)
                                    <button type="button" class="sale-pos-category" data-category="{{ $category['id'] }}">{{ $category['name'] }}</button>
                                @endforeach
                            </div>
                            <div id="pos_product_grid" class="sale-pos-grid"></div>
                            <div id="global_search_results" class="sale-search-results-grid" hidden></div>
                        </div>
                    </div>

                    <div class="sale-create-side">
                        <div class="app-card app-card--flush sale-create-products-card">
                            <div class="sale-side-card__header">
                                <h3 class="sale-side-card__title"><i class="fa-solid fa-basket-shopping"></i>{{ __('dashboard.Items in Cart') }}</h3>
                                <span class="sale-create-summary-line__value" id="cart_count_display">0</span>
                            </div>
                            <div class="sale-side-card__body">
                                <div class="sf-table-wrap">
                                    <table class="sf-table" id="products_table">
                                        <thead>
                                            <tr>
                                                <th style="min-width:190px">{{ __('dashboard.Product') }}</th>
                                                <th style="min-width:88px">{{ __('dashboard.Qty') }}</th>
                                                <th style="min-width:105px;text-align:end">{{ __('dashboard.Total') }}</th>
                                                <th style="min-width:54px;text-align:end"></th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>
                                <div id="empty_cart_msg" class="sale-create-empty">
                                    <div>
                                        <div class="sale-create-empty__icon"><i class="fa-solid fa-cart-shopping"></i></div>
                                        <div class="sale-create-empty__title">{{ __('dashboard.Your cart is empty') }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="sale-side-card sale-customer-card">
                            <div class="sale-side-card__header">
                                <h3 class="sale-side-card__title"><i class="fa-solid fa-address-card"></i>{{ __('dashboard.Customer Details') }}</h3>
                                <button type="button" class="app-btn app-btn--sm app-btn--ghost" data-modal-open="addCustomerModal">
                                    <i class="fa-solid fa-plus"></i>
                                </button>
                            </div>
                            <div class="reservation-customer-panel" style="border:0;box-shadow:none;border-radius:0">
                            <div class="ws-card-body" style="padding-top:0">
                                <div id="customer_search_container" class="reservation-customer-search-box">
                                    <label for="customer_search" class="reservation-customer-search-box__label">{{ __('dashboard.Search for a customer') }}</label>
                                    <div class="reservation-customer-search-grid">
                                        <input type="text" id="customer_search" class="app-input" placeholder="{{ __('dashboard.Enter customer name or phone') }}">
                                        <button type="button" class="app-btn app-btn--ghost" id="search_customer_btn">
                                            <span id="customer_search_spinner" class="app-spinner" role="status" aria-hidden="true" hidden></span>
                                            <i class="fa-solid fa-magnifying-glass"></i>{{ __('dashboard.Search') }}
                                        </button>
                                    </div>
                                </div>

                                <div id="selected_customer_details_container" class="mt-5" style="display: none;">
                                    <div class="reservation-customer-selected-card">
                                        <div class="reservation-customer-selected-card__header">
                                            <h3 style="margin:0;font-size:.9rem;font-weight:900;color:var(--text-primary)">{{ __('dashboard.Selected Customer') }}</h3>
                                            <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 class="ws-card-body">
                                            <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem">
                                                <div id="selected_customer_info"></div>
                                                <div id="selected_customer_stats"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <input type="hidden" name="customer_id" id="customer_id">
                                <div id="customer_search_count" class="reservation-customer-count"></div>
                                <div id="customer_search_results" class="reservation-customer-results"></div>
                            </div>
                            </div>
                        </div>

                        <div class="sale-create-summary-card">
                            <div class="sale-create-summary-card__body">
                                    <div class="sale-create-summary-line">
                                        <span class="sale-create-summary-line__label">{{ __('dashboard.Subtotal') }}</span>
                                        <span class="sale-create-summary-line__value" id="subtotal_display">0.00 {{ __('EGP') }}</span>
                                    </div>
                                    <div class="sale-create-summary-line">
                                        <span class="sale-create-summary-line__label">{{ __('dashboard.Total Discount') }}</span>
                                        <span class="sale-create-summary-line__value text-red-600 dark:text-red-400" id="discount_display">0.00 {{ __('EGP') }}</span>
                                    </div>
                                    <div class="sale-create-summary-line">
                                        <span class="sale-create-summary-line__label">{{ __('dashboard.Taxes') }}</span>
                                        <span class="sale-create-summary-line__value" id="taxes_display">0.00 {{ __('EGP') }}</span>
                                    </div>

                                    <div class="sale-create-summary-total">
                                        <span class="sale-create-summary-total__label">{{ __('dashboard.Total') }}</span>
                                        <span class="sale-create-summary-total__value" id="final_total_display">0.00 {{ __('EGP') }}</span>
                                    </div>

                                    <div class="sale-create-summary-field">
                                        <label class="ws-label">{{ __('dashboard.Invoice Discount') }}</label>
                                        <div class="app-input-group">
                                            <input type="number" step="0.01" name="discount" id="discount_input" class="app-input" value="0">
                                            <select name="discount_type" id="discount_type_select" class="app-input" style="max-width:80px">
                                                <option value="fixed">{{ __('Fixed') }}</option>
                                                <option value="percent">%</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="sale-create-summary-field">
                                        <label class="ws-label">{{ __('dashboard.Loyalty Points') }}</label>
                                        <div class="sale-create-loyalty-meta">
                                            <div class="sale-create-loyalty-meta__line">
                                                <span>{{ __('dashboard.Current Balance') }}</span>
                                                <strong id="customer_points_balance">0</strong>
                                            </div>
                                            <div class="sale-create-loyalty-meta__line">
                                                <span>{{ __('dashboard.Points Value') }}</span>
                                                <strong id="points_value_display">0.00 {{ __('EGP') }}</strong>
                                            </div>
                                        </div>
                                        <input type="number" name="loyalty_points" id="loyalty_points_input" class="app-input" value="0" min="0">
                                    </div>

                                    <div class="sale-create-summary-field">
                                        <label class="ws-label">{{ __('dashboard.Taxes') }}</label>
                                        <div class="sale-create-summary-choice-list">
                                            @foreach($taxes as $tax)
                                                <label class="sale-create-summary-choice" for="tax_{{ $tax->id }}">
                                                    <input class="app-checkbox tax-checkbox" type="checkbox" name="taxes[]" value="{{ $tax->id }}" id="tax_{{ $tax->id }}" data-rate="{{ $tax->rate }}" {{ $tax->is_default ? 'checked' : '' }}>
                                                    <span>
                                                        <span class="sale-create-summary-choice__label">{{ $tax->name }}</span>
                                                        <span class="sale-create-summary-choice__meta">{{ $tax->rate }}%</span>
                                                    </span>
                                                </label>
                                            @endforeach
                                        </div>
                                    </div>

                                    <div class="sale-create-summary-field">
                                        <label class="ws-label">{{ __('dashboard.Additional Expenses') }}</label>
                                        <div class="sale-create-summary-choice-list">
                                            @foreach($additionalExpenses as $expense)
                                                <label class="sale-create-summary-choice" for="expense_{{ $expense->id }}">
                                                    <input class="app-checkbox expense-checkbox" type="checkbox" name="additional_expenses[]" value="{{ $expense->id }}" id="expense_{{ $expense->id }}" data-amount="{{ $expense->amount }}" {{ $expense->is_default ? 'checked' : '' }}>
                                                    <span>
                                                        <span class="sale-create-summary-choice__label">{{ $expense->name }}</span>
                                                        <span class="sale-create-summary-choice__meta">{{ $expense->amount }}</span>
                                                    </span>
                                                </label>
                                            @endforeach
                                        </div>
                                    </div>

                                    <div class="sale-create-summary-field">
                                        <label class="ws-label">{{ __('dashboard.Shipping') }}</label>
                                        <div style="display:grid;gap:.75rem">
                                            <select name="shipping_type" id="shipping_type_select" class="app-input">
                                                <option value="pickup" {{ old('shipping_type') == 'pickup' ? 'selected' : '' }}>{{ __('dashboard.Pickup from store') }}</option>
                                                <option value="free" {{ old('shipping_type') == 'free' ? 'selected' : '' }}>{{ __('dashboard.Free Shipping') }}</option>
                                                <option value="paid" {{ old('shipping_type') == 'paid' ? 'selected' : '' }}>{{ __('dashboard.Paid Shipping') }}</option>
                                            </select>
                                            <input type="number" step="1" min="0" name="shipping_cost" id="shipping_cost_input" class="app-input" value="{{ old('shipping_cost', 0) }}" {{ old('shipping_type') === 'paid' ? '' : 'readonly' }}>
                                        </div>
                                    </div>

                                    <div class="sale-create-payment-grid">
                                        <div class="sale-create-summary-field">
                                            <label class="ws-label">{{ __('dashboard.Payment Status') }}</label>
                                            <select name="payment_status" class="app-input">
                                                <option value="paid">{{ __('dashboard.Paid') }}</option>
                                                <option value="partial">{{ __('dashboard.Partial') }}</option>
                                                <option value="unpaid">{{ __('dashboard.Unpaid') }}</option>
                                            </select>
                                        </div>
                                        <div class="sale-create-summary-field">
                                            <label class="ws-label">{{ __('dashboard.Method') }}</label>
                                            <select name="payment_method" class="app-input">
                                                <option value="cash">{{ __('dashboard.Cash') }}</option>
                                                <option value="card">{{ __('dashboard.Card') }}</option>
                                                <option value="bank">{{ __('dashboard.Bank') }}</option>
                                                <option value="instapay">{{ __('Instapay') }}</option>
                                                <option value="wallet">{{ __('Wallet') }}</option>
                                                <option value="none">{{ __('dashboard.None') }}</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="sale-create-summary-field">
                                        <label class="ws-label">{{ __('dashboard.Payment Reference') }}</label>
                                        <input type="text" name="payment_reference" class="app-input" value="{{ old('payment_reference') }}">
                                    </div>

                                <div class="sale-create-summary-actions">
                                    <button type="submit" class="app-btn app-btn--primary" id="submit_btn">
                                        <i class="fa-solid fa-check"></i>
                                        {{ __('dashboard.Add New Sale') }}
                                    </button>
                                    <a href="{{ $saleBackRoute }}" class="app-btn app-btn--secondary">
                                        <i class="fa-solid fa-xmark"></i>
                                        {{ __('dashboard.Cancel') }}
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <input type="hidden" name="sub_total" id="sub_total_hidden">
                <input type="hidden" name="final_total" id="final_total_hidden">
            </form>
        </div>
    </div>
</div>

<!-- Add Customer Modal -->
@endsection

@push('modals')
<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;transition:opacity .2s,transform .2s">
        <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') }} <span style="color:#dc2626">*</span></label>
                <input type="text" class="app-input" id="customer_name_modal">
            </div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem">
                <div>
                    <label class="ws-label">{{ __('dashboard.Phone') }} <span style="color:#dc2626">*</span></label>
                    <input type="text" class="app-input" id="customer_phone_modal">
                </div>
                <div>
                    <label class="ws-label">{{ __('dashboard.Gender') }}</label>
                    <select class="app-input" id="customer_gender_modal">
                        <option value="female">{{ __('dashboard.Female') }}</option>
                        <option value="male">{{ __('dashboard.Male') }}</option>
                    </select>
                </div>
            </div>
            <div>
                <label class="ws-label">{{ __('dashboard.Address') }}</label>
                <input type="text" class="app-input" id="customer_address_modal">
            </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.Cancel') }}</button>
                <button type="button" class="app-btn app-btn--primary" id="save_customer_btn">{{ __('dashboard.Save Customer') }}</button>
            </div>
        </div>
    </div>
</div>
@endpush

@section('scripts')
@include('dashboard.partials.customer-lookup-js')
<script>
document.addEventListener('alpine:init', () => {
    Alpine.data('saleCreateForm', () => ({
        productIndex: 0,
        currentProductResults: {},
        products: @json($posProducts),
        categories: @json($posCategories),
        selectedCategory: 'all',
        pointValue: {{ json_encode((float) ($loyaltyPointValue ?? 0.05)) }},
        productSearchUrl: '{{ route("dashboard.products.search") }}',
        productSearchType: 'sale',
        blankImage: '{{ asset('assets/media/svg/files/blank-image.svg') }}',

        init() {
            this.bindFormEvents();
            this.bindProductEvents();
            this.bindTotalEvents();
            this.syncShippingState();

            window.customerLookup?.init({
                pointValue: this.pointValue,
                onSelected: () => this.calculateTotals(),
                onCleared: () => this.calculateTotals(),
            });

            this.renderProductGrid(this.filteredProducts());
            this.calculateTotals();
        },

        qs(selector) {
            return this.$root.querySelector(selector);
        },

        qsa(selector) {
            return Array.from(this.$root.querySelectorAll(selector));
        },

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

        numberValue(selector) {
            return parseFloat(this.qs(selector)?.value) || 0;
        },

        formatMoney(value) {
            return `${Math.max(0, value).toFixed(2)} {{ __("EGP") }}`;
        },

        bindFormEvents() {
            this.$root.addEventListener('submit', (event) => {
                if (this.qsa('#products_table tbody tr').length > 0) {
                    return;
                }

                event.preventDefault();
                Swal.fire({
                    icon: 'warning',
                    title: '{{ __("dashboard.Your cart is empty") }}',
                    text: 'أضف منتجًا واحدًا على الأقل قبل حفظ البيع.',
                    confirmButtonText: '{{ __("dashboard.Ok, got it!") }}',
                });
            });
        },

        setText(selector, value) {
            const el = this.qs(selector);
            if (el) {
                el.textContent = value;
            }
        },

        setValue(selector, value) {
            const el = this.qs(selector);
            if (el) {
                el.value = value;
            }
        },

        async fetchJson(url) {
            const response = await fetch(url, { headers: { Accept: 'application/json' } });
            const data = await response.json().catch(() => ({}));
            if (!response.ok) {
                throw new Error(data.message || 'Request failed');
            }
            return data;
        },

        buildProductSearchUrl(params = {}) {
            const url = new URL(this.productSearchUrl, window.location.origin);
            Object.entries({ type: this.productSearchType, ...params }).forEach(([key, value]) => {
                url.searchParams.set(key, value);
            });
            return url.toString();
        },

        bindProductEvents() {
            const searchInput = this.qs('#global_product_search');
            const categoryTabs = this.qs('#pos_category_tabs');
            const productGrid = this.qs('#pos_product_grid');
            const productsTable = this.qs('#products_table tbody');

            searchInput?.addEventListener('input', (event) => {
                const keyword = event.target.value.trim();
                this.renderProductGrid(this.filteredProducts(keyword));
                this.searchProducts(keyword);
            });

            searchInput?.addEventListener('keydown', (event) => {
                if (event.key === 'Enter') {
                    event.preventDefault();
                    this.searchProducts(searchInput.value.trim());
                }
            });

            this.qs('#global_search_product_btn')?.addEventListener('click', () => {
                this.searchProducts(searchInput?.value.trim() || '');
            });

            this.qs('#add_product_by_sku_btn')?.addEventListener('click', () => {
                this.addProductBySku(searchInput?.value.trim() || '');
            });

            categoryTabs?.addEventListener('click', (event) => {
                const tab = event.target.closest('.sale-pos-category');
                if (!tab) {
                    return;
                }

                categoryTabs.querySelectorAll('.sale-pos-category').forEach((button) => button.classList.remove('is-active'));
                tab.classList.add('is-active');
                this.selectedCategory = tab.dataset.category || 'all';
                this.renderProductGrid(this.filteredProducts(searchInput?.value.trim() || ''));
            });

            productGrid?.addEventListener('click', (event) => {
                const item = event.target.closest('.sale-pos-product');
                if (!item) {
                    return;
                }

                const product = this.currentProductResults[item.dataset.id];
                if (product) {
                    this.addProductToTable(product);
                    this.clearProductSearch();
                }
            });

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

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

            productsTable?.addEventListener('input', (event) => {
                if (event.target.matches('.product-price, .product-quantity, .product-discount')) {
                    this.calculateTotals();
                }
            });
        },

        bindTotalEvents() {
            this.qsa('#discount_input, #discount_type_select, #shipping_cost_input, .tax-checkbox, .expense-checkbox, #loyalty_points_input').forEach((input) => {
                input.addEventListener('input', () => this.calculateTotals());
                input.addEventListener('change', () => this.calculateTotals());
            });

            this.qs('#shipping_type_select')?.addEventListener('change', () => {
                this.syncShippingState();
                this.calculateTotals();
            });
        },

        calculateTotals() {
            let productsGrossTotal = 0;
            let totalProductsDiscount = 0;
            const rows = this.qsa('#products_table tbody tr');

            rows.forEach((row) => {
                const price = parseFloat(row.querySelector('.product-price')?.value) || 0;
                const quantity = parseInt(row.querySelector('.product-quantity')?.value, 10) || 0;
                const lineDiscount = parseFloat(row.querySelector('.product-discount')?.value) || 0;
                const lineGross = price * quantity;

                productsGrossTotal += lineGross;
                totalProductsDiscount += lineDiscount;

                const lineTotal = row.querySelector('.row-line-total');
                if (lineTotal) {
                    lineTotal.textContent = Math.max(0, lineGross - lineDiscount).toFixed(2);
                }
            });

            const productsTable = this.qs('#products_table');
            const emptyCart = this.qs('#empty_cart_msg');
            if (productsTable) {
                productsTable.style.display = rows.length ? '' : 'none';
            }
            if (emptyCart) {
                emptyCart.style.display = rows.length ? 'none' : 'flex';
            }

            this.setText('#cart_count_display', rows.length);

            const subtotalAfterLineDiscounts = productsGrossTotal - totalProductsDiscount;
            const overallDiscountValue = this.numberValue('#discount_input');
            const overallDiscountType = this.qs('#discount_type_select')?.value;
            const overallDiscountAmount = overallDiscountType === 'percent'
                ? (subtotalAfterLineDiscounts * overallDiscountValue) / 100
                : overallDiscountValue;
            const baseForTaxes = Math.max(0, subtotalAfterLineDiscounts - overallDiscountAmount);

            let taxesCost = 0;
            this.qsa('.tax-checkbox:checked').forEach((input) => {
                taxesCost += (baseForTaxes * (parseFloat(input.dataset.rate) || 0)) / 100;
            });

            let expensesCost = 0;
            this.qsa('.expense-checkbox:checked').forEach((input) => {
                expensesCost += parseFloat(input.dataset.amount) || 0;
            });

            const shippingCost = this.qs('#shipping_type_select')?.value === 'paid'
                ? this.numberValue('#shipping_cost_input')
                : 0;
            const totalBeforeLoyalty = baseForTaxes + taxesCost + expensesCost + shippingCost;
            const loyaltyPoints = parseInt(this.qs('#loyalty_points_input')?.value, 10) || 0;
            const loyaltyDiscount = Math.min(loyaltyPoints * this.pointValue, Math.max(0, totalBeforeLoyalty));
            const finalTotal = Math.max(0, totalBeforeLoyalty - loyaltyDiscount);

            this.setText('#subtotal_display', this.formatMoney(productsGrossTotal));
            this.setText('#discount_display', this.formatMoney(totalProductsDiscount + overallDiscountAmount + loyaltyDiscount));
            this.setText('#taxes_display', this.formatMoney(taxesCost));
            this.setText('#final_total_display', this.formatMoney(finalTotal));
            this.setText('#points_value_display', `≈ ${loyaltyDiscount.toFixed(2)} {{ __("EGP") }}`);

            this.setValue('#sub_total_hidden', productsGrossTotal.toFixed(2));
            this.setValue('#final_total_hidden', finalTotal.toFixed(2));
        },

        syncShippingState() {
            const shippingType = this.qs('#shipping_type_select');
            const shippingCost = this.qs('#shipping_cost_input');
            const isPaidShipping = shippingType?.value === 'paid';

            if (shippingCost) {
                shippingCost.readOnly = !isPaidShipping;
                if (!isPaidShipping) {
                    shippingCost.value = 0;
                }
            }
        },

        imageUrl(product) {
            const image = String(product?.main_image || '').trim();
            if (!image) {
                return this.blankImage;
            }
            if (/^(https?:)?\/\//.test(image) || image.startsWith('/')) {
                return image;
            }
            return `/storage/${image.replace(/^storage\//, '')}`;
        },

        productMatchesCategory(product) {
            return this.selectedCategory === 'all'
                || String(product.product_category_id || '') === String(this.selectedCategory);
        },

        productMatchesKeyword(product, keyword = '') {
            const value = keyword.trim().toLowerCase();
            if (!value) {
                return true;
            }

            return [product.name, product.sku, product.id]
                .some((part) => String(part ?? '').toLowerCase().includes(value));
        },

        filteredProducts(keyword = '') {
            return this.products.filter((product) => (
                this.productMatchesCategory(product) && this.productMatchesKeyword(product, keyword)
            ));
        },

        renderProductGrid(products) {
            const grid = this.qs('#pos_product_grid');
            if (!grid) {
                return;
            }

            this.currentProductResults = {};

            if (!products.length) {
                grid.innerHTML = '<div class="sale-pos-empty">لا توجد منتجات مطابقة.</div>';
                return;
            }

            grid.innerHTML = products.map((product) => {
                this.currentProductResults[product.id] = product;
                const stock = Number(product.stock || 0);
                const stockLabel = stock > 0 ? `${stock}` : '0';

                return `
                    <button type="button" class="sale-pos-product" data-id="${this.escapeHtml(product.id)}">
                        <span class="sale-pos-product__image">
                            <img src="${this.escapeHtml(this.imageUrl(product))}" alt="${this.escapeHtml(product.name)}">
                        </span>
                        <span class="sale-pos-product__name">${this.escapeHtml(product.name)}</span>
                        <span class="sale-pos-product__meta">
                            <span>SKU: ${this.escapeHtml(product.sku || '-')}</span>
                            <span>${this.escapeHtml(stockLabel)}</span>
                        </span>
                        <span class="sale-pos-product__price">${this.escapeHtml(product.price)} {{ __("EGP") }}</span>
                    </button>`;
            }).join('');
        },

        addProductToTable(product) {
            const tbody = this.qs('#products_table tbody');
            if (!tbody) {
                return;
            }

            const existingRow = Array.from(tbody.querySelectorAll('tr[data-id]'))
                .find((row) => row.dataset.id === String(product.id));

            if (existingRow) {
                const quantityInput = existingRow.querySelector('.product-quantity');
                const currentQuantity = parseInt(quantityInput.value, 10) || 0;
                const stock = parseInt(product.stock, 10) || 0;
                if (stock > 0 && currentQuantity >= stock) {
                    Swal.fire({ icon: 'warning', text: 'الكمية المطلوبة أكبر من المخزون المتاح.' });
                    return;
                }

                quantityInput.value = currentQuantity + 1;
                this.calculateTotals();
                return;
            }

            const price = parseFloat(product.price) || 0;
            const stock = parseInt(product.stock, 10) || 0;
            if (stock <= 0) {
                Swal.fire({ icon: 'warning', text: 'هذا المنتج غير متوفر في المخزون.' });
                return;
            }
            const index = this.productIndex++;

            tbody.insertAdjacentHTML('beforeend', `
                <tr data-id="${this.escapeHtml(product.id)}">
                    <td>
                        <div class="sale-cart-item">
                            <span class="sale-cart-item__image">
                                <img src="${this.escapeHtml(this.imageUrl(product))}" alt="${this.escapeHtml(product.name)}">
                            </span>
                            <div style="min-width:0">
                                <span class="sale-cart-item__name">${this.escapeHtml(product.name)}</span>
                                <span class="sale-cart-item__meta">${price.toFixed(2)} {{ __("EGP") }}</span>
                                <input type="hidden" name="products[${index}][product_id]" value="${this.escapeHtml(product.id)}">
                                <input type="hidden" name="products[${index}][price]" class="product-price" value="${price.toFixed(2)}">
                                <input type="hidden" name="products[${index}][product_discount]" class="product-discount" value="0">
                            </div>
                        </div>
                    </td>
                    <td><input type="number" name="products[${index}][quantity]" class="app-input product-quantity" value="1" min="1" ${product.stock ? `max="${this.escapeHtml(product.stock)}"` : ''}></td>
                    <td class="sale-cart-line-total"><span class="row-line-total">${price.toFixed(2)}</span></td>
                    <td style="text-align:end">
                        <button type="button" class="app-btn app-btn--sm app-btn--danger remove-row">
                            <i class="fa-solid fa-trash"></i>
                        </button>
                    </td>
                </tr>`);

            this.calculateTotals();
        },

        clearProductSearch() {
            this.hideProductResults();
            this.setValue('#global_product_search', '');
            this.renderProductGrid(this.filteredProducts());
        },

        hideProductResults() {
            const results = this.qs('#global_search_results');
            if (results) {
                results.innerHTML = '';
                results.hidden = true;
                results.classList.remove('is-visible');
            }
        },

        async searchProducts(keyword) {
            if (keyword.length < 2) {
                this.renderProductGrid(this.filteredProducts(keyword));
                return;
            }

            try {
                const data = await this.fetchJson(this.buildProductSearchUrl({ keyword }));
                const products = Array.isArray(data) ? data.filter((product) => this.productMatchesCategory(product)) : [];
                this.renderProductGrid(products);
            } catch (error) {
                Swal.fire({ icon: 'error', title: '{{ __("dashboard.Error") }}', text: error.message || '{{ __("dashboard.An error occurred") }}' });
            }
        },

        async addProductBySku(sku) {
            if (!sku) {
                return;
            }

            try {
                const data = await this.fetchJson(this.buildProductSearchUrl({ keyword: sku }));
                const products = Array.isArray(data) ? data : [];
                const product = products.find((item) => String(item.sku) === String(sku) || String(item.id) === String(sku)) || products[0];

                if (product) {
                    this.addProductToTable(product);
                    this.clearProductSearch();
                    return;
                }

                Swal.fire({ icon: 'error', title: '{{ __("dashboard.Error") }}', text: '{{ __("dashboard.No product found with this SKU/ID") }}' });
            } catch (error) {
                Swal.fire({ icon: 'error', title: '{{ __("dashboard.Error") }}', text: error.message || '{{ __("dashboard.An error occurred") }}' });
            }
        },
    }));
});
</script>
@endsection