@extends('layouts.aura-main')

@section('main-content')
<style>
    .qbo-input {
        @apply border-slate-300 rounded-sm text-sm shadow-sm transition-all duration-200;
        border-width: 1.5px;
    }
    .qbo-input:focus {
        @apply border-indigo-500 ring-2 ring-indigo-100 outline-none;
    }
    .qbo-select {
        @apply border-slate-300 rounded-sm text-sm shadow-sm transition-all duration-200 bg-white cursor-pointer;
        border-width: 1.5px;
    }
    .qbo-select:focus {
        @apply border-indigo-500 ring-2 ring-indigo-100 outline-none;
    }
    .table-input {
        @apply border-transparent hover:border-slate-200 focus:border-indigo-400 focus:ring-0 rounded-none bg-transparent transition-colors;
    }
    .app-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: #64748b; }
</style>

<div x-data="{ 
    products: {{ $products->toJson() }},
    rows: [{ product_id: '', description: '', qty: 1, rate: 0 }],
    
    addRow() {
        this.rows.push({ product_id: '', description: '', qty: 1, rate: 0 });
    },
    removeRow(index) {
        if(this.rows.length > 1) this.rows.splice(index, 1);
    },
    updateProductDetails(index) {
        const selectedId = this.rows[index].product_id;
        const product = this.products.find(p => p.id == selectedId);
        
        if (product) {
            this.rows[index].description = product.name;
            this.rows[index].rate = parseFloat(product.sales_price);
        }
    },
    calculateAmount(row) {
        return (row.qty * row.rate).toFixed(2);
    },
    get subtotal() {
        return this.rows.reduce((sum, row) => sum + (row.qty * row.rate), 0);
    }
}" class="max-w-6xl mx-auto pb-20">

    <form action="{{ route('sales-receipts.store') }}" method="POST">
        @csrf

        <div class="flex justify-between items-center mb-6">
            <h1 class="text-2xl font-black text-slate-900 tracking-tight flex items-center gap-3">
                <div class="w-10 h-10 bg-slate-100 rounded-full flex items-center justify-center">
                    <svg class="w-5 h-5 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </div>
                Sales Receipt #{{ $receiptNo }}
            </h1>
            <input type="hidden" name="receipt_no" value="{{ $receiptNo }}">
            <div class="flex gap-3">
                <a href="{{ route('sales-receipts.index') }}" class="px-5 py-2 text-[12px] font-bold text-slate-400 uppercase tracking-widest hover:text-slate-600 transition">Cancel</a>
                <button type="submit" class="bg-indigo-600 text-white px-8 py-2 rounded-sm text-[12px] font-bold shadow-lg shadow-indigo-100 hover:bg-indigo-700 transition uppercase tracking-widest">
                    Save receipt
                </button>
            </div>
        </div>

        <div class="bg-white border border-slate-200 rounded-t-sm p-8 shadow-sm">
            <div class="grid grid-cols-12 gap-8">
                <div class="col-span-4">
                    <label class="app-label mb-2 block">Customer</label>
                    <select name="customer_id" class="w-full qbo-select h-10 px-3" required>
                        <option value="">Choose a customer</option>
                        @foreach($customers as $customer)
                            <option value="{{ $customer->id }}">{{ $customer->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="col-span-4">
                    <div class="flex justify-between items-center mb-2">
                        <label class="app-label block">Email</label>
                        <button type="button" class="text-[10px] text-indigo-600 font-bold hover:underline">Cc/Bcc</button>
                    </div>
                    <input type="email" name="email" class="w-full qbo-input h-10 px-3" placeholder="customer@example.com">
                    <div class="mt-3 flex items-center gap-2 group cursor-pointer">
                        <input type="checkbox" id="send_later" name="send_later" class="w-4 h-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500 cursor-pointer">
                        <label for="send_later" class="text-[11px] font-bold text-slate-500 cursor-pointer group-hover:text-slate-700">Send later</label>
                    </div>
                </div>
            </div>

            <div class="grid grid-cols-12 gap-8 mt-8 border-t border-slate-50 pt-8">
                <div class="col-span-4">
                    <label class="app-label mb-2 block">Billing address</label>
                    <textarea name="billing_address" rows="3" class="w-full qbo-input p-3" placeholder="Enter billing address..."></textarea>
                    <button type="button" class="text-[11px] text-indigo-500 font-bold mt-2 hover:underline tracking-tight">+ Shipping information</button>
                </div>

                <div class="col-span-3">
                    <label class="app-label mb-2 block">Sales Receipt Date</label>
                    <input type="date" name="transaction_date" value="{{ date('Y-m-d') }}" class="w-full qbo-input h-10 px-3" required>
                </div>
            </div>
        </div>

        <div class="bg-slate-50 border-x border-b border-slate-200 p-8 rounded-b-sm shadow-sm">
            <div class="grid grid-cols-12 gap-8">
                <div class="col-span-4">
                    <label class="app-label mb-2 block">Receipting Account (Bank/Cash/MoMo)</label>
                    <select name="cash_bank_account_id" class="w-full qbo-select h-10 px-3" required>
                        <option value="">-- Select Receipting Account --</option>
                        @foreach($receiptingAccounts as $account)
                            <option value="{{ $account->id }}">
                                {{ $account->name }} ({{ $account->code }})
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-span-3">
                    <label class="app-label mb-2 block">Reference no.</label>
                    <input type="text" name="reference_no" class="w-full qbo-input h-10 px-3" placeholder="TXN-ID / Cheque No">
                </div>
            </div>
        </div>

        <div class="bg-white border border-slate-300 mt-8 rounded-sm shadow-md overflow-hidden">
            <table class="w-full text-left border-collapse">
                <thead class="bg-slate-50 border-b border-slate-300">
                    <tr class="app-label text-slate-700">
                        <th class="px-4 py-4 w-12 border-r border-slate-200"></th>
                        <th class="px-2 py-4 w-12 border-r border-slate-200 text-center">#</th>
                        <th class="px-4 py-4 border-r border-slate-200">Product/Service</th>
                        <th class="px-4 py-4 border-r border-slate-200">Description</th>
                        <th class="px-4 py-4 w-24 border-r border-slate-200 text-center">Qty</th>
                        <th class="px-4 py-4 w-32 border-r border-slate-200 text-right">Rate</th>
                        <th class="px-4 py-4 w-32 border-r border-slate-200 text-right">Amount</th>
                        <th class="px-4 py-4 w-16 text-center">Tax</th>
                    </tr>
                </thead>
                <tbody>
                    <template x-for="(row, index) in rows" :key="index">
                        <tr class="border-b border-slate-100 hover:bg-slate-50 transition-colors">
                            <td class="px-4 py-2 text-center border-r border-slate-100 text-slate-300">
                                <svg class="w-4 h-4 cursor-move" fill="currentColor" viewBox="0 0 20 20">
                                    <path d="M7 7h2v2H7V7zm0 4h2v2H7v-2zm4-4h2v2h-2V7zm0 4h2v2h-2v-2z"></path>
                                </svg>
                            </td>
                            <td class="px-2 py-2 text-center border-r border-slate-100 text-slate-400 font-mono text-[11px]" x-text="index + 1"></td>
                            <td class="p-0 border-r border-slate-100">
                                <select 
                                    :name="`items[${index}][product_id]`" 
                                    x-model="rows[index].product_id"
                                    @change="updateProductDetails(index)"
                                    class="w-full table-input h-12 px-4 focus:bg-white"
                                    required
                                >
                                    <option value="">Select Product</option>
                                    <template x-for="p in products" :key="p.id">
                                        <option :value="p.id" x-text="p.name"></option>
                                    </template>
                                </select>
                            </td>
                            <td class="p-0 border-r border-slate-100">
                                <input type="text" :name="`items[${index}][description]`" x-model="rows[index].description" class="w-full table-input h-12 px-4 focus:bg-white">
                            </td>
                            <td class="p-0 border-r border-slate-100">
                                <input type="number" step="0.01" :name="`items[${index}][qty]`" x-model.number="rows[index].qty" class="w-full table-input h-12 text-center focus:bg-white">
                            </td>
                            <td class="p-0 border-r border-slate-100">
                                <input type="number" step="0.01" :name="`items[${index}][rate]`" x-model.number="rows[index].rate" class="w-full table-input h-12 text-right px-4 font-mono focus:bg-white">
                            </td>
                            <td class="px-4 py-2 text-right border-r border-slate-100 font-mono font-bold text-slate-700 bg-slate-50/50" x-text="calculateAmount(rows[index])"></td>
                            <td class="px-4 py-2 text-center">
                                <input type="checkbox" name="tax[]" class="w-4 h-4 rounded border-slate-300 text-indigo-600 focus:ring-0">
                            </td>
                        </tr>
                    </template>
                </tbody>
            </table>
            
            <div class="p-4 bg-white flex gap-3 border-t border-slate-100">
                <button type="button" @click="addRow()" class="px-4 py-2 rounded-sm border border-slate-300 text-[11px] font-bold text-slate-600 hover:bg-slate-50 uppercase tracking-widest transition">Add lines</button>
                <button type="button" @click="rows = [{ product_id: '', description: '', qty: 1, rate: 0 }]" class="px-4 py-2 rounded-sm border border-slate-300 text-[11px] font-bold text-slate-600 hover:bg-slate-50 uppercase tracking-widest transition">Clear all lines</button>
            </div>
        </div>

        <div class="mt-12 grid grid-cols-12 gap-12 border-t border-slate-200 pt-12">
            <div class="col-span-6">
                <label class="app-label mb-2 block">Message displayed on sales receipt</label>
                <textarea name="memo" rows="4" class="w-full qbo-input p-4 italic" placeholder="Thank you for your business!"></textarea>
            </div>
            
            <div class="col-span-6">
                <div class="bg-slate-50 rounded-sm p-8 border border-slate-200 space-y-4 shadow-inner">
                    <div class="flex justify-between items-center pb-4 border-b border-slate-200">
                        <span class="app-label text-slate-500">Subtotal</span>
                        <span class="font-mono font-bold text-slate-700" x-text="subtotal.toFixed(2)"></span>
                    </div>
                    <div class="flex justify-between items-center pt-2">
                        <span class="text-lg font-black text-slate-900 tracking-tight uppercase">Total (ZMW)</span>
                        <span class="text-3xl font-black text-indigo-600 font-mono tracking-tighter" x-text="subtotal.toFixed(2)"></span>
                    </div>
                    <div class="text-right">
                         <button type="button" class="text-[10px] text-indigo-600 font-bold hover:underline uppercase">Select tax rate</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection