@extends('layouts.admin')

@section('title', 'Record Purchase Bill (GRN)')
@section('subtitle', 'Inward stock from suppliers')

@section('content')
    <div x-data="purchaseForm()" class="space-y-6">
        <form action="{{ route('admin.purchases.store') }}" method="POST" @submit="validateForm($event)">
            @csrf

            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                {{-- Bill details --}}
                <div class="lg:col-span-2 space-y-6">
                    <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6 space-y-4">
                        <h3 class="text-lg font-semibold text-slate-800 mb-4">Bill Items</h3>

                        {{-- Item addition row --}}
                        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 p-4 bg-slate-50 rounded-xl border border-slate-200">
                            <div class="col-span-2">
                                <label class="block text-xs font-semibold text-slate-500 uppercase mb-1">Select Product</label>
                                <select x-model="selectedProduct" class="w-full px-3 py-2 border border-slate-300 rounded-lg outline-none bg-white">
                                    <option value="">-- Choose Product --</option>
                                    <template x-for="p in products" :key="p.id">
                                        <option :value="JSON.stringify(p)" x-text="p.name_en + ' (' + p.barcode + ')'"></option>
                                    </template>
                                </select>
                            </div>
                            <div>
                                <label class="block text-xs font-semibold text-slate-500 uppercase mb-1">Qty</label>
                                <input type="number" x-model.number="tempQty" min="0.001" step="any" class="w-full px-3 py-2 border border-slate-300 rounded-lg outline-none">
                            </div>
                            <div class="flex items-end">
                                <button type="button" @click="addItem()" class="w-full px-4 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition">
                                    ➕ Add Item
                                </button>
                            </div>
                        </div>

                        {{-- Items table list --}}
                        <div class="overflow-x-auto pt-4">
                            <table class="w-full text-sm">
                                <thead>
                                    <tr class="text-left text-slate-500 border-b border-slate-200">
                                        <th class="pb-3">Product</th>
                                        <th class="pb-3 text-right">Cost Price (LKR)</th>
                                        <th class="pb-3 text-center">Qty</th>
                                        <th class="pb-3 text-right">Subtotal</th>
                                        <th class="pb-3 text-center">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <template x-if="items.length === 0">
                                        <tr>
                                            <td colspan="5" class="py-8 text-center text-slate-400">No items added to the bill yet.</td>
                                        </tr>
                                    </template>
                                    <template x-for="(item, index) in items" :key="index">
                                        <tr class="border-b border-slate-100 align-top">
                                            <td class="py-3">
                                                <div class="font-medium text-slate-800" x-text="item.name"></div>
                                                <div class="text-xs text-slate-500" x-text="'Barcode: ' + item.barcode"></div>
                                                
                                                {{-- IMEI field input --}}
                                                <div class="mt-2">
                                                    <label class="block text-xs font-semibold text-slate-400 uppercase mb-1">IMEI / Serial Numbers (Optional - separate by commas)</label>
                                                    <input type="text" :name="'items['+index+'][imei_numbers]'" x-model="item.imei_numbers" placeholder="IMEI 1, IMEI 2..." class="w-full px-3 py-1 border border-slate-200 rounded-lg text-xs outline-none">
                                                </div>
                                                
                                                <input type="hidden" :name="'items['+index+'][product_id]'" :value="item.product_id">
                                            </td>
                                            <td class="py-3 text-right">
                                                <input type="number" :name="'items['+index+'][cost_price]'" x-model.number="item.cost_price" min="0" step="0.01" class="w-24 px-2 py-1 border border-slate-300 rounded text-right outline-none">
                                            </td>
                                            <td class="py-3 text-center">
                                                <input type="number" :name="'items['+index+'][quantity]'" x-model.number="item.quantity" min="0.001" step="any" class="w-20 px-2 py-1 border border-slate-300 rounded text-center outline-none">
                                            </td>
                                            <td class="py-3 text-right font-semibold text-slate-800" x-text="'LKR ' + formatNumber(item.cost_price * item.quantity)"></td>
                                            <td class="py-3 text-center">
                                                <button type="button" @click="removeItem(index)" class="p-1 text-red-500 hover:bg-red-50 rounded transition">
                                                    🗑️
                                                </button>
                                            </td>
                                        </tr>
                                    </template>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                {{-- Bill summary & settings --}}
                <div class="space-y-6">
                    <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6 space-y-4">
                        <h3 class="text-lg font-semibold text-slate-800 mb-2">GRN Metadata</h3>
                        
                        <div>
                            <label class="block text-xs font-semibold text-slate-500 uppercase mb-1">Supplier *</label>
                            <select name="supplier_id" required class="w-full px-3 py-2 border border-slate-300 rounded-lg outline-none bg-white">
                                <option value="">-- Choose Supplier --</option>
                                @foreach($suppliers as $supplier)
                                    <option value="{{ $supplier->id }}">{{ $supplier->name }} ({{ $supplier->company_name ?? 'N/A' }})</option>
                                @endforeach
                            </select>
                        </div>

                        <div>
                            <label class="block text-xs font-semibold text-slate-500 uppercase mb-1">Destination Branch *</label>
                            <select name="branch_id" required class="w-full px-3 py-2 border border-slate-300 rounded-lg outline-none bg-white">
                                @foreach($branches as $branch)
                                    <option value="{{ $branch->id }}" {{ $branch->id == auth()->user()->branch_id ? 'selected' : '' }}>{{ $branch->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-xs font-semibold text-slate-500 uppercase mb-1">Bill Number</label>
                                <input type="text" name="bill_number" placeholder="SUPP-1234" class="w-full px-3 py-2 border border-slate-300 rounded-lg outline-none">
                            </div>
                            <div>
                                <label class="block text-xs font-semibold text-slate-500 uppercase mb-1">Bill Date *</label>
                                <input type="date" name="bill_date" value="{{ date('Y-m-d') }}" required class="w-full px-3 py-2 border border-slate-300 rounded-lg outline-none">
                            </div>
                        </div>
                    </div>

                    <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6 space-y-4">
                        <h3 class="text-lg font-semibold text-slate-800 mb-2">Summary</h3>
                        
                        <div class="space-y-2 text-sm">
                            <div class="flex justify-between">
                                <span class="text-slate-500">Subtotal</span>
                                <span class="font-medium text-slate-800" x-text="'LKR ' + formatNumber(subtotal)"></span>
                            </div>
                            
                            <div>
                                <label class="block text-xs font-semibold text-slate-500 uppercase mb-1">Bill Discount (LKR)</label>
                                <input type="number" name="discount" x-model.number="discount" min="0" step="0.01" class="w-full px-3 py-2 border border-slate-300 rounded-lg outline-none">
                            </div>

                            <div class="flex justify-between pt-2 border-t border-slate-200 text-base font-bold">
                                <span class="text-slate-800">Grand Total</span>
                                <span class="text-blue-600" x-text="'LKR ' + formatNumber(grandTotal)"></span>
                            </div>

                            <div>
                                <label class="block text-xs font-semibold text-slate-500 uppercase mb-1">Paid Amount (LKR)</label>
                                <input type="number" name="paid_amount" x-model.number="paidAmount" min="0" step="0.01" class="w-full px-3 py-2 border border-slate-300 rounded-lg outline-none">
                            </div>

                            <div>
                                <label class="block text-xs font-semibold text-slate-500 uppercase mb-1">Payment Method</label>
                                <select name="payment_method" class="w-full px-3 py-2 border border-slate-300 rounded-lg outline-none bg-white">
                                    <option value="cash">Cash</option>
                                    <option value="card">Card Payment</option>
                                    <option value="bank_transfer">Bank Transfer</option>
                                    <option value="credit">Store Credit / Pay Later</option>
                                </select>
                            </div>

                            <div>
                                <label class="block text-xs font-semibold text-slate-500 uppercase mb-1">Payment Status</label>
                                <select name="payment_status" x-model="paymentStatus" class="w-full px-3 py-2 border border-slate-300 rounded-lg outline-none bg-white">
                                    <option value="unpaid">Unpaid</option>
                                    <option value="partial">Partially Paid</option>
                                    <option value="paid">Fully Paid</option>
                                </select>
                            </div>
                        </div>

                        <div>
                            <label class="block text-xs font-semibold text-slate-500 uppercase mb-1">Notes</label>
                            <textarea name="notes" rows="2" placeholder="e.g. received items in good condition" class="w-full px-3 py-2 border border-slate-300 rounded-lg outline-none text-sm"></textarea>
                        </div>

                        <button type="submit" class="w-full py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-xl transition">
                            💾 Save Purchase Bill
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
<script>
    function purchaseForm() {
        return {
            products: @json($products),
            items: [],
            selectedProduct: '',
            tempQty: 1,
            discount: 0,
            paidAmount: 0,
            paymentStatus: 'unpaid',

            addItem() {
                if (!this.selectedProduct) return;
                const prod = JSON.parse(this.selectedProduct);
                
                // Add product to items list
                this.items.push({
                    product_id: prod.id,
                    name: prod.name_en,
                    barcode: prod.barcode,
                    cost_price: parseFloat(prod.cost_price || 0),
                    quantity: this.tempQty,
                    imei_numbers: ''
                });

                // Clear selection
                this.selectedProduct = '';
                this.tempQty = 1;
            },

            removeItem(index) {
                this.items.splice(index, 1);
            },

            get subtotal() {
                return this.items.reduce((sum, item) => sum + (item.cost_price * item.quantity), 0);
            },

            get grandTotal() {
                return Math.max(0, this.subtotal - this.discount);
            },

            formatNumber(num) {
                return parseFloat(num).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
            },

            validateForm(event) {
                if (this.items.length === 0) {
                    alert('Please add at least one item to the purchase bill.');
                    event.preventDefault();
                    return;
                }
                
                // Auto adjust payment status based on paid amount
                if (this.paidAmount >= this.grandTotal) {
                    this.paymentStatus = 'paid';
                } else if (this.paidAmount > 0) {
                    this.paymentStatus = 'partial';
                } else {
                    this.paymentStatus = 'unpaid';
                }
            }
        }
    }
</script>
@endpush