@extends('layouts.app')

@section('title', __('dashboard.Check Product Availability'))
@section('page_heading', __('dashboard.Check Product Availability'))

@section('content')
@include('layouts.partials.workspace-page-styles')

<style>
.availability-page {
    display: grid;
    gap: 1.25rem;
}
.avail-form-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}
.avail-form-card__title {
    font-size: .95rem;
    font-weight: 900;
    color: #0f172a;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: .6rem;
}
.avail-form-card__title::before {
    content: "";
    width: .75rem; height: .75rem;
    border-radius: 999px;
    background: var(--c-primary-pale);
    box-shadow: 0 0 0 5px var(--c-primary-bg);
    flex-shrink: 0;
}
.avail-form-grid {
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    gap:.75rem;
    align-items:start;
}
.avail-form-grid > * {
    min-width:0;
}
.avail-field { position: relative; }
.avail-field__clear {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    inset-inline-end:.65rem;
    width:30px;
    height:30px;
    border:0;
    border-radius:9px;
    background:#f1f5f9;
    color:#64748b;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}
.avail-field__clear:hover {
    background:#fee2e2;
    color:#dc2626;
}
.avail-field__icon {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    inset-inline-start: .9rem;
    color: #94a3b8;
    pointer-events: none;
    z-index: 2;
    font-size: .95rem;
}
.avail-field .app-input {
    padding-inline-start: 2.5rem;
    min-height: 46px;
    border-radius: 12px;
}
.avail-first-wear {
    display:flex;
    align-items:center;
    gap:.5rem;
    min-height:46px;
    cursor:pointer;
    border-radius:12px;
    border:1px solid var(--border);
    background:#fff;
    padding:0 .9rem;
}
.avail-first-wear__input {
    width:1rem;
    height:1rem;
    margin:0;
    flex-shrink:0;
}
.avail-first-wear__text {
    font-size:.82rem;
    font-weight:700;
    color:#334155;
}
.avail-search-results {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + .35rem);
    z-index: 30;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(15,23,42,.12);
    overflow: hidden;
    max-height: 260px;
    overflow-y: auto;
    display: block;
}
.avail-result-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    cursor: pointer;
    width: 100%;
    border: 0;
    border-bottom: 1px solid #f1f5f9;
    color: inherit;
    font-family: inherit;
    text-align: inherit;
    transition: background .15s;
}
.avail-result-item:last-child { border-bottom: none; }
.avail-result-item:hover { background: var(--c-primary-bg); }
.avail-result-item.is-selected {
    background: var(--c-primary-bg);
    box-shadow: inset 3px 0 0 var(--c-primary);
}
.avail-result-item__check {
    margin-inline-start:auto;
    width:26px;
    height:26px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#16a34a;
    background:#dcfce7;
    flex-shrink:0;
}
.avail-result-item__img {
    width: 40px; height: 40px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid #e2e8f0;
    flex-shrink: 0;
}
.avail-result-item__name { font-size: .85rem; font-weight: 800; color: #0f172a; }
.avail-result-item__sku  { font-size: .75rem; font-weight: 600; color: #94a3b8; }

.avail-status-card {
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.avail-status-card--success { background: #f0fdf4; border: 1px solid #bbf7d0; }
.avail-status-card--danger  { background: #fef2f2; border: 1px solid #fecaca; }
.avail-status-card--warning { background: #fffbeb; border: 1px solid #fde68a; }
.avail-status-card__icon {
    width: 48px; height: 48px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; flex-shrink: 0;
}
.avail-status-card--success .avail-status-card__icon { background: #dcfce7; color: #16a34a; }
.avail-status-card--danger  .avail-status-card__icon { background: #fee2e2; color: #dc2626; }
.avail-status-card--warning .avail-status-card__icon { background: #fef3c7; color: #d97706; }
.avail-status-card__title { font-size: 1rem; font-weight: 900; }
.avail-status-card--success .avail-status-card__title { color: #15803d; }
.avail-status-card--danger  .avail-status-card__title { color: #b91c1c; }
.avail-status-card--warning .avail-status-card__title { color: #92400e; }
.avail-status-card__sub { font-size: .8rem; font-weight: 600; color: #64748b; margin-top: .2rem; }

.avail-empty {
    background: #fff;
    border: 1px solid #e8ecf4;
    border-radius: 20px;
    min-height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
}
.avail-empty__icon {
    width: 72px; height: 72px; border-radius: 22px;
    background: var(--c-primary-bg);
    color: var(--c-primary-dark);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.75rem;
    margin: 0 auto 1rem;
}
.avail-empty__title { font-size: 1rem; font-weight: 900; color: #0f172a; margin-bottom: .4rem; }
.avail-empty__text  { font-size: .85rem; color: #64748b; font-weight: 600; }

.avail-product-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--c-primary-bg);
    border-radius: 14px;
    margin-bottom: 1.25rem;
}
.avail-selected-product {
    margin-top:.75rem;
    margin-bottom:1rem;
    padding:.85rem;
    border:1px solid var(--c-primary-pale);
    background:linear-gradient(135deg,var(--c-primary-bg),#fff);
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.75rem;
}
.avail-action-field .app-btn,
.avail-first-wear {
    min-height:46px;
}
.avail-action-field .app-label,
.avail-first-wear-field .app-label {
    min-height:1.55rem;
}
.avail-selected-product__main {
    display:flex;
    align-items:center;
    gap:.75rem;
    min-width:0;
}
.avail-selected-product__img {
    width:48px;
    height:48px;
    border-radius:12px;
    object-fit:cover;
    border:1px solid var(--c-primary-pale);
    flex-shrink:0;
}
.avail-selected-product__name {
    font-size:.88rem;
    font-weight:900;
    color:#0f172a;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.avail-selected-product__meta {
    margin-top:.12rem;
    font-size:.74rem;
    font-weight:700;
    color:#64748b;
}
.avail-selected-product__badge {
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    padding:.28rem .7rem;
    border-radius:999px;
    background:#f0fdf4;
    color:#16a34a;
    font-size:.72rem;
    font-weight:900;
    white-space:nowrap;
}
.avail-product-meta__img {
    width: 56px; height: 56px; border-radius: 12px;
    object-fit: cover; border: 1px solid var(--c-primary-pale);
    flex-shrink: 0;
}
.avail-product-meta__name { font-size: .95rem; font-weight: 900; color: #0f172a; }
.avail-product-meta__sku  { font-size: .78rem; font-weight: 700; color: #64748b; margin-top: .15rem; }

.avail-stats { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.avail-stat {
    padding: .75rem 1.1rem;
    border-radius: 12px;
    background: #f8f9ff;
    border: 1px solid #e8ecf4;
    min-width: 110px;
}
.avail-stat__value { font-size: 1.4rem; font-weight: 900; color: #0f172a; line-height: 1; }
.avail-stat__label { font-size: .72rem; font-weight: 700; color: #64748b; margin-top: .25rem; }
.avail-stat--danger .avail-stat__value { color: #dc2626; }

.conflict-row td { background: #fff5f5 !important; }
.avail-inline-note { color:#94a3b8;font-size:.82rem; }
.avail-search-empty {
    padding:.75rem 1rem;
    text-align:center;
    color:#94a3b8;
    font-size:.82rem;
}
.avail-image-fallback {
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f1f5f9;
}
.avail-history-panel {
    border-radius:var(--radius-lg);
    overflow:hidden;
    background:#fff;
    border:1px solid #e8ecf4;
    box-shadow:0 2px 8px rgba(15,23,42,.04);
}
.avail-history-panel__header {
    padding:1rem 1.25rem;
    border-bottom:1px solid #f1f5f9;
}
.avail-history-panel__title {
    font-size:.9rem;
    font-weight:900;
    color:#0f172a;
}
.avail-history-panel__sub {
    margin-top:.2rem;
    font-size:.78rem;
    font-weight:600;
    color:#64748b;
}
.avail-history-table th {
    background:#f8f9ff;
    color:#64748b;
    font-size:.74rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.04em;
}
.avail-history-table td {
    color:#475569;
    font-size:.82rem;
    font-weight:700;
}
.avail-history-table td strong {
    color:#0f172a;
}
.avail-conflict-badge,
.avail-badge {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:.24rem .6rem;
    border-radius:999px;
    font-size:.72rem;
    font-weight:800;
}
.avail-conflict-badge {
    background:#fef2f2;
    color:#dc2626;
}
.avail-badge--warning {
    background:#fffbeb;
    color:#d97706;
}
.avail-badge--success {
    background:#f0fdf4;
    color:#16a34a;
}
.avail-badge--danger {
    background:#fef2f2;
    color:#dc2626;
}
.avail-badge--info {
    background:#eff6ff;
    color:#2563eb;
}
.avail-badge--dark {
    background:#f1f5f9;
    color:#475569;
}
.avail-table-link {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    border-radius:10px;
    color:var(--c-primary-dark);
    background:var(--c-primary-bg);
    text-decoration:none;
}
[x-cloak] { display: none !important; }

.dark .avail-form-card__title { color: #f1f5f9; }
.dark .avail-field__icon { color:#64748b; }
.dark .avail-field__clear { background:rgba(148,163,184,.1); color:#94a3b8; }
.dark .avail-field__clear:hover { background:rgba(220,38,38,.15); color:#fca5a5; }
.dark .avail-first-wear { background:#111827; border-color:rgba(148,163,184,.16); }
.dark .avail-first-wear__text { color:#cbd5e1; }
.dark .avail-search-results { background: #1e293b; border-color: rgba(148,163,184,.2); }
.dark .avail-result-item { border-bottom-color: rgba(148,163,184,.1); }
.dark .avail-result-item:hover { background: rgba(37,99,235,.1); }
.dark .avail-result-item.is-selected { background: rgba(37,99,235,.14); box-shadow: inset 3px 0 0 var(--c-primary-muted); }
.dark .avail-result-item__check { background:rgba(22,163,74,.18); color:#86efac; }
.dark .avail-result-item__img { border-color:rgba(148,163,184,.15); }
.dark .avail-result-item__name { color: #f1f5f9; }
.dark .avail-result-item__sku,
.dark .avail-search-empty,
.dark .avail-inline-note { color:#94a3b8; }
.dark .avail-image-fallback { background:rgba(148,163,184,.08); color:#94a3b8; }
.dark .avail-empty { background: #111827; border-color: rgba(148,163,184,.12); }
.dark .avail-empty__title { color: #f1f5f9; }
.dark .avail-empty__text { color:#94a3b8; }
.dark .avail-product-meta { background: rgba(37,99,235,.1); }
.dark .avail-product-meta__name { color: #f1f5f9; }
.dark .avail-product-meta__sku { color:#94a3b8; }
.dark .avail-selected-product { background:rgba(37,99,235,.1); border-color:rgba(37,99,235,.25); }
.dark .avail-selected-product__name { color:#f8fafc; }
.dark .avail-selected-product__meta { color:#94a3b8; }
.dark .avail-selected-product__badge { background:rgba(22,163,74,.18); color:#86efac; }
.dark .avail-stat { background: #1e293b; border-color: rgba(148,163,184,.12); }
.dark .avail-stat__value { color: #f1f5f9; }
.dark .avail-stat__label { color:#94a3b8; }
.dark .conflict-row td { background: rgba(220,38,38,.08) !important; }
.dark .avail-history-panel { background:#111827; border-color:rgba(148,163,184,.12); box-shadow:none; }
.dark .avail-history-panel__header { border-bottom-color:rgba(148,163,184,.1); }
.dark .avail-history-panel__title { color:#f1f5f9; }
.dark .avail-history-panel__sub { color:#94a3b8; }
.dark .avail-history-table th { background:rgba(148,163,184,.06); color:#cbd5e1; }
.dark .avail-history-table td { color:#cbd5e1; }
.dark .avail-history-table td strong { color:#f8fafc; }
.dark .avail-conflict-badge,
.dark .avail-badge--danger { background:rgba(220,38,38,.15); color:#fca5a5; }
.dark .avail-badge--warning { background:rgba(217,119,6,.18); color:#fcd34d; }
.dark .avail-badge--success { background:rgba(22,163,74,.18); color:#86efac; }
.dark .avail-badge--info { background:rgba(37,99,235,.18); color:#93c5fd; }
.dark .avail-badge--dark { background:rgba(148,163,184,.14); color:#cbd5e1; }
.dark .avail-table-link { background:rgba(37,99,235,.16); color:#93c5fd; }
@media (max-width: 1023.98px) {
    .avail-form-grid > * {
        grid-column:1 / -1;
    }
}
</style>

<div class="availability-page workspace-page" x-data="availabilityChecker()">
    {{-- Search form --}}
    <div class="workspace-shell">
    <div class="workspace-body">
    <div class="avail-form-card">
        <div class="avail-form-card__title">
            <i class="fa-solid fa-magnifying-glass" style="color:var(--c-primary)"></i>
            {{ __('dashboard.Check Product Availability') }}
        </div>

        <div class="avail-form-grid">
            <div class="lg:col-span-5">
                <label class="app-label">{{ __('dashboard.Product') }}</label>
                <div class="avail-field" x-on:click.outside="searchOpen = false">
                    <span class="avail-field__icon"><i class="fa-solid fa-magnifying-glass"></i></span>
                    <input
                        type="text"
                        id="product_search"
                        class="app-input"
                        placeholder="{{ __('dashboard.Enter product name or SKU') }}"
                        x-model="productSearch"
                        x-on:input.debounce.250ms="handleProductInput()"
                        x-on:focus="if (productResults.length || productSearched) searchOpen = true"
                        autocomplete="off"
                    >
                    <button type="button" class="avail-field__clear" x-show="productSearch" x-cloak x-on:click="clearProduct()" aria-label="{{ __('dashboard.Reset') }}">
                        <i class="fa-solid fa-xmark"></i>
                    </button>
                    <input type="hidden" id="product_sku" x-model="productSku">
                    <div
                        id="product_search_results"
                        class="avail-search-results"
                        x-cloak
                        x-show="searchOpen && (productResults.length || productSearched)"
                    >
                        <template x-if="productResults.length === 0 && productSearched">
                            <div class="avail-search-empty">{{ __("dashboard.No results found") }}</div>
                        </template>
                        <template x-for="product in productResults" :key="product.id">
                            <button type="button" class="avail-result-item" :class="{ 'is-selected': isSelectedProduct(product) }" x-on:click="selectProduct(product)">
                                <template x-if="product.main_image">
                                    <img :src="productImageUrl(product)" :alt="product.name" class="avail-result-item__img">
                                </template>
                                <template x-if="!product.main_image">
                                    <span class="avail-result-item__img avail-image-fallback"><i class="fa-solid fa-image"></i></span>
                                </template>
                                <span>
                                    <span class="avail-result-item__name block" x-text="product.name"></span>
                                    <span class="avail-result-item__sku block" x-text="`SKU: ${product.sku}`"></span>
                                </span>
                                <span class="avail-result-item__check" x-show="isSelectedProduct(product)" x-cloak>
                                    <i class="fa-solid fa-check"></i>
                                </span>
                            </button>
                        </template>
                    </div>
                </div>
                <div class="avail-selected-product" x-show="selectedProduct && !result" x-cloak>
                    <div class="avail-selected-product__main">
                        <template x-if="selectedProduct?.main_image">
                            <img :src="productImageUrl(selectedProduct)" :alt="selectedProduct.name" class="avail-selected-product__img">
                        </template>
                        <template x-if="!selectedProduct?.main_image">
                            <span class="avail-selected-product__img avail-image-fallback"><i class="fa-solid fa-image"></i></span>
                        </template>
                        <div style="min-width:0">
                            <div class="avail-selected-product__name" x-text="selectedProduct?.name"></div>
                            <div class="avail-selected-product__meta" x-text="selectedProductMeta()"></div>
                        </div>
                    </div>
                    <span class="avail-selected-product__badge">
                        <i class="fa-solid fa-circle-check"></i>
                        تم اختيار المنتج
                    </span>
                </div>
            </div>

            <div class="lg:col-span-3">
                <label class="app-label">{{ __('dashboard.Event Date') }}</label>
                <div class="avail-field">
                    <span class="avail-field__icon"><i class="fa-solid fa-calendar-days"></i></span>
                    <input type="date" id="event_date" class="app-input" x-model="eventDate">
                </div>
            </div>

            <div class="lg:col-span-2 avail-first-wear-field">
                <label class="app-label">{{ __('dashboard.First Wear') }}</label>
                <label for="is_first_time_check" class="avail-first-wear">
                    <input type="checkbox" id="is_first_time_check" class="app-check__input avail-first-wear__input" x-model="isFirstTime">
                    <span class="avail-first-wear__text">{{ __('dashboard.First Wear') }}</span>
                </label>
            </div>

            <div class="lg:col-span-2 avail-action-field">
                <label class="app-label">&nbsp;</label>
                <button type="button" id="check_availability_btn" class="app-btn app-btn--primary w-full" x-on:click="checkAvailability()" :disabled="loading">
                    <span class="app-spinner app-spinner--sm me-1" x-cloak x-show="loading" aria-hidden="true"></span>
                    <i class="fa-solid fa-shield-halved me-1" x-show="!loading"></i>
                    {{ __('dashboard.Check Availability') }}
                </button>
            </div>
        </div>
    </div>

    {{-- Results --}}
    <div id="availability_result">
        <div class="avail-empty" x-show="loading" x-cloak>
            <div>
                <div class="avail-empty__icon"><span class="app-spinner" style="color:var(--c-primary)"></span></div>
                <div class="avail-empty__title">{{ __('dashboard.Please wait...') }}</div>
            </div>
        </div>

        <div class="avail-status-card avail-status-card--danger" x-show="!loading && errorMessage" x-cloak>
            <div class="avail-status-card__icon"><i class="fa-solid fa-circle-exclamation"></i></div>
            <div>
                <div class="avail-status-card__title">{{ __('dashboard.Error checking availability.') }}</div>
                <div class="avail-status-card__sub" x-text="errorMessage"></div>
            </div>
        </div>

        <div class="avail-empty" x-show="!loading && !result && !errorMessage">
            <div>
                <div class="avail-empty__icon"><i class="fa-solid fa-calendar-week"></i></div>
                <div class="avail-empty__title">{{ __('dashboard.Check Availability') }}</div>
                <div class="avail-empty__text">اختر المنتج وتاريخ المناسبة لمعرفة حالة التوفر.</div>
            </div>
        </div>

        <div x-show="!loading && result" x-cloak>
            <div class="avail-product-meta">
                <template x-if="availabilityProduct().main_image">
                    <img :src="productImageUrl(availabilityProduct())" :alt="availabilityProduct().name" class="avail-product-meta__img">
                </template>
                <div>
                    <div class="avail-product-meta__name" x-text="availabilityProduct().name"></div>
                    <div class="avail-product-meta__sku" x-text="productMetaText()"></div>
                </div>
            </div>

            <div class="avail-status-card" :class="`avail-status-card--${availabilityState().variant}`">
                <div class="avail-status-card__icon"><i :class="availabilityState().icon"></i></div>
                <div>
                    <div class="avail-status-card__title" x-text="availabilityState().label"></div>
                    <div class="avail-status-card__sub" x-text="`${labels.eventDate}: ${eventDate}`"></div>
                </div>
            </div>

            <div class="avail-stats">
                <div class="avail-stat">
                    <div class="avail-stat__value" x-text="allReservations().length"></div>
                    <div class="avail-stat__label">{{ __('dashboard.Total Reservations') }}</div>
                </div>
                <div class="avail-stat" :class="{ 'avail-stat--danger': conflictingReservations().length > 0 }">
                    <div class="avail-stat__value" x-text="conflictingReservations().length"></div>
                    <div class="avail-stat__label">{{ __('dashboard.Conflicting Reservations') }}</div>
                </div>
            </div>

            <div class="avail-history-panel" x-show="allReservations().length">
                <div class="avail-history-panel__header">
                    <div class="avail-history-panel__title">{{ __('dashboard.Reservations History') }}</div>
                    <div class="avail-history-panel__sub" x-text="`${allReservations().length} ${labels.reservationsFound}`"></div>
                </div>
                <div>
                    <div class="app-table-wrap">
                        <table class="app-table align-middle mb-0 avail-history-table">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>{{ __('dashboard.Event Date') }}</th>
                                    <th>{{ __('dashboard.Fitting Date') }}</th>
                                    <th>{{ __('dashboard.Status') }}</th>
                                    <th>{{ __('dashboard.First Wear') }}</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                <template x-for="reservation in allReservations()" :key="reservation.id">
                                    <tr :class="{ 'conflict-row': isConflict(reservation) }">
                                        <td>
                                            <strong x-text="`#${reservation.id}`"></strong>
                                            <span class="avail-conflict-badge" x-show="isConflict(reservation)">تعارض</span>
                                        </td>
                                        <td x-text="reservation.event_date || '-'"></td>
                                        <td x-text="reservation.fitting_date || '-'"></td>
                                        <td><span class="avail-badge" :class="statusClass(reservation.status)" x-text="statusLabel(reservation.status)"></span></td>
                                        <td>
                                            <span class="avail-badge avail-badge--warning" x-show="reservation.is_first_time">{{ __('dashboard.Yes') }}</span>
                                            <span class="avail-inline-note" x-show="!reservation.is_first_time">{{ __('dashboard.No') }}</span>
                                        </td>
                                        <td><a :href="`/dashboard/reservations/${reservation.id}`" target="_blank" class="avail-table-link"><i class="fa-solid fa-eye"></i></a></td>
                                    </tr>
                                </template>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="avail-empty" x-show="!allReservations().length">
                <div>
                    <div class="avail-empty__icon"><i class="fa-solid fa-calendar-check"></i></div>
                    <div class="avail-empty__title">{{ __('dashboard.The dress has not been booked before') }}</div>
                    <div class="avail-empty__text">لا توجد حجوزات سابقة لهذا المنتج.</div>
                </div>
            </div>
        </div>
    </div>
    </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
const availabilityRoutes = {
    productsSearch: @json(route('dashboard.products.search')),
    checkAvailability: @json(route('dashboard.reservations.checkAvailability')),
};

const availabilityLabels = {
    eventDate: @json(__('dashboard.Event Date')),
    available: @json(__('dashboard.Available')),
    notAvailable: @json(__('dashboard.Not Available')),
    availableFirstWear: @json(__('dashboard.Available for First Wear')),
    notAvailableFirstWear: @json(__('dashboard.Not Available for First Wear')),
    reservationsFound: @json(__('dashboard.reservations found for this product')),
    selectProductAndDate: @json(__('dashboard.Please select a product and an event date')),
    ok: @json(__('dashboard.Ok, got it!')),
    requestError: 'تعذر تحميل بيانات التوفر حالياً، حاول مرة أخرى بعد قليل.',
    statuses: {
        ongoing: @json(__('dashboard.ongoing')),
        fitting: @json(__('dashboard.fitting')),
        delivered: @json(__('dashboard.delivered')),
        canceled: @json(__('dashboard.canceled')),
        finished: @json(__('dashboard.finished')),
        pending: @json(__('dashboard.pending')),
    },
};

document.addEventListener('alpine:init', () => {
    Alpine.data('availabilityChecker', () => ({
        productSearch: '',
        productSku: '',
        selectedProduct: null,
        productResults: [],
        productSearched: false,
        searchOpen: false,
        eventDate: '',
        isFirstTime: false,
        result: null,
        loading: false,
        errorMessage: '',
        labels: availabilityLabels,

        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 fetchJson(url) {
            const response = await fetch(url, { headers: { Accept: 'application/json' } });
            const payload = await response.json().catch(() => ({}));

            if (!response.ok) {
                throw new Error(payload.message || availabilityLabels.requestError);
            }

            return payload;
        },

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

        async searchProducts() {
            const keyword = this.productSearch.trim();
            this.result = null;
            this.errorMessage = '';

            if (keyword.length < 1) {
                this.productResults = [];
                this.productSearched = false;
                this.searchOpen = false;
                return;
            }

            try {
                const data = await this.fetchJson(this.buildUrl(availabilityRoutes.productsSearch, { keyword }));
                this.productResults = Array.isArray(data) ? data : [];
                this.productSearched = true;
                this.searchOpen = true;
            } catch (error) {
                console.error('Error searching products:', error);
                this.productResults = [];
                this.productSearched = true;
                this.searchOpen = true;
            }
        },

        handleProductInput() {
            if (!this.selectedProduct || this.productSearch !== this.selectedProduct.name) {
                this.productSku = '';
                this.selectedProduct = null;
                this.result = null;
            }

            this.searchProducts();
        },

        selectProduct(product) {
            this.productSearch = product.name || '';
            this.productSku = product.sku || '';
            this.selectedProduct = product;
            this.productResults = [];
            this.productSearched = false;
            this.searchOpen = false;
            this.errorMessage = '';
            this.result = null;
        },

        clearProduct() {
            this.productSearch = '';
            this.productSku = '';
            this.selectedProduct = null;
            this.productResults = [];
            this.productSearched = false;
            this.searchOpen = false;
            this.result = null;
            this.errorMessage = '';
            this.$nextTick(() => document.getElementById('product_search')?.focus());
        },

        isSelectedProduct(product) {
            return this.selectedProduct && String(this.selectedProduct.id) === String(product.id);
        },

        selectedProductMeta() {
            if (!this.selectedProduct) return '';
            const parts = [`SKU: ${this.selectedProduct.sku || '-'}`];
            if (this.selectedProduct.category?.name) parts.push(this.selectedProduct.category.name);
            return parts.join(' - ');
        },

        async checkAvailability() {
            if (!this.productSku || !this.selectedProduct || !this.eventDate) {
                if (typeof Swal !== 'undefined') {
                    Swal.fire({
                        icon: 'warning',
                        text: availabilityLabels.selectProductAndDate,
                        confirmButtonText: availabilityLabels.ok,
                    });
                }
                return;
            }

            this.loading = true;
            this.errorMessage = '';
            this.result = null;

            try {
                this.result = await this.fetchJson(this.buildUrl(availabilityRoutes.checkAvailability, {
                    product_sku: this.productSku,
                    event_date: this.eventDate,
                    is_first_time: this.isFirstTime ? 1 : 0,
                }));
            } catch (error) {
                console.error('Error checking availability:', error);
                this.errorMessage = error.message || availabilityLabels.requestError;
            } finally {
                this.loading = false;
            }
        },

        availabilityProduct() {
            return this.result?.product || {};
        },

        productMetaText() {
            const product = this.availabilityProduct();
            return `SKU: ${product.sku || '-'}${product.category?.name ? ` - ${product.category.name}` : ''}`;
        },

        allReservations() {
            return Array.isArray(this.result?.allReservations) ? this.result.allReservations : [];
        },

        conflictingReservations() {
            return Array.isArray(this.result?.conflictingReservations) ? this.result.conflictingReservations : [];
        },

        availabilityState() {
            const result = this.result || {};

            if (result.blockedByScrap) {
                return { variant: 'danger', icon: 'fa-solid fa-circle-exclamation', label: 'المنتج هالك' };
            }

            if (result.blockedByMaintenance) {
                return { variant: 'danger', icon: 'fa-solid fa-screwdriver-wrench', label: 'المنتج في الصيانة' };
            }

            if (result.firstTimeCheckRequested) {
                const available = result.isAvailable && result.isAvailableForFirstTime && !result.hasExistingFirstWear;
                return {
                    variant: available ? 'success' : 'danger',
                    icon: available ? 'fa-solid fa-circle-check' : 'fa-solid fa-circle-xmark',
                    label: available ? availabilityLabels.availableFirstWear : availabilityLabels.notAvailableFirstWear,
                };
            }

            return {
                variant: result.isAvailable ? 'success' : 'danger',
                icon: result.isAvailable ? 'fa-solid fa-circle-check' : 'fa-solid fa-circle-xmark',
                label: result.isAvailable ? availabilityLabels.available : availabilityLabels.notAvailable,
            };
        },

        isConflict(reservation) {
            return this.conflictingReservations().some(item => String(item.id) === String(reservation.id))
                || (this.result?.firstTimeCheckRequested && reservation.is_first_time);
        },

        statusLabel(status) {
            return availabilityLabels.statuses[status] || status || '-';
        },

        statusClass(status) {
            return {
                ongoing: 'avail-badge--info',
                fitting: 'avail-badge--warning',
                delivered: 'avail-badge--success',
                canceled: 'avail-badge--danger',
                finished: 'avail-badge--info',
                pending: 'avail-badge--dark',
            }[status] || 'avail-badge--dark';
        },
    }));
});
</script>
@endsection