@extends('layouts.app')

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

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header bg-success text-white">
                    <div class="card-title mb-0">
                        <i class="fas fa-file-invoice me-2"></i>
                        Create Invoice
                    </div>
                </div>
                <div class="card-body">
                    <form action="{{ route('accounts.invoices.store') }}" method="POST">
                        @csrf

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="invoice_number" class="form-label text-success fw-bold">Invoice Number</label>
                                    <input type="text" class="form-control border-success" id="invoice_number" name="invoice_number" readonly placeholder="INV-YYYYMMDD-XXX">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="invoice_date" class="form-label text-success fw-bold">Invoice Date</label>
                                    <input type="date" class="form-control border-success" id="invoice_date" name="invoice_date" required>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="customer_id" class="form-label text-success fw-bold">Customer</label>
                                    <select class="form-select border-success" id="customer_id" name="customer_id" required>
                                        <option value="">Select Customer</option>
                                        @foreach($customers as $customer)
                                            <option value="{{ $customer->id }}"
                                                data-name="{{ $customer->first_name }} {{ $customer->last_name }}"
                                                data-email="{{ $customer->email }}"
                                                data-phone="{{ $customer->phone }}"
                                                data-address="{{ $customer->address }}">
                                                {{ $customer->client_number }} - {{ $customer->first_name }} {{ $customer->last_name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="due_date" class="form-label text-success fw-bold">Due Date</label>
                                    <input type="date" class="form-control border-success" id="due_date" name="due_date">
                                </div>
                            </div>
                        </div>

                        <!-- Customer Information Display -->
                        <div id="customerInfo" class="card mt-3" style="display: none;">
                            <div class="card-header bg-info text-white">
                                <h6 class="mb-0"><i class="fas fa-user me-2"></i>Customer Information</h6>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <p class="mb-1"><strong><i class="fas fa-user me-1"></i>Name:</strong> <span id="customerName"></span></p>
                                        <p class="mb-1"><strong><i class="fas fa-envelope me-1"></i>Email:</strong> <span id="customerEmail"></span></p>
                                    </div>
                                    <div class="col-md-6">
                                        <p class="mb-1"><strong><i class="fas fa-phone me-1"></i>Phone:</strong> <span id="customerPhone"></span></p>
                                        <p class="mb-1"><strong><i class="fas fa-map-marker-alt me-1"></i>Address:</strong> <span id="customerAddress"></span></p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Invoice Items Section -->
                        <div class="card mt-4">
                            <div class="card-header bg-light">
                                <h5 class="mb-0">Invoice Items</h5>
                            </div>
                            <div class="card-body">
                                <!-- Module and Account Selection moved inside invoice items -->
                                <div class="row mb-4">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="module" class="form-label text-success fw-bold">Module</label>
                                            <select class="form-select border-success" id="module" name="module">
                                                <option value="">Select Module</option>
                                                @foreach($modules as $module)
                                                    <option value="{{ $module }}">{{ strtoupper($module) }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="account_id" class="form-label text-success fw-bold">Account</label>
                                            <select class="form-select border-success" id="account_id" name="account_id">
                                                <option value="">Select Account</option>
                                                @foreach($accounts as $account)
                                                    <option value="{{ $account->id }}">{{ $account->account_code }} - {{ $account->account_name }}</option>
                                                @endforeach
                                            </select>
                                            <div id="account-error" class="mt-2"></div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Item Selection -->
                                <div class="row mb-4">
                                    <div class="col-md-12">
                                        <label for="item_id" class="form-label text-success fw-bold">Select Item</label>
                                        <select class="form-select border-success" id="item_id" name="item_id">
                                            <option value="">Select Item</option>
                                            @foreach($items as $item)
                                                <option value="{{ $item->id }}"
                                                    data-description="{{ $item->item_description }}"
                                                    data-price="{{ $item->price }}"
                                                    data-tax-type="{{ $item->tax_type }}"
                                                    data-tax-rate="{{ $item->tax_rate }}">
                                                    {{ $item->item_code }} - {{ $item->item_description }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <!-- Invoice Items Table -->
                                <div id="invoice-items">
                                    <div class="invoice-item row mb-3">
                                        <div class="col-md-3">
                                            <label class="form-label">Item Description</label>
                                            <input type="text" class="form-control item-description" name="items[0][item_description]" readonly required>
                                        </div>
                                        <div class="col-md-2">
                                            <label class="form-label">Description</label>
                                            <input type="text" class="form-control description" name="items[0][description]" placeholder="Additional description">
                                        </div>
                                        <div class="col-md-1">
                                            <label class="form-label">Quantity</label>
                                            <input type="number" class="form-control quantity" name="items[0][quantity]" step="0.01" min="0" value="1">
                                        </div>
                                        <div class="col-md-1">
                                            <label class="form-label">Price</label>
                                            <input type="number" class="form-control price" name="items[0][price]" step="0.01" min="0" value="0" readonly>
                                        </div>
                                        <div class="col-md-1">
                                            <label class="form-label">Tax Type</label>
                                            <input type="text" class="form-control tax-type" name="items[0][tax_type]" readonly>
                                        </div>
                                        <div class="col-md-1">
                                            <label class="form-label">Tax Rate %</label>
                                            <input type="number" class="form-control tax-rate" name="items[0][tax_rate]" step="0.01" min="0" max="100" readonly>
                                        </div>
                                        <div class="col-md-1">
                                            <label class="form-label">Discount %</label>
                                            <input type="number" class="form-control discount" name="items[0][discount]" step="0.01" min="0" max="100" value="0">
                                        </div>
                                        <div class="col-md-1">
                                            <label class="form-label">Line Total</label>
                                            <input type="number" class="form-control line-total" name="items[0][line_total]" readonly>
                                        </div>
                                        <div class="col-md-1 d-flex align-items-end">
                                            <button type="button" class="btn btn-danger btn-sm remove-item">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <button type="button" class="btn btn-success btn-sm" id="add-item">
                                    <i class="fas fa-plus me-1"></i>Add Item
                                </button>
                            </div>
                        </div>

                        <!-- Totals Section -->
                        <div class="row mt-4">
                            <div class="col-md-6 offset-md-6">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-6">Subtotal:</div>
                                            <div class="col-6 text-end" id="subtotal">$0.00</div>
                                        </div>
                                        <div class="row">
                                            <div class="col-6">Tax Amount:</div>
                                            <div class="col-6 text-end" id="tax-amount">$0.00</div>
                                        </div>
                                        <div class="row fw-bold">
                                            <div class="col-6">Inclusive Total:</div>
                                            <div class="col-6 text-end" id="inclusive-total">$0.00</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row mt-4">
                            <div class="col-12">
                                <button type="submit" class="btn btn-success me-2">
                                    <i class="fas fa-save me-1"></i>Save Invoice
                                </button>
                                <a href="{{ route('accounts.index') }}" class="btn btn-secondary">
                                    <i class="fas fa-times me-1"></i>Cancel
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Generate invoice number on page load
    generateInvoiceNumber();

    // Regenerate invoice number when date changes
    document.getElementById('invoice_date').addEventListener('change', generateInvoiceNumber);

    let itemIndex = 1;
    const itemSelect = document.getElementById('item_id');

    // When item is selected, populate the first row
    itemSelect.addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];
        if (selectedOption.value) {
            const firstItemRow = document.querySelector('.invoice-item');
            populateItemRow(firstItemRow, selectedOption);
            calculateLineTotal(firstItemRow);
            calculateTotals();
        }
    });

    // Add new item
    document.getElementById('add-item').addEventListener('click', function() {
        const itemsContainer = document.getElementById('invoice-items');
        const newItem = document.querySelector('.invoice-item').cloneNode(true);

        // Update input names
        const inputs = newItem.querySelectorAll('input, select');
        inputs.forEach(input => {
            const name = input.getAttribute('name');
            if (name) {
                input.setAttribute('name', name.replace('[0]', '[' + itemIndex + ']'));
                if (input.classList.contains('quantity')) {
                    input.value = '1';
                } else if (input.classList.contains('discount')) {
                    input.value = '0';
                } else if (!input.classList.contains('item-description') &&
                           !input.classList.contains('price') &&
                           !input.classList.contains('tax-type') &&
                           !input.classList.contains('tax-rate') &&
                           !input.classList.contains('line-total')) {
                    input.value = '';
                }
            }
        });

        // Clear readonly fields for new row
        newItem.querySelector('.item-description').value = '';
        newItem.querySelector('.price').value = '0';
        newItem.querySelector('.tax-type').value = '';
        newItem.querySelector('.tax-rate').value = '0';
        newItem.querySelector('.line-total').value = '';

        itemsContainer.appendChild(newItem);
        itemIndex++;
    });

    // Remove item
    document.addEventListener('click', function(e) {
        if (e.target.classList.contains('remove-item') || e.target.parentElement.classList.contains('remove-item')) {
            const items = document.querySelectorAll('.invoice-item');
            if (items.length > 1) {
                e.target.closest('.invoice-item').remove();
                calculateTotals();
            }
        }
    });

    // Calculate line total when inputs change
    document.addEventListener('input', function(e) {
        if (e.target.closest('.invoice-item')) {
            calculateLineTotal(e.target.closest('.invoice-item'));
            calculateTotals();
        }
    });

    // Also calculate when tax type changes (if editable)
    document.addEventListener('change', function(e) {
        if (e.target.classList.contains('tax-type') && e.target.closest('.invoice-item')) {
            calculateLineTotal(e.target.closest('.invoice-item'));
            calculateTotals();
        }
    });

    function populateItemRow(itemRow, selectedOption) {
        const description = selectedOption.getAttribute('data-description');
        const price = selectedOption.getAttribute('data-price');
        const taxType = selectedOption.getAttribute('data-tax-type');
        const taxRate = selectedOption.getAttribute('data-tax-rate');

        itemRow.querySelector('.item-description').value = description;
        itemRow.querySelector('.price').value = price;
        itemRow.querySelector('.tax-type').value = taxType;
        itemRow.querySelector('.tax-rate').value = taxRate;
    }

    function calculateLineTotal(itemRow) {
        const quantity = parseFloat(itemRow.querySelector('.quantity').value) || 0;
        const price = parseFloat(itemRow.querySelector('.price').value) || 0;
        const taxRate = parseFloat(itemRow.querySelector('.tax-rate').value) || 0;
        const discount = parseFloat(itemRow.querySelector('.discount').value) || 0;
        const taxType = itemRow.querySelector('.tax-type').value;

        let subtotal = quantity * price;

        // Apply discount
        const discountAmount = subtotal * (discount / 100);
        subtotal -= discountAmount;

        let taxAmount = 0;
        let lineTotal = 0;

        if (taxType === 'inclusive') {
            // Price includes tax
            const taxDivisor = 1 + (taxRate / 100);
            const exclusiveAmount = subtotal / taxDivisor;
            taxAmount = subtotal - exclusiveAmount;
            lineTotal = subtotal;
        } else if (taxType === 'exclusive') {
            // Price excludes tax
            taxAmount = subtotal * (taxRate / 100);
            lineTotal = subtotal + taxAmount;
        } else {
            // Tax exempt
            lineTotal = subtotal;
        }

        itemRow.querySelector('.line-total').value = lineTotal.toFixed(2);
    }

    function calculateTotals() {
        let subtotal = 0;
        let totalTax = 0;
        let inclusiveTotal = 0;

        document.querySelectorAll('.invoice-item').forEach(itemRow => {
            const lineTotal = parseFloat(itemRow.querySelector('.line-total').value) || 0;
            const quantity = parseFloat(itemRow.querySelector('.quantity').value) || 0;
            const price = parseFloat(itemRow.querySelector('.price').value) || 0;
            const taxRate = parseFloat(itemRow.querySelector('.tax-rate').value) || 0;
            const discount = parseFloat(itemRow.querySelector('.discount').value) || 0;
            const taxType = itemRow.querySelector('.tax-type').value;

            let lineSubtotal = quantity * price;
            const discountAmount = lineSubtotal * (discount / 100);
            lineSubtotal -= discountAmount;

            let lineTax = 0;
            if (taxType === 'inclusive') {
                const taxDivisor = 1 + (taxRate / 100);
                const exclusiveAmount = lineSubtotal / taxDivisor;
                lineTax = lineSubtotal - exclusiveAmount;
            } else if (taxType === 'exclusive') {
                lineTax = lineSubtotal * (taxRate / 100);
            }

            subtotal += lineSubtotal;
            totalTax += lineTax;
            inclusiveTotal += lineTotal;
        });

        document.getElementById('subtotal').textContent = '$' + subtotal.toFixed(2);
        document.getElementById('tax-amount').textContent = '$' + totalTax.toFixed(2);
        document.getElementById('inclusive-total').textContent = '$' + inclusiveTotal.toFixed(2);
    }

    function generateInvoiceNumber() {
        const dateInput = document.getElementById('invoice_date');
        const numberInput = document.getElementById('invoice_number');

        // Get the next sequence number from the server
        fetch('{{ route("accounts.invoices.getNextNumber") }}', {
            method: 'GET',
            headers: {
                'Accept': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.invoice_number) {
                numberInput.value = data.invoice_number;
            } else {
                // Fallback: generate INV000001 format
                numberInput.value = 'INV000001';
            }
        })
        .catch(error => {
            console.error('Error generating invoice number:', error);
            // Fallback to INV000001 format
            numberInput.value = 'INV000001';
        });
    }

    // Module and account handling
    const moduleSelect = document.getElementById('module');
    const accountSelect = document.getElementById('account_id');

    if (moduleSelect) {
        moduleSelect.addEventListener('change', function() {
            const module = this.value;
            if (module) {
                // Filter accounts based on selected module
                filterAccountsByModule(module);
            }
        });
    }

    function filterAccountsByModule(module) {
        const accountErrorDiv = document.getElementById('account-error');
        if (accountErrorDiv) accountErrorDiv.innerHTML = '';

        // Disable select until loaded and show loading state
        accountSelect.disabled = true;
        accountSelect.innerHTML = '<option value="">Loading...</option>';

        // Make AJAX call to get accounts for the selected module (module passed as lowercase)
        fetch(`{{ route('accounts.invoices.invoiceAccounts') }}?module=${module.toLowerCase()}`, {
            method: 'GET',
            headers: {
                'Accept': 'application/json'
            },
            credentials: 'same-origin'
        })
        .then(response => {
            if (!response.ok) throw new Error('Failed to load accounts (status ' + response.status + ')');
            return response.json();
        })
        .then(data => {
            // Accept either an array (legacy) or an object with `data` or `error` fields
            let accountsData = [];
            if (Array.isArray(data)) {
                accountsData = data;
            } else if (data && Array.isArray(data.data)) {
                accountsData = data.data;
            } else if (data && data.error) {
                throw new Error(data.message || data.error || 'Unknown error from server');
            } else {
                throw new Error('Invalid response format');
            }

            accountSelect.innerHTML = '<option value="">Select Account</option>';
            accountSelect.disabled = false;

            accountsData.forEach(account => {
                const option = document.createElement('option');
                option.value = account.id;
                option.textContent = account.text;
                accountSelect.appendChild(option);
            });

            if (accountErrorDiv) accountErrorDiv.innerHTML = '';
        })
        .catch(error => {
            console.error('Error loading accounts:', error);
            accountSelect.innerHTML = '<option value="">Select Account</option>';
            accountSelect.disabled = true;

            if (accountErrorDiv) {
                accountErrorDiv.innerHTML = `
                    <div class="alert alert-warning small d-flex justify-content-between align-items-center" role="alert">
                        <div>
                            <strong>Accounts could not be loaded.</strong> ${error.message ? ('(' + error.message + ')') : ''}
                        </div>
                        <div>
                            <button type="button" class="btn btn-sm btn-outline-secondary" id="retry-accounts">Retry</button>
                        </div>
                    </div>
                `;
                const retryBtn = document.getElementById('retry-accounts');
                if (retryBtn) {
                    retryBtn.addEventListener('click', function(e){
                        e.preventDefault();
                        filterAccountsByModule(document.getElementById('module').value || module);
                    });
                }
            }
        });
    }

    // Initialize calculations
    calculateTotals();
});
</script>
@endsection