@extends('layouts.main')
@section('title', 'Create Invoice')
@section('content')
<div class="mb-6">
    <a href="{{ route('invoices.index') }}" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 flex items-center">
        <i class="fas fa-arrow-left mr-2"></i> Back to Invoices
    </a>
</div>

<div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-8">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">Create Invoice</h2>
    
    <form action="{{ route('invoices.store') }}" method="POST" id="invoiceForm">
        @csrf
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
            <div>
                <label class="block text-gray-700 dark:text-gray-300 text-sm font-semibold mb-2">Customer *</label>
                <select name="customer_id" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:border-indigo-500" required>
                    <option value="">Select Customer</option>
                    @foreach($customers as $customer)
                        <option value="{{ $customer->id }}" {{ old('customer_id') == $customer->id ? 'selected' : '' }}>{{ $customer->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-gray-700 dark:text-gray-300 text-sm font-semibold mb-2">Invoice Date *</label>
                <input type="date" name="invoice_date" value="{{ old('invoice_date', date('Y-m-d')) }}" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:border-indigo-500" required>
            </div>
            <div>
                <label class="block text-gray-700 dark:text-gray-300 text-sm font-semibold mb-2">Due Date *</label>
                <input type="date" name="due_date" value="{{ old('due_date', date('Y-m-d', strtotime('+30 days'))) }}" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:border-indigo-500" required>
            </div>
            <div>
                <label class="block text-gray-700 dark:text-gray-300 text-sm font-semibold mb-2">Notes</label>
                <textarea name="notes" rows="2" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:border-indigo-500">{{ old('notes') }}</textarea>
            </div>
        </div>

        <div class="mb-6">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Invoice Items</h3>
            <div class="overflow-x-auto">
                <table class="w-full" id="itemsTable">
                    <thead class="bg-gray-50 dark:bg-gray-700">
                        <tr class="text-left text-gray-500 dark:text-gray-400 text-sm">
                            <th class="px-4 py-3">Type</th>
                            <th class="px-4 py-3">Product/Service</th>
                            <th class="px-4 py-3 w-24">Qty</th>
                            <th class="px-4 py-3 w-28">Price</th>
                            <th class="px-4 py-3 w-28">Total</th>
                            <th class="px-4 py-3 w-16"></th>
                        </tr>
                    </thead>
                    <tbody id="itemsBody">
                        <tr class="item-row border-b dark:border-gray-700">
                            <td class="px-4 py-3">
                                <select name="items[0][type]" class="item-type-select w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                                    <option value="product">Product</option>
                                    <option value="service">Service</option>
                                </select>
                            </td>
                            <td class="px-4 py-3">
                                <select name="items[0][product_id]" class="product-select w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                                    <option value="">Select Product</option>
                                    @foreach($products as $product)
                                        <option value="{{ $product->id }}" data-price="{{ $product->selling_price }}">{{ $product->name }} (Stock: {{ $product->stock }})</option>
                                    @endforeach
                                </select>
                                <select name="items[0][service_id]" class="service-select w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white hidden">
                                    <option value="">Select Service</option>
                                    @foreach($services as $service)
                                        <option value="{{ $service->id }}" data-price="{{ $service->price }}" data-unit="{{ $service->unit }}">{{ $service->name }} ({{ $service->unit }})</option>
                                    @endforeach
                                </select>
                            </td>
                            <td class="px-4 py-3">
                                <input type="number" name="items[0][quantity]" class="quantity-input w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" value="1" min="1">
                            </td>
                            <td class="px-4 py-3">
                                <input type="number" name="items[0][unit_price]" class="unit-price-input w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" step="0.01">
                            </td>
                            <td class="px-4 py-3">
                                <span class="item-total font-semibold text-gray-800 dark:text-white">$0.00</span>
                            </td>
                            <td class="px-4 py-3">
                                <button type="button" class="remove-item text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <button type="button" id="addItem" class="mt-4 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-lg">
                <i class="fas fa-plus mr-2"></i> Add Item
            </button>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
            <div>
                <label class="block text-gray-700 dark:text-gray-300 text-sm font-semibold mb-2">Tax Amount</label>
                <input type="number" name="tax" id="taxInput" value="{{ old('tax', 0) }}" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" step="0.01" min="0">
            </div>
            <div>
                <label class="block text-gray-700 dark:text-gray-300 text-sm font-semibold mb-2">Discount Amount</label>
                <input type="number" name="discount" id="discountInput" value="{{ old('discount', 0) }}" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" step="0.01" min="0">
            </div>
            <div class="bg-indigo-50 dark:bg-indigo-900/30 p-4 rounded-lg">
                <label class="block text-gray-700 dark:text-gray-300 text-sm font-semibold mb-2">Grand Total</label>
                <p class="text-2xl font-bold text-indigo-600 dark:text-indigo-400" id="grandTotal">$0.00</p>
            </div>
        </div>

        <div class="flex justify-end space-x-4">
            <a href="{{ route('invoices.index') }}" class="bg-gray-200 dark:bg-gray-600 hover:bg-gray-300 dark:hover:bg-gray-500 text-gray-700 dark:text-gray-200 px-6 py-3 rounded-lg font-medium">Cancel</a>
            <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium">
                <i class="fas fa-save mr-2"></i> Create Invoice
            </button>
        </div>
    </form>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    let itemCount = 1;
    
    // Products and services for JavaScript
    const products = @json($products);
    const services = @json($services);
    
    function updateItemSelects(row) {
        const type = row.querySelector('.item-type-select').value;
        const productSelect = row.querySelector('.product-select');
        const serviceSelect = row.querySelector('.service-select');
        
        if (type === 'product') {
            productSelect.classList.remove('hidden');
            serviceSelect.classList.add('hidden');
            serviceSelect.value = '';
            productSelect.required = true;
            serviceSelect.required = false;
        } else {
            productSelect.classList.add('hidden');
            serviceSelect.classList.remove('hidden');
            productSelect.value = '';
            productSelect.required = false;
            serviceSelect.required = true;
        }
    }
    
    document.getElementById('addItem').addEventListener('click', function() {
        const newRow = document.createElement('tr');
        newRow.className = 'item-row border-b dark:border-gray-700';
        newRow.innerHTML = `
            <td class="px-4 py-3">
                <select name="items[${itemCount}][type]" class="item-type-select w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                    <option value="product">Product</option>
                    <option value="service">Service</option>
                </select>
            </td>
            <td class="px-4 py-3">
                <select name="items[${itemCount}][product_id]" class="product-select w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                    <option value="">Select Product</option>
                    ${products.map(p => `<option value="${p.id}" data-price="${p.selling_price}">${p.name} (Stock: ${p.stock})</option>`).join('')}
                </select>
                <select name="items[${itemCount}][service_id]" class="service-select w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white hidden">
                    <option value="">Select Service</option>
                    ${services.map(s => `<option value="${s.id}" data-price="${s.price}" data-unit="${s.unit}">${s.name} (${s.unit})</option>`).join('')}
                </select>
            </td>
            <td class="px-4 py-3">
                <input type="number" name="items[${itemCount}][quantity]" class="quantity-input w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" value="1" min="1">
            </td>
            <td class="px-4 py-3">
                <input type="number" name="items[${itemCount}][unit_price]" class="unit-price-input w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" step="0.01">
            </td>
            <td class="px-4 py-3">
                <span class="item-total font-semibold text-gray-800 dark:text-white">$0.00</span>
            </td>
            <td class="px-4 py-3">
                <button type="button" class="remove-item text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300">
                    <i class="fas fa-trash"></i>
                </button>
            </td>
        `;
        document.getElementById('itemsBody').appendChild(newRow);
        itemCount++;
        attachEventListeners(newRow);
    });
    
    document.querySelectorAll('.remove-item').forEach(btn => {
        btn.addEventListener('click', function() {
            if (document.querySelectorAll('.item-row').length > 1) {
                this.closest('tr').remove();
                calculateTotals();
            }
        });
    });
    
    function attachEventListeners(row) {
        const typeSelect = row.querySelector('.item-type-select');
        if (typeSelect) {
            typeSelect.addEventListener('change', () => updateItemSelects(row));
        }
        
        const productSelect = row.querySelector('.product-select');
        if (productSelect) {
            productSelect.addEventListener('change', function() {
                const price = this.options[this.selectedIndex]?.dataset?.price || 0;
                const unitInput = row.querySelector('.unit-price-input');
                if (unitInput) unitInput.value = price;
                calculateTotals();
            });
        }
        
        const serviceSelect = row.querySelector('.service-select');
        if (serviceSelect) {
            serviceSelect.addEventListener('change', function() {
                const price = this.options[this.selectedIndex]?.dataset?.price || 0;
                const unitInput = row.querySelector('.unit-price-input');
                if (unitInput) unitInput.value = price;
                calculateTotals();
            });
        }
        
        const qtyInput = row.querySelector('.quantity-input');
        if (qtyInput) {
            qtyInput.addEventListener('input', calculateTotals);
        }
        
        const priceInput = row.querySelector('.unit-price-input');
        if (priceInput) {
            priceInput.addEventListener('input', calculateTotals);
        }
        
        updateItemSelects(row);
    }
    
    function calculateTotals() {
        let subtotal = 0;
        document.querySelectorAll('.item-row').forEach(row => {
            const qty = parseFloat(row.querySelector('.quantity-input')?.value) || 0;
            const price = parseFloat(row.querySelector('.unit-price-input')?.value) || 0;
            const total = qty * price;
            const totalSpan = row.querySelector('.item-total');
            if (totalSpan) totalSpan.textContent = '$' + total.toFixed(2);
            subtotal += total;
        });
        
        const tax = parseFloat(document.getElementById('taxInput')?.value) || 0;
        const discount = parseFloat(document.getElementById('discountInput')?.value) || 0;
        const grandTotal = subtotal + tax - discount;
        
        document.getElementById('grandTotal').textContent = '$' + grandTotal.toFixed(2);
    }
    
    document.getElementById('taxInput').addEventListener('input', calculateTotals);
    document.getElementById('discountInput').addEventListener('input', calculateTotals);
    
    // Initialize
    document.querySelectorAll('.item-row').forEach(row => attachEventListeners(row));
    calculateTotals();
});
</script>
@endsection