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

<div id="customer_section">
    <div id="customer_search_container" class="reservation-search-box" x-show="!customerSelected" style="display: {{ $selectedCustomer ? 'none' : 'block' }};">
        <label for="customer_search" class="app-label">{{ __('dashboard.Customer') }}</label>
        <div class="reservation-search-grid reservation-search-grid--customer">
            <input type="text" id="customer_search" class="app-input" placeholder="{{ __('dashboard.Enter customer name or phone') }}" x-model="customerSearch" @input.debounce.500ms="searchCustomers" @keydown.enter.prevent="searchCustomers(true)">
            <button type="button" class="app-btn app-btn--primary-soft" @click="searchCustomers(true)">
                <span x-show="customerSearching" 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" data-modal-open="addCustomerModal" onclick="openReservationCustomerModal()">
                <i class="fa-solid fa-plus"></i>
                <span>{{ __('dashboard.Add') }}</span>
            </button>
        </div>
    </div>

    <div id="selected_customer_details_container" x-show="customerSelected" x-cloak style="display: {{ $selectedCustomer ? 'block' : 'none' }};">
        <article class="reservation-selected-card reservation-selected-card--customer" x-show="selectedCustomer">
            <div class="reservation-selected-card__avatar">
                <i class="fa-solid fa-user"></i>
            </div>
            <div class="reservation-selected-card__content">
                <div class="reservation-selected-card__top">
                    <h4 class="reservation-selected-card__title" x-text="selectedCustomer?.name || ''"></h4>
                    <button type="button" class="app-btn app-btn--sm app-btn--warning-soft" @click="clearCustomer">
                        <i class="fa-solid fa-rotate-left"></i>
                        <span>{{ __('dashboard.Change Customer') }}</span>
                    </button>
                </div>
                <div class="reservation-selected-card__meta">
                    <span><i class="fa-solid fa-phone"></i><b x-text="selectedCustomer?.phone || '-'"></b></span>
                    <span><i class="fa-solid fa-phone"></i><b x-text="selectedCustomer?.other_phone || '-'"></b></span>
                    <span><i class="fa-solid fa-location-dot"></i><b x-text="selectedCustomer?.governorate || '-'"></b></span>
                </div>
                <div class="reservation-customer-stats">
                    <div>
                        <span>{{ __('dashboard.Reservations') }}</span>
                        <b x-text="selectedCustomer?.reservations_count || 0"></b>
                    </div>
                    <div>
                        <span>{{ __('dashboard.Sales') }}</span>
                        <b x-text="selectedCustomer?.sales_count || 0"></b>
                    </div>
                    <div>
                        <span>{{ __('dashboard.Loyalty Points') }}</span>
                        <b id="customer_points_balance" x-text="selectedCustomer?.loyalty_points || 0"></b>
                    </div>
                </div>
            </div>
        </article>
    </div>

    <input type="hidden" name="customer_id" id="customer_id" :value="selectedCustomer?.id || ''" value="{{ old('customer_id', $selectedCustomer?->id) }}">
    
    <div id="customer_search_results" class="reservation-search-results">
        <template x-for="customer in customerResults" :key="customer.id">
            <article class="reservation-result-item reservation-result-item--customer">
                <span class="reservation-result-item__avatar">
                    <i class="fa-solid fa-user"></i>
                </span>
                <div class="reservation-result-item__content">
                    <h5 class="reservation-result-item__title" x-text="customer.name"></h5>
                    <div class="reservation-result-item__meta">
                        <span><i class="fa-solid fa-phone"></i><span x-text="customer.phone || '-'"></span></span>
                        <span x-show="customer.governorate"><i class="fa-solid fa-location-dot"></i><span x-text="customer.governorate"></span></span>
                    </div>
                </div>
                <button type="button" class="app-btn app-btn--sm app-btn--primary" @click="selectCustomer(customer)">
                    <i class="fa-solid fa-check2"></i>
                    <span>{{ __('dashboard.Select') }}</span>
                </button>
            </article>
        </template>
        <div x-show="customerResults.length === 0 && customerSearched" 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>