@props(['taxes' => [], 'additionalExpenses' => [], 'selectedProduct' => null])

<div class="app-card reservation-summary-card">
    <div class="app-card__header">
        <h3 class="app-card__title">
            <i class="fa-solid fa-receipt"></i>
            {{ __('dashboard.Price Summary') }}
        </h3>
    </div>
    <div class="app-card__body">
        <div class="reservation-summary-lines">
            <div class="reservation-summary-line">
                <span>{{ __('dashboard.Base Price') }}</span>
                <b id="base_price_preview">0.00</b>
            </div>
            <div class="reservation-summary-line">
                <span>{{ __('dashboard.Discount') }}</span>
                <b id="discount_preview">0.00</b>
            </div>
            <div class="reservation-summary-line">
                <span>الدفعة الأولى</span>
                <b id="deposit_preview">0.00</b>
            </div>
            <div class="reservation-summary-total">
                <span>{{ __('dashboard.Final Total') }}</span>
                <b id="final_total_preview">0.00</b>
            </div>
        </div>

        <div class="reservation-summary-field">
            <label class="app-label">{{ __('dashboard.Base Price') }}</label>
            <input type="number" name="base_price" id="base_price" class="app-input" x-model="basePrice" value="{{ old('base_price', $selectedProduct?->price ?? 0) }}" min="0" step="0.01">
        </div>

        <div class="reservation-summary-field">
            <label class="app-label">{{ __('dashboard.Discount') }}</label>
            <div class="app-input-group">
                <input type="number" name="discount" id="discount_input" class="app-input" x-model="discount" value="{{ old('discount', 0) }}">
                <select name="discount_type" id="discount_type_select" class="app-input app-select" x-model="discountType">
                    <option value="fixed" {{ old('discount_type') == 'fixed' ? 'selected' : '' }}>{{ __('dashboard.Fixed') }}</option>
                    <option value="percent" {{ old('discount_type') == 'percent' ? 'selected' : '' }}>{{ __('dashboard.Percent') }}</option>
                </select>
            </div>
        </div>

        <div class="reservation-summary-field">
            <label class="app-label">{{ __('dashboard.Taxes') }}</label>
            <div class="reservation-summary-choice-list">
            @foreach($taxes as $tax)
                <label class="reservation-summary-choice" for="tax_{{ $tax->id }}">
                    <input class="app-check__input" type="checkbox" name="taxes[]" value="{{ $tax->id }}" id="tax_{{ $tax->id }}" data-rate="{{ $tax->rate }}" {{ in_array($tax->id, old('taxes', [])) ? 'checked' : '' }}>
                    <span>
                        <span class="reservation-summary-choice__label">{{ $tax->name }}</span>
                        <span class="reservation-summary-choice__meta">{{ $tax->rate }}%</span>
                    </span>
                </label>
            @endforeach
            </div>
        </div>

        <div class="reservation-summary-field">
            <label class="app-label">{{ __('dashboard.Additional Expenses') }}</label>
            <div class="reservation-summary-choice-list">
            @foreach($additionalExpenses as $expense)
                <label class="reservation-summary-choice" for="expense_{{ $expense->id }}">
                    <input class="app-check__input" type="checkbox" name="additional_expenses[]" value="{{ $expense->id }}" id="expense_{{ $expense->id }}" data-amount="{{ $expense->amount }}" {{ $expense->is_default || in_array($expense->id, old('additional_expenses', [])) ? 'checked' : '' }}>
                    <span>
                        <span class="reservation-summary-choice__label">{{ $expense->name }}</span>
                        <span class="reservation-summary-choice__meta">{{ $expense->amount }}</span>
                    </span>
                </label>
            @endforeach
            </div>
        </div>

        <div class="reservation-summary-field">
            <label class="app-label">{{ __('dashboard.Shipping') }}</label>
            <select name="shipping_type" id="shipping_type_select" class="app-input app-select mb-2" x-model="shippingType">
                <option value="pickup" {{ old('shipping_type') == 'pickup' ? 'selected' : '' }}>{{ __('dashboard.Pickup from store') }}</option>
                <option value="free" {{ old('shipping_type') == 'free' ? 'selected' : '' }}>{{ __('dashboard.Free Shipping') }}</option>
                <option value="paid" {{ old('shipping_type') == 'paid' ? 'selected' : '' }}>{{ __('dashboard.Paid Shipping') }}</option>
            </select>
            <input type="number" name="shipping_cost" id="shipping_cost_input" class="app-input" x-model="shippingCost" value="{{ old('shipping_cost', 0) }}" placeholder="{{ __('dashboard.Shipping Cost') }}" step="1" min="0" :readonly="shippingType !== 'paid'">
        </div>

        <div class="reservation-summary-field">
            <label class="required app-label">الدفعة الأولى</label>
            <input type="text" name="deposit" id="deposit" class="app-input @error('deposit') app-input--invalid @enderror" x-model="deposit" value="{{ old('deposit') ?? 0 }}" required>
            @error('deposit')<div class="app-field-error">{{ $message }}</div>@enderror
        </div>

        <div class="reservation-summary-field">
            <label class="app-label">{{ __('dashboard.Remaining Amount') }}</label>
            <input type="text" name="remaining_amount" id="remaining_amount" class="app-input" value="0" readonly>
        </div>

        <div class="reservation-summary-field">
            <label class="app-label">{{ __('dashboard.Loyalty Points') }}</label>
            <div class="mb-2">
                <small class="text-slate-500 dark:text-slate-400">{{ __('dashboard.Current Balance') }}: <span id="customer_points_value">0</span></small>
            </div>
            <input type="number" name="loyalty_points" id="loyalty_points_input" class="app-input" x-model="loyaltyPoints" value="{{ old('loyalty_points', 0) }}" min="0">
        </div>

        <div class="reservation-summary-field">
            <label class="app-label">{{ __('dashboard.Payment Status') }}</label>
            <input type="hidden" name="payment_status" id="payment_status" value="{{ old('payment_status', 'unpaid') }}">
            <input type="text" id="payment_status_display" class="app-input" value="{{ old('payment_status', 'unpaid') === 'paid' ? __('dashboard.Paid') : (old('payment_status', 'unpaid') === 'partial' ? __('dashboard.Partial') : __('dashboard.Unpaid')) }}" readonly>
        </div>

        <div class="reservation-summary-field">
            <label class="app-label">{{ __('dashboard.Payment Method') }}</label>
            <select name="payment_method" class="app-input">
                <option value="none" {{ old('payment_method') == 'none' ? 'selected' : '' }}>{{ __('dashboard.None') }}</option>
                <option value="cash" {{ old('payment_method') == 'cash' ? 'selected' : '' }}>{{ __('dashboard.Cash') }}</option>
                <option value="card" {{ old('payment_method') == 'card' ? 'selected' : '' }}>{{ __('dashboard.Card') }}</option>
                <option value="bank" {{ old('payment_method') == 'bank' ? 'selected' : '' }}>{{ __('dashboard.Bank') }}</option>
                <option value="wallet" {{ old('payment_method') == 'wallet' ? 'selected' : '' }}>{{ __('dashboard.Wallet') }}</option>
                <option value="instapay" {{ old('payment_method') == 'instapay' ? 'selected' : '' }}>{{ __('dashboard.Instapay') }}</option>
            </select>
        </div>

        <div class="reservation-summary-field">
            <label class="app-label">{{ __('dashboard.Payment Reference') }}</label>
            <input type="text" name="payment_reference" class="app-input" value="{{ old('payment_reference') }}">
        </div>

        <input type="hidden" name="total_taxes" id="total_taxes">
        <input type="hidden" name="total_additional_expenses" id="total_additional_expenses">
        <input type="hidden" name="shipping_cost_amount" id="shipping_cost_amount">
        <input type="hidden" name="discount_amount" id="discount_amount">
        <input type="hidden" name="final_total" id="final_total">
    </div>
</div>