@props(['selectedProduct' => null])

<div id="product_section">
    <div id="product_search_container" class="reservation-search-box" x-show="!productSelected" style="display: {{ $selectedProduct ? 'none' : 'block' }};">
        <label for="product_search" class="app-label">{{ __('dashboard.Product') }}</label>
        <div class="reservation-search-grid">
            <input type="text" id="product_search" class="app-input" placeholder="{{ __('dashboard.Enter product name or SKU') }}" x-model="productSearch" @input.debounce.500ms="searchProducts" @keydown.enter.prevent="searchProducts(true)">
            <button type="button" class="app-btn app-btn--primary-soft" @click="searchProducts(true)">
                <span x-show="productSearching" class="app-spinner app-spinner--sm" x-cloak></span>
                <i class="fa-solid fa-magnifying-glass"></i>
                <span>{{ __('dashboard.Search') }}</span>
            </button>
            <button type="button" class="app-btn app-btn--success-soft" @click="addProductBySKU">
                <i class="fa-solid fa-barcode"></i>
                <span>{{ __('dashboard.Add by SKU') }}</span>
            </button>
        </div>
    </div>

    <div id="selected_product_details_container" x-show="productSelected" x-cloak style="display: {{ $selectedProduct ? 'block' : 'none' }};">
        <article class="reservation-selected-card" x-show="selectedProduct">
            <div class="reservation-selected-card__media">
                <img :src="productImageUrl(selectedProduct)" :alt="selectedProduct?.name || @json(__('dashboard.Product'))" class="reservation-selected-card__image">
            </div>
            <div class="reservation-selected-card__content">
                <div class="reservation-selected-card__top">
                    <h4 class="reservation-selected-card__title" x-text="selectedProduct?.name || ''"></h4>
                    <button type="button" class="app-btn app-btn--sm app-btn--warning-soft" @click="clearProduct">
                        <i class="fa-solid fa-rotate-left"></i>
                        <span>{{ __('dashboard.Change Product') }}</span>
                    </button>
                </div>
                <div class="reservation-selected-card__meta">
                    <span><i class="fa-solid fa-barcode"></i>{{ __('dashboard.SKU') }}: <b x-text="selectedProduct?.sku || '-'"></b></span>
                    <span><i class="fa-solid fa-money-bills"></i><b x-text="formatMoney(selectedProduct?.price || 0)"></b> {{ __('EGP') }}</span>
                </div>
            </div>
        </article>
    </div>

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

    <div id="product_search_results" class="reservation-search-results">
        <template x-for="product in productResults" :key="product.id">
            <article class="reservation-result-item">
                <img :src="productImageUrl(product)" :alt="product.name" class="reservation-result-item__image">
                <div class="reservation-result-item__content">
                    <h5 class="reservation-result-item__title" x-text="product.name"></h5>
                    <div class="reservation-result-item__meta">
                        <span><i class="fa-solid fa-barcode"></i><span x-text="product.sku || '-'"></span></span>
                        <span><i class="fa-solid fa-money-bills"></i><span x-text="formatMoney(product.price || 0)"></span> {{__('EGP')}}</span>
                    </div>
                </div>
                <button type="button" class="app-btn app-btn--sm app-btn--primary" @click="selectProduct(product)">
                    <i class="fa-solid fa-check2"></i>
                    <span>{{ __('dashboard.Select') }}</span>
                </button>
            </article>
        </template>
        <div x-show="productResults.length === 0 && productSearched" x-cloak class="app-alert app-alert--warning">
            <i class="fa-solid fa-circle-info"></i>
            <span>{{ __('dashboard.No results found') }}</span>
        </div>
    </div>
</div>