@extends('layouts.app')

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

@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.reservations.index') }}" class="text-slate-500 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400">{{ __('dashboard.Reservations') }}</a>
    </li>
    <li class="bc-item text-slate-500 dark:text-slate-400">{{ __('dashboard.Edit Reservation') }} #{{ $reservation->id }}</li>
@endsection

@section('content')
@include('layouts.partials.workspace-page-styles')
@include('dashboard.reservations.partials.customer-lookup-styles')
<style>
    .reservation-create-page { display: grid; gap: 1.5rem; }
    .reservation-create-page .workspace-hero {
        background:
            radial-gradient(circle at top left, rgba(13, 148, 136, 0.16), transparent 22%),
            radial-gradient(circle at bottom right, rgba(6, 182, 212, 0.14), transparent 28%),
            linear-gradient(135deg, #f7fffe 0%, #ecfeff 52%, #f8fbff 100%);
    }
    .reservation-create-page .workspace-hero__badge {
        color: #0f766e;
        box-shadow: inset 0 0 0 1px rgba(13, 148, 136, 0.10);
    }
    .reservation-create-form { display: grid; gap: 1.5rem; }
    .reservation-create-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.9fr); gap: 1.5rem; align-items: start; }
    .reservation-create-side { display: grid; gap: 1.5rem; position: sticky; top: 110px; }
    .reservation-create-actions {
        display: flex;
        justify-content: flex-end;
        gap: 0.75rem;
        flex-wrap: wrap;
    }

    .reservation-create-actions .app-btn {
        min-height: 52px;
        border-radius: 16px;
        padding-inline: 1.15rem;
        font-weight: 800;
    }

    .reservation-create-actions__cancel {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.55rem;
        border: 0;
        background: linear-gradient(135deg, #0f766e 0%, #06b6d4 100%);
        color: #fff;
        box-shadow: 0 14px 32px rgba(8, 145, 178, 0.24);
    }

    .reservation-create-actions__cancel:hover {
        background: linear-gradient(135deg, #115e59 0%, #0891b2 100%);
        color: #fff;
        box-shadow: 0 18px 36px rgba(8, 145, 178, 0.3);
    }

    .reservation-create-actions__submit {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.55rem;
        border: 0;
        background: linear-gradient(135deg, #0f766e 0%, #06b6d4 100%);
        box-shadow: 0 14px 32px rgba(8, 145, 178, 0.24);
    }

    .reservation-create-actions__submit:hover {
        background: linear-gradient(135deg, #115e59 0%, #0891b2 100%);
        box-shadow: 0 18px 36px rgba(8, 145, 178, 0.3);
    }

    .reservation-create-actions__submit i,
    .reservation-create-actions__cancel i {
        font-size: 0.95rem;
    }

    .reservation-create-overview {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .reservation-create-overview__card {
        min-height: 140px;
        padding: 1.2rem;
        border: 1px solid #e8eef6;
        border-radius: 24px;
        background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
        box-shadow: 0 16px 32px rgba(148, 163, 184, 0.12);
    }

    .reservation-create-overview__icon {
        width: 3rem;
        height: 3rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 18px;
        background: #cffafe;
        color: #0f766e;
        font-size: 1.05rem;
    }

    .reservation-create-overview__title {
        margin-top: 1rem;
        color: #0f172a;
        font-size: 0.92rem;
        font-weight: 900;
    }

    .reservation-create-overview__text {
        margin-top: 0.35rem;
        color: #64748b;
        font-size: 0.8rem;
        line-height: 1.8;
        font-weight: 700;
    }

    .reservation-create-form .app-card__header {
        position: relative;
    }

    .reservation-create-form .app-card__header::after {
        content: "";
        position: absolute;
        inset-inline-start: 1.5rem;
        bottom: 0;
        width: 58px;
        height: 3px;
        border-radius: 999px;
        background: linear-gradient(90deg, #0f766e 0%, #06b6d4 100%);
    }

    .reservation-create-form .app-card__title {
        display: flex;
        align-items: center;
        gap: 0.65rem;
    }

    .reservation-create-form .app-card__title::before {
        content: "";
        width: 0.8rem;
        height: 0.8rem;
        border-radius: 999px;
        background: #99f6e4;
        box-shadow: 0 0 0 6px rgba(13, 148, 136, 0.10);
        flex-shrink: 0;
    }

    .reservation-create-search-card {
        border: 1px solid #e8eef6;
        border-radius: 26px;
        background:
            radial-gradient(circle at top right, rgba(13, 148, 136, 0.10), transparent 20%),
            linear-gradient(180deg, #f7fffe 0%, #f8fbff 100%);
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.05);
        overflow: hidden;
    }

    .reservation-create-search-card__body {
        padding: 1.35rem 1.5rem 1.5rem;
    }

    #product_search_container,
    #customer_search_container {
        padding: 1.2rem;
        border: 1px solid #d9f2ef;
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.82);
        backdrop-filter: blur(10px);
    }

    #product_search_container .app-label,
    #customer_search_container .app-label {
        color: #0f172a;
        font-size: 0.9rem;
        font-weight: 900;
    }

    #product_search_results .app-card,
    #customer_search_results .app-card {
        border: 1px solid #e8eef6;
        border-radius: 22px;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    #product_search_results .app-card:hover,
    #customer_search_results .app-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 16px 34px rgba(15, 23, 42, 0.06);
    }

    #selected_product_details_container .app-card,
    #selected_customer_details_container .app-card {
        border-width: 1px;
        border-radius: 22px;
        overflow: hidden;
        box-shadow: 0 16px 34px rgba(15, 23, 42, 0.06);
    }

    #selected_product_details_container .app-card__header,
    #selected_customer_details_container .app-card__header {
        background: linear-gradient(180deg, #ecfeff 0%, #f8fbff 100%) !important;
    }

    .reservation-create-field {
        padding: 1rem;
        border: 1px solid #e8eef6;
        border-radius: 18px;
        background: #fbfdff;
        height: 100%;
    }

    .reservation-create-switch {
        padding: 1rem 1.1rem;
        border: 1px solid #e8eef6;
        border-radius: 18px;
        background: #fbfdff;
    }

    .reservation-first-wear-toggle {
        position: relative;
        margin-bottom: 1.75rem;
    }

    .reservation-first-wear-toggle__input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .reservation-first-wear-toggle__card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 1rem;
        align-items: center;
        padding: 1.15rem 1.2rem;
        border: 1px solid #dbe7f3;
        border-radius: 22px;
        background:
            radial-gradient(circle at top left, rgba(13, 148, 136, 0.08), transparent 24%),
            linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
        box-shadow: 0 14px 30px rgba(15, 23, 42, 0.05);
        cursor: pointer;
        transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease;
    }

    .reservation-first-wear-toggle__card:hover {
        transform: translateY(-2px);
        border-color: #99f6e4;
        box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
    }

    .reservation-first-wear-toggle__content {
        display: flex;
        align-items: flex-start;
        gap: 0.9rem;
        min-width: 0;
    }

    .reservation-first-wear-toggle__icon {
        width: 3rem;
        height: 3rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 18px;
        background: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%);
        color: #0f766e;
        font-size: 1.1rem;
        flex: 0 0 auto;
        box-shadow: inset 0 0 0 1px rgba(13, 148, 136, 0.08);
    }

    .reservation-first-wear-toggle__text {
        display: grid;
        gap: 0.3rem;
        min-width: 0;
    }

    .reservation-first-wear-toggle__title {
        color: #0f172a;
        font-size: 0.95rem;
        font-weight: 900;
        line-height: 1.5;
    }

    .reservation-first-wear-toggle__description {
        color: #64748b;
        font-size: 0.79rem;
        font-weight: 700;
        line-height: 1.8;
    }

    .reservation-first-wear-toggle__state {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        width: fit-content;
        padding: 0.3rem 0.6rem;
        border-radius: 999px;
        background: #f8fafc;
        color: #64748b;
        font-size: 0.72rem;
        font-weight: 900;
    }

    .reservation-first-wear-toggle__card.is-success .reservation-first-wear-toggle__state {
        background: #ccfbf1;
        color: #0f766e;
    }

    .reservation-first-wear-toggle__card.is-danger .reservation-first-wear-toggle__state {
        background: #fee2e2;
        color: #b91c1c;
    }

    .reservation-first-wear-toggle__card.is-warning .reservation-first-wear-toggle__state {
        background: #fef3c7;
        color: #a16207;
    }

    .reservation-first-wear-toggle__switch {
        position: relative;
        width: 68px;
        height: 38px;
        border-radius: 999px;
        background: #e2e8f0;
        box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.2);
        transition: background 0.2s ease, box-shadow 0.2s ease;
        flex: 0 0 auto;
    }

    .reservation-first-wear-toggle__switch::before {
        content: "";
        position: absolute;
        top: 4px;
        inset-inline-start: 4px;
        width: 30px;
        height: 30px;
        border-radius: 999px;
        background: #ffffff;
        box-shadow: 0 8px 14px rgba(15, 23, 42, 0.15);
        transition: transform 0.2s ease;
    }

    .reservation-first-wear-toggle__input:checked + .reservation-first-wear-toggle__card {
        border-color: #7dd3fc;
        background:
            radial-gradient(circle at top left, rgba(13, 148, 136, 0.14), transparent 24%),
            linear-gradient(180deg, #f2fffd 0%, #f8fbff 100%);
        box-shadow: 0 20px 38px rgba(13, 148, 136, 0.10);
    }

    .reservation-first-wear-toggle__input:checked + .reservation-first-wear-toggle__card .reservation-first-wear-toggle__icon {
        background: linear-gradient(135deg, #99f6e4 0%, #67e8f9 100%);
        color: #115e59;
    }

    .reservation-first-wear-toggle__input:checked + .reservation-first-wear-toggle__card .reservation-first-wear-toggle__state {
        background: #ccfbf1;
        color: #0f766e;
    }

    .reservation-first-wear-toggle__input:checked + .reservation-first-wear-toggle__card .reservation-first-wear-toggle__switch {
        background: linear-gradient(90deg, #14b8a6 0%, #06b6d4 100%);
        box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.12);
    }

    .reservation-first-wear-toggle__input:checked + .reservation-first-wear-toggle__card .reservation-first-wear-toggle__switch::before {
        transform: translateX(-30px);
    }

    @media (max-width: 767.98px) {
        .reservation-first-wear-toggle__card {
            grid-template-columns: minmax(0, 1fr);
        }

        .reservation-first-wear-toggle__switch {
            justify-self: flex-start;
        }
    }

    .reservation-create-advanced-toggle {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        min-height: 48px;
        border-radius: 14px;
        font-weight: 800;
        padding-inline: 1rem;
    }

    .reservation-create-options-title {
        margin-bottom: 1rem;
        color: #0f172a;
        font-size: 1rem;
        font-weight: 900;
    }

    .reservation-create-notes textarea {
        min-height: 110px;
        resize: vertical;
    }

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

    .reservation-create-search-grid .app-input,
    .reservation-create-search-grid .app-btn {
        min-height: 50px;
        border-radius: 14px;
    }

    .reservation-create-search-note {
        margin-top: 0.9rem;
        color: #64748b;
        font-size: 0.8rem;
        font-weight: 700;
    }

    .reservation-availability-panel {
        display: none;
        margin-top: 1rem;
        padding: 1rem 1.1rem;
        border: 1px solid #dbe7f3;
        border-radius: 20px;
        background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
        box-shadow: 0 14px 30px rgba(15, 23, 42, 0.05);
    }

    .reservation-availability-panel.is-visible {
        display: block;
    }

    .reservation-availability-panel__top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .reservation-availability-panel__title {
        color: #0f172a;
        font-size: 0.95rem;
        font-weight: 900;
        margin: 0 0 0.25rem;
    }

    .reservation-availability-panel__text {
        color: #64748b;
        font-size: 0.8rem;
        font-weight: 700;
        line-height: 1.8;
        margin: 0;
    }

    .reservation-availability-panel__badge {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        padding: 0.45rem 0.75rem;
        border-radius: 999px;
        font-size: 0.75rem;
        font-weight: 900;
        white-space: nowrap;
    }

    .reservation-availability-panel__meta {
        display: flex;
        flex-wrap: wrap;
        gap: 0.55rem;
        margin-top: 0.9rem;
    }

    .reservation-availability-panel__chip {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.4rem 0.65rem;
        border-radius: 999px;
        background: #f8fafc;
        color: #475569;
        font-size: 0.72rem;
        font-weight: 800;
    }

    .reservation-availability-panel--success {
        border-color: #b7efe5;
        background: linear-gradient(180deg, #f6fffc 0%, #ffffff 100%);
    }

    .reservation-availability-panel--success .reservation-availability-panel__badge {
        background: #ccfbf1;
        color: #0f766e;
    }

    .reservation-availability-panel--danger {
        border-color: #fecaca;
        background: linear-gradient(180deg, #fff7f7 0%, #ffffff 100%);
    }

    .reservation-availability-panel--danger .reservation-availability-panel__badge {
        background: #fee2e2;
        color: #b91c1c;
    }

    .reservation-availability-panel--warning {
        border-color: #fde68a;
        background: linear-gradient(180deg, #fffdf5 0%, #ffffff 100%);
    }

    .reservation-availability-panel--warning .reservation-availability-panel__badge {
        background: #fef3c7;
        color: #a16207;
    }

    #product_search_results { margin-top: 1.25rem; }

    .reservation-product-search-results-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 1rem;
    }

    .reservation-product-search-card {
        border: 1px solid #dbe7f3;
        border-radius: 26px;
        background:
            radial-gradient(circle at top left, rgba(13, 148, 136, 0.08), transparent 22%),
            linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
        box-shadow: 0 18px 34px rgba(15, 23, 42, 0.06);
        overflow: hidden;
        transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
        height: 100%;
    }

    .reservation-product-search-card:hover {
        transform: translateY(-4px);
        border-color: #99f6e4;
        box-shadow: 0 24px 40px rgba(15, 23, 42, 0.1);
    }

    .reservation-product-search-card__layout {
        display: grid;
        grid-template-columns: 128px minmax(0, 1fr);
        gap: 1rem;
        align-items: stretch;
        padding: 1rem;
    }

    .reservation-product-search-card__media {
        position: relative;
    }

    .reservation-product-search-card__image {
        width: 100%;
        height: 100%;
        min-height: 170px;
        object-fit: contain;
        border-radius: 18px;
        background: linear-gradient(180deg, #f8fafc 0%, #eef6ff 100%);
        cursor: pointer;
        padding: 0.85rem;
        border: 1px solid #e2e8f0;
    }

    .reservation-product-search-card__badge {
        position: absolute;
        top: 0.8rem;
        inset-inline-end: 0.8rem;
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.35rem 0.7rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.96);
        color: #0f766e;
        font-size: 0.72rem;
        font-weight: 900;
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
    }

    .reservation-product-search-card__body {
        display: grid;
        gap: 0.85rem;
        min-width: 0;
    }

    .reservation-product-search-card__name {
        color: #0f172a;
        font-size: 1rem;
        font-weight: 900;
        line-height: 1.7;
        margin: 0;
        min-height: 0;
        word-break: break-word;
    }

    .reservation-product-search-card__meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        flex-wrap: wrap;
    }

    .reservation-product-search-card__sku {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.38rem 0.65rem;
        border-radius: 999px;
        background: #eff6ff;
        color: #1d4ed8;
        font-size: 0.74rem;
        font-weight: 800;
        direction: ltr;
    }

    .reservation-product-search-card__price {
        color: #0f766e;
        font-size: 1rem;
        font-weight: 900;
        white-space: nowrap;
    }

    .reservation-product-search-card__details {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.6rem;
    }

    .reservation-product-search-card__detail {
        padding: 0.75rem 0.85rem;
        border: 1px solid #e8eef6;
        border-radius: 16px;
        background: #fbfdff;
    }

    .reservation-product-search-card__detail-label {
        display: block;
        margin-bottom: 0.25rem;
        color: #64748b;
        font-size: 0.72rem;
        font-weight: 800;
    }

    .reservation-product-search-card__detail-value {
        color: #0f172a;
        font-size: 0.82rem;
        font-weight: 900;
        line-height: 1.5;
        word-break: break-word;
    }

    .reservation-product-search-card__actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.65rem;
        margin-top: auto;
    }

    .reservation-product-search-card__actions .app-btn {
        min-height: 44px;
        border-radius: 14px;
        font-weight: 800;
    }

    .reservation-product-selected-card {
        border: 1px solid #cceee7;
        border-radius: 24px;
        background: linear-gradient(180deg, #ffffff 0%, #f5fffc 100%);
        box-shadow: 0 18px 36px rgba(15, 23, 42, 0.05);
        overflow: hidden;
    }

    .reservation-product-selected-card .app-card__header {
        background: linear-gradient(180deg, #ecfeff 0%, #f8fbff 100%) !important;
        border-bottom: 1px solid #d9f2ef;
    }

    .reservation-product-selected-card__layout {
        display: grid;
        grid-template-columns: 116px minmax(0, 1fr);
        gap: 1rem;
        align-items: center;
    }

    .reservation-product-selected-card__image {
        width: 100%;
        height: 138px;
        object-fit: contain;
        border-radius: 18px;
        padding: 0.75rem;
        background: linear-gradient(180deg, #f8fafc 0%, #eef6ff 100%);
        border: 1px solid #e2e8f0;
    }

    .reservation-product-selected-card__content {
        display: grid;
        gap: 0.8rem;
        min-width: 0;
    }

    .reservation-product-selected-card__name {
        margin: 0;
        color: #0f172a;
        font-size: 1.08rem;
        font-weight: 900;
        line-height: 1.6;
    }

    .reservation-product-selected-card__meta {
        display: flex;
        flex-wrap: wrap;
        gap: 0.55rem;
    }

    .reservation-product-selected-card__chip {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.45rem 0.7rem;
        border-radius: 999px;
        background: #ffffff;
        border: 1px solid #dbe7f3;
        color: #334155;
        font-size: 0.76rem;
        font-weight: 800;
    }

    .reservation-product-selected-card__chip--price {
        color: #0f766e;
        border-color: #b7efe5;
        background: #f0fdfa;
    }

    .reservation-create-summary-card {
        border: 1px solid #d9f2ef;
        border-radius: 26px;
        background: linear-gradient(180deg, #ffffff 0%, #f4fffd 100%);
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.05);
        overflow: hidden;
    }

    .reservation-create-summary-card__body { padding: 1.5rem; }

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

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

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

    .reservation-create-summary-total {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 1rem 1.1rem;
        margin: 1rem 0;
        border-radius: 20px;
        background: #ecfeff;
    }

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

    .reservation-create-summary-total__value {
        color: #0f766e;
        font-size: 1.5rem;
        font-weight: 900;
        line-height: 1;
    }

    .reservation-create-summary-field {
        padding: 1rem;
        border: 1px solid #e8eef6;
        border-radius: 18px;
        background: #fbfffe;
        margin-bottom: 1rem;
    }

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

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

    .reservation-create-summary-choice-list {
        display: grid;
        gap: 0.65rem;
    }

    .reservation-create-summary-choice {
        display: flex;
        align-items: flex-start;
        gap: 0.65rem;
        padding: 0.75rem 0.85rem;
        border: 1px solid #e8eef6;
        border-radius: 14px;
        background: #ffffff;
    }

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

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

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

    .reservation-create-summary-actions {
        display: grid;
        gap: 0.75rem;
        margin-top: 1.25rem;
    }

    .reservation-create-summary-actions .app-btn {
        min-height: 50px;
        border-radius: 14px;
        font-weight: 800;
    }

    .reservation-create-submit-btn.is-loading,
    .reservation-create-submit-btn:disabled {
        pointer-events: none;
        opacity: 0.85;
    }

    .reservation-create-customer-meta {
        padding: 0.95rem 1rem;
        border: 1px solid #d9f2ef;
        border-radius: 18px;
        background: linear-gradient(180deg, #f7fffe 0%, #ffffff 100%);
    }

    .reservation-create-stats-table {
        margin: 0;
        border-radius: 16px;
        overflow: hidden;
    }

    .reservation-create-stats-table td {
        padding: 0.75rem 0.85rem;
        font-size: 0.8rem;
        font-weight: 700;
        color: #475569;
    }

    .reservation-create-stats-table td:last-child {
        color: #0f172a;
        font-weight: 900;
        text-align: end;
    }

    .dark .reservation-create-page .workspace-hero {
        background:
            radial-gradient(circle at top left, rgba(13, 148, 136, 0.12), transparent 24%),
            radial-gradient(circle at bottom right, rgba(6, 182, 212, 0.14), transparent 30%),
            linear-gradient(135deg, #050505 0%, #090909 52%, #000000 100%);
    }

    .dark .reservation-create-page .workspace-hero__badge {
        color: #5eead4;
        box-shadow: inset 0 0 0 1px rgba(45, 212, 191, 0.16);
    }

    .dark .reservation-create-overview__card,
    .dark .reservation-create-search-card,
    .dark .reservation-create-field,
    .dark .reservation-create-switch,
    .dark .reservation-availability-panel,
    .dark .reservation-product-search-card,
    .dark .reservation-product-selected-card,
    .dark .reservation-create-summary-card,
    .dark .reservation-create-summary-field,
    .dark .reservation-create-summary-choice,
    .dark .reservation-create-customer-meta {
        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: 0 18px 40px rgba(0, 0, 0, 0.38);
    }

    .dark #product_search_container,
    .dark #customer_search_container,
    .dark .reservation-product-search-card__image,
    .dark .reservation-product-selected-card__image {
        border-color: rgba(148, 163, 184, 0.18);
        background: linear-gradient(180deg, rgba(8, 8, 8, 0.88) 0%, rgba(20, 20, 20, 0.94) 100%);
    }

    .dark .reservation-create-overview__title,
    .dark .reservation-create-options-title,
    .dark .reservation-availability-panel__title,
    .dark .reservation-product-search-card__name,
    .dark .reservation-product-search-card__detail-value,
    .dark .reservation-product-selected-card__name,
    .dark .reservation-create-summary-line__value,
    .dark .reservation-create-summary-total__label,
    .dark .reservation-create-summary-choice__label,
    .dark .reservation-create-stats-table td:last-child {
        color: #f8fafc;
    }

    .dark .reservation-create-overview__text,
    .dark .reservation-create-search-note,
    .dark .reservation-availability-panel__text,
    .dark .reservation-availability-panel__chip,
    .dark .reservation-product-search-card__detail-label,
    .dark .reservation-create-summary-line__label,
    .dark .reservation-create-summary-choice__meta,
    .dark .reservation-create-stats-table td {
        color: #94a3b8;
    }

    .dark .reservation-create-overview__icon,
    .dark .reservation-first-wear-toggle__icon {
        background: linear-gradient(135deg, rgba(13, 148, 136, 0.22) 0%, rgba(6, 182, 212, 0.18) 100%);
        color: #5eead4;
    }

    .dark .reservation-first-wear-toggle__card,
    .dark .reservation-first-wear-toggle__input:checked + .reservation-first-wear-toggle__card {
        border-color: rgba(148, 163, 184, 0.18);
        background:
            radial-gradient(circle at top left, rgba(13, 148, 136, 0.12), transparent 24%),
            linear-gradient(180deg, rgba(8, 8, 8, 0.94) 0%, rgba(18, 18, 18, 0.98) 100%);
        box-shadow: 0 18px 36px rgba(0, 0, 0, 0.4);
    }

    .dark .reservation-first-wear-toggle__title,
    .dark .reservation-first-wear-toggle__state,
    .dark .reservation-product-search-card__badge,
    .dark .reservation-product-selected-card__chip {
        color: #e2e8f0;
    }

    .dark .reservation-first-wear-toggle__description,
    .dark .reservation-product-selected-card__chip,
    .dark .reservation-product-search-card__badge,
    .dark .reservation-availability-panel__chip {
        background: rgba(20, 20, 20, 0.92);
        border-color: rgba(148, 163, 184, 0.14);
    }

    .dark .reservation-product-search-card__sku {
        background: rgba(30, 41, 59, 0.88);
        color: #93c5fd;
    }

    .dark .reservation-create-summary-total {
        background: rgba(15, 118, 110, 0.16);
    }

    .dark .reservation-create-summary-total__value,
    .dark .reservation-product-search-card__price,
    .dark .reservation-product-selected-card__chip--price {
        color: #5eead4;
    }

    .dark .reservation-create-actions__cancel,
    .dark .reservation-create-actions__submit {
        box-shadow: 0 14px 32px rgba(0, 0, 0, 0.46);
    }

    @media (max-width: 1199.98px) {
        .reservation-create-overview {
            grid-template-columns: minmax(0, 1fr);
        }

        .reservation-create-layout {
            grid-template-columns: minmax(0, 1fr);
        }

        .reservation-create-side { position: static; }
    }

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

        .reservation-product-search-card__layout,
        .reservation-product-selected-card__layout {
            grid-template-columns: minmax(0, 1fr);
        }

        .reservation-product-search-card__image {
            height: 220px;
        }
    }

    @media (max-width: 767.98px) {
        .reservation-product-search-results-list,
        .reservation-product-search-card__details,
        .reservation-product-search-card__actions {
            grid-template-columns: minmax(0, 1fr);
        }
    }
</style>
<div class="workspace-page reservation-create-page" x-data="reservationEditForm()" data-reservation-edit-root>
    <div class="workspace-shell">
        <div class="workspace-hero">
            <div class="workspace-hero__badge">
                <i class="fa-solid fa-pen"></i>
                {{ __('dashboard.Edit Reservation') }}
            </div>
            <h1 class="workspace-hero__title">{{ __('dashboard.Edit Reservation') }} #{{ $reservation->id }}</h1>
            <p class="workspace-hero__text">تحديث الحجز الحالي داخل نفس تجربة صفحة الإضافة مع الإبقاء على متطلبات الحالة والدفع الخاصة بالتعديل.</p>
        </div>
        <div class="workspace-body">
        <div class="reservation-create-overview">
            <article class="reservation-create-overview__card">
                <span class="reservation-create-overview__icon"><i class="fa-solid fa-box"></i></span>
                <div class="reservation-create-overview__title">مراجعة المنتج</div>
                <div class="reservation-create-overview__text">يمكنك الإبقاء على المنتج الحالي أو استبداله بالبحث بالاسم أو `SKU` مع فحص التوفر مباشرة.</div>
            </article>
            <article class="reservation-create-overview__card">
                <span class="reservation-create-overview__icon"><i class="fa-solid fa-address-card"></i></span>
                <div class="reservation-create-overview__title">تحديث بيانات العميل</div>
                <div class="reservation-create-overview__text">راجع العميل المرتبط بالحجز أو استبدله بعميل آخر دون مغادرة نفس الصفحة.</div>
            </article>
            <article class="reservation-create-overview__card">
                <span class="reservation-create-overview__icon"><i class="fa-solid fa-coins"></i></span>
                <div class="reservation-create-overview__title">الحالة والتسعير</div>
                <div class="reservation-create-overview__text">حدّث الحالة النهائية وراجع السعر والخصم والمدفوع مع الحفاظ على ضوابط التعديل الحالية.</div>
            </article>
        </div>

        <form
            action="{{ route('dashboard.reservations.update', $reservation->id) }}"
            method="POST"
            class="reservation-create-form"
            id="reservation_edit_form"
            data-user-is-full-admin="{{ auth()->user()->can('bypass admin pin') ? 1 : 0 }}"
            data-original-status="{{ $reservation->status }}"
            data-original-price="{{ number_format((float) old('final_total', $reservation->price), 2, '.', '') }}"
            data-original-base-price="{{ number_format((float) old('base_price', $reservation->price_before_discount ?? 0), 2, '.', '') }}"
            data-original-discount="{{ number_format((float) old('discount', $reservation->discount ?? 0), 2, '.', '') }}"
            data-original-discount-type="{{ old('discount_type', $reservation->discount_type) }}"
            data-original-shipping-type="{{ old('shipping_type', $reservation->shipping_type) }}"
            data-original-shipping-cost="{{ number_format((float) old('shipping_cost', $reservation->shipping_cost ?? 0), 2, '.', '') }}"
        >
            @csrf
            @method('PATCH')

            <div class="reservation-create-actions">
                <a href="{{ route('dashboard.reservations.index') }}" class="app-btn reservation-create-actions__cancel">
                    <span>إلغاء</span>
                </a>
                <button type="submit" class="app-btn app-btn--primary reservation-create-submit-btn reservation-create-actions__submit" id="submit_reservation_form_top" data-default-text="تحديث" data-loading-text="جارٍ التحديث...">
                    <span class="reservation-create-submit-btn__label">تحديث</span>
                </button>
            </div>

            <div class="reservation-create-layout">
                <div>
                    <div class="app-card app-card--flush mb-7">
                        <div class="app-card__header">
                            <h3 class="app-card__title">{{ __('dashboard.Update Status') }}</h3>
                        </div>
                        <div class="app-card__body pt-5">
                            <div class="app-grid">
                                <div class="md:col-span-4">
                                    <div class="reservation-create-field mb-0">
                                        <label class="required app-label">{{ __('dashboard.Status') }}</label>
                                        <select name="status" id="status_select" class="app-input app-select @error('status') app-input--invalid @enderror" required>
                                            <option value="ongoing" {{ old('status', $reservation->status) == 'ongoing' ? 'selected' : '' }}>{{ __('dashboard.ongoing') }}</option>
                                            <option value="fitting" {{ old('status', $reservation->status) == 'fitting' ? 'selected' : '' }}>{{ __('dashboard.fitting') }}</option>
                                            <option value="delivered" {{ old('status', $reservation->status) == 'delivered' ? 'selected' : '' }}>{{ __('dashboard.delivered') }}</option>
                                            <option value="pending" {{ old('status', $reservation->status) == 'pending' ? 'selected' : '' }}>{{ __('dashboard.pending') }}</option>
                                            <option value="canceled" {{ old('status', $reservation->status) == 'canceled' ? 'selected' : '' }}>{{ __('dashboard.canceled') }}</option>
                                            <option value="finished" {{ old('status', $reservation->status) == 'finished' ? 'selected' : '' }}>{{ __('dashboard.finished') }}</option>
                                        </select>
                                        @error('status')<div class="app-field-error">{{ $message }}</div>@enderror
                                    </div>
                                </div>
                                <div class="md:col-span-8">
                                    <div class="app-grid g-4">
                                        <div class="md:col-span-6">
                                            <div id="refund_section" class="reservation-create-field" style="display: none;">
                                                <label class="app-label">{{ __('dashboard.Refunded Amount') }}</label>
                                                <input type="number" name="refunded_amount" id="refunded_amount" class="app-input @error('refunded_amount') app-input--invalid @enderror" value="{{ old('refunded_amount', $reservation->status == 'canceled' ? $reservation->refunded_amount : 0) }}">
                                                @error('refunded_amount')<div class="app-field-error">{{ $message }}</div>@enderror
                                            </div>
                                        </div>
                                        <div class="md:col-span-6">
                                            <div id="final_payment_method_section" style="display: none;">
                                                <div class="app-grid g-4">
                                                    <div class="md:col-span-6">
                                                        <div class="reservation-create-field">
                                                            <label class="app-label">{{ __('dashboard.Final Payment Method') }}</label>
                                                            <select name="final_payment_method" id="final_payment_method" class="app-input">
                                                                <option value="none" {{ old('final_payment_method', $reservation->final_payment_method ?? 'none') == 'none' ? 'selected' : '' }}>{{ __('dashboard.None') }}</option>
                                                                <option value="cash" {{ old('final_payment_method', $reservation->final_payment_method) == 'cash' ? 'selected' : '' }}>{{ __('dashboard.Cash') }}</option>
                                                                <option value="card" {{ old('final_payment_method', $reservation->final_payment_method) == 'card' ? 'selected' : '' }}>{{ __('dashboard.Card') }}</option>
                                                                <option value="bank" {{ old('final_payment_method', $reservation->final_payment_method) == 'bank' ? 'selected' : '' }}>{{ __('dashboard.Bank') }}</option>
                                                                <option value="wallet" {{ old('final_payment_method', $reservation->final_payment_method) == 'wallet' ? 'selected' : '' }}>{{ __('dashboard.Wallet') }}</option>
                                                                <option value="instapay" {{ old('final_payment_method', $reservation->final_payment_method) == 'instapay' ? 'selected' : '' }}>{{ __('dashboard.Instapay') }}</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="md:col-span-6">
                                                        <div class="reservation-create-field">
                                                            <label class="app-label">{{ __('dashboard.Final Payment Reference') }}</label>
                                                            <input type="text" name="final_payment_reference" id="final_payment_reference" class="app-input" value="{{ old('final_payment_reference', $reservation->final_payment_reference) }}">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="reservation-create-search-card mb-7">
                        <div class="app-card__header">
                            <h3 class="app-card__title">{{ __('dashboard.Reservation Details') }}</h3>
                        </div>
                        <div class="reservation-create-search-card__body">
                            <div id="product_section">
                                <div id="product_search_container" style="display: {{ $reservation->product ? 'none' : 'block' }};">
                                    <label for="product_search" class="app-label text-base font-black">{{ __('dashboard.Product') }}</label>
                                    <div class="reservation-create-search-grid">
                                        <input type="text" id="product_search" class="app-input app-input--lg" placeholder="{{ __('dashboard.Enter product name or SKU') }}">
                                        <button type="button" class="app-btn app-btn--primary-soft" id="search_product_btn">
                                            <span id="product_search_spinner" class="app-spinner app-spinner--sm hidden" role="status" aria-hidden="true"></span>
                                            <i class="fa-solid fa-magnifying-glass me-2"></i>{{ __('dashboard.Search') }}
                                        </button>
                                        <button type="button" class="app-btn app-btn--success-soft" id="add_product_by_sku_btn">{{ __('dashboard.Add by SKU') }}</button>
                                    </div>
                                    <div class="reservation-create-search-note">ابحث عن المنتج أولًا ثم راجع حالة التوفر قبل تثبيت بيانات الحجز.</div>
                                </div>

                                <div id="selected_product_details_container" class="mt-5" style="display: {{ $reservation->product ? 'block' : 'none' }};">
                                    @if($reservation->product)
                                        <div class="app-card reservation-product-selected-card">
                                            <div class="app-card__header">
                                                <h3 class="app-card__title">{{ __('dashboard.Selected Product') }}</h3>
                                                <div class="app-card__toolbar">
                                                    <button type="button" class="app-btn app-btn--sm app-btn--warning" id="change_product_btn">
                                                        <i class="fa-solid fa-rotate-left"></i> {{ __('dashboard.Change Product') }}
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="app-card__body">
                                                <div class="reservation-product-selected-card__layout">
                                                    <img src="{{ asset('storage/' . $reservation->product->main_image) }}" alt="{{ $reservation->product->name }}" class="reservation-product-selected-card__image product-image-thumb" data-image="{{ asset('storage/' . $reservation->product->main_image) }}">
                                                    <div class="reservation-product-selected-card__content">
                                                        <h4 class="reservation-product-selected-card__name">{{ $reservation->product->name }}</h4>
                                                        <div class="reservation-product-selected-card__meta">
                                                            <span class="reservation-product-selected-card__chip">
                                                                <i class="fa-solid fa-barcode"></i>
                                                                {{ __('dashboard.SKU') }}: {{ $reservation->product->sku }}
                                                            </span>
                                                            <span class="reservation-product-selected-card__chip reservation-product-selected-card__chip--price">
                                                                <i class="fa-solid fa-money-bills"></i>
                                                                {{ $reservation->product->price }} {{ __('EGP') }}
                                                            </span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                </div>

                                <input type="hidden" name="product_id" id="product_id" value="{{ old('product_id', $reservation->product_id) }}">
                                <input type="hidden" name="product_sku" id="product_sku" value="{{ old('product_sku', $reservation->product->sku ?? '') }}">
                                <input type="hidden" name="product_category_id" id="product_category_id" value="{{ old('product_category_id', $reservation->product->product_category_id ?? '') }}">

                                <div id="product_search_count" class="mt-4"></div>
                                <div id="product_search_results" class="mt-2"></div>
                                <div id="product_availability_message" class="mt-2"></div>
                            </div>

                            <div class="reservation-first-wear-toggle mt-5">
                                <input type="checkbox" class="reservation-first-wear-toggle__input" name="is_first_time" id="is_first_time" value="1" @if(old('is_first_time', $reservation->is_first_time) == 1) checked @endif>
                                <label class="reservation-first-wear-toggle__card" for="is_first_time">
                                    <div class="reservation-first-wear-toggle__content">
                                        <span class="reservation-first-wear-toggle__icon">
                                            <i class="fa-solid fa-star"></i>
                                        </span>
                                        <span class="reservation-first-wear-toggle__text">
                                            <span class="reservation-first-wear-toggle__title">{{ __('dashboard.Is First Time?') }}</span>
                                            <span class="reservation-first-wear-toggle__description">فعّل هذا الخيار إذا كانت هذه أول لبسة للمنتج حتى يتم التحقق من التوفر وفق هذا الشرط.</span>
                                            <span class="reservation-first-wear-toggle__state" id="first_wear_state_text">خيار خاص بالتوفر</span>
                                        </span>
                                    </div>
                                    <span class="reservation-first-wear-toggle__switch" aria-hidden="true"></span>
                                </label>
                            </div>

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

                            <div class="app-grid">
                                <div class="md:col-span-6">
                                    <div class="reservation-create-field mb-7">
                                        <label class="required app-label">{{ __('dashboard.Event Date') }}</label>
                                        <input type="date" name="event_date" id="event_date" class="app-input @error('event_date') app-input--invalid @enderror" value="{{ old('event_date', $reservation->event_date ? $reservation->event_date->format('Y-m-d') : '') }}" required>
                                        @error('event_date')<div class="app-field-error">{{ $message }}</div>@enderror
                                    </div>
                                </div>
                                <div class="md:col-span-6">
                                    <div class="reservation-create-field mb-7">
                                        <label class="app-label">{{ __('dashboard.Fitting Date') }}</label>
                                        <input type="date" name="fitting_date" id="fitting_date" class="app-input @error('fitting_date') app-input--invalid @enderror" value="{{ old('fitting_date', $reservation->fitting_date ? $reservation->fitting_date->format('Y-m-d') : '') }}">
                                        @error('fitting_date')<div class="app-field-error">{{ $message }}</div>@enderror
                                    </div>
                                </div>
                            </div>

                            <div class="app-grid">
                                <div class="md:col-span-6">
                                    <div class="reservation-create-field mb-7">
                                        <label class="required app-label">{{ __('dashboard.Customer Pickup Date') }}</label>
                                        <input type="date" name="customer_pickup_date" id="customer_pickup_date" class="app-input @error('customer_pickup_date') app-input--invalid @enderror" value="{{ old('customer_pickup_date', $reservation->customer_pickup_date ? $reservation->customer_pickup_date->format('Y-m-d') : '') }}" required>
                                        @error('customer_pickup_date')<div class="app-field-error">{{ $message }}</div>@enderror
                                    </div>
                                </div>
                                <div class="md:col-span-6">
                                    <div class="reservation-create-field mb-7">
                                        <label class="required app-label">{{ __('dashboard.Customer Return Date') }}</label>
                                        <input type="date" name="customer_return_date" id="customer_return_date" class="app-input @error('customer_return_date') app-input--invalid @enderror" value="{{ old('customer_return_date', $reservation->customer_return_date ? $reservation->customer_return_date->format('Y-m-d') : '') }}" required>
                                        @error('customer_return_date')<div class="app-field-error">{{ $message }}</div>@enderror
                                    </div>
                                </div>
                            </div>

                            <div id="reservation_schedule_availability" class="reservation-availability-panel"></div>

                        </div>
                    </div>

                    <div class="app-card app-card--flush mb-7">
                        <div class="app-card__header"><h3 class="app-card__title">{{ __('dashboard.Reservation Options') }}</h3></div>
                        <div class="app-card__body pt-5">
                            <div id="reservation_options_container" class="app-grid"></div>
                        </div>
                    </div>

                    <div class="app-card app-card--flush">
                        <div class="app-card__header"><h3 class="app-card__title">{{ __('dashboard.Notes') }}</h3></div>
                        <div class="app-card__body pt-5">
                            <div class="reservation-create-notes"><textarea name="notes" class="app-input">{{ old('notes', $reservation->notes) }}</textarea></div>
                        </div>
                    </div>
                </div>

                <div class="reservation-create-side">
                    <div class="app-card app-card--flush reservation-customer-panel">
                        <div class="app-card__header">
                            <h3 class="app-card__title"><i class="fa-solid fa-address-card"></i>{{ __('dashboard.Customer Details') }}</h3>
                            <div class="app-card__toolbar">
                                <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>
                        <div class="app-card__body pt-0">
                            <div id="customer_search_container" class="reservation-customer-search-box" style="display: {{ $reservation->customer ? 'none' : 'block' }};">
                                <label for="customer_search" class="app-label">{{ __('dashboard.Search for a customer') }}</label>
                                <div class="reservation-customer-search-box__hint">ابحث بالاسم أو رقم الهاتف للوصول السريع إلى سجل العميل وربطه بالحجز الحالي.</div>
                                <div class="reservation-customer-search-grid">
                                    <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--primary-soft" 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 me-2"></i>{{ __('dashboard.Search') }}
                                    </button>
                                </div>
                            </div>

                            <div id="selected_customer_details_container" class="mt-5" style="display: {{ $reservation->customer ? 'block' : 'none' }};">
                                <div class="app-card reservation-customer-selected-card">
                                    <div class="app-card__header">
                                        <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">
                                                @if($reservation->customer)
                                                    <div class="reservation-customer-selected-card__identity">
                                                        <h4 class="reservation-customer-selected-card__name">{{ $reservation->customer->name }}</h4>
                                                        <div class="reservation-customer-selected-card__line"><i class="fa-solid fa-phone"></i><span>{{ $reservation->customer->phone ?: '-' }}</span></div>
                                                        <div class="reservation-customer-selected-card__line"><i class="fa-solid fa-phone"></i><span>{{ $reservation->customer->other_phone ?: '-' }}</span></div>
                                                        <div class="reservation-customer-selected-card__line"><i class="fa-solid fa-map"></i><span>{{ $reservation->customer->governorate ?: '-' }}</span></div>
                                                        <div class="reservation-customer-selected-card__line"><i class="fa-solid fa-location-dot"></i><span>{{ $reservation->customer->address ?: '-' }}</span></div>
                                                    </div>
                                                @endif
                                            </div>
                                            <div class="md:col-span-6" id="selected_customer_stats">
                                                @if($reservation->customer)
                                                    <table class="app-table app-table--bordered app-table--striped reservation-customer-stats-table">
                                                        <tbody>
                                                            <tr><td>{{__('dashboard.Reservations')}}</td><td>{{ $reservation->customer->reservations_count ?? 0 }}</td></tr>
                                                            <tr><td>{{__('dashboard.Net Reservations Value')}}</td><td>{{ $reservation->customer->net_reservations_value ?? 0 }}</td></tr>
                                                            <tr><td>{{__('dashboard.Canceled Reservations')}}</td><td>{{ $reservation->customer->canceled_reservations_count ?? 0 }}</td></tr>
                                                            <tr><td>{{__('dashboard.Sales')}}</td><td>{{ $reservation->customer->sales_count ?? 0 }}</td></tr>
                                                            <tr><td>{{__('dashboard.Net Sales Value')}}</td><td>{{ $reservation->customer->net_sales_value ?? 0 }}</td></tr>
                                                            <tr><td>{{__('dashboard.Returned Sales')}}</td><td>{{ $reservation->customer->returned_sales_count ?? 0 }}</td></tr>
                                                        </tbody>
                                                    </table>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <input type="hidden" name="customer_id" id="customer_id" value="{{ old('customer_id', $reservation->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 class="reservation-create-summary-card">
                        <div class="reservation-create-summary-card__body">
                            <div class="reservation-create-summary-line">
                                <span class="reservation-create-summary-line__label">{{ __('dashboard.Base Price') }}</span>
                                <span class="reservation-create-summary-line__value" id="base_price_preview">0.00</span>
                            </div>
                            <div class="reservation-create-summary-line">
                                <span class="reservation-create-summary-line__label">{{ __('dashboard.Discount') }}</span>
                                <span class="reservation-create-summary-line__value" id="discount_preview">0.00</span>
                            </div>
                            <div class="reservation-create-summary-line">
                                <span class="reservation-create-summary-line__label">إجمالي المدفوع</span>
                                <span class="reservation-create-summary-line__value" id="deposit_preview">{{ number_format((float) old('deposit', $reservation->paid_amount), 2, '.', '') }}</span>
                            </div>
                            <div class="reservation-create-summary-total">
                                <span class="reservation-create-summary-total__label">{{ __('dashboard.Final Total') }}</span>
                                <span class="reservation-create-summary-total__value" id="final_total_preview">0.00</span>
                            </div>

                            <div class="reservation-create-summary-field">
                                <label class="app-label">{{ __('dashboard.Base Price') }}</label>
                                <input type="text" name="base_price" id="base_price" class="app-input" value="{{ old('base_price', $reservation->price_before_discount ?? 0) }}">
                            </div>
                            <div class="reservation-create-summary-field">
                                <label class="app-label">{{ __('dashboard.Discount') }}</label>
                                <div class="app-input-group"><input type="number" name="discount" id="discount_input" class="app-input" value="{{ old('discount', $reservation->discount ?? 0) }}"><select name="discount_type" id="discount_type_select" class="app-input app-select"><option value="fixed" {{ old('discount_type', $reservation->discount_type) == 'fixed' ? 'selected' : '' }}>{{ __('dashboard.Fixed') }}</option><option value="percent" {{ old('discount_type', $reservation->discount_type) == 'percent' ? 'selected' : '' }}>{{ __('dashboard.Percent') }}</option></select></div>
                            </div>
                            <div class="reservation-create-summary-field">
                                <label class="app-label">{{ __('dashboard.Taxes') }}</label>
                                <div class="reservation-create-summary-choice-list">
                                    @foreach($taxes as $tax)
                                        <label class="reservation-create-summary-choice" for="tax_{{ $tax->id }}">
                                            <input class="app-check__input" type="checkbox" name="taxes[]" value="{{ $tax->id }}" id="tax_{{ $tax->id }}" data-rate="{{ $tax->rate }}" {{ in_array($tax->id, old('taxes', $reservation->taxes->pluck('id')->all())) ? 'checked' : '' }}>
                                            <span>
                                                <span class="reservation-create-summary-choice__label">{{ $tax->name }}</span>
                                                <span class="reservation-create-summary-choice__meta">{{ $tax->rate }}%</span>
                                            </span>
                                        </label>
                                    @endforeach
                                </div>
                            </div>
                            <div class="reservation-create-summary-field">
                                <label class="app-label">{{ __('dashboard.Additional Expenses') }}</label>
                                <div class="reservation-create-summary-choice-list">
                                    @foreach($additionalExpenses as $expense)
                                        <label class="reservation-create-summary-choice" for="expense_{{ $expense->id }}">
                                            <input class="app-check__input" type="checkbox" name="additional_expenses[]" value="{{ $expense->id }}" id="expense_{{ $expense->id }}" data-amount="{{ $expense->amount }}" {{ in_array($expense->id, old('additional_expenses', $reservation->additionalExpenses->pluck('id')->all())) ? 'checked' : '' }}>
                                            <span>
                                                <span class="reservation-create-summary-choice__label">{{ $expense->name }}</span>
                                                <span class="reservation-create-summary-choice__meta">{{ $expense->amount }}</span>
                                            </span>
                                        </label>
                                    @endforeach
                                </div>
                            </div>
                            <div class="reservation-create-summary-field">
                                <label class="app-label">{{ __('dashboard.Shipping') }}</label>
                                <div class="grid gap-3">
                                    <select name="shipping_type" id="shipping_type_select" class="app-input app-select">
                                        <option value="pickup" {{ old('shipping_type', $reservation->shipping_type) == 'pickup' ? 'selected' : '' }}>{{ __('dashboard.Pickup from store') }}</option>
                                        <option value="free" {{ old('shipping_type', $reservation->shipping_type) == 'free' ? 'selected' : '' }}>{{ __('dashboard.Free Shipping') }}</option>
                                        <option value="paid" {{ old('shipping_type', $reservation->shipping_type) == 'paid' ? 'selected' : '' }}>{{ __('dashboard.Paid Shipping') }}</option>
                                    </select>
                                    <input type="number" name="shipping_cost" id="shipping_cost_input" class="app-input" value="{{ old('shipping_cost', $reservation->shipping_cost ?? 0) }}" placeholder="{{ __('dashboard.Shipping Cost') }}" step="1" min="0" {{ old('shipping_type', $reservation->shipping_type) === 'paid' ? '' : 'readonly' }}>
                                </div>
                            </div>
                            <div class="reservation-create-summary-field">
                                <label class="app-label">إجمالي المدفوع</label>
                                <input type="text" name="deposit" id="deposit" class="app-input @error('deposit') app-input--invalid @enderror" value="{{ old('deposit', $reservation->paid_amount) }}" readonly>
                                @error('deposit')<div class="app-field-error">{{ $message }}</div>@enderror
                                <div class="text-xs text-slate-500 dark:text-slate-400">إضافة الدفعات الجديدة تتم من صفحة تفاصيل الحجز حتى يتم إصدار فاتورة لكل دفعة.</div>
                            </div>
                            <div class="reservation-create-summary-field">
                                <label class="app-label">{{ __('dashboard.Remaining Amount') }}</label>
                                <input type="text" style="background-color: var(--surface-100); color: var(--text-primary);" name="remaining_amount" id="remaining_amount" class="app-input" value="0" readonly disabled>
                            </div>
                            <div class="reservation-create-summary-field">
                                <label class="app-label">{{ __('dashboard.Payment Status') }}</label>
                                <input type="hidden" name="payment_status" id="payment_status" value="{{ old('payment_status', $reservation->payment_status) }}">
                                <input type="text" id="payment_status_display" class="app-input" value="{{ old('payment_status', $reservation->payment_status) === 'paid' ? __('dashboard.Paid') : (old('payment_status', $reservation->payment_status) === 'partial' ? __('dashboard.Partial') : __('dashboard.Unpaid')) }}" readonly style="background-color: var(--surface-100); color: var(--text-primary);">
                                <div class="text-xs text-slate-500 dark:text-slate-400">تتحدد حالة الدفع تلقائياً حسب قيمة العربون مقارنة بإجمالي الحجز.</div>
                            </div>
                            <div class="reservation-create-summary-field">
                                <label class="app-label">{{ __('dashboard.Payment Method') }}</label>
                                <select name="payment_method" class="app-input"><option value="none"   {{ old('payment_method', $reservation->payment_method) == 'none'   ? 'selected' : '' }}>{{ __('dashboard.None') }}</option><option value="cash"   {{ old('payment_method', $reservation->payment_method) == 'cash'   ? 'selected' : '' }}>{{ __('dashboard.Cash') }}</option><option value="card"   {{ old('payment_method', $reservation->payment_method) == 'card'   ? 'selected' : '' }}>{{ __('dashboard.Card') }}</option><option value="bank"   {{ old('payment_method', $reservation->payment_method) == 'bank'   ? 'selected' : '' }}>{{ __('dashboard.Bank') }}</option><option value="wallet" {{ old('payment_method', $reservation->payment_method) == 'wallet' ? 'selected' : '' }}>{{ __('dashboard.Wallet') }}</option><option value="instapay" {{ old('payment_method', $reservation->payment_method) == 'instapay' ? 'selected' : '' }}>{{ __('dashboard.Instapay') }}</option></select>
                            </div>
                            <div class="reservation-create-summary-field">
                                <label class="app-label">{{ __('dashboard.Payment Reference') }}</label>
                                <input type="text" name="payment_reference" class="app-input" value="{{ old('payment_reference', $reservation->payment_reference) }}">
                            </div>

                            @can('change reservation creator')
                            <div class="reservation-create-summary-field">
                                <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 }}" @selected(old('created_by', $reservation->created_by) == $adminUser->id)>{{ $adminUser->name }} (ID: {{ $adminUser->id }})</option>
                                    @endforeach
                                </select>
                            </div>
                            @endcan

                            <input type="hidden" name="total_taxes" id="total_taxes">
                            <input type="hidden" name="total_additional_expenses" id="total_additional_expenses">
                            <input type="hidden" name="shipping_cost_amount" id="shipping_cost_amount">
                            <input type="hidden" name="discount_amount" id="discount_amount">
                            <input type="hidden" name="final_total" id="final_total">
                            <input type="hidden" name="admin_pin_token" id="admin_pin_token" value="{{ old('admin_pin_token') }}">

                            <div class="reservation-create-summary-actions">
                                <button type="submit" class="app-btn app-btn--primary reservation-create-submit-btn reservation-create-actions__submit" id="submit_reservation_form_bottom" data-default-text="تحديث" data-loading-text="جارٍ التحديث..."><span class="reservation-create-submit-btn__label">تحديث</span></button>
                                <a href="{{ route('dashboard.reservations.index') }}" class="app-btn reservation-create-actions__cancel">إلغاء</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</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" name="customer_name"></div>
            <div><label class="ws-label">{{ __('dashboard.Gender') }}</label><select class="app-input" id="gender" name="gender" required><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" name="phone"></div>
            <div><label class="ws-label">{{ __('dashboard.Other Phone') }}</label><input type="text" class="app-input" id="other_phone" name="other_phone"></div>
            <div><label class="ws-label">{{ __('dashboard.Governorate') }}</label><input type="text" class="app-input" id="customer_governorate" name="customer_governorate"></div>
            <div><label class="ws-label">{{ __('dashboard.Address') }}</label><input type="text" class="app-input" id="customer_address" name="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>

<div class="custom-modal" id="productImageModal" style="display:none;position:fixed;inset:0;z-index:1050;align-items:center;justify-content:center;background:rgba(15,23,42,.7);backdrop-filter:blur(4px)">
    <div style="background:var(--bg-card);border-radius:var(--radius-xl);box-shadow:var(--shadow-modal);max-width:480px;width:100%;margin:1rem;overflow:hidden">
        <div style="display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid var(--border)">
            <span style="font-weight:800;color:var(--text-primary)">{{ __('dashboard.Product Image') }}</span>
            <button type="button" class="hdr-btn" data-modal-close><i class="fa-solid fa-xmark"></i></button>
        </div>
        <div style="padding:1.25rem;text-align:center">
            <img id="modalImage" src="" alt="" style="max-width:100%;border-radius:var(--radius-lg)"/>
        </div>
    </div>
</div>

<div class="custom-modal" id="adminPinModal" 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:440px;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)">تأكيد كلمة مرور الإدارة</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 style="display:flex;align-items:flex-start;gap:.75rem;padding:.75rem 1rem;border-radius:12px;background:#fffbeb;border:1px solid #fde68a;color:#92400e;font-size:.85rem;font-weight:700">
                <i class="fa-solid fa-shield" style="margin-top:.1rem"></i>
                <span>هذه العملية تتطلب إدخال Admin PIN لأنها تتضمن إلغاء الحجز أو تعديل السعر.</span>
            </div>
            <div>
                <label class="ws-label">Admin PIN</label>
                <input type="password" class="app-input" id="admin_pin_input" autocomplete="off" inputmode="numeric">
                <div class="app-field-error" id="admin_pin_error"></div>
            </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="confirm_admin_pin_btn">
                    <span class="indicator-label">تأكيد</span>
                    <span class="app-indicator-progress hidden">جار التحقق...</span>
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    var previouslySelectedOptions = @json($selectedOptionsMap ?? []);
</script>
<script>
(function () {
    function initReservationEditPage() {
        let currentProductResults = {};
        let currentCustomerResults = {};
        let isSubmittingReservation = false;

        const csrfToken = '{{ csrf_token() }}';
        const reservationId = {{ $reservation->id }};
        const routes = {
            verifyAdminPin: '{{ route("dashboard.reservations.verify-admin-pin") }}',
            productSearch: '{{ route("dashboard.products.search") }}',
            findProductBySku: '{{ route("dashboard.reservations.findProductBySKU") }}',
            customerSearch: '{{ route("dashboard.customers.search") }}',
            customerStore: '{{ route("dashboard.customers.storeAjax") }}',
            reservationOptions: '{{ route("dashboard.reservations.getOptions") }}',
            checkAvailability: '{{ route("dashboard.reservations.checkAvailability") }}',
            productsBase: '{{ url("dashboard/products") }}',
            customersBase: '{{ url("dashboard/customers") }}',
        };

        const byId = (id) => document.getElementById(id);
        const all = (selector, root = document) => Array.from(root.querySelectorAll(selector));
        const valueOf = (element) => element ? element.value : '';
        const setValue = (element, value) => { if (element) element.value = value; };
        const setText = (element, value) => { if (element) element.textContent = value; };
        const setHtml = (element, value) => { if (element) element.innerHTML = value; };
        const showBlock = (element) => { if (element) element.style.display = 'block'; };
        const hideElement = (element) => { if (element) element.style.display = 'none'; };

        const reservationForm = byId('reservation_edit_form');
        const submitButtons = all('.reservation-create-submit-btn');
        const statusSelect = byId('status_select');
        const refundSection = byId('refund_section');
        const refundedAmount = byId('refunded_amount');
        const finalPaymentMethodSection = byId('final_payment_method_section');
        const finalPaymentMethod = byId('final_payment_method');
        const finalPaymentReference = byId('final_payment_reference');
        const adminPinInput = byId('admin_pin_input');
        const adminPinError = byId('admin_pin_error');
        const adminPinToken = byId('admin_pin_token');
        const confirmAdminPinBtn = byId('confirm_admin_pin_btn');
        const productIdInput = byId('product_id');
        const productSkuInput = byId('product_sku');
        const productCategoryIdInput = byId('product_category_id');
        const selectedProductDetailsContainer = byId('selected_product_details_container');
        const productSearchContainer = byId('product_search_container');
        const productSearchResults = byId('product_search_results');
        const productSearchCount = byId('product_search_count');
        const productSearchInput = byId('product_search');
        const productSearchSpinner = byId('product_search_spinner');
        const searchProductBtn = byId('search_product_btn');
        const addProductBySkuBtn = byId('add_product_by_sku_btn');
        const customerIdInput = byId('customer_id');
        const selectedCustomerDetailsContainer = byId('selected_customer_details_container');
        const selectedCustomerInfo = byId('selected_customer_info');
        const selectedCustomerStats = byId('selected_customer_stats');
        const customerSearchContainer = byId('customer_search_container');
        const customerSearchResults = byId('customer_search_results');
        const customerSearchCount = byId('customer_search_count');
        const customerSearchInput = byId('customer_search');
        const customerSearchSpinner = byId('customer_search_spinner');
        const searchCustomerBtn = byId('search_customer_btn');
        const saveCustomerBtn = byId('save_customer_btn');
        const reservationOptionsContainer = byId('reservation_options_container');
        const firstWearCard = document.querySelector('.reservation-first-wear-toggle__card');
        const firstWearText = byId('first_wear_state_text');
        const isFirstTimeInput = byId('is_first_time');
        const eventDateInput = byId('event_date');
        const fittingDateInput = byId('fitting_date');
        const customerPickupDateInput = byId('customer_pickup_date');
        const customerReturnDateInput = byId('customer_return_date');
        const basePriceInput = byId('base_price');
        const discountInput = byId('discount_input');
        const discountTypeSelect = byId('discount_type_select');
        const depositInput = byId('deposit');
        const shippingTypeSelect = byId('shipping_type_select');
        const shippingCostInput = byId('shipping_cost_input');
        const discountAmountInput = byId('discount_amount');
        const totalTaxesInput = byId('total_taxes');
        const totalAdditionalExpensesInput = byId('total_additional_expenses');
        const shippingCostAmountInput = byId('shipping_cost_amount');
        const finalTotalInput = byId('final_total');
        const remainingAmountInput = byId('remaining_amount');
        const paymentStatusInput = byId('payment_status');
        const paymentStatusDisplayInput = byId('payment_status_display');
        const basePricePreview = byId('base_price_preview');
        const discountPreview = byId('discount_preview');
        const depositPreview = byId('deposit_preview');
        const finalTotalPreview = byId('final_total_preview');
        const modalImage = byId('modalImage');
        const productImageModal = byId('productImageModal');

        const adminPinModal = {
            show: () => openModal('adminPinModal'),
            hide: () => closeModal('adminPinModal'),
        };

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

        function storageUrl(path) {
            return path ? `/storage/${path}` : '';
        }

        function buildUrl(url, params = {}) {
            const searchParams = new URLSearchParams();
            Object.entries(params).forEach(([key, value]) => {
                if (value !== undefined && value !== null) {
                    searchParams.append(key, value);
                }
            });

            const query = searchParams.toString();
            return query ? `${url}${url.includes('?') ? '&' : '?'}${query}` : url;
        }

        async function fetchJson(url, options = {}) {
            const response = await fetch(url, {
                credentials: 'same-origin',
                ...options,
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                    ...(options.headers || {}),
                },
            });

            const text = await response.text();
            let data = {};
            if (text) {
                try {
                    data = JSON.parse(text);
                } catch (error) {
                    data = { message: text };
                }
            }

            if (!response.ok) {
                const error = new Error(data.message || '{{ __("dashboard.An error occurred") }}');
                error.data = data;
                error.response = response;
                throw error;
            }

            return data;
        }

        function getJson(url, params = {}) {
            return fetchJson(buildUrl(url, params));
        }

        function postJson(url, data = {}) {
            return fetchJson(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken,
                },
                body: JSON.stringify(data),
            });
        }

        function setReservationSubmittingState(isSubmitting) {
            isSubmittingReservation = isSubmitting;
            submitButtons.forEach((button) => {
                const buttonLabel = button.querySelector('.reservation-create-submit-btn__label');
                const defaultText = button.dataset.defaultText || '';
                const loadingText = button.dataset.loadingText || defaultText;

                button.disabled = isSubmitting;
                button.classList.toggle('is-loading', isSubmitting);
                if (buttonLabel) {
                    setText(buttonLabel, isSubmitting ? loadingText : defaultText);
                } else {
                    setText(button, isSubmitting ? loadingText : defaultText);
                }
            });
        }

        function showReservationFormError(message) {
            Swal.fire({
                icon: 'error',
                title: '{{ __("dashboard.Error") }}',
                text: message,
                confirmButtonText: '{{ __("dashboard.Ok") }}'
            });
        }

        function toggleRefundSection() {
            if (valueOf(statusSelect) === 'canceled') {
                showBlock(refundSection);
            } else {
                hideElement(refundSection);
                setValue(refundedAmount, '0');
            }
        }

        function toggleFinalPaymentMethod() {
            const status = valueOf(statusSelect);
            if (status === 'delivered' || status === 'finished') {
                showBlock(finalPaymentMethodSection);
            } else {
                hideElement(finalPaymentMethodSection);
                setValue(finalPaymentMethod, 'none');
                setValue(finalPaymentReference, '');
            }
        }

        function normalizedNumber(value) {
            const parsed = parseFloat(value);
            return Number.isNaN(parsed) ? 0 : parsed;
        }

        function requiresAdminPin() {
            if (!reservationForm || Number(reservationForm.dataset.userIsFullAdmin) === 1) {
                return false;
            }

            const originalStatus = String(reservationForm.dataset.originalStatus || '');
            const currentStatus = String(valueOf(statusSelect) || '');
            const originalPrice = normalizedNumber(reservationForm.dataset.originalPrice);
            const currentPrice = normalizedNumber(valueOf(finalTotalInput));
            const isCancelling = originalStatus !== 'canceled' && currentStatus === 'canceled';
            const isPriceChanged = Math.abs(currentPrice - originalPrice) > 0.009;

            return isCancelling || isPriceChanged;
        }

        function resetAdminPinInput() {
            setValue(adminPinInput, '');
            adminPinInput?.classList.remove('is-invalid');
            setText(adminPinError, '');
        }

        function requestAdminPin() {
            resetAdminPinInput();
            adminPinModal.show();
            setTimeout(() => adminPinInput?.focus(), 100);
        }

        function submitReservationForm() {
            if (!reservationForm) return;
            if (typeof reservationForm.requestSubmit === 'function') {
                reservationForm.requestSubmit();
                return;
            }
            reservationForm.submit();
        }

        async function confirmAdminPin() {
            const pin = valueOf(adminPinInput).trim();
            const indicatorLabel = confirmAdminPinBtn?.querySelector('.indicator-label');
            const indicatorProgress = confirmAdminPinBtn?.querySelector('.app-indicator-progress');

            adminPinInput?.classList.remove('is-invalid');
            setText(adminPinError, '');

            if (!pin) {
                adminPinInput?.classList.add('is-invalid');
                setText(adminPinError, 'يرجى إدخال كلمة المرور.');
                return;
            }

            if (confirmAdminPinBtn) confirmAdminPinBtn.disabled = true;
            indicatorLabel?.classList.add('hidden');
            indicatorProgress?.classList.remove('hidden');

            try {
                const response = await postJson(routes.verifyAdminPin, {
                    pin,
                    context: 'reservation_sensitive_update',
                    reservation_id: reservationId,
                    _token: csrfToken,
                });

                setValue(adminPinToken, response.token || '');
                adminPinModal.hide();
                submitReservationForm();
            } catch (error) {
                adminPinInput?.classList.add('is-invalid');
                setText(adminPinError, error.data?.message || 'تعذر التحقق من كلمة المرور.');
            } finally {
                if (confirmAdminPinBtn) confirmAdminPinBtn.disabled = false;
                indicatorLabel?.classList.remove('hidden');
                indicatorProgress?.classList.add('hidden');
            }
        }

        function selectProduct(product) {
            setValue(productIdInput, product.id || '');
            setValue(productSkuInput, product.sku || '');
            setValue(productCategoryIdInput, product.product_category_id || '');

            const imageUrl = storageUrl(product.main_image);
            const detailsHtml = `
                <div class="app-card reservation-product-selected-card">
                    <div class="app-card__header">
                        <h3 class="app-card__title">{{ __('dashboard.Selected Product') }}</h3>
                        <div class="app-card__toolbar">
                             <button type="button" class="app-btn app-btn--sm app-btn--warning" id="change_product_btn">
                                <i class="fa-solid fa-rotate-left"></i> {{ __('dashboard.Change Product') }}
                            </button>
                        </div>
                    </div>
                    <div class="app-card__body">
                        <div class="reservation-product-selected-card__layout">
                            <img src="${escapeHtml(imageUrl)}" alt="${escapeHtml(product.name)}" class="reservation-product-selected-card__image product-image-thumb" data-image="${escapeHtml(imageUrl)}">
                            <div class="reservation-product-selected-card__content">
                                <h4 class="reservation-product-selected-card__name">${escapeHtml(product.name)}</h4>
                                <div class="reservation-product-selected-card__meta">
                                    <span class="reservation-product-selected-card__chip">
                                        <i class="fa-solid fa-barcode"></i>
                                        {{ __('dashboard.SKU') }}: ${escapeHtml(product.sku)}
                                    </span>
                                    <span class="reservation-product-selected-card__chip reservation-product-selected-card__chip--price">
                                        <i class="fa-solid fa-money-bills"></i>
                                        ${escapeHtml(product.price)} {{__('EGP')}}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>`;

            setHtml(selectedProductDetailsContainer, detailsHtml);
            showBlock(selectedProductDetailsContainer);
            hideElement(productSearchContainer);
            setHtml(productSearchResults, '');
            setHtml(productSearchCount, '');
            setValue(productSearchInput, '');

            loadReservationOptions(product.product_category_id);
            updatePriceFields(product.id);
            checkAvailability();
        }

        async function searchProducts(query) {
            productSearchSpinner?.classList.remove('hidden');

            try {
                const response = await getJson(routes.productSearch, { keyword: query });
                const products = Array.isArray(response) ? response : [];
                currentProductResults = {};

                let resultsHtml = '<div class="reservation-product-search-results-list">';
                let countHtml = '';

                if (products.length > 0) {
                    countHtml = `<div class="app-alert app-alert--success">${products.length} {{ __('dashboard.results found') }}</div>`;
                    products.forEach((product) => {
                        currentProductResults[String(product.id)] = product;
                        const imageUrl = storageUrl(product.main_image);
                        const productId = String(product.id);
                        resultsHtml += `
                            <article class="reservation-product-search-card">
                                <div class="reservation-product-search-card__layout">
                                    <div class="reservation-product-search-card__media">
                                        <img src="${escapeHtml(imageUrl)}" class="reservation-product-search-card__image product-image-thumb" alt="${escapeHtml(product.name)}" data-image="${escapeHtml(imageUrl)}">
                                        <span class="reservation-product-search-card__badge">
                                            <i class="fa-solid fa-star"></i>{{ __('dashboard.Product') }}
                                        </span>
                                    </div>
                                    <div class="reservation-product-search-card__body">
                                        <h5 class="reservation-product-search-card__name">${escapeHtml(product.name)}</h5>
                                        <div class="reservation-product-search-card__meta">
                                            <span class="reservation-product-search-card__sku">SKU: ${escapeHtml(product.sku)}</span>
                                            <span class="reservation-product-search-card__price">${escapeHtml(product.price)} {{__('EGP')}}</span>
                                        </div>
                                        <div class="reservation-product-search-card__details">
                                            <div class="reservation-product-search-card__detail">
                                                <span class="reservation-product-search-card__detail-label">{{ __('dashboard.Category') }}</span>
                                                <span class="reservation-product-search-card__detail-value">${escapeHtml(product.category_name || '---')}</span>
                                            </div>
                                            <div class="reservation-product-search-card__detail">
                                                <span class="reservation-product-search-card__detail-label">{{ __('dashboard.Product') }}</span>
                                                <span class="reservation-product-search-card__detail-value">#${escapeHtml(productId)}</span>
                                            </div>
                                        </div>
                                        <div class="reservation-product-search-card__actions">
                                            <button type="button" class="app-btn app-btn--primary select-product-btn" data-id="${escapeHtml(productId)}">
                                                <i class="fa-solid fa-check me-1"></i> {{ __('dashboard.Select') }}
                                            </button>
                                            <a href="${routes.productsBase}/${encodeURIComponent(productId)}" target="_blank" class="app-btn app-btn--secondary">
                                                 <i class="fa-solid fa-arrow-up-right-from-square"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </article>`;
                    });
                } else {
                    countHtml = `<div class="app-alert app-alert--warning">{{ __('dashboard.No results found') }}</div>`;
                }

                resultsHtml += '</div>';
                setHtml(productSearchCount, countHtml);
                setHtml(productSearchResults, resultsHtml);
            } catch (error) {
                setHtml(productSearchCount, `<div class="app-alert app-alert--danger">{{ __('dashboard.An error occurred') }}</div>`);
                setHtml(productSearchResults, '');
            } finally {
                productSearchSpinner?.classList.add('hidden');
            }
        }

        function changeProduct() {
            setValue(productIdInput, '');
            setValue(productSkuInput, '');
            setValue(productCategoryIdInput, '');
            hideElement(selectedProductDetailsContainer);
            setHtml(selectedProductDetailsContainer, '');
            showBlock(productSearchContainer);
            productSearchInput?.focus();
            setValue(basePriceInput, 0);
            calculateTotals();
        }

        async function addProductBySku() {
            const skuOrId = valueOf(productSearchInput).trim();
            if (!skuOrId) return;

            try {
                const response = await getJson(routes.findProductBySku, { sku: skuOrId });
                if (response.success) {
                    selectProduct(response.product);
                } else {
                    Swal.fire({ icon: 'error', title: '{{ __("dashboard.Error") }}', text: response.message || '{{ __("dashboard.No product found with this SKU/ID") }}' });
                }
            } catch (error) {
                Swal.fire({ icon: 'error', title: '{{ __("dashboard.Error") }}', text: '{{ __("dashboard.An error occurred while searching by SKU") }}' });
            }
        }

        function selectCustomer(customer) {
            setValue(customerIdInput, customer.id || '');

            const infoHtml = `
                <div class="reservation-customer-selected-card__identity">
                    <h4 class="reservation-customer-selected-card__name">${escapeHtml(customer.name)}</h4>
                    <div class="reservation-customer-selected-card__line"><i class="fa-solid fa-phone fa-fw"></i><span>${escapeHtml(customer.phone || '-')}</span></div>
                    <div class="reservation-customer-selected-card__line"><i class="fa-solid fa-mobile fa-fw"></i><span>${escapeHtml(customer.other_phone || '-')}</span></div>
                    <div class="reservation-customer-selected-card__line"><i class="fa-solid fa-map-location-dot fa-fw"></i><span>${escapeHtml(customer.governorate || '-')}</span></div>
                    <div class="reservation-customer-selected-card__line"><i class="fa-solid fa-location-arrow fa-fw"></i><span>${escapeHtml(customer.address || '-')}</span></div>
                </div>`;
            const statsHtml = `
                <table class="app-table app-table--bordered app-table--striped reservation-customer-stats-table">
                    <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>`;

            setHtml(selectedCustomerInfo, infoHtml);
            setHtml(selectedCustomerStats, statsHtml);
            hideElement(customerSearchContainer);
            setHtml(customerSearchResults, '');
            setHtml(customerSearchCount, '');
            setValue(customerSearchInput, '');
            showBlock(selectedCustomerDetailsContainer);
        }

        async function searchCustomers(query) {
            customerSearchSpinner?.classList.remove('hidden');

            try {
                const response = await getJson(routes.customerSearch, { keyword: query });
                const customers = Array.isArray(response) ? response : [];
                currentCustomerResults = {};

                let resultsHtml = '<div class="reservation-customer-results-list">';
                let countHtml = '';

                if (customers.length > 0) {
                    countHtml = `<div class="app-alert app-alert--success">${customers.length} {{ __('dashboard.results found') }}</div>`;
                    customers.forEach((customer) => {
                        currentCustomerResults[String(customer.id)] = customer;
                        const customerId = String(customer.id);
                        let fullAddress = [customer.governorate, customer.address].filter(Boolean).join(', ');
                        if (!fullAddress) {
                            fullAddress = '{{ __("dashboard.No address provided") }}';
                        }

                        resultsHtml += `
                            <div class="app-card reservation-customer-result-card">
                                <div class="app-card__body">
                                    <div class="reservation-customer-result-card__layout">
                                        <div class="reservation-customer-result-card__content">
                                            <div class="reservation-customer-result-card__identity">
                                                <div class="reservation-customer-result-card__avatar">
                                                    <i class="fa-solid fa-user"></i>
                                                </div>
                                                <div class="reservation-customer-result-card__identity-text">
                                                    <h5 class="reservation-customer-result-card__name">${escapeHtml(customer.name)}</h5>
                                                    <div class="reservation-customer-result-card__phone"><i class="fa-solid fa-phone fa-fw"></i><span>${escapeHtml(customer.phone)}</span></div>
                                                </div>
                                            </div>
                                            <div class="reservation-customer-result-card__badges">
                                                ${customer.other_phone ? `<div class="reservation-customer-result-card__badge"><i class="fa-solid fa-mobile fa-fw"></i><span>${escapeHtml(customer.other_phone)}</span></div>` : ''}
                                                ${customer.governorate ? `<div class="reservation-customer-result-card__badge"><i class="fa-solid fa-map-location-dot fa-fw"></i><span>${escapeHtml(customer.governorate)}</span></div>` : ''}
                                            </div>
                                            <div class="reservation-customer-result-card__meta">
                                                <div class="reservation-customer-result-card__meta-item"><i class="fa-solid fa-location-dot fa-fw"></i><span>${escapeHtml(fullAddress)}</span></div>
                                            </div>
                                        </div>
                                        <div class="reservation-customer-result-card__actions">
                                            <button type="button" class="app-btn app-btn--sm app-btn--primary select-customer-btn" data-id="${escapeHtml(customerId)}">
                                                <i class="fa-solid fa-check"></i> {{ __('dashboard.Select') }}
                                            </button>
                                            <a href="${routes.customersBase}/${encodeURIComponent(customerId)}" target="_blank" class="app-btn app-btn--sm app-btn--secondary">
                                                 <i class="fa-solid fa-arrow-up-right-from-square"></i> {{ __('dashboard.View Profile') }}
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>`;
                    });
                } else {
                    countHtml = `<div class="app-alert app-alert--warning">{{ __('dashboard.No results found') }}</div>`;
                }

                resultsHtml += '</div>';
                setHtml(customerSearchCount, countHtml);
                setHtml(customerSearchResults, resultsHtml);
            } catch (error) {
                setHtml(customerSearchCount, `<div class="app-alert app-alert--danger">{{ __('dashboard.An error occurred') }}</div>`);
                setHtml(customerSearchResults, '');
            } finally {
                customerSearchSpinner?.classList.add('hidden');
            }
        }

        function changeCustomer() {
            setValue(customerIdInput, '');
            hideElement(selectedCustomerDetailsContainer);
            setHtml(selectedCustomerInfo, '');
            setHtml(selectedCustomerStats, '');
            showBlock(customerSearchContainer);
            customerSearchInput?.focus();
        }

        async function saveCustomer() {
            try {
                const response = await postJson(routes.customerStore, {
                    name: valueOf(byId('customer_name')),
                    gender: valueOf(byId('gender')),
                    phone: valueOf(byId('phone')),
                    other_phone: valueOf(byId('other_phone')),
                    governorate: valueOf(byId('customer_governorate')),
                    address: valueOf(byId('customer_address')),
                    _token: csrfToken,
                });

                if (response.success) {
                    closeModal('addCustomerModal');
                    Swal.fire({ icon: 'success', title: '{{ __("dashboard.Success") }}', text: response.message, confirmButtonText: '{{ __("dashboard.Ok") }}' });
                    selectCustomer(response.customer);
                    ['customer_name', 'phone', 'other_phone', 'customer_governorate', 'customer_address'].forEach((id) => setValue(byId(id), ''));
                    setValue(byId('gender'), '');
                }
            } catch (error) {
                let errorHtml = '{{ __("dashboard.An error occurred while saving the customer") }}';
                if (error.data?.errors) {
                    errorHtml = Object.values(error.data.errors)
                        .flat()
                        .map((message) => `<li>${escapeHtml(message)}</li>`)
                        .join('');
                    errorHtml = `<ul>${errorHtml}</ul>`;
                } else if (error.data?.message) {
                    errorHtml = escapeHtml(error.data.message);
                }

                Swal.fire({ icon: 'error', title: '{{ __("dashboard.Error") }}', html: errorHtml, confirmButtonText: '{{ __("dashboard.Ok") }}' });
            }
        }

        async function loadReservationOptions(categoryId) {
            try {
                const options = await getJson(routes.reservationOptions, { category_id: categoryId });
                let content = '';

                if (Array.isArray(options) && options.length > 0) {
                    options.forEach((option) => {
                        const selectedValue = String(previouslySelectedOptions[option.id] || '');
                        content += `<div class="xl:col-span-4 mb-3"><label class="app-label">${escapeHtml(option.name)}</label>`;
                        if (option.type === 'text') {
                            content += `<input type="text" name="option_values[${escapeHtml(option.id)}]" class="app-input" placeholder="${escapeHtml(option.name)}" value="${escapeHtml(selectedValue)}">`;
                        } else if (option.type === 'multiple') {
                            content += `<select name="option_values[${escapeHtml(option.id)}]" class="app-input"><option value="">-- ${escapeHtml(option.name)} --</option>`;
                            if (Array.isArray(option.values) && option.values.length) {
                                option.values.forEach((optionValue) => {
                                    const valueName = String(optionValue.value_name || '');
                                    const isSelected = selectedValue === valueName ? 'selected' : '';
                                    content += `<option value="${escapeHtml(valueName)}" ${isSelected}>${escapeHtml(valueName)}</option>`;
                                });
                            }
                            content += '</select>';
                        }
                        content += '</div>';
                    });
                } else {
                    content = `<p class="text-slate-500 dark:text-slate-400">{{ __('dashboard.No reservation options for this category') }}</p>`;
                }

                setHtml(reservationOptionsContainer, content);
            } catch (error) {
                setHtml(reservationOptionsContainer, `<p class="text-slate-500 dark:text-slate-400">{{ __('dashboard.No reservation options for this category') }}</p>`);
            }
        }

        function renderAvailabilityPanel(targetSelector, state) {
            const panel = document.querySelector(targetSelector);
            if (!panel) return;

            panel.classList.remove('is-visible', 'reservation-availability-panel--success', 'reservation-availability-panel--danger', 'reservation-availability-panel--warning');

            if (!state || !state.show) {
                setHtml(panel, '');
                return;
            }

            const chips = [];
            if (state.dateLabel) {
                chips.push(`<span class="reservation-availability-panel__chip"><i class="fa-solid fa-calendar-days"></i>${escapeHtml(state.dateLabel)}</span>`);
            }
            if (state.modeLabel) {
                chips.push(`<span class="reservation-availability-panel__chip"><i class="fa-solid fa-star"></i>${escapeHtml(state.modeLabel)}</span>`);
            }
            if (state.skuLabel) {
                chips.push(`<span class="reservation-availability-panel__chip"><i class="fa-solid fa-barcode"></i>${escapeHtml(state.skuLabel)}</span>`);
            }

            panel.classList.add('is-visible', `reservation-availability-panel--${state.variant}`);
            setHtml(panel, `
                <div class="reservation-availability-panel__top">
                    <div>
                        <h4 class="reservation-availability-panel__title">${escapeHtml(state.title)}</h4>
                        <p class="reservation-availability-panel__text">${escapeHtml(state.message)}</p>
                    </div>
                    <span class="reservation-availability-panel__badge">
                        <i class="${escapeHtml(state.icon)}"></i>
                        ${escapeHtml(state.badge)}
                    </span>
                </div>
                <div class="reservation-availability-panel__meta">${chips.join('')}</div>
            `);
        }

        function setFirstWearAvailabilityState(state) {
            firstWearCard?.classList.remove('is-success', 'is-danger', 'is-warning');

            if (!state) {
                setText(firstWearText, 'خيار خاص بالتوفر');
                return;
            }

            firstWearCard?.classList.add(`is-${state.variant}`);
            setText(firstWearText, state.text);
        }

        function currentModeLabel() {
            return isFirstTimeInput?.checked ? 'وضع اللبسة الأولى' : 'حجز عادي';
        }

        async function checkAvailability() {
            const productSku = valueOf(productSkuInput);
            const eventDate = valueOf(eventDateInput);
            const isFirstTime = isFirstTimeInput?.checked ? 1 : 0;

            if (!productSku || !eventDate) {
                renderAvailabilityPanel('#product_availability_message', null);
                renderAvailabilityPanel('#reservation_schedule_availability', null);
                setFirstWearAvailabilityState(null);
                return;
            }

            try {
                const response = await getJson(routes.checkAvailability, {
                    product_sku: productSku,
                    event_date: eventDate,
                    is_first_time: isFirstTime,
                    exclude_reservation_id: reservationId,
                });

                let isAvailable;
                let state;

                if (response.blockedByScrap) {
                    state = {
                        show: true,
                        variant: 'danger',
                        title: 'المنتج هالك',
                        message: response.maintenanceMessage || 'هذا المنتج هالك وغير متاح للحجز.',
                        badge: 'هالك',
                        icon: 'fa-solid fa-circle-exclamation',
                        modeLabel: currentModeLabel(),
                        dateLabel: `تاريخ المناسبة: ${eventDate}`,
                        skuLabel: `SKU: ${productSku}`,
                    };

                    renderAvailabilityPanel('#product_availability_message', state);
                    renderAvailabilityPanel('#reservation_schedule_availability', state);
                    setFirstWearAvailabilityState({ variant: 'danger', text: 'المنتج هالك' });
                    return;
                }

                if (response.blockedByMaintenance) {
                    state = {
                        show: true,
                        variant: 'danger',
                        title: 'المنتج في الصيانة',
                        message: response.maintenanceMessage || 'هذا المنتج محجوب مؤقتا بسبب الصيانة.',
                        badge: 'في الصيانة',
                        icon: 'fa-solid fa-screwdriver-wrench',
                        modeLabel: currentModeLabel(),
                        dateLabel: `تاريخ المناسبة: ${eventDate}`,
                        skuLabel: `SKU: ${productSku}`,
                    };

                    renderAvailabilityPanel('#product_availability_message', state);
                    renderAvailabilityPanel('#reservation_schedule_availability', state);
                    setFirstWearAvailabilityState({ variant: 'danger', text: 'المنتج في الصيانة' });
                    return;
                }

                if (response.firstTimeCheckRequested) {
                    isAvailable = response.isAvailable && response.isAvailableForFirstTime && !response.hasExistingFirstWear;
                    state = isAvailable
                        ? {
                            show: true,
                            variant: 'success',
                            title: 'المنتج متاح للحجز كلبسة أولى',
                            message: 'يمكن تثبيت هذا الحجز كلبسة أولى في التاريخ المحدد، ولم يتم العثور على ما يمنع ذلك ضمن شروط التوفر الحالية.',
                            badge: 'متاح للبسة الأولى',
                            icon: 'fa-solid fa-circle-check',
                            modeLabel: 'وضع اللبسة الأولى',
                            dateLabel: `تاريخ المناسبة: ${eventDate}`,
                            skuLabel: `SKU: ${productSku}`,
                        }
                        : {
                            show: true,
                            variant: 'danger',
                            title: 'المنتج غير متاح كلبسة أولى',
                            message: 'لا يمكن اعتماد هذا المنتج كلبسة أولى في التاريخ المحدد. راجع الحجوزات السابقة أو غير التاريخ أو أوقف خيار اللبسة الأولى.',
                            badge: 'غير متاح للبسة الأولى',
                            icon: 'fa-solid fa-circle-xmark',
                            modeLabel: 'وضع اللبسة الأولى',
                            dateLabel: `تاريخ المناسبة: ${eventDate}`,
                            skuLabel: `SKU: ${productSku}`,
                        };

                    setFirstWearAvailabilityState({
                        variant: isAvailable ? 'success' : 'danger',
                        text: isAvailable ? 'اللبسة الأولى متاحة' : 'اللبسة الأولى غير متاحة',
                    });
                } else {
                    isAvailable = response.isAvailable;
                    state = isAvailable
                        ? {
                            show: true,
                            variant: 'success',
                            title: 'المنتج متاح للحجز في التاريخ المحدد',
                            message: 'الفستان متاح وفق بيانات المنتج وتاريخ المناسبة الحالي، ويمكنك متابعة إدخال بقية تفاصيل الحجز.',
                            badge: 'متاح للحجز',
                            icon: 'fa-solid fa-circle-check',
                            modeLabel: 'حجز عادي',
                            dateLabel: `تاريخ المناسبة: ${eventDate}`,
                            skuLabel: `SKU: ${productSku}`,
                        }
                        : {
                            show: true,
                            variant: 'danger',
                            title: 'المنتج غير متاح في التاريخ المحدد',
                            message: 'هناك تعارض أو عدم توفر يمنع حجز الفستان في هذا التاريخ. غير التاريخ أو اختر منتجا آخر قبل متابعة الحجز.',
                            badge: 'غير متاح',
                            icon: 'fa-solid fa-circle-xmark',
                            modeLabel: 'حجز عادي',
                            dateLabel: `تاريخ المناسبة: ${eventDate}`,
                            skuLabel: `SKU: ${productSku}`,
                        };

                    setFirstWearAvailabilityState({ variant: 'warning', text: 'فعلها فقط إذا كانت لبسة أولى' });
                }

                renderAvailabilityPanel('#product_availability_message', state);
                renderAvailabilityPanel('#reservation_schedule_availability', state);
            } catch (error) {
                const errorState = {
                    show: true,
                    variant: 'warning',
                    title: 'تعذر التحقق من التوفر الآن',
                    message: 'حدثت مشكلة أثناء فحص توفر الفستان. أعد المحاولة بعد تحديث التاريخ أو إعادة اختيار المنتج.',
                    badge: 'تعذر التحقق',
                    icon: 'fa-solid fa-triangle-exclamation',
                    modeLabel: currentModeLabel(),
                    dateLabel: eventDate ? `تاريخ المناسبة: ${eventDate}` : '',
                    skuLabel: productSku ? `SKU: ${productSku}` : '',
                };

                renderAvailabilityPanel('#product_availability_message', errorState);
                renderAvailabilityPanel('#reservation_schedule_availability', errorState);
                setFirstWearAvailabilityState({ variant: 'warning', text: 'تعذر التحقق من الحالة' });
            }
        }

        async function updatePriceFields(productId) {
            if (!productId) {
                setValue(basePriceInput, '0');
                calculateTotals();
                return;
            }

            try {
                const response = await fetchJson(`/dashboard/products/${encodeURIComponent(productId)}/json`);
                setValue(basePriceInput, response.price || '0');
                calculateTotals();
            } catch (error) {
                alert('{{ __("dashboard.Error fetching product details") }}');
                setValue(basePriceInput, '0');
                calculateTotals();
            }
        }

        function syncShippingState() {
            const isPaidShipping = valueOf(shippingTypeSelect) === 'paid';
            if (!isPaidShipping) {
                setValue(shippingCostInput, 0);
            }
            if (shippingCostInput) shippingCostInput.readOnly = !isPaidShipping;
        }

        function readRateFromLabel(input, prefix, suffixPattern) {
            const label = document.querySelector(`label[for="${prefix}_${input.value}"]`);
            const match = label?.textContent.match(suffixPattern);
            return match && match[1] ? parseFloat(match[1]) : 0;
        }

        function calculateTotals() {
            const basePrice = parseFloat(valueOf(basePriceInput)) || 0;
            const discountValue = parseFloat(valueOf(discountInput)) || 0;
            const discountType = valueOf(discountTypeSelect);
            const discountAmount = discountType === 'percent' ? (basePrice * discountValue) / 100 : discountValue;
            const priceAfterDiscount = basePrice - discountAmount;

            let totalTaxes = 0;
            all('input[name="taxes[]"]:checked').forEach((input) => {
                const rate = parseFloat(input.dataset.rate) || readRateFromLabel(input, 'tax', /\((\d+(?:\.\d+)?)%\)/);
                totalTaxes += (priceAfterDiscount * rate) / 100;
            });

            let totalAdditionalExpenses = 0;
            all('input[name="additional_expenses[]"]:checked').forEach((input) => {
                const amount = parseFloat(input.dataset.amount) || readRateFromLabel(input, 'expense', /\((\d+(?:\.\d+)?)\)/);
                totalAdditionalExpenses += amount;
            });

            const shippingCost = valueOf(shippingTypeSelect) === 'paid' ? (parseFloat(valueOf(shippingCostInput)) || 0) : 0;
            const finalPrice = priceAfterDiscount + totalTaxes + totalAdditionalExpenses + shippingCost;
            const deposit = parseFloat(valueOf(depositInput)) || 0;
            const remaining = Math.max(0, finalPrice - deposit);
            let paymentStatus = 'unpaid';

            if (deposit > 0 && finalPrice > 0 && deposit >= finalPrice) {
                paymentStatus = 'paid';
            } else if (deposit > 0) {
                paymentStatus = 'partial';
            }

            const paymentStatusLabels = {
                unpaid: '{{ __("dashboard.Unpaid") }}',
                partial: '{{ __("dashboard.Partial") }}',
                paid: '{{ __("dashboard.Paid") }}',
            };

            setValue(discountAmountInput, discountAmount.toFixed(2));
            setValue(totalTaxesInput, totalTaxes.toFixed(2));
            setValue(totalAdditionalExpensesInput, totalAdditionalExpenses.toFixed(2));
            setValue(shippingCostAmountInput, shippingCost.toFixed(2));
            setValue(finalTotalInput, finalPrice.toFixed(2));
            setValue(remainingAmountInput, remaining.toFixed(2));
            setValue(paymentStatusInput, paymentStatus);
            setValue(paymentStatusDisplayInput, paymentStatusLabels[paymentStatus] || paymentStatusLabels.unpaid);
            setText(basePricePreview, basePrice.toFixed(2));
            setText(discountPreview, discountAmount.toFixed(2));
            setText(depositPreview, deposit.toFixed(2));
            setText(finalTotalPreview, finalPrice.toFixed(2));
        }

        function formatDate(dateObj) {
            return dateObj.toISOString().split('T')[0];
        }

        function syncReservationDates() {
            const eventDateValue = valueOf(eventDateInput);
            if (!eventDateValue) return;

            const eventDate = new Date(eventDateValue);
            if (Number.isNaN(eventDate.getTime())) return;

            const fittingDate = new Date(eventDate);
            fittingDate.setDate(fittingDate.getDate() - 1);
            setValue(fittingDateInput, formatDate(fittingDate));

            const pickupDate = new Date(eventDate);
            pickupDate.setDate(pickupDate.getDate() - 1);
            setValue(customerPickupDateInput, formatDate(pickupDate));

            const returnDate = new Date(eventDate);
            returnDate.setDate(returnDate.getDate() + 1);
            setValue(customerReturnDateInput, formatDate(returnDate));
        }

        function validateReservationSubmit(event) {
            if (isSubmittingReservation) {
                event.preventDefault();
                return false;
            }

            if (!valueOf(productIdInput)) {
                event.preventDefault();
                showReservationFormError('يجب اختيار المنتج قبل تحديث الحجز.');
                return false;
            }

            if (!valueOf(customerIdInput)) {
                event.preventDefault();
                showReservationFormError('يجب اختيار العميل قبل تحديث الحجز.');
                return false;
            }

            if (!reservationForm.checkValidity()) {
                event.preventDefault();
                reservationForm.reportValidity();
                return false;
            }

            const finalTotal = parseFloat(valueOf(finalTotalInput)) || 0;
            const deposit = parseFloat(valueOf(depositInput)) || 0;
            if (deposit > finalTotal) {
                event.preventDefault();
                showReservationFormError('قيمة الدفعة الأولى لا يمكن أن تكون أكبر من إجمالي الحجز.');
                return false;
            }

            if (requiresAdminPin() && !valueOf(adminPinToken)) {
                event.preventDefault();
                requestAdminPin();
                return false;
            }

            setReservationSubmittingState(true);
            return true;
        }

        statusSelect?.addEventListener('change', () => {
            toggleRefundSection();
            toggleFinalPaymentMethod();
        });

        confirmAdminPinBtn?.addEventListener('click', confirmAdminPin);

        productSearchInput?.addEventListener('input', () => {
            const query = valueOf(productSearchInput);
            if (query.length > 2) {
                searchProducts(query);
            } else {
                setHtml(productSearchResults, '');
                setHtml(productSearchCount, '');
            }
        });

        searchProductBtn?.addEventListener('click', () => {
            const query = valueOf(productSearchInput);
            if (query) searchProducts(query);
        });

        addProductBySkuBtn?.addEventListener('click', addProductBySku);

        customerSearchInput?.addEventListener('input', () => {
            const query = valueOf(customerSearchInput);
            if (query.length > 2) {
                searchCustomers(query);
            } else {
                setHtml(customerSearchResults, '');
                setHtml(customerSearchCount, '');
            }
        });

        searchCustomerBtn?.addEventListener('click', () => {
            const query = valueOf(customerSearchInput);
            if (query) searchCustomers(query);
        });

        saveCustomerBtn?.addEventListener('click', saveCustomer);

        document.addEventListener('click', (event) => {
            const changeProductButton = event.target.closest('#change_product_btn');
            if (changeProductButton) {
                event.preventDefault();
                changeProduct();
                return;
            }

            const selectProductButton = event.target.closest('.select-product-btn');
            if (selectProductButton) {
                event.preventDefault();
                const product = currentProductResults[selectProductButton.dataset.id];
                if (product) selectProduct(product);
                return;
            }

            const selectCustomerButton = event.target.closest('.select-customer-btn');
            if (selectCustomerButton) {
                event.preventDefault();
                const customer = currentCustomerResults[selectCustomerButton.dataset.id];
                if (customer) selectCustomer(customer);
                return;
            }

            const changeCustomerButton = event.target.closest('#change_customer_btn');
            if (changeCustomerButton) {
                event.preventDefault();
                changeCustomer();
                return;
            }

            const productImageThumb = event.target.closest('.product-image-thumb');
            if (productImageThumb) {
                const image = productImageThumb.dataset.image || '';
                modalImage?.setAttribute('src', image);
                productImageModal?.setAttribute('src', image);
                openModal('productImageModal');
            }
        });

        [eventDateInput, isFirstTimeInput].forEach((element) => {
            element?.addEventListener('change', checkAvailability);
        });

        [basePriceInput, discountInput, discountTypeSelect, depositInput, shippingCostInput].forEach((element) => {
            element?.addEventListener('change', calculateTotals);
            element?.addEventListener('input', calculateTotals);
        });

        shippingTypeSelect?.addEventListener('change', () => {
            syncShippingState();
            calculateTotals();
        });

        document.addEventListener('change', (event) => {
            if (event.target.matches('input[name="taxes[]"], input[name="additional_expenses[]"]')) {
                calculateTotals();
            }
        });

        eventDateInput?.addEventListener('change', syncReservationDates);
        reservationForm?.addEventListener('submit', validateReservationSubmit);
        window.addEventListener('pageshow', () => setReservationSubmittingState(false));

        toggleRefundSection();
        toggleFinalPaymentMethod();
        syncShippingState();
        if (valueOf(productCategoryIdInput)) {
            loadReservationOptions(valueOf(productCategoryIdInput));
        }
        checkAvailability();
        calculateTotals();
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initReservationEditPage);
    } else {
        initReservationEditPage();
    }
})();
</script>
@endsection