@use('App\Enums\Payments\PaymentMethod')
<x-admin-layout>
    <div class="mb-9">
        <div class="row g-3 mb-4">
            <div class="col-auto">
                <h2 class="mb-0">Add Sales Record</h2>
            </div>
        </div>

        <div class="card shadow-none border border-300 my-4" data-component-card="data-component-card">
            <div class="card-body p-0">
                <div class="p-4 code-to-copy">
                    <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') }}">
                        <div class="row g-3 mb-3">
                            <div class="col-sm-6 col-md-3">
                                <label class="form-label" for="date">Date <text class="text-danger">*</text></label>
                                <input class="form-control @error('date') is-invalid @enderror" 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')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-sm-6 col-md-3">
                                <x-invoice-search :selected-id="$prefilledData['id'] ?? null" :selected-display="$prefilledData['display_number'] ?? ''" />
                                @error('invoice_id')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-sm-6 col-md-3">
                                <label class="form-label" for="order_type">Order Type</label>
                                <select
                                    class="form-select @error('order_type') is-invalid @enderror"
                                    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')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-sm-6 col-md-3">
                                <label class="form-label" for="product_name">Product Name <text class="text-danger">*</text></label>
                                <input class="form-control @error('product_name') is-invalid @enderror" id="product_name" name="product_name" type="text" value="{{ old('product_name') }}" required x-model="productName" />
                                @error('product_name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="row g-3 mb-3">
                            <div class="col-sm-6 col-md-3">
                                <label class="form-label" for="unit">Unit <text class="text-danger">*</text></label>
                                <input class="form-control @error('unit') is-invalid @enderror" id="unit" name="unit" type="number" step="0.01" min="0" value="{{ old('unit', 1) }}" required x-model="unitCount" @input="calculateTotal" />
                                @error('unit')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-sm-6 col-md-3">
                                <label class="form-label" for="unit_price">Unit Price <text class="text-danger">*</text></label>
                                <input class="form-control @error('unit_price') is-invalid @enderror" id="unit_price" name="unit_price" type="number" step="0.01" min="0" value="{{ old('unit_price', 0) }}" required x-model="unitPrice" @input="calculateTotal" />
                                @error('unit_price')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-sm-6 col-md-3">
                                <label class="form-label" for="total_price">Total Price <text class="text-danger">*</text></label>
                                <input class="form-control @error('total_price') is-invalid @enderror" id="total_price" name="total_price" type="number" step="0.01" min="0" value="{{ old('total_price', 0) }}" required x-model="totalPrice" />
                                @error('total_price')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-sm-6 col-md-3">
                                <label class="form-label" for="amount_deposited">Amount Deposited <text class="text-danger">*</text></label>
                                <input class="form-control @error('amount_deposited') is-invalid @enderror" 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')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-sm-6 col-md-3">
                                <label class="form-label" for="deposit_date">Deposit Date</label>
                                <input class="form-control @error('deposit_date') is-invalid @enderror" 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')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row g-3 mb-4">
                            <div class="col-sm-6 col-md-4">
                                <label class="form-label d-flex align-items-center mb-2" for="tax_charged">
                                    Tax Charged
                                    <div class="form-check ms-3 mb-0" style="min-height: auto;">
                                        <input class="form-check-input" type="checkbox" id="auto_tax" x-model="autoTax" @change="calculateTotal" style="margin-top: 0.15em;">
                                        <label class="form-check-label text-muted fs--1" for="auto_tax" style="cursor: pointer;">Auto (10.25%)</label>
                                    </div>
                                </label>
                                <input class="form-control @error('tax_charged') is-invalid @enderror" 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')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-sm-6 col-md-4">
                                <label class="form-label" for="tip">Tip</label>
                                <input class="form-control @error('tip') is-invalid @enderror" id="tip" name="tip" type="number" step="0.01" min="0" value="{{ old('tip', 0) }}" x-model="tipAmount" @input="calculateTotal" />
                                @error('tip')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-sm-6 col-md-4">
                                <label class="form-label" for="delivery_fee">Delivery Fee</label>
                                <input class="form-control @error('delivery_fee') is-invalid @enderror" 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')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row g-3 mb-4" x-show="orderType === 'phone' || orderType === 'walk-in'" x-cloak x-transition>
                            <div class="col-sm-6 col-md-4">
                                <label class="form-label" for="payment_method">Payment Method <text class="text-danger">*</text></label>
                                <select class="form-select @error('payment_method') is-invalid @enderror" 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')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-sm-6 col-md-4" x-show="paymentMethod === 'Cheque'" x-cloak x-transition>
                                <label class="form-label" for="cheque_date">Cheque Date (Optional)</label>
                                <input class="form-control @error('cheque_date') is-invalid @enderror" id="cheque_date" name="cheque_date" type="date" value="{{ old('cheque_date') }}" @click="$el.showPicker ? $el.showPicker() : $el.click()" />
                                <div class="form-text fs--1">Specify if the cheque is post-dated.</div>
                                @error('cheque_date')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="d-flex justify-content-end">
                            <a href="{{ request('redirect_to') === 'invoices' ? route('invoices.index') : route('sales.index') }}" class="btn btn-secondary me-2">Cancel</a>
                            <button type="submit" class="btn btn-primary">Save Record</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <style>
        input[type="date"] {
            cursor: pointer;
        }
        input[type="date"]::-webkit-calendar-picker-indicator {
            cursor: pointer;
        }
    </style>

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

                init() {
                    this.calculateTotal();
                    this.$watch('orderType', value => {
                        if (value === 'web') {
                            this.paymentMethod = 'Stripe';
                        } else if (value === 'wired') {
                            this.paymentMethod = 'Bank Transfer';
                        } else if (value === 'walk-in') {
                            this.deliveryFee = (0).toFixed(2);
                            this.calculateTotal();
                        } else {
                            this.paymentMethod = '';
                        }
                    });

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

                calculateTotal() {
                    let baseTotal = parseFloat(this.unitCount || 0) * parseFloat(this.unitPrice || 0);

                    if (this.autoTax) {
                        let taxableBase = baseTotal;
                        if (this.orderType === 'phone' || this.orderType === 'email') {
                            taxableBase += parseFloat(this.deliveryFee || 0);
                        }
                        this.taxCharged = (Math.round(taxableBase * 0.1025 * 100) / 100).toFixed(2);
                    } else {
                        this.taxCharged = (0).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.product_name) this.productName = detail.product_name;
                        if (detail.order_type) this.orderType = detail.order_type;
                        if (detail.unit) this.unitCount = detail.unit;
                        if (detail.unit_price) this.unitPrice = detail.unit_price;
                        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;

                        this.calculateTotal();
                    } else {
                        this.productName = '';
                        this.orderType = '';
                    }
                }
            }))
        })
    </script>
</x-admin-layout>