@extends('layouts.app')

@section('title', 'Create Invoice')

@section('content')
<div class="px-4 py-6 sm:px-0">
    <div class="mb-6">
        <h1 class="text-3xl font-bold text-gray-900">Create New Invoice</h1>
        <p class="text-gray-600">Fill in the details below to generate a new invoice</p>
    </div>

    <form action="{{ route('invoices.store') }}" method="POST" id="invoiceForm">
        @csrf

        <div class="bg-white shadow-lg rounded-xl overflow-hidden border border-gray-200">
            <div class="p-8 border-b border-gray-200">
                <h2 class="text-xl font-semibold text-gray-900 mb-6 flex items-center">
                    <i class="fas fa-info-circle mr-2 text-indigo-500"></i> Basic Information
                </h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">

                    <div class="relative">
                        <label for="client_search" class="block text-sm font-semibold text-gray-700 mb-1">Client *</label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400">
                                <i class="fas fa-search text-xs"></i>
                            </span>
                            <input type="text" id="client_search" autocomplete="off"
                                placeholder="Search by name or phone..."
                                class="block w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm transition">

                            <input type="hidden" name="client_id" id="client_id" required value="{{ old('client_id') }}">
                            <span id="client_spinner" class="hidden absolute inset-y-0 right-0 pr-3 flex items-center">
                                <i class="fas fa-spinner fa-spin text-indigo-500"></i>
                            </span>
                        </div>
                        <div id="client_results" class="hidden absolute z-50 w-full bg-white mt-2 border border-gray-300 rounded-lg shadow-2xl max-h-72 overflow-y-auto"></div>
                    </div>

                    <div>
                        <label for="company_id" class="block text-sm font-semibold text-gray-700 mb-1">Your Company *</label>
                        <select name="company_id" id="company_id" required class="block w-full px-4 py-3 rounded-lg border border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm transition">
                            <option value="">Select Company</option>
                            @foreach($companies as $company)
                                <option value="{{ $company->id }}" {{ old('company_id') == $company->id ? 'selected' : '' }}>{{ $company->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div>
                        <label for="invoice_date" class="block text-sm font-semibold text-gray-700 mb-1">Invoice Date *</label>
                        <input type="date" name="invoice_date" id="invoice_date" required value="{{ old('invoice_date', date('Y-m-d')) }}"
                               class="block w-full px-4 py-3 rounded-lg border border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                    </div>

                    <div>
                        <label for="status" class="block text-sm font-semibold text-gray-700 mb-1">Status *</label>
                        <select name="status" id="status" required class="block w-full px-4 py-3 rounded-lg border border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                            <option value="draft">Draft</option>
                            <option value="sent">Sent</option>
                            <option value="paid">Paid</option>
                            <option value="overdue">Overdue</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="p-8 border-b border-gray-200">
                <div class="flex justify-between items-center mb-8">
                    <h2 class="text-xl font-semibold text-gray-900">Line Items</h2>
                    <button type="button" id="addItem" class="bg-indigo-600 text-white px-5 py-2 rounded-lg text-sm font-bold hover:bg-indigo-700 transition shadow-sm">
                        <i class="fas fa-plus mr-1"></i> Add Item
                    </button>
                </div>

                <div class="hidden md:grid grid-cols-12 gap-4 mb-2 px-2 text-xs font-bold text-gray-500 uppercase tracking-widest">
                    <div class="col-span-3">Item Name *</div>
                    <div class="col-span-3">Description</div>
                    <div class="col-span-2">Price *</div>
                    <div class="col-span-2 text-center">UOM</div>
                    <div class="col-span-1 text-center">Qty *</div>
                    <div class="col-span-1"></div>
                </div>

                <div id="lineItems" class="space-y-4">
                    <div class="line-item grid grid-cols-1 md:grid-cols-12 gap-4 items-start">
                        <div class="col-span-3">
                            <input type="text" name="items[0][item_name]" required
                                   class="block w-full px-4 py-3 rounded-lg border border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                        </div>
                        <div class="col-span-3">
                            <textarea name="items[0][description]" rows="1"
                                      class="block w-full px-4 py-2 rounded-lg border border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm resize-none"
                                      placeholder="Details..." style="min-height: 46px;"></textarea>
                        </div>
                        <div class="col-span-2">
                            <div class="relative">
                                <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400 text-xs font-bold">RM</span>
                                <input type="number" name="items[0][price_per_unit]" required step="0.01"
                                       class="block w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm item-price">
                            </div>
                        </div>
                        <div class="col-span-2">
                            <input type="text" name="items[0][uom]" placeholder="pcs" required
                                   class="block w-full px-4 py-3 rounded-lg border border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm text-center">
                        </div>
                        <div class="col-span-1">
                            <input type="number" name="items[0][quantity]" required step="0.01"
                                   class="block w-full px-2 py-3 rounded-lg border border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm text-center item-quantity">
                        </div>
                        <div class="col-span-1 text-center pt-2">
                            <button type="button" class="remove-item text-gray-300 cursor-not-allowed p-2" disabled><i class="fas fa-trash"></i></button>
                        </div>
                    </div>
                </div>

                <div class="mt-8 flex justify-end">
                    <div class="bg-gray-50 px-8 py-4 rounded-xl border border-gray-200 flex items-center shadow-sm">
                        <span class="text-gray-600 mr-6 font-bold uppercase tracking-widest text-xs">Grand Total</span>
                        <span class="text-2xl font-black text-gray-900 leading-none">RM <span id="grandTotal">0.00</span></span>
                    </div>
                </div>
            </div>

            <div class="p-8 bg-gray-50 flex justify-end space-x-3">
                <a href="{{ route('invoices.index') }}" class="bg-white border border-gray-300 text-gray-700 px-6 py-3 rounded-lg hover:bg-gray-50 font-semibold transition">Cancel</a>
                <button type="submit" class="bg-indigo-600 text-white px-10 py-3 rounded-lg hover:bg-indigo-700 font-bold shadow-md transition">Create Invoice</button>
            </div>
        </div>
    </form>
</div>

<script>
// --- Client Search Logic ---
const clientSearch = document.getElementById('client_search');
const clientResults = document.getElementById('client_results');
const clientIdHidden = document.getElementById('client_id');
const clientSpinner = document.getElementById('client_spinner');

function debounce(func, timeout = 400) {
    let timer;
    return (...args) => { clearTimeout(timer); timer = setTimeout(() => { func.apply(this, args); }, timeout); };
}

const performSearch = debounce(function() {
    const term = clientSearch.value;
    if (term.length < 2) { clientResults.classList.add('hidden'); return; }
    clientSpinner.classList.remove('hidden');
    fetch(`{{ route('clients.search') }}?term=${term}`)
        .then(res => res.json())
        .then(data => {
            clientSpinner.classList.add('hidden');
            clientResults.innerHTML = '';
            if (data.length > 0) {
                data.forEach(c => {
                    const d = document.createElement('div');
                    d.className = 'p-4 hover:bg-indigo-50 cursor-pointer border-b border-gray-100 last:border-0';
                    d.innerHTML = `<div class="font-bold text-gray-900 text-sm">${c.company_name}</div><div class="text-xs text-gray-500">${c.contact_person_name} • RM ${c.phone || ''}</div>`;
                    d.onclick = () => { clientSearch.value = `${c.company_name} (${c.contact_person_name})`; clientIdHidden.value = c.id; clientResults.classList.add('hidden'); };
                    clientResults.appendChild(d);
                });
                clientResults.classList.remove('hidden');
            } else {
                clientResults.innerHTML = '<div class="p-4 text-sm text-gray-500 italic">No clients found.</div>';
                clientResults.classList.remove('hidden');
            }
        });
});
clientSearch.addEventListener('input', performSearch);

// --- Line Item Logic ---
let itemCount = 1;
document.getElementById('addItem').addEventListener('click', function() {
    const container = document.getElementById('lineItems');
    const row = document.createElement('div');
    row.className = 'line-item grid grid-cols-1 md:grid-cols-12 gap-4 items-start animate-fade-in';
    row.innerHTML = `
        <div class="col-span-3"><input type="text" name="items[${itemCount}][item_name]" required class="block w-full px-4 py-3 rounded-lg border border-gray-300 shadow-sm sm:text-sm"></div>
        <div class="col-span-3"><textarea name="items[${itemCount}][description]" rows="1" class="block w-full px-4 py-2 rounded-lg border border-gray-300 shadow-sm sm:text-sm resize-none" style="min-height: 46px;"></textarea></div>
        <div class="col-span-2"><div class="relative"><span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400 text-xs font-bold">RM</span><input type="number" name="items[${itemCount}][price_per_unit]" required step="0.01" class="block w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 shadow-sm sm:text-sm item-price"></div></div>
        <div class="col-span-2"><input type="text" name="items[${itemCount}][uom]" required class="block w-full px-4 py-3 rounded-lg border border-gray-300 shadow-sm text-center sm:text-sm"></div>
        <div class="col-span-1"><input type="number" name="items[${itemCount}][quantity]" required step="0.01" class="block w-full px-2 py-3 rounded-lg border border-gray-300 shadow-sm text-center sm:text-sm item-quantity"></div>
        <div class="col-span-1 text-center pt-2"><button type="button" class="remove-item text-red-600 hover:text-red-900 p-2"><i class="fas fa-trash"></i></button></div>
    `;
    container.appendChild(row);
    itemCount++;
    attachEventListeners();
    updateRemoveButtons();
});

function attachEventListeners() {
    document.querySelectorAll('.remove-item').forEach(btn => { btn.onclick = function() { this.closest('.line-item').remove(); calculateTotal(); updateRemoveButtons(); }; });
    document.querySelectorAll('.item-price, .item-quantity').forEach(input => { input.oninput = calculateTotal; });
}

function calculateTotal() {
    let total = 0;
    document.querySelectorAll('.line-item').forEach(row => {
        const p = parseFloat(row.querySelector('.item-price').value) || 0;
        const q = parseFloat(row.querySelector('.item-quantity').value) || 0;
        total += p * q;
    });
    document.getElementById('grandTotal').textContent = total.toLocaleString(undefined, {minimumFractionDigits: 2});
}

function updateRemoveButtons() {
    const btns = document.querySelectorAll('.remove-item');
    btns.forEach((btn, i) => { if (i === 0 && btns.length === 1) { btn.disabled = true; btn.classList.add('text-gray-300'); } else { btn.disabled = false; btn.classList.remove('text-gray-300'); } });
}

attachEventListeners();
</script>

<style>
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    .animate-fade-in { animation: fadeIn 0.3s ease-out; }
    input, textarea, select { outline: none !important; }
    /* Fix for consistent alignment between input and textarea */
    .line-item input, .line-item textarea {
        display: flex;
        align-items: center;
    }
</style>
@endsection