@extends('layouts.app')

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

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

@section('breadcrumb')
    <li class="bc-item">
        <a href="{{ auth()->user()?->hasSalesFocusModeEnabled() ? route('dashboard.sales-focus.index') : route('dashboard.home') }}" class="bc-link">{{ __('dashboard.Home') }}</a>
    </li>
    <li class="bc-item">
        <a href="{{ $reservationBackRoute }}" class="bc-link">{{ __('dashboard.Reservations') }}</a>
    </li>
    <li class="bc-item bc-item--active">{{ __('dashboard.Add Reservation') }}</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.25rem;
    }

    .reservation-create-form {
        display: grid;
        gap: 1.25rem;
    }

    .reservation-create-actions {
        display: flex;
        justify-content: flex-end;
        gap: 0.75rem;
        flex-wrap: wrap;
    }

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

    .reservation-create-layout {
        display: grid;
        grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.85fr);
        gap: 1.25rem;
        align-items: start;
    }

    .reservation-create-main,
    .reservation-create-side {
        display: grid;
        gap: 1rem;
    }

    .reservation-create-side {
        position: sticky;
        top: 88px;
    }

    .reservation-create-page .app-card {
        border-radius: var(--radius-md);
    }

    .reservation-create-page .app-card__header {
        background: linear-gradient(180deg, var(--surface-50) 0%, var(--bg-card) 100%);
    }

    .reservation-create-page .app-card__title i {
        color: var(--c-primary);
        font-size: 1rem;
    }

    .reservation-create-card-body {
        display: grid;
        gap: 1rem;
    }

    .reservation-create-field {
        height: 100%;
        padding: 0.9rem;
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
        background: var(--surface-50);
    }

    .reservation-create-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.9rem;
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
        background: linear-gradient(180deg, var(--surface-50) 0%, var(--bg-card) 100%);
    }

    .reservation-create-toggle__label {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin: 0;
        color: var(--text-primary);
        font-weight: 900;
        cursor: pointer;
    }

    .reservation-create-toggle__icon {
        width: 2.25rem;
        height: 2.25rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-md);
        background: #ecfdf5;
        color: #047857;
        flex: 0 0 auto;
    }

    .reservation-availability-panel {
        display: none;
        padding: 0.95rem 1rem;
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        background: var(--bg-card);
    }

    .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 {
        margin: 0 0 0.2rem;
        color: var(--text-primary);
        font-size: 0.92rem;
        font-weight: 900;
    }

    .reservation-availability-panel__text {
        margin: 0;
        color: var(--text-secondary);
        font-size: 0.82rem;
        font-weight: 700;
    }

    .reservation-availability-panel__badge,
    .reservation-availability-panel__chip {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        border-radius: 999px;
        font-weight: 900;
        white-space: nowrap;
    }

    .reservation-availability-panel__badge {
        padding: 0.4rem 0.7rem;
        font-size: 0.74rem;
    }

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

    .reservation-availability-panel__chip {
        padding: 0.34rem 0.6rem;
        background: var(--surface-50);
        color: var(--text-secondary);
        font-size: 0.72rem;
    }

    .reservation-availability-panel--success {
        border-color: #bbf7d0;
        background: #f0fdf4;
    }

    .reservation-availability-panel--success .reservation-availability-panel__badge {
        background: #dcfce7;
        color: #166534;
    }

    .reservation-availability-panel--danger {
        border-color: #fecaca;
        background: #fef2f2;
    }

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

    .reservation-availability-panel--warning {
        border-color: #fde68a;
        background: #fffbeb;
    }

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

    .reservation-create-options-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.9rem;
    }

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

    .reservation-search-box {
        padding: 0.9rem;
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
        background: var(--surface-50);
    }

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

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

    .reservation-search-results {
        display: grid;
        gap: 0.75rem;
        margin-top: 0.9rem;
    }

    .reservation-selected-card,
    .reservation-result-item {
        display: grid;
        gap: 0.9rem;
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        background: var(--bg-card);
        box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
    }

    .reservation-selected-card {
        grid-template-columns: 112px minmax(0, 1fr);
        padding: 0.9rem;
        align-items: center;
    }

    .reservation-selected-card--customer {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .reservation-selected-card__image {
        width: 112px;
        height: 126px;
        object-fit: contain;
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
        background: var(--surface-50);
        padding: 0.5rem;
    }

    .reservation-selected-card__avatar,
    .reservation-result-item__avatar {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-md);
        background: #eff6ff;
        color: var(--c-primary);
        flex: 0 0 auto;
    }

    .reservation-selected-card__avatar {
        width: 3rem;
        height: 3rem;
        font-size: 1.25rem;
    }

    .reservation-result-item__avatar {
        width: 2.5rem;
        height: 2.5rem;
    }

    .reservation-selected-card__content,
    .reservation-result-item__content {
        display: grid;
        gap: 0.65rem;
        min-width: 0;
    }

    .reservation-selected-card__top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.75rem;
    }

    .reservation-selected-card__title,
    .reservation-result-item__title {
        margin: 0;
        color: var(--text-primary);
        font-weight: 900;
        line-height: 1.6;
        word-break: break-word;
    }

    .reservation-selected-card__title {
        font-size: 1rem;
    }

    .reservation-result-item__title {
        font-size: 0.92rem;
    }

    .reservation-selected-card__meta,
    .reservation-result-item__meta {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .reservation-selected-card__meta span,
    .reservation-result-item__meta span {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.34rem 0.55rem;
        border-radius: 999px;
        background: var(--surface-50);
        color: var(--text-secondary);
        font-size: 0.74rem;
        font-weight: 800;
        min-width: 0;
    }

    .reservation-selected-card__meta i,
    .reservation-result-item__meta i {
        color: var(--c-primary);
    }

    .reservation-customer-stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.55rem;
    }

    .reservation-customer-stats div {
        padding: 0.65rem;
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
        background: var(--surface-50);
    }

    .reservation-customer-stats span {
        display: block;
        color: var(--text-secondary);
        font-size: 0.72rem;
        font-weight: 800;
    }

    .reservation-customer-stats b {
        display: block;
        color: var(--text-primary);
        font-size: 0.95rem;
        font-weight: 900;
        margin-top: 0.2rem;
    }

    .reservation-result-item {
        grid-template-columns: 58px minmax(0, 1fr) auto;
        align-items: center;
        padding: 0.75rem;
    }

    .reservation-result-item--customer {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .reservation-result-item__image {
        width: 58px;
        height: 66px;
        object-fit: contain;
        border-radius: var(--radius-md);
        border: 1px solid var(--border-subtle);
        background: var(--surface-50);
        padding: 0.35rem;
    }

    .reservation-summary-card .app-card__body {
        display: grid;
        gap: 0.9rem;
    }

    .reservation-summary-lines {
        display: grid;
        gap: 0.35rem;
        padding-bottom: 0.35rem;
    }

    .reservation-summary-line,
    .reservation-summary-total {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
    }

    .reservation-summary-line {
        color: var(--text-secondary);
        font-size: 0.82rem;
        font-weight: 800;
    }

    .reservation-summary-line b {
        color: var(--text-primary);
        font-weight: 900;
    }

    .reservation-summary-total {
        margin-top: 0.45rem;
        padding: 0.85rem;
        border-radius: var(--radius-md);
        background: #ecfdf5;
        color: #047857;
        font-weight: 900;
    }

    .reservation-summary-total b {
        font-size: 1.25rem;
        line-height: 1;
    }

    .reservation-summary-field {
        display: grid;
        gap: 0.45rem;
        padding: 0.85rem;
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
        background: var(--surface-50);
    }

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

    .reservation-summary-choice {
        display: flex;
        align-items: flex-start;
        gap: 0.55rem;
        padding: 0.6rem 0.65rem;
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        background: var(--bg-card);
        cursor: pointer;
    }

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

    .reservation-summary-choice__label,
    .reservation-summary-choice__meta {
        display: block;
    }

    .reservation-summary-choice__label {
        color: var(--text-primary);
        font-size: 0.8rem;
        font-weight: 900;
        line-height: 1.6;
    }

    .reservation-summary-choice__meta {
        color: var(--text-secondary);
        font-size: 0.72rem;
        font-weight: 800;
        margin-top: 0.1rem;
    }

    .reservation-customer-modal__dialog {
        width: min(560px, calc(100vw - 2rem));
    }

    .reservation-customer-modal__header,
    .reservation-customer-modal__footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 1rem 1.25rem;
        border-bottom: 1px solid var(--border);
    }

    .reservation-customer-modal__footer {
        justify-content: flex-end;
        border-top: 1px solid var(--border);
        border-bottom: 0;
    }

    .reservation-customer-modal__title {
        margin: 0;
        color: var(--text-primary);
        font-size: 1rem;
        font-weight: 900;
    }

    .reservation-customer-modal__body {
        display: grid;
        gap: 1rem;
        padding: 1.25rem;
    }

    .dark .reservation-create-field,
    .dark .reservation-create-toggle,
    .dark .reservation-search-box,
    .dark .reservation-selected-card,
    .dark .reservation-result-item,
    .dark .reservation-result-item__image,
    .dark .reservation-selected-card__image,
    .dark .reservation-selected-card__meta span,
    .dark .reservation-result-item__meta span,
    .dark .reservation-customer-stats div,
    .dark .reservation-summary-field,
    .dark .reservation-summary-choice,
    .dark .reservation-availability-panel__chip {
        background: var(--surface-100);
        border-color: var(--border);
    }

    .dark .reservation-create-toggle__icon,
    .dark .reservation-selected-card__avatar,
    .dark .reservation-result-item__avatar {
        background: rgba(16, 185, 129, 0.14);
        color: #86efac;
    }

    .dark .reservation-summary-total {
        background: rgba(16, 185, 129, 0.14);
        color: #86efac;
    }

    .dark .reservation-availability-panel--success {
        background: rgba(21, 128, 61, 0.12);
        border-color: rgba(134, 239, 172, 0.2);
    }

    .dark .reservation-availability-panel--danger {
        background: rgba(220, 38, 38, 0.12);
        border-color: rgba(252, 165, 165, 0.2);
    }

    .dark .reservation-availability-panel--warning {
        background: rgba(180, 83, 9, 0.12);
        border-color: rgba(253, 211, 77, 0.2);
    }

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

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

    @media (max-width: 767.98px) {
        .reservation-search-grid,
        .reservation-search-grid--customer,
        .reservation-selected-card,
        .reservation-result-item,
        .reservation-result-item--customer {
            grid-template-columns: minmax(0, 1fr);
        }

        .reservation-selected-card__image,
        .reservation-result-item__image {
            width: 100%;
            height: 150px;
        }

        .reservation-selected-card__top {
            display: grid;
        }

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

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

        .reservation-create-actions .app-btn {
            width: 100%;
        }
    }
