@extends('layouts.app')

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

@section('content')
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="{{ route('invoices.index') }}">Invoices</a></li>
    <li class="breadcrumb-item active" aria-current="page">New Invoice</li>
  </ol>
</nav>

<div class="card stat-card border-0">
    <div class="card-body p-4">
        <form action="{{ route('invoices.store') }}" method="POST" id="invoice-form">
            @csrf
            
            <div class="row mb-5">
                <div class="col-md-4">
                    <label for="customer_id" class="form-label text-muted small fw-bold">Customer *</label>
                    <select name="customer_id" id="customer_id" class="form-select @error('customer_id') is-invalid @enderror" required>
                        <option value="">Select a customer</option>
                        @foreach($customers as $customer)
                            <option value="{{ $customer->id }}" {{ old('customer_id') == $customer->id ? 'selected' : '' }}>{{ $customer->name }}</option>
                        @endforeach
                    </select>
                    @error('customer_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
                <div class="col-md-3">
                    <label for="invoice_number" class="form-label text-muted small fw-bold">Invoice Number *</label>
                    <input type="text" name="invoice_number" id="invoice_number" class="form-control @error('invoice_number') is-invalid @enderror" value="{{ old('invoice_number', $nextInvoiceNumber) }}" required>
                    @error('invoice_number') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
                <div class="col-md-2">
                    <label for="invoice_date" class="form-label text-muted small fw-bold">Invoice Date *</label>
                    <input type="date" name="invoice_date" id="invoice_date" class="form-control @error('invoice_date') is-invalid @enderror" value="{{ old('invoice_date', date('Y-m-d')) }}" required>
                    @error('invoice_date') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
                <div class="col-md-2">
                    <label for="due_date" class="form-label text-muted small fw-bold">Due Date *</label>
                    <input type="date" name="due_date" id="due_date" class="form-control @error('due_date') is-invalid @enderror" value="{{ old('due_date', date('Y-m-d', strtotime('+15 days'))) }}" required>
                    @error('due_date') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
            </div>

            <h5 class="mb-4 text-primary border-bottom pb-2">Item Details</h5>
            <div class="table-responsive">
                <table class="table table-bordered align-middle" id="items-table">
                    <thead class="table-light text-muted small text-uppercase">
                        <tr>
                            <th style="width: 40%;">Item Name</th>
                            <th style="width: 15%;">Quantity</th>
                            <th style="width: 15%;">Rate</th>
                            <th style="width: 20%;">Amount</th>
                            <th style="width: 10%;"></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="item-row">
                            <td>
                                <select name="items[0][item_id]" class="form-select item-selector" required>
                                    <option value="">Select an item</option>
                                    @foreach($items as $item)
                                        <option value="{{ $item->id }}" data-price="{{ $item->sales_price }}" data-description="{{ $item->sales_description }}">{{ $item->name }}</option>
                                    @endforeach
                                </select>
                                <input type="hidden" name="items[0][item_name]" class="item-name-input">
                            </td>
                            <td>
                                <input type="number" name="items[0][quantity]" class="form-control qty-input" step="0.01" min="0.01" value="1" required>
                            </td>
                            <td>
                                <input type="number" name="items[0][rate]" class="form-control rate-input" step="0.01" min="0" value="0.00" required>
                            </td>
                            <td>
                                <input type="text" class="form-control amount-input bg-light" readonly value="0.00">
                            </td>
                            <td class="text-center">
                                <button type="button" class="btn btn-outline-danger btn-sm remove-row"><i class="fas fa-times"></i></button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <button type="button" class="btn btn-outline-primary btn-sm mb-5" id="add-row">
                <i class="fas fa-plus me-1"></i> Add Another Row
            </button>

            <div class="row justify-content-end">
                <div class="col-md-5">
                    <div class="card bg-light border-0">
                        <div class="card-body p-4">
                            <div class="d-flex justify-content-between mb-3 text-muted">
                                <span>Sub Total</span>
                                <span id="sub-total">{{ getCurrencySymbol() }} 0.00</span>
                            </div>
                            <div class="mb-3">
                                <label for="tax_id" class="form-label text-muted small fw-bold">Tax</label>
                                <select name="tax_id_selector" id="tax_id" class="form-select form-select-sm">
                                    <option value="" data-rate="0">No Tax (0%)</option>
                                    <optgroup label="Taxes">
                                        @foreach($taxes as $tax)
                                            <option value="tax_{{ $tax->id }}" data-type="tax" data-id="{{ $tax->id }}" data-rate="{{ $tax->rate }}">{{ $tax->name }} ({{ $tax->rate }}%)</option>
                                        @endforeach
                                    </optgroup>
                                    <optgroup label="Tax Groups">
                                        @foreach($taxGroups as $group)
                                            <option value="group_{{ $group->id }}" data-type="group" data-id="{{ $group->id }}" data-rate="{{ $group->total_rate }}">{{ $group->name }} ({{ $group->total_rate }}%)</option>
                                        @endforeach
                                    </optgroup>
                                </select>
                                <input type="hidden" name="tax_id" id="hidden-tax-id">
                                <input type="hidden" name="tax_group_id" id="hidden-tax-group-id">
                            </div>
                            <div class="d-flex justify-content-between mb-3 align-items-center">
                                <span class="text-muted">Tax Amount</span>
                                <div class="input-group input-group-sm w-50">
                                    <span class="input-group-text">{{ getCurrencySymbol() }}</span>
                                    <input type="number" name="tax_amount" id="tax-amount-input" class="form-control" step="0.01" value="0.00" readonly>
                                </div>
                            </div>
                            <div class="d-flex justify-content-between border-top pt-3 fw-bold h5">
                                <span>Total ({{ getCurrencySymbol() }})</span>
                                <span id="total-amount">0.00</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-4">
                <label for="notes" class="form-label text-muted small fw-bold">Notes</label>
                <textarea name="notes" id="notes" class="form-control" rows="3" placeholder="Thanks for your business."></textarea>
            </div>

            <div class="mt-5 pt-3 border-top">
                <button type="submit" class="btn btn-primary px-5">Save Invoice</button>
                <a href="{{ route('invoices.index') }}" class="btn btn-light px-5 ms-3">Cancel</a>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const currencySymbol = '{{ getCurrencySymbol() }}';
    const tableBody = document.querySelector('#items-table tbody');
    const addRowBtn = document.querySelector('#add-row');
    const subTotalEl = document.querySelector('#sub-total');
    const totalAmountEl = document.querySelector('#total-amount');
    const taxSelect = document.querySelector('#tax_id');
    const taxAmountInput = document.querySelector('#tax-amount-input');
    let rowCount = 1;

    function calculateRowAmount(row) {
        const qty = parseFloat(row.querySelector('.qty-input').value) || 0;
        const rate = parseFloat(row.querySelector('.rate-input').value) || 0;
        const amount = qty * rate;
        row.querySelector('.amount-input').value = amount.toFixed(2);
        calculateFinalTotal();
    }

    function calculateFinalTotal() {
        let subtotal = 0;
        document.querySelectorAll('.amount-input').forEach(input => {
            subtotal += parseFloat(input.value) || 0;
        });

        const selectedTaxOption = taxSelect.options[taxSelect.selectedIndex];
        const taxRate = parseFloat(selectedTaxOption.getAttribute('data-rate')) || 0;
        const taxType = selectedTaxOption.getAttribute('data-type');
        const taxId = selectedTaxOption.getAttribute('data-id');

        // Reset hidden inputs
        document.getElementById('hidden-tax-id').value = '';
        document.getElementById('hidden-tax-group-id').value = '';

        if (taxType === 'tax') {
            document.getElementById('hidden-tax-id').value = taxId;
        } else if (taxType === 'group') {
            document.getElementById('hidden-tax-group-id').value = taxId;
        }

        const taxAmount = (subtotal * taxRate) / 100;
        const total = subtotal + taxAmount;

        taxAmountInput.value = taxAmount.toFixed(2);
        subTotalEl.textContent = currencySymbol + ' ' + subtotal.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
        totalAmountEl.textContent = total.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
    }

    addRowBtn.addEventListener('click', () => {
        const row = document.createElement('tr');
        row.className = 'item-row';
        row.innerHTML = `
            <td>
                <select name="items[${rowCount}][item_id]" class="form-select item-selector" required>
                    <option value="">Select an item</option>
                    @foreach($items as $item)
                        <option value="{{ $item->id }}" data-price="{{ $item->sales_price }}" data-description="{{ $item->sales_description }}">{{ $item->name }}</option>
                    @endforeach
                </select>
                <input type="hidden" name="items[${rowCount}][item_name]" class="item-name-input">
            </td>
            <td><input type="number" name="items[${rowCount}][quantity]" class="form-control qty-input" step="0.01" min="0.01" value="1" required></td>
            <td><input type="number" name="items[${rowCount}][rate]" class="form-control rate-input" step="0.01" min="0" value="0.00" required></td>
            <td><input type="text" class="form-control amount-input bg-light" readonly value="0.00"></td>
            <td class="text-center"><button type="button" class="btn btn-outline-danger btn-sm remove-row"><i class="fas fa-times"></i></button></td>
        `;
        tableBody.appendChild(row);
        rowCount++;
    });

    tableBody.addEventListener('change', (e) => {
        if (e.target.classList.contains('item-selector')) {
            const row = e.target.closest('tr');
            const selectedOption = e.target.options[e.target.selectedIndex];
            const price = selectedOption.getAttribute('data-price') || 0;
            const name = selectedOption.text;
            
            row.querySelector('.rate-input').value = price;
            row.querySelector('.item-name-input').value = name;
            calculateRowAmount(row);
        }
    });

    tableBody.addEventListener('input', (e) => {
        if (e.target.classList.contains('qty-input') || e.target.classList.contains('rate-input')) {
            calculateRowAmount(e.target.closest('tr'));
        }
    });

    tableBody.addEventListener('click', (e) => {
        if (e.target.closest('.remove-row')) {
            if (document.querySelectorAll('.item-row').length > 1) {
                e.target.closest('tr').remove();
                calculateFinalTotal();
            } else {
                alert('At least one item is required.');
            }
        }
    });

    taxSelect.addEventListener('change', calculateFinalTotal);
    
    // Initial calculation
    calculateFinalTotal();
});
</script>
@endpush
@endsection