@use('App\Enums\Payments\PaymentMethod')
<x-admin-layout>
    <div class="max-w-5xl mx-auto space-y-6">
        <!-- Page Header -->
        <div class="flex items-center gap-3">
            <a href="{{ request('redirect_to') === 'invoices' ? route('invoices.index') : route('sales.index') }}"
               class="text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300 transition-colors">
                <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                </svg>
            </a>
            <div>
                <h1 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100">Add Sales Record</h1>
                <p class="text-xs text-zinc-500 dark:text-zinc-400 mt-0.5">Create a new sales entry</p>
            </div>
        </div>

        <div class="bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-2xl shadow-sm">
            <div class="p-6">
                <form action="{{ route('sales.store') }}"
                      method="POST"
                      x-data="salesForm({{ json_encode($prefilledData) }})"
                      @invoice-selected.window="handleInvoiceSelected($event.detail)">
                    @csrf
                    <input type="hidden" name="redirect_to" value="{{ request('redirect_to') }}">

                    <!-- Row 1: Date, Invoice, Order Type -->
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-4">
                        <!-- Date -->
                        <div>
                            <label class="block text-xs font-semibold text-zinc-700 dark:text-zinc-300 mb-1.5" for="date">
                                Date <span class="text-rose-500">*</span>
                            </label>
                            <input class="w-full px-3 py-2 text-xs bg-white dark:bg-zinc-950 border @error('date') border-rose-400 dark:border-rose-600 @else border-zinc-200 dark:border-zinc-800 @enderror rounded-xl text-zinc-800 dark:text-zinc-200 focus:ring-1 focus:ring-emerald-500 focus:border-emerald-500 transition-colors cursor-pointer"
                                   id="date" name="date" type="date"
                                   value="{{ old('date', now()->format('Y-m-d')) }}"
                                   required x-model="date"
                                   @click="if ($el.showPicker) { $event.preventDefault(); $el.showPicker(); }" />
                            @error('date')
                                <p class="mt-1 text-[11px] text-rose-500">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Invoice Search -->
                        <div>
                            <x-invoice-search :selected-id="$prefilledData['id'] ?? null" :selected-display="$prefilledData['display_number'] ?? ''" />
                            @error('invoice_id')
                                <p class="mt-1 text-[11px] text-rose-500">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Order Type -->
                        <div>
                            <label class="block text-xs font-semibold text-zinc-700 dark:text-zinc-300 mb-1.5" for="order_type">
                                Order Type
                            </label>
                            <select class="w-full px-3 py-2 text-xs bg-white dark:bg-zinc-950 border @error('order_type') border-rose-400 dark:border-rose-600 @else border-zinc-200 dark:border-zinc-800 @enderror rounded-xl text-zinc-800 dark:text-zinc-200 focus:ring-1 focus:ring-emerald-500 focus:border-emerald-500 transition-colors cursor-pointer"
                                    id="order_type" name="order_type" x-model="orderType">
                                <option value="">-- Select --</option>
                                @foreach(App\Enums\Payments\OrderType::cases() as $type)
                                    <option value="{{ $type->value }}" {{ old('order_type') === $type->value ? 'selected' : '' }}>{{ Str::headline($type->value) }}</option>
                                @endforeach
                            </select>
                            @error('order_type')
                                <p class="mt-1 text-[11px] text-rose-500">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <!-- Line Items Table -->
                    <div class="mb-4">
                        <div class="flex items-center justify-between mb-2">
                            <label class="block text-xs font-semibold text-zinc-700 dark:text-zinc-300">
                                Products <span class="text-rose-500">*</span>
                            </label>
                            <button type="button" @click="addItem()"
                                    class="inline-flex items-center gap-1 px-2.5 py-1 text-[11px] font-semibold text-emerald-600 hover:text-emerald-700 bg-emerald-50 hover:bg-emerald-100 dark:bg-emerald-950/30 dark:hover:bg-emerald-900/40 rounded-lg transition-colors cursor-pointer">
                                <span class="uil uil-plus text-xs"></span> Add Row
                            </button>
                        </div>
                        <div class="overflow-x-auto border border-zinc-200 dark:border-zinc-800 rounded-xl">
                            <table class="w-full text-left text-xs">
                                <thead>
                                    <tr class="bg-zinc-50 dark:bg-zinc-900/60 text-zinc-500 dark:text-zinc-400 font-semibold uppercase tracking-wider border-b border-zinc-200 dark:border-zinc-800">
                                        <th class="py-2.5 px-3 w-2/5">Product Name</th>
                                        <th class="py-2.5 px-3 w-1/6 text-center">Quantity</th>
                                        <th class="py-2.5 px-3 w-1/6 text-right">Unit Price</th>
                                        <th class="py-2.5 px-3 w-1/6 text-right">Subtotal</th>
                                        <th class="py-2.5 px-3 w-10"></th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-zinc-100 dark:divide-zinc-800">
                                    <template x-for="(item, index) in items" :key="index">
                                        <tr class="hover:bg-zinc-50/50 dark:hover:bg-zinc-800/30 transition-colors">
                                            <td class="py-2 px-3">
                                                <input type="hidden" :name="`items[${index}][product_name]`" x-model="item.product_name" />
                                                <input type="text"
                                                       x-model="item.product_name"
                                                       class="w-full px-2.5 py-1.5 text-xs bg-white dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800 rounded-lg text-zinc-800 dark:text-zinc-200 focus:ring-1 focus:ring-emerald-500 focus:border-emerald-500 transition-colors"
                                                       :name="`items[${index}][product_name]`"
                                                       :required="index === 0"
                                                       placeholder="Product name" />
                                            </td>
                                            <td class="py-2 px-3">
                                                <input type="hidden" :name="`items[${index}][quantity]`" x-model="item.quantity" />
                                                <input type="number" step="0.01" min="0.01"
                                                       x-model="item.quantity"
                                                       @input="calculateTotal"
                                                       class="w-full px-2.5 py-1.5 text-xs bg-white dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800 rounded-lg text-zinc-800 dark:text-zinc-200 text-center focus:ring-1 focus:ring-emerald-500 focus:border-emerald-500 transition-colors"
                                                       :name="`items[${index}][quantity]`"
                                                       placeholder="0" />
                                            </td>
                                            <td class="py-2 px-3">
                                                <input type="hidden" :name="`items[${index}][unit_price]`" x-model="item.unit_price" />
                                                <input type="number" step="0.01" min="0"
                                                       x-model="item.unit_price"
                                                       @input="calculateTotal"
                                                       class="w-full px-2.5 py-1.5 text-xs bg-white dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800 rounded-lg text-zinc-800 dark:text-zinc-200 text-right focus:ring-1 focus:ring-emerald-500 focus:border-emerald-500 transition-colors"
                                                       :name="`items[${index}][unit_price]`"
                                                       placeholder="0.00" />
                                            </td>
                                            <td class="py-2 px-3 text-right text-zinc-700 dark:text-zinc-300 font-medium">
                                                $<span x-text="(parseFloat(item.quantity || 0) * parseFloat(item.unit_price || 0)).toFixed(2)">0.00</span>
                                            </td>
                                            <td class="py-2 px-3 text-center">
                                                <button type="button" @click="removeItem(index)"
                                                        x-show="items.length > 1"
                                                        class="text-rose-400 hover:text-rose-600 transition-colors cursor-pointer">
                                                    <span class="uil uil-times text-sm"></span>
                                                </button>
                                            </td>
                                        </tr>
                                    </template>
                                </tbody>
                                <tfoot class="bg-zinc-50 dark:bg-zinc-900/60 border-t border-zinc-200 dark:border-zinc-800">
                                    <tr>
                                        <td colspan="3" class="py-2.5 px-3 text-xs font-semibold text-zinc-600 dark:text-zinc-400 text-right">Line Items Total:</td>
                                        <td class="py-2.5 px-3 text-right text-sm font-bold text-zinc-800 dark:text-zinc-200">
                                            $<span x-text="itemsSubtotal.toFixed(2)">0.00</span>
                                        </td>
                                        <td></td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                        @error('items')
                            <p class="mt-1 text-[11px] text-rose-500">{{ $message }}</p>
                        @enderror
                        @error('items.*.product_name')
                            <p class="mt-1 text-[11px] text-rose-500">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Row: Total Price, Amount Deposited, Deposit Date -->
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-4">
                        <!-- Total Price -->
                        <div>
                            <label class="block text-xs font-semibold text-zinc-700 dark:text-zinc-300 mb-1.5" for="total_price">
                                Total Price <span class="text-rose-500">*</span>
                            </label>
                            <input class="w-full px-3 py-2 text-xs bg-zinc-50 dark:bg-zinc-950/60 border border-zinc-200 dark:border-zinc-800 rounded-xl text-zinc-800 dark:text-zinc-200"
                                   id="total_price" name="total_price" type="number" step="0.01" min="0"
                                   value="{{ old('total_price', 0) }}"
                                   required x-model="totalPrice" readonly />
                            @error('total_price')
                                <p class="mt-1 text-[11px] text-rose-500">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Amount Deposited -->
                        <div>
                            <label class="block text-xs font-semibold text-zinc-700 dark:text-zinc-300 mb-1.5" for="amount_deposited">
                                Amount Deposited <span class="text-rose-500">*</span>
                            </label>
                            <input class="w-full px-3 py-2 text-xs bg-white dark:bg-zinc-950 border @error('amount_deposited') border-rose-400 dark:border-rose-600 @else border-zinc-200 dark:border-zinc-800 @enderror rounded-xl text-zinc-800 dark:text-zinc-200 focus:ring-1 focus:ring-emerald-500 focus:border-emerald-500 transition-colors"
                                   id="amount_deposited" name="amount_deposited" type="number" step="0.01" min="0"
                                   value="{{ old('amount_deposited', 0) }}"
                                   required x-model="amountDeposited"
                                   @input="amountDepositedEdited = true" />
                            @error('amount_deposited')
                                <p class="mt-1 text-[11px] text-rose-500">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Deposit Date -->
                        <div>
                            <label class="block text-xs font-semibold text-zinc-700 dark:text-zinc-300 mb-1.5" for="deposit_date">
                                Deposit Date
                            </label>
                            <input class="w-full px-3 py-2 text-xs bg-white dark:bg-zinc-950 border @error('deposit_date') border-rose-400 dark:border-rose-600 @else border-zinc-200 dark:border-zinc-800 @enderror rounded-xl text-zinc-800 dark:text-zinc-200 focus:ring-1 focus:ring-emerald-500 focus:border-emerald-500 transition-colors cursor-pointer"
                                   id="deposit_date" name="deposit_date" type="date"
                                   value="{{ old('deposit_date', now()->format('Y-m-d')) }}"
                                   @click="if ($el.showPicker) { $event.preventDefault(); $el.showPicker(); }" />
                            @error('deposit_date')
                                <p class="mt-1 text-[11px] text-rose-500">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <!-- Row: Tax, Tip, Delivery Fee -->
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-4">
                        <!-- Tax Charged -->
                        <div>
                            <label class="flex items-center gap-3 text-xs font-semibold text-zinc-700 dark:text-zinc-300 mb-1.5" for="tax_charged">
                                Tax Charged
                                <label class="flex items-center gap-1.5 cursor-pointer">
                                    <input type="checkbox" id="auto_tax" x-model="autoTax" @change="calculateTotal"
                                           class="w-3.5 h-3.5 rounded border-zinc-300 dark:border-zinc-700 text-emerald-600 focus:ring-emerald-500 cursor-pointer">
                                    <span class="text-[11px] font-normal text-zinc-500 dark:text-zinc-400">Auto (10.25%)</span>
                                </label>
                            </label>
                            <input class="w-full px-3 py-2 text-xs bg-zinc-50 dark:bg-zinc-950/60 border border-zinc-200 dark:border-zinc-800 rounded-xl text-zinc-800 dark:text-zinc-200"
                                   id="tax_charged" name="tax_charged" type="number" step="0.01" min="0"
                                   value="{{ old('tax_charged', 0) }}"
                                   x-model="taxCharged" readonly />
                            @error('tax_charged')
                                <p class="mt-1 text-[11px] text-rose-500">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Tip -->
                        <div>
                            <label class="block text-xs font-semibold text-zinc-700 dark:text-zinc-300 mb-1.5" for="tip">Tip</label>
                            <input class="w-full px-3 py-2 text-xs bg-white dark:bg-zinc-950 border @error('tip') border-rose-400 dark:border-rose-600 @else border-zinc-200 dark:border-zinc-800 @enderror rounded-xl text-zinc-800 dark:text-zinc-200 focus:ring-1 focus:ring-emerald-500 focus:border-emerald-500 transition-colors"
                                   id="tip" name="tip" type="number" step="0.01" min="0"
                                   value="{{ old('tip', 0) }}"
                                   x-model="tipAmount" @input="calculateTotal" />
                            @error('tip')
                                <p class="mt-1 text-[11px] text-rose-500">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Delivery Fee -->
                        <div>
                            <label class="block text-xs font-semibold text-zinc-700 dark:text-zinc-300 mb-1.5" for="delivery_fee">Delivery Fee</label>
                            <input class="w-full px-3 py-2 text-xs bg-white dark:bg-zinc-950 border @error('delivery_fee') border-rose-400 dark:border-rose-600 @else border-zinc-200 dark:border-zinc-800 @enderror rounded-xl text-zinc-800 dark:text-zinc-200 focus:ring-1 focus:ring-emerald-500 focus:border-emerald-500 transition-colors"
                                   id="delivery_fee" name="delivery_fee" type="number" step="0.01" min="0"
                                   value="{{ old('delivery_fee', 19.99) }}"
                                   x-model="deliveryFee" @input="calculateTotal" />
                            @error('delivery_fee')
                                <p class="mt-1 text-[11px] text-rose-500">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <!-- Row: Payment Method (conditional on order type) -->
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-6"
                         x-show="orderType === 'phone' || orderType === 'walk-in'" x-cloak x-transition>
                        <!-- Payment Method -->
                        <div>
                            <label class="block text-xs font-semibold text-zinc-700 dark:text-zinc-300 mb-1.5" for="payment_method">
                                Payment Method <span class="text-rose-500">*</span>
                            </label>
                            <select class="w-full px-3 py-2 text-xs bg-white dark:bg-zinc-950 border @error('payment_method') border-rose-400 dark:border-rose-600 @else border-zinc-200 dark:border-zinc-800 @enderror rounded-xl text-zinc-800 dark:text-zinc-200 focus:ring-1 focus:ring-emerald-500 focus:border-emerald-500 transition-colors cursor-pointer"
                                    id="payment_method" name="payment_method"
                                    :required="orderType === 'phone' || orderType === 'walk-in'"
                                    x-model="paymentMethod">
                                <option value="">-- Select Method --</option>
                                @foreach(PaymentMethod::cases() as $method)
                                    <option value="{{ $method->value }}">{{ $method->value }}</option>
                                @endforeach
                            </select>
                            @error('payment_method')
                                <p class="mt-1 text-[11px] text-rose-500">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Cheque Date (conditional) -->
                        <div x-show="paymentMethod === 'Cheque'" x-cloak x-transition>
                            <label class="block text-xs font-semibold text-zinc-700 dark:text-zinc-300 mb-1.5" for="cheque_date">
                                Cheque Date <span class="text-zinc-400 font-normal">(Optional)</span>
                            </label>
                            <input class="w-full px-3 py-2 text-xs bg-white dark:bg-zinc-950 border @error('cheque_date') border-rose-400 dark:border-rose-600 @else border-zinc-200 dark:border-zinc-800 @enderror rounded-xl text-zinc-800 dark:text-zinc-200 focus:ring-1 focus:ring-emerald-500 focus:border-emerald-500 transition-colors cursor-pointer"
                                   id="cheque_date" name="cheque_date" type="date"
                                   value="{{ old('cheque_date') }}"
                                   @click="$el.showPicker ? $el.showPicker() : $el.click()" />
                            <p class="mt-1 text-[11px] text-zinc-400 dark:text-zinc-500">Specify if the cheque is post-dated.</p>
                            @error('cheque_date')
                                <p class="mt-1 text-[11px] text-rose-500">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <!-- Form Actions -->
                    <div class="flex justify-end items-center gap-2 pt-4 border-t border-zinc-200 dark:border-zinc-800">
                        <a href="{{ request('redirect_to') === 'invoices' ? route('invoices.index') : route('sales.index') }}"
                           class="inline-flex items-center gap-1.5 px-4 py-2 bg-zinc-100 hover:bg-zinc-200 dark:bg-zinc-800 dark:hover:bg-zinc-700 text-zinc-700 dark:text-zinc-300 font-semibold text-xs rounded-xl transition-colors cursor-pointer">
                            Cancel
                        </a>
                        <button type="submit"
                                class="inline-flex items-center gap-1.5 px-5 py-2 bg-emerald-600 hover:bg-emerald-700 text-white font-semibold text-xs rounded-xl shadow-sm transition-all cursor-pointer">
                            <span class="uil uil-save"></span>
                            Save Record
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('salesForm', (prefilledData) => ({
                date: @js(old('date', now()->format('Y-m-d'))),
                items: [],
                taxCharged: @js(old('tax_charged', 0)),
                tipAmount: @js(old('tip', 0)),
                deliveryFee: @js(old('delivery_fee', 19.99)),
                totalPrice: @js(old('total_price', 0)),
                orderType: @js(old('order_type', '')),
                paymentMethod: @js(old('payment_method', '')),
                amountDeposited: @js(old('amount_deposited', 0)),
                amountDepositedEdited: {{ old('amount_deposited') ? 'true' : 'false' }},
                autoTax: true,

                get itemsSubtotal() {
                    return this.items.reduce((sum, item) => {
                        return sum + (parseFloat(item.quantity || 0) * parseFloat(item.unit_price || 0));
                    }, 0);
                },

                init() {
                    this.$watch('orderType', value => {
                        if (value === 'web') {
                            this.paymentMethod = 'Stripe';
                        } else if (value === 'wired') {
                            this.paymentMethod = 'Bank Transfer';
                        } else {
                            this.paymentMethod = '';
                        }
                    });

                    if (prefilledData) {
                        this.handleInvoiceSelected(prefilledData);
                    } else {
                        this.addItem();
                    }
                },

                addItem() {
                    this.items.push({ product_name: '', quantity: 1, unit_price: 0 });
                },

                removeItem(index) {
                    if (this.items.length > 1) {
                        this.items.splice(index, 1);
                        this.calculateTotal();
                    }
                },

                calculateTotal() {
                    let baseTotal = this.itemsSubtotal;

                    if (this.autoTax) {
                        let taxableBase = baseTotal;
                        if (this.orderType === 'phone' || this.orderType === 'email' || this.orderType === 'walk-in') {
                            taxableBase += parseFloat(this.deliveryFee || 0);
                        }
                        this.taxCharged = (Math.round(taxableBase * 0.1025 * 100) / 100).toFixed(2);
                    }

                    let tax = parseFloat(this.taxCharged || 0);
                    let tip = parseFloat(this.tipAmount || 0);
                    let delivery = parseFloat(this.deliveryFee || 0);
                    this.totalPrice = (baseTotal + tax + tip + delivery).toFixed(2);

                    if (!this.amountDepositedEdited) {
                        this.amountDeposited = this.totalPrice;
                    }
                },

                handleInvoiceSelected(detail) {
                    if (detail) {
                        if (detail.order_date) this.date = detail.order_date;
                        if (detail.order_type) this.orderType = detail.order_type;
                        if (detail.tax !== undefined) {
                            this.taxCharged = detail.tax;
                            this.autoTax = false;
                        }
                        if (detail.tip !== undefined) this.tipAmount = detail.tip;
                        if (detail.delivery_fee !== undefined) this.deliveryFee = detail.delivery_fee;

                        if (detail.items && detail.items.length > 0) {
                            this.items = detail.items.map(item => ({
                                product_name: item.product_name,
                                quantity: item.quantity,
                                unit_price: item.unit_price,
                            }));
                        } else {
                            this.items = [];
                        }

                        if (detail.amount !== undefined && detail.amount > 0) {
                            this.totalPrice = detail.amount;
                            this.amountDeposited = detail.amount;
                        } else {
                            this.calculateTotal();
                        }
                    } else {
                        this.items = [{ product_name: '', quantity: 1, unit_price: 0 }];
                        this.orderType = '';
                    }
                }
            }))
        })
    </script>
</x-admin-layout>