</style>

<div class="workspace-page reservation-create-page" x-data="reservationForm()" data-reservation-create-root>
    <div class="workspace-shell">
        <div class="workspace-body">
            <form action="{{ route('dashboard.reservations.store') }}" method="POST" id="reservation_create_form" class="reservation-create-form" data-reservation-create-form @submit="handleSubmit">
                @csrf

                <div class="reservation-create-actions">
                    <a href="{{ $reservationBackRoute }}" class="app-btn app-btn--secondary">
                        <i class="fa-solid fa-xmark"></i>
                        <span>إلغاء</span>
                    </a>
                    <button type="submit" class="app-btn app-btn--primary" id="submit_reservation_btn" data-loading-text="جارٍ الإضافة...">
                        <i class="fa-solid fa-check2-circle"></i>
                        <span>إضافة</span>
                    </button>
                </div>

                <div class="reservation-create-layout">
                    <div class="reservation-create-main">
                        <div class="app-card">
                            <div class="app-card__header">
                                <h3 class="app-card__title">
                                    <i class="fa-solid fa-bag-shopping"></i>
                                    {{ __('dashboard.Product') }}
                                </h3>
                            </div>
                            <div class="app-card__body">
                                @include('dashboard.reservations.partials.product-search', ['selectedProduct' => $selectedProduct ?? null])
                            </div>
                        </div>

                        <div class="app-card">
                            <div class="app-card__header">
                                <h3 class="app-card__title">
                                    <i class="fa-solid fa-calendar-week"></i>
                                    {{ __('dashboard.Reservation Details') }}
                                </h3>
                            </div>
                            <div class="app-card__body reservation-create-card-body">
                                <div class="reservation-create-toggle">
                                    <label class="reservation-create-toggle__label" for="is_first_time">
                                        <span class="reservation-create-toggle__icon">
                                            <i class="fa-solid fa-star"></i>
                                        </span>
                                        <span>{{ __('dashboard.Is First Time?') }}</span>
                                    </label>
                                    <input type="checkbox" class="app-check__input" name="is_first_time" id="is_first_time" value="1" @if(old('is_first_time')) checked @endif>
                                </div>

                                <div class="app-grid">
                                    <div class="md:col-span-6 mb-3">
                                        <div class="reservation-create-field">
                                            <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') }}" required>
                                            @error('event_date')<div class="app-field-error">{{ $message }}</div>@enderror
                                        </div>
                                    </div>
                                    <div class="md:col-span-6 mb-3">
                                        <div class="reservation-create-field">
                                            <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') }}">
                                            @error('fitting_date')<div class="app-field-error">{{ $message }}</div>@enderror
                                        </div>
                                    </div>
                                </div>

                                <div class="app-grid">
                                    <div class="md:col-span-6 mb-3">
                                        <div class="reservation-create-field">
                                            <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') }}" required>
                                            @error('customer_pickup_date')<div class="app-field-error">{{ $message }}</div>@enderror
                                        </div>
                                    </div>
                                    <div class="md:col-span-6 mb-3">
                                        <div class="reservation-create-field">
                                            <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') }}" 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" aria-live="polite"></div>
                            </div>
                        </div>

                        <div class="app-card">
                            <div class="app-card__header">
                                <h3 class="app-card__title">
                                    <i class="fa-solid fa-table-cells"></i>
                                    {{ __('dashboard.Reservation Options') }}
                                </h3>
                            </div>
                            <div class="app-card__body">
                                <div id="reservation_options_container" class="reservation-create-options-grid"></div>
                            </div>
                        </div>

                        <div class="app-card">
                            <div class="app-card__header">
                                <h3 class="app-card__title">
                                    <i class="fa-solid fa-book"></i>
                                    {{ __('dashboard.Notes') }}
                                </h3>
                            </div>
                            <div class="app-card__body">
                                <div class="reservation-create-notes">
                                    <textarea name="notes" class="app-input" rows="3">{{ old('notes') }}</textarea>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="reservation-create-side">
                        <div class="app-card">
                            <div class="app-card__header">
                                <h3 class="app-card__title">
                                    <i class="fa-solid fa-address-card"></i>
                                    {{ __('dashboard.Customer') }}
                                </h3>
                            </div>
                            <div class="app-card__body">
                                @include('dashboard.reservations.partials.customer-search', ['selectedCustomer' => $selectedCustomer ?? null])
                            </div>
                        </div>

                        @include('dashboard.reservations.partials.price-summary', [
                            'taxes' => $taxes ?? [],
                            'additionalExpenses' => $additionalExpenses ?? [],
                            'selectedProduct' => $selectedProduct ?? null
                        ])

                        @can('change reservation creator')
                        <div class="app-card">
                            <div class="app-card__header">
                                <h3 class="app-card__title">
                                    <i class="fa-solid fa-user-gear"></i>
                                    {{ __('dashboard.Creator') }}
                                </h3>
                            </div>
                            <div class="app-card__body">
                                <label class="app-label">{{ __('dashboard.Creator') }}</label>
                                <select name="created_by" class="app-input">
                                    <option value="">{{ __('dashboard.Select Creator') }}</option>
                                    @foreach($adminUsers as $adminUser)
                                        <option value="{{ $adminUser->id }}" {{ (string) old('created_by') === (string) $adminUser->id ? 'selected' : '' }}>{{ $adminUser->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        @endcan
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@push('modals')
<div class="custom-modal reservation-customer-modal" id="addCustomerModal" style="display:none">
    <div class="reservation-customer-modal__dialog">
        <div class="reservation-customer-modal__header">
            <h2 class="reservation-customer-modal__title">{{ __('dashboard.Add New Customer') }}</h2>
            <button type="button" class="hdr-btn" data-modal-close onclick="closeReservationCustomerModal()" aria-label="{{ __('dashboard.Close') }}">
                <i class="fa-solid fa-xmark"></i>
            </button>
        </div>
        <div class="reservation-customer-modal__body">
            <div>
                <label class="required app-label">{{ __('dashboard.Customer Name') }}</label>
                <input type="text" class="app-input" id="customer_name_modal">
            </div>
            <div class="app-grid">
                <div class="md:col-span-6 mb-3">
                    <label class="required app-label">{{ __('dashboard.Phone') }}</label>
                    <input type="text" class="app-input" id="customer_phone_modal">
                </div>
                <div class="md:col-span-6 mb-3">
                    <label class="app-label">{{ __('dashboard.Gender') }}</label>
                    <select class="app-input app-select" id="customer_gender_modal">
                        <option value="female">{{ __('dashboard.Female') }}</option>
                        <option value="male">{{ __('dashboard.Male') }}</option>
                    </select>
                </div>
            </div>
            <div class="app-grid">
                <div class="md:col-span-6 mb-3">
                    <label class="app-label">{{ __('dashboard.Other Phone') }}</label>
                    <input type="text" class="app-input" id="customer_other_phone_modal">
                </div>
                <div class="md:col-span-6 mb-3">
                    <label class="app-label">{{ __('dashboard.Governorate') }}</label>
                    <input type="text" class="app-input" id="customer_governorate_modal">
                </div>
            </div>
            <div>
                <label class="app-label">{{ __('dashboard.Address') }}</label>
                <input type="text" class="app-input" id="customer_address_modal">
            </div>
        </div>
        <div class="reservation-customer-modal__footer">
            <button type="button" class="app-btn app-btn--secondary" data-modal-close onclick="closeReservationCustomerModal()">{{ __('dashboard.Close') }}</button>
            <button type="button" class="app-btn app-btn--primary" id="save_customer_btn">
                <i class="fa-solid fa-check2"></i>
                {{ __('dashboard.Save Customer') }}
            </button>
        </div>
    </div>
</div>
@endpush

@section('scripts')
<script>
const reservationCreateRoutes = {
    productsSearch: @json(route('dashboard.products.search')),
    findProductBySKU: @json(route('dashboard.reservations.findProductBySKU')),
    customersSearch: @json(route('dashboard.customers.search')),
    customersStore: @json(route('dashboard.customers.storeAjax')),
    reservationOptions: @json(route('dashboard.reservations.getOptions')),
    availability: @json(route('dashboard.reservations.checkAvailability')),
};

const reservationCreateLabels = {
    noProduct: 'يجب اختيار المنتج',
    noCustomer: 'يجب اختيار العميل',
    depositTooHigh: 'قيمة الدفعة الأولى لا يمكن أن تكون أكبر من إجمالي الحجز',
    loadingSubmit: 'جارٍ الإضافة...',
    noOptions: @json(__('dashboard.No reservation options for this category.')),
    noProductBySku: @json(__('dashboard.No product found with this SKU.')),
    skuSearchError: @json(__('dashboard.An error occurred while searching by SKU.')),
    customerSaveError: @json(__('dashboard.An error occurred while saving the customer.')),
    success: @json(__('dashboard.Success')),
    error: @json(__('dashboard.Error')),
    ok: @json(__('dashboard.Ok')),
    unpaid: @json(__('dashboard.Unpaid')),
    partial: @json(__('dashboard.Partial')),
    paid: @json(__('dashboard.Paid')),
};

function reservationFormComponent() {
    const root = document.querySelector('[data-reservation-create-root]');
    if (!root) return null;
    // Alpine v3: access component data via _x_dataStack
    return root._x_dataStack?.[0] ?? null;
}

function openReservationCustomerModal() {
    const modal = document.getElementById('addCustomerModal');
    if (!modal) return;

    if (typeof window.openModal === 'function') {
        window.openModal('addCustomerModal');
    } else {
        modal.style.display = 'flex';
        requestAnimationFrame(() => modal.classList.add('modal-visible'));
        document.body.style.overflow = 'hidden';
    }

    setTimeout(() => {
        document.getElementById('customer_name_modal')?.focus();
    }, 50);
}

function closeReservationCustomerModal() {
    const modal = document.getElementById('addCustomerModal');
    if (!modal) return;

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

    modal.classList.remove('modal-visible');
    setTimeout(() => {
        modal.style.display = 'none';
        document.body.style.overflow = '';
    }, 200);
}

function parseInputDate(value) {
    const parts = String(value || '').split('-').map(Number);
    if (parts.length !== 3 || parts.some(Number.isNaN)) return null;
    return new Date(parts[0], parts[1] - 1, parts[2]);
}

function formatInputDate(date) {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
}

document.addEventListener('alpine:init', () => {
    Alpine.data('reservationForm', () => ({
        selectedProduct: @json($selectedProduct),
        productSearch: '',
        productResults: [],
        productSearching: false,
        productSearched: false,
        productSelected: {{ $selectedProduct ? 'true' : 'false' }},

        selectedCustomer: @json($selectedCustomer),
        customerSearch: '',
        customerResults: [],
        customerSearching: false,
        customerSearched: false,
        customerSelected: {{ $selectedCustomer ? 'true' : 'false' }},

        basePrice: @json((float) old('base_price', $selectedProduct?->price ?? 0)),
        discount: @json((float) old('discount', 0)),
        discountType: @json(old('discount_type', 'fixed')),
        deposit: @json((float) old('deposit', 0)),
        shippingType: @json(old('shipping_type', 'pickup')),
        shippingCost: @json((float) old('shipping_cost', 0)),
        loyaltyPoints: @json((int) old('loyalty_points', 0)),

        init() {
            this.$watch('basePrice', () => this.calculateTotals());
            this.$watch('discount', () => this.calculateTotals());
            this.$watch('discountType', () => this.calculateTotals());
            this.$watch('deposit', () => this.calculateTotals());
            this.$watch('shippingType', () => {
                if (this.shippingType !== 'paid') {
                    this.shippingCost = 0;
                }
                this.calculateTotals();
            });
            this.$watch('shippingCost', () => this.calculateTotals());
            this.$watch('loyaltyPoints', () => this.calculateTotals());

            this.$nextTick(() => {
                this.normalizeInitialState();
                this.calculateTotals();
                this.updateCustomerPoints();

                if (this.selectedProduct?.product_category_id) {
                    this.loadReservationOptions(this.selectedProduct.product_category_id);
                }

                this.checkAvailability();
            });
        },

        normalizeInitialState() {
            if (this.selectedProduct) {
                this.selectedProduct.product_category_id = this.selectedProduct.product_category_id || this.selectedProduct.category_id || '';
                this.productSelected = true;
            }

            if (this.selectedCustomer) {
                this.selectedCustomer = this.normalizedCustomer(this.selectedCustomer);
                this.customerSelected = true;
            }
        },

        normalizedCustomer(customer) {
            return {
                reservations_count: 0,
                sales_count: 0,
                loyalty_points: 0,
                ...customer,
            };
        },

        toNumber(value) {
            const number = Number.parseFloat(value);
            return Number.isFinite(number) ? number : 0;
        },

        formatMoney(value) {
            return this.toNumber(value).toFixed(2);
        },

        productImageUrl(product) {
            const path = String(product?.main_image || '').trim();
            if (!path) return '/assets/media/svg/files/blank-image.svg';
            if (/^(https?:)?\/\//.test(path) || path.startsWith('/')) return path;
            return `/storage/${path.replace(/^storage\//, '')}`;
        },

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

        async fetchJson(url) {
            const response = await fetch(url, { headers: { Accept: 'application/json' } });
            const payload = await response.json().catch(() => ({}));

            if (!response.ok) {
                const error = new Error(payload.message || reservationCreateLabels.error);
                error.payload = payload;
                throw error;
            }

            return payload;
        },

        buildUrl(route, params = {}) {
            const url = new URL(route, window.location.origin);
            Object.entries(params).forEach(([key, value]) => url.searchParams.set(key, value));
            return url.toString();
        },

        async searchProducts(force = false) {
            const query = String(this.productSearch || '').trim();
            if (!force && query.length < 3) {
                this.productResults = [];
                this.productSearched = false;
                return;
            }
            if (query.length < 1) return;

            this.productSearching = true;
            this.productSearched = false;

            try {
                const data = await this.fetchJson(this.buildUrl(reservationCreateRoutes.productsSearch, { keyword: query }));
                this.productResults = Array.isArray(data) ? data : [];
                this.productSearched = true;
            } catch (error) {
                console.error('Error searching products:', error);
                this.productResults = [];
                this.productSearched = true;
                if (force) {
                    this.notify('error', error.message || reservationCreateLabels.error);
                }
            } finally {
                this.productSearching = false;
            }
        },

        selectProduct(product) {
            const categoryId = product.product_category_id || product.category_id || '';
            this.selectedProduct = { ...product, product_category_id: categoryId };
            this.productSelected = true;
            this.productResults = [];
            this.productSearch = '';
            this.productSearched = false;
            this.basePrice = this.toNumber(product.price);
            this.calculateTotals();

            if (categoryId) {
                this.loadReservationOptions(categoryId);
            } else {
                this.renderReservationOptions([]);
            }

            this.$nextTick(() => this.checkAvailability());
        },

        clearProduct() {
            this.selectedProduct = null;
            this.productSelected = false;
            this.productResults = [];
            this.productSearched = false;
            this.basePrice = 0;
            this.calculateTotals();
            this.renderReservationOptions([]);
            this.renderAvailabilityPanel(null);
        },

        async addProductBySKU() {
            const sku = String(this.productSearch || '').trim();
            if (!sku) return;

            try {
                const data = await this.fetchJson(this.buildUrl(reservationCreateRoutes.findProductBySKU, { sku }));

                if (data.success) {
                    this.selectProduct(data.product);
                } else {
                    this.notify('error', data.message || reservationCreateLabels.noProductBySku);
                }
            } catch (error) {
                console.error('Error finding product by SKU:', error);
                this.notify('error', error.message || reservationCreateLabels.skuSearchError);
            }
        },

        async searchCustomers(force = false) {
            const query = String(this.customerSearch || '').trim();
            if (!force && query.length < 2) {
                this.customerResults = [];
                this.customerSearched = false;
                return;
            }
            if (query.length < 1) return;

            this.customerSearching = true;
            this.customerSearched = false;

            try {
                const data = await this.fetchJson(this.buildUrl(reservationCreateRoutes.customersSearch, { keyword: query }));
                this.customerResults = Array.isArray(data) ? data.map(customer => this.normalizedCustomer(customer)) : [];
                this.customerSearched = true;
            } catch (error) {
                console.error('Error searching customers:', error);
                this.customerResults = [];
                this.customerSearched = true;
                if (force) {
                    this.notify('error', error.message || reservationCreateLabels.error);
                }
            } finally {
                this.customerSearching = false;
            }
        },

        selectCustomer(customer) {
            this.selectedCustomer = this.normalizedCustomer(customer);
            this.customerSelected = true;
            this.customerResults = [];
            this.customerSearch = '';
            this.customerSearched = false;
            this.updateCustomerPoints();
            this.calculateTotals();
        },

        clearCustomer() {
            this.selectedCustomer = null;
            this.customerSelected = false;
            this.customerResults = [];
            this.customerSearched = false;
            this.loyaltyPoints = 0;
            this.updateCustomerPoints();
            this.calculateTotals();
        },

        updateCustomerPoints() {
            const pointValue = @json((float) ($loyaltyPointValue ?? 0.05));
            const balance = this.selectedCustomer ? Math.max(0, Number.parseInt(this.selectedCustomer.loyalty_points || 0, 10)) : 0;
            const value = (balance * pointValue).toFixed(2);

            const balanceEl = document.getElementById('customer_points_balance');
            const valueEl = document.getElementById('customer_points_value');
            const inputEl = document.getElementById('loyalty_points_input');

            if (balanceEl) balanceEl.textContent = balance;
            if (valueEl) valueEl.textContent = value;
            if (inputEl) inputEl.setAttribute('max', balance);
            if (this.toNumber(this.loyaltyPoints) > balance) {
                this.loyaltyPoints = balance;
            }
        },

        setText(id, value) {
            const el = document.getElementById(id);
            if (el) el.textContent = value;
        },

        setValue(id, value) {
            const el = document.getElementById(id);
            if (el) el.value = value;
        },

        calculateTotals() {
            const basePrice = Math.max(0, this.toNumber(this.basePrice));
            const discountVal = Math.max(0, this.toNumber(this.discount));
            let discountAmt = this.discountType === 'percent' ? (basePrice * discountVal) / 100 : discountVal;
            discountAmt = Math.min(Math.max(0, discountAmt), basePrice);

            const priceAfterDiscount = Math.max(0, basePrice - discountAmt);

            let totalTaxes = 0;
            document.querySelectorAll('input[name="taxes[]"]:checked').forEach(el => {
                const rate = this.toNumber(el.dataset.rate);
                totalTaxes += (priceAfterDiscount * rate) / 100;
            });

            let totalExpenses = 0;
            document.querySelectorAll('input[name="additional_expenses[]"]:checked').forEach(el => {
                totalExpenses += this.toNumber(el.dataset.amount);
            });

            const shippingCost = this.shippingType === 'paid' ? Math.max(0, this.toNumber(this.shippingCost)) : 0;
            let finalPrice = priceAfterDiscount + totalTaxes + totalExpenses + shippingCost;

            const pointValue = @json((float) ($loyaltyPointValue ?? 0.05));
            const maxPoints = Math.max(0, Number.parseInt(this.selectedCustomer?.loyalty_points || 0, 10));
            const loyaltyPointsToRedeem = Math.min(Math.max(0, Math.floor(this.toNumber(this.loyaltyPoints))), maxPoints);
            const loyaltyDiscount = Math.min(loyaltyPointsToRedeem * pointValue, finalPrice);
            finalPrice -= loyaltyDiscount;

            const deposit = Math.max(0, this.toNumber(this.deposit));
            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 statusLabels = {
                unpaid: reservationCreateLabels.unpaid,
                partial: reservationCreateLabels.partial,
                paid: reservationCreateLabels.paid,
            };

            this.setText('base_price_preview', basePrice.toFixed(2));
            this.setText('discount_preview', discountAmt.toFixed(2));
            this.setText('deposit_preview', deposit.toFixed(2));
            this.setText('final_total_preview', finalPrice.toFixed(2));
            this.setValue('remaining_amount', remaining.toFixed(2));
            this.setValue('payment_status', paymentStatus);
            this.setValue('payment_status_display', statusLabels[paymentStatus]);
            this.setValue('discount_amount', discountAmt.toFixed(2));
            this.setValue('total_taxes', totalTaxes.toFixed(2));
            this.setValue('total_additional_expenses', totalExpenses.toFixed(2));
            this.setValue('shipping_cost_amount', shippingCost.toFixed(2));
            this.setValue('final_total', finalPrice.toFixed(2));
        },

        async loadReservationOptions(categoryId) {
            try {
                const options = await this.fetchJson(this.buildUrl(reservationCreateRoutes.reservationOptions, { category_id: categoryId }));
                this.renderReservationOptions(Array.isArray(options) ? options : []);
            } catch (error) {
                console.error('Error loading options:', error);
                this.renderReservationOptions([]);
            }
        },

        renderReservationOptions(options) {
            const container = document.getElementById('reservation_options_container');
            if (!container) return;

            if (!options.length) {
                container.innerHTML = `<p class="text-slate-500 dark:text-slate-400 mb-0">${this.escapeHtml(reservationCreateLabels.noOptions)}</p>`;
                return;
            }

            container.innerHTML = options.map(option => {
                const id = Number.parseInt(option.id, 10);
                const name = this.escapeHtml(option.name || '');

                if (option.type === 'multiple') {
                    const optionValues = Array.isArray(option.values) ? option.values : [];
                    const values = optionValues.map(value => {
                        const valueName = this.escapeHtml(value.value_name || '');
                        return `<option value="${valueName}">${valueName}</option>`;
                    }).join('');

                    return `
                        <div class="reservation-create-field">
                            <label class="app-label">${name}</label>
                            <select name="option_values[${id}]" class="app-input app-select">
                                <option value="">-- ${name} --</option>
                                ${values}
                            </select>
                        </div>
                    `;
                }

                return `
                    <div class="reservation-create-field">
                        <label class="app-label">${name}</label>
                        <input type="text" name="option_values[${id}]" class="app-input" placeholder="${name}">
                    </div>
                `;
            }).join('');
        },

        async checkAvailability() {
            const sku = this.selectedProduct?.sku;
            const eventDate = document.getElementById('event_date')?.value;
            const isFirstTime = document.getElementById('is_first_time')?.checked ? 1 : 0;

            if (!sku || !eventDate) {
                this.renderAvailabilityPanel(null);
                return;
            }

            try {
                const data = await this.fetchJson(this.buildUrl(reservationCreateRoutes.availability, {
                    product_sku: sku,
                    event_date: eventDate,
                    is_first_time: isFirstTime,
                }));

                const state = {
                    variant: 'success',
                    icon: 'fa-solid fa-circle-check',
                    title: 'المنتج متاح',
                    message: 'يمكن إنشاء الحجز لهذا التاريخ.',
                    badge: 'متاح',
                    dateLabel: eventDate,
                    skuLabel: sku,
                    modeLabel: isFirstTime ? @json(__('dashboard.Is First Time?')) : '',
                };

                if (data.blockedByScrap) {
                    state.variant = 'danger';
                    state.icon = 'fa-solid fa-circle-exclamation';
                    state.title = 'المنتج هالك';
                    state.message = 'هذا المنتج غير متاح للحجز.';
                    state.badge = 'غير متاح';
                } else if (data.blockedByMaintenance) {
                    state.variant = 'danger';
                    state.icon = 'fa-solid fa-screwdriver-wrench';
                    state.title = 'المنتج في الصيانة';
                    state.message = 'لا يمكن حجز المنتج أثناء الصيانة.';
                    state.badge = 'صيانة';
                } else if (!data.isAvailable) {
                    state.variant = 'danger';
                    state.icon = 'fa-solid fa-calendar-xmark';
                    state.title = 'المنتج غير متاح';
                    state.message = 'يوجد تعارض مع هذا التاريخ.';
                    state.badge = 'تعارض';
                } else if (data.firstTimeCheckRequested && !data.isAvailableForFirstTime) {
                    state.variant = 'danger';
                    state.icon = 'fa-solid fa-star';
                    state.title = 'غير متاح كلبسة أولى';
                    state.message = 'يوجد حجز سابق يمنع اعتباره لبسة أولى.';
                    state.badge = 'لبسة أولى';
                }

                this.renderAvailabilityPanel(state);
            } catch (error) {
                console.error('Error checking availability:', error);
                this.renderAvailabilityPanel({
                    variant: 'warning',
                    icon: 'fa-solid fa-triangle-exclamation',
                    title: @json(__('dashboard.Error checking availability')),
                    message: 'تعذر التحقق من التوفر الآن.',
                    badge: 'تنبيه',
                    dateLabel: eventDate,
                    skuLabel: sku,
                    modeLabel: '',
                });
            }
        },

        renderAvailabilityPanel(state) {
            const panel = document.getElementById('reservation_schedule_availability');
            if (!panel) return;

            if (!state) {
                panel.className = 'reservation-availability-panel';
                panel.innerHTML = '';
                return;
            }

            const chips = [
                state.dateLabel ? `<span class="reservation-availability-panel__chip"><i class="fa-solid fa-calendar-days"></i>${this.escapeHtml(state.dateLabel)}</span>` : '',
                state.skuLabel ? `<span class="reservation-availability-panel__chip"><i class="fa-solid fa-barcode"></i>${this.escapeHtml(state.skuLabel)}</span>` : '',
                state.modeLabel ? `<span class="reservation-availability-panel__chip"><i class="fa-solid fa-star"></i>${this.escapeHtml(state.modeLabel)}</span>` : '',
            ].filter(Boolean).join('');

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

        notify(icon, text) {
            if (typeof Swal !== 'undefined') {
                Swal.fire({
                    icon,
                    title: icon === 'success' ? reservationCreateLabels.success : reservationCreateLabels.error,
                    html: text,
                    confirmButtonText: reservationCreateLabels.ok,
                });
                return;
            }

            alert(String(text).replace(/<[^>]*>/g, ''));
        },

        handleSubmit(e) {
            this.calculateTotals();

            if (!this.selectedProduct) {
                e.preventDefault();
                e.stopImmediatePropagation();
                this.notify('error', reservationCreateLabels.noProduct);
                return false;
            }

            if (!this.selectedCustomer) {
                e.preventDefault();
                e.stopImmediatePropagation();
                this.notify('error', reservationCreateLabels.noCustomer);
                return false;
            }

            const finalTotal = this.toNumber(document.getElementById('final_total')?.value);
            const deposit = this.toNumber(this.deposit);

            if (deposit > finalTotal) {
                e.preventDefault();
                e.stopImmediatePropagation();
                this.notify('error', reservationCreateLabels.depositTooHigh);
                return false;
            }

            const submitButton = document.getElementById('submit_reservation_btn');
            if (submitButton) {
                submitButton.disabled = true;
                submitButton.innerHTML = `<span class="app-spinner app-spinner--sm"></span><span>${reservationCreateLabels.loadingSubmit}</span>`;
            }
        }
    }));
});

document.addEventListener('alpine:initialized', () => {
    const eventDateEl = document.getElementById('event_date');
    const isFirstTimeEl = document.getElementById('is_first_time');

    if (eventDateEl) {
        eventDateEl.addEventListener('change', function() {
            const eDate = parseInputDate(this.value);
            if (eDate) {
                const fittingDate = new Date(eDate);
                fittingDate.setDate(fittingDate.getDate() - 1);
                document.getElementById('fitting_date').value = formatInputDate(fittingDate);

                const pickupDate = new Date(eDate);
                pickupDate.setDate(pickupDate.getDate() - 1);
                document.getElementById('customer_pickup_date').value = formatInputDate(pickupDate);

                const returnDate = new Date(eDate);
                returnDate.setDate(returnDate.getDate() + 1);
                document.getElementById('customer_return_date').value = formatInputDate(returnDate);
            }

            reservationFormComponent()?.checkAvailability();
        });
    }

    if (isFirstTimeEl) {
        isFirstTimeEl.addEventListener('change', () => {
            reservationFormComponent()?.checkAvailability();
        });
    }

    document.querySelectorAll('input[name="taxes[]"], input[name="additional_expenses[]"]').forEach(el => {
        el.addEventListener('change', () => {
            reservationFormComponent()?.calculateTotals();
        });
    });
});

document.addEventListener('DOMContentLoaded', () => {
    document.getElementById('save_customer_btn')?.addEventListener('click', async function() {
        const button = this;
        const originalHtml = button.innerHTML;
        const payload = {
            name: document.getElementById('customer_name_modal')?.value || '',
            phone: document.getElementById('customer_phone_modal')?.value || '',
            other_phone: document.getElementById('customer_other_phone_modal')?.value || '',
            gender: document.getElementById('customer_gender_modal')?.value || 'female',
            governorate: document.getElementById('customer_governorate_modal')?.value || '',
            address: document.getElementById('customer_address_modal')?.value || '',
        };

        button.disabled = true;
        button.innerHTML = `<span class="app-spinner app-spinner--sm"></span><span>${reservationCreateLabels.loadingSubmit}</span>`;

        try {
            const response = await fetch(reservationCreateRoutes.customersStore, {
                method: 'POST',
                headers: {
                    Accept: 'application/json',
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '',
                },
                body: JSON.stringify(payload),
            });
            const data = await response.json().catch(() => ({}));

            if (!response.ok || !data.success) {
                const error = new Error(data.message || reservationCreateLabels.customerSaveError);
                error.payload = data;
                throw error;
            }

            reservationFormComponent()?.selectCustomer(data.customer);
            closeReservationCustomerModal();

            ['customer_name_modal', 'customer_phone_modal', 'customer_other_phone_modal', 'customer_governorate_modal', 'customer_address_modal'].forEach(id => {
                const input = document.getElementById(id);
                if (input) input.value = '';
            });

            if (typeof Swal !== 'undefined') {
                Swal.fire({
                    icon: 'success',
                    title: reservationCreateLabels.success,
                    text: data.message || @json(__('dashboard.Customer created successfully')),
                    confirmButtonText: reservationCreateLabels.ok,
                });
            }
        } catch (error) {
            let message = error.message || reservationCreateLabels.customerSaveError;
            if (error.payload?.errors) {
                message = Object.values(error.payload.errors).flat().join('<br>');
            }

            reservationFormComponent()?.notify('error', message);
        } finally {
            button.disabled = false;
            button.innerHTML = originalHtml;
        }
    });
});
</script>
@endsection