@extends('layouts.admin')

@section('header', 'Edit Invoice')

@section('content')
    <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <!-- Breadcrumb -->
        <nav class="flex mb-8" aria-label="Breadcrumb">
            <ol class="inline-flex items-center space-x-1 md:space-x-3">
                <li class="inline-flex items-center">
                    <a href="{{ route('admin.dashboard') }}" class="text-gray-700 hover:text-rose-600 text-sm font-medium">
                        <i class="fas fa-home mr-2"></i>
                        Dashboard
                    </a>
                </li>
                <li>
                    <div class="flex items-center">
                        <i class="fas fa-chevron-right text-gray-400 mx-2 text-sm"></i>
                        <a href="{{ route('admin.invoices.index') }}" class="text-gray-700 hover:text-rose-600 text-sm font-medium">
                            Invoices
                        </a>
                    </div>
                </li>
                <li aria-current="page">
                    <div class="flex items-center">
                        <i class="fas fa-chevron-right text-gray-400 mx-2 text-sm"></i>
                        <span class="text-gray-500 text-sm font-medium">
                            Edit Invoice #{{ $invoice->invoice_number }}
                        </span>
                    </div>
                </li>
            </ol>
        </nav>
        
        <div class="bg-white shadow overflow-hidden sm:rounded-lg">
            <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
                <h3 class="text-lg font-medium leading-6 text-gray-900">Edit Invoice #{{ $invoice->invoice_number }}</h3>
                <p class="mt-1 text-sm text-gray-500">Make changes to the invoice information below.</p>
            </div>
            
            <form action="{{ route('admin.invoices.update', $invoice) }}" method="POST" id="invoiceForm">
                @csrf
                @method('PUT')
                
                @include('admin.invoices._form')
                
                <div class="px-4 py-3 bg-gray-50 text-right sm:px-6 border-t border-gray-200">
                    <a href="{{ route('admin.invoices.show', $invoice) }}" class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-rose-500">
                        Cancel
                    </a>
                    <button type="submit" class="inline-flex justify-center ml-3 py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-rose-600 hover:bg-rose-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-rose-500">
                        Update Invoice
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    // Initialize form with dynamic invoice items
    document.addEventListener('DOMContentLoaded', function() {
        // Add event listener to add new item button
        document.getElementById('addItem').addEventListener('click', function() {
            addNewItem();
        });
        
        // Initialize with one empty item if no items exist
        if (document.querySelectorAll('.invoice-item').length === 0) {
            addNewItem();
        }
        
        // Set up event delegation for remove buttons
        document.getElementById('invoiceItems').addEventListener('click', function(e) {
            if (e.target.closest('.remove-item')) {
                const item = e.target.closest('.invoice-item');
                if (document.querySelectorAll('.invoice-item').length > 1) {
                    item.remove();
                    renumberItems();
                    calculateAllTotals();
                } else {
                    alert('You need at least one item on the invoice.');
                }
            }
        });
        
        // Set up the form to recalculate totals when values change
        document.getElementById('invoiceForm').addEventListener('input', function(e) {
            if (e.target.classList.contains('calc-trigger')) {
                calculateAllTotals();
            }
        });
        
        // Initialize calculations
        calculateAllTotals();
    });
    
    function addNewItem() {
        const itemsContainer = document.getElementById('invoiceItems');
        const itemCount = document.querySelectorAll('.invoice-item').length;
        
        const itemHtml = `
            <div class="invoice-item bg-gray-50 p-4 mb-4 rounded-md">
                <div class="flex justify-between mb-2">
                    <h4 class="text-sm font-medium text-gray-700">Item #${itemCount + 1}</h4>
                    <button type="button" class="remove-item text-red-600 hover:text-red-800">
                        <i class="fas fa-times"></i> Remove
                    </button>
                </div>
                <div class="space-y-3">
                    <div>
                        <label for="items[${itemCount}][description]" class="block text-xs font-medium text-gray-700">Description</label>
                        <textarea name="items[${itemCount}][description]" rows="2" class="mt-1 focus:ring-rose-500 focus:border-rose-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" required></textarea>
                    </div>
                    <div class="grid grid-cols-3 gap-4">
                        <div>
                            <label for="items[${itemCount}][quantity]" class="block text-xs font-medium text-gray-700">Quantity</label>
                            <input type="number" name="items[${itemCount}][quantity]" min="0.01" step="0.01" class="calc-trigger quantity mt-1 focus:ring-rose-500 focus:border-rose-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" value="1" required>
                        </div>
                        <div>
                            <label for="items[${itemCount}][unit_price]" class="block text-xs font-medium text-gray-700">Unit Price</label>
                            <input type="number" name="items[${itemCount}][unit_price]" min="0" step="0.01" class="calc-trigger unit-price mt-1 focus:ring-rose-500 focus:border-rose-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" value="0.00" required>
                        </div>
                        <div>
                            <label for="items[${itemCount}][amount]" class="block text-xs font-medium text-gray-700">Amount</label>
                            <input type="number" name="items[${itemCount}][amount]" min="0" step="0.01" class="amount mt-1 focus:ring-rose-500 focus:border-rose-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" value="0.00" readonly required>
                        </div>
                    </div>
                </div>
            </div>
        `;
        
        // Insert the new item
        const tempDiv = document.createElement('div');
        tempDiv.innerHTML = itemHtml.trim();
        const newItem = tempDiv.firstElementChild;
        
        // Add the item to the container
        itemsContainer.appendChild(newItem);
        
        // Update calculations
        calculateItemTotal(newItem);
        calculateAllTotals();
    }
    
    function renumberItems() {
        const items = document.querySelectorAll('.invoice-item');
        items.forEach((item, index) => {
            // Update the item number in the heading
            const header = item.querySelector('h4');
            if (header) {
                header.textContent = `Item #${index + 1}`;
            }
            
            // Update the field names with the new index
            const inputs = item.querySelectorAll('input, textarea');
            inputs.forEach(input => {
                const name = input.getAttribute('name');
                if (name) {
                    const newName = name.replace(/items\[\d+\]/, `items[${index}]`);
                    input.setAttribute('name', newName);
                }
            });
        });
    }
    
    function calculateItemTotal(itemElement) {
        const quantityInput = itemElement.querySelector('.quantity');
        const priceInput = itemElement.querySelector('.unit-price');
        const amountInput = itemElement.querySelector('.amount');
        
        const quantity = parseFloat(quantityInput.value) || 0;
        const price = parseFloat(priceInput.value) || 0;
        const amount = quantity * price;
        
        amountInput.value = amount.toFixed(2);
    }
    
    function calculateAllTotals() {
        // Calculate each item's total
        const items = document.querySelectorAll('.invoice-item');
        items.forEach(item => {
            calculateItemTotal(item);
        });
        
        // Calculate invoice subtotal
        let subtotal = 0;
        document.querySelectorAll('.amount').forEach(amountInput => {
            subtotal += parseFloat(amountInput.value) || 0;
        });
        
        // Update subtotal field
        const subtotalInput = document.getElementById('subtotal');
        subtotalInput.value = subtotal.toFixed(2);
        
        // Calculate tax if applicable
        const taxRateInput = document.getElementById('tax_rate');
        const taxAmountInput = document.getElementById('tax_amount');
        const taxRate = parseFloat(taxRateInput.value) || 0;
        const taxAmount = subtotal * (taxRate / 100);
        taxAmountInput.value = taxAmount.toFixed(2);
        
        // Get discount
        const discountInput = document.getElementById('discount');
        const discount = parseFloat(discountInput.value) || 0;
        
        // Calculate total
        const totalInput = document.getElementById('total');
        const total = subtotal + taxAmount - discount;
        totalInput.value = total.toFixed(2);
    }
</script>
@endpush