@extends('layouts.app')

@section('title', 'New Commercial Invoice')

@section('breadcrumbs')
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ route('export.dashboard') }}">Export</a></li>
        <li class="breadcrumb-item"><a href="{{ route('export.commercial-invoices.index') }}">Commercial Invoices</a></li>
        <li class="breadcrumb-item active">Create</li>
    </ol>
</nav>
@endsection

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div><h1 class="h3 mb-1 text-dark fw-semibold">New Commercial Invoice</h1></div>
    <a href="{{ route('export.commercial-invoices.index') }}" class="btn btn-outline-secondary"><i class="bi bi-arrow-left me-1"></i> Back</a>
</div>

<form action="{{ route('export.commercial-invoices.store') }}" method="POST" id="ciForm">
    @csrf
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-header bg-white py-3"><h5 class="mb-0 fw-semibold"><i class="bi bi-info-circle me-2 text-primary"></i>Invoice Details</h5></div>
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-3"><label class="form-label fw-medium">Export Order <span class="text-danger">*</span></label><select name="order_id" class="form-select" required><option value="">Select</option>@foreach($orders as $o)<option value="{{ $o->id }}" {{ request('order_id') == $o->id ? 'selected' : '' }}>{{ $o->order_number }}</option>@endforeach</select></div>
                <div class="col-md-3"><label class="form-label fw-medium">Invoice Date <span class="text-danger">*</span></label><input type="date" name="date" class="form-control" value="{{ date('Y-m-d') }}" required></div>
                <div class="col-md-3"><label class="form-label fw-medium">Buyer <span class="text-danger">*</span></label><select name="buyer_id" class="form-select" required><option value="">Select</option>@foreach($customers as $c)<option value="{{ $c->id }}">{{ $c->name }}</option>@endforeach</select></div>
                <div class="col-md-3"><label class="form-label fw-medium">Currency</label><select name="currency" class="form-select"><option value="USD">USD</option><option value="EUR">EUR</option><option value="GBP">GBP</option><option value="INR">INR</option></select></div>
                <div class="col-md-3"><label class="form-label fw-medium">Payment Terms</label><select name="payment_terms" class="form-select"><option value="TT Advance">TT Advance</option><option value="TT Against Documents">TT Against Documents</option><option value="LC At Sight">LC At Sight</option><option value="DP">DP</option></select></div>
                <div class="col-md-3"><label class="form-label fw-medium">Country of Origin</label><input type="text" name="country_of_origin" class="form-control" value="{{ $settings->default_country ?? 'India' }}"></div>
                <div class="col-md-3"><label class="form-label fw-medium">Port of Loading</label><select name="port_of_loading_id" class="form-select"><option value="">Select</option>@foreach($ports as $p)<option value="{{ $p->id }}">{{ $p->name }}</option>@endforeach</select></div>
                <div class="col-md-3"><label class="form-label fw-medium">Port of Discharge</label><select name="port_of_discharge_id" class="form-select"><option value="">Select</option>@foreach($ports as $p)<option value="{{ $p->id }}">{{ $p->name }}</option>@endforeach</select></div>
            </div>
        </div>
    </div>

    <div class="card border-0 shadow-sm mb-4">
        <div class="card-header bg-white py-3 d-flex justify-content-between">
            <h5 class="mb-0 fw-semibold"><i class="bi bi-list-ul me-2 text-primary"></i>Invoice Items</h5>
            <button type="button" class="btn btn-sm btn-outline-primary" id="addCIItem"><i class="bi bi-plus-lg me-1"></i>Add</button>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="bg-light">
                        <tr><th class="px-3 py-2 fw-semibold text-muted small" style="width:22%">Product</th><th class="px-3 py-2 fw-semibold text-muted small">Description</th><th class="px-3 py-2 fw-semibold text-muted small text-end" style="width:10%">Qty</th><th class="px-3 py-2 fw-semibold text-muted small" style="width:7%">Unit</th><th class="px-3 py-2 fw-semibold text-muted small text-end" style="width:12%">Unit Price</th><th class="px-3 py-2 fw-semibold text-muted small text-end" style="width:12%">Amount</th><th class="px-3 py-2 fw-semibold text-muted small text-center" style="width:5%"></th></tr>
                    </thead>
                    <tbody id="ciItemsBody">
                        <tr class="empty-row" id="ciEmpty"><td colspan="7" class="text-center py-4 text-muted">Add invoice items</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-6">
                    <label class="form-label fw-medium">Bank Details</label>
                    <textarea name="bank_details" class="form-control" rows="4">{{ $settings->default_bank_details ?? '' }}</textarea>
                </div>
                <div class="col-md-6">
                    <label class="form-label fw-medium">Declaration</label>
                    <textarea name="declaration" class="form-control" rows="3">{{ $settings->default_declaration ?? '' }}</textarea>
                    <div class="mt-3 text-end">
                        <table class="table table-sm w-auto ms-auto">
                            <tr><td class="text-muted">Subtotal:</td><td class="text-end fw-medium" id="ciSubtotal">0.00</td></tr>
                            <tr><td class="text-muted">Discount:</td><td><input type="number" step="0.01" name="discount" class="form-control form-control-sm d-inline-block" style="width:80px" value="0"></td></tr>
                            <tr><td class="text-muted">Tax:</td><td><input type="number" step="0.01" name="tax_rate" class="form-control form-control-sm d-inline-block" style="width:80px" value="0"> %</td><td class="text-end fw-medium" id="ciTax">0.00</td></tr>
                            <tr><td class="text-muted fw-bold">Total:</td><td class="text-end fw-bold fs-5" id="ciTotal">0.00</td></tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="d-flex justify-content-end gap-2 mb-5">
        <button type="submit" name="action" value="draft" class="btn btn-outline-secondary px-4">Save Draft</button>
        <button type="submit" name="action" value="approve" class="btn btn-primary px-4"><i class="bi bi-check-lg me-1"></i> Approve & Generate</button>
    </div>
</form>

@push('scripts')
<script>
let ciIdx = 0;
document.getElementById('addCIItem')?.addEventListener('click', function() {
    ciIdx++;
    const empty = document.getElementById('ciEmpty'); if (empty) empty.remove();
    document.getElementById('ciItemsBody').insertAdjacentHTML('beforeend',
        `<tr class="item-row"><td class="px-3"><select name="items[${ciIdx}][product_id]" class="form-select form-select-sm ci-product"><option value="">Select</option>@foreach($products ?? [] as $p)<option value="{{ $p->id }}" data-price="{{ $p->unit_price ?? 0 }}">{{ $p->name }}</option>@endforeach</select></td>
        <td class="px-3"><input type="text" name="items[${ciIdx}][description]" class="form-control form-control-sm"></td>
        <td class="px-3"><input type="number" step="0.01" name="items[${ciIdx}][quantity]" class="form-control form-control-sm text-end ci-qty"></td>
        <td class="px-3"><select name="items[${ciIdx}][unit]" class="form-select form-select-sm">@foreach(['MT','KG','PCS'] as $u)<option value="{{ $u }}">{{ $u }}</option>@endforeach</select></td>
        <td class="px-3"><input type="number" step="0.01" name="items[${ciIdx}][unit_price]" class="form-control form-control-sm text-end ci-price"></td>
        <td class="px-3 text-end fw-medium ci-line-total">0.00</td>
        <td class="px-3 text-center"><button type="button" class="btn btn-sm btn-outline-danger ci-remove"><i class="bi bi-trash"></i></button></td></tr>`
    );
});
document.getElementById('ciItemsBody')?.addEventListener('click', function(e) { if (e.target.closest('.ci-remove')) { e.target.closest('tr').remove(); calcCI(); } });
document.getElementById('ciItemsBody')?.addEventListener('input', function(e) {
    const row = e.target.closest('.item-row');
    if (row && (e.target.classList.contains('ci-qty') || e.target.classList.contains('ci-price'))) {
        row.querySelector('.ci-line-total').textContent = ((parseFloat(row.querySelector('.ci-qty')?.value) || 0) * (parseFloat(row.querySelector('.ci-price')?.value) || 0)).toFixed(2);
        calcCI();
    }
});
document.getElementById('ciItemsBody')?.addEventListener('change', function(e) {
    if (e.target.classList.contains('ci-product')) { const opt = e.target.options[e.target.selectedIndex]; const row = e.target.closest('.item-row'); const pi = row.querySelector('.ci-price'); if (opt.dataset.price) pi.value = opt.dataset.price; pi.dispatchEvent(new Event('input')); }
});
function calcCI() { let s = 0; document.querySelectorAll('.ci-line-total').forEach(el => s += parseFloat(el.textContent) || 0); document.getElementById('ciSubtotal').textContent = s.toFixed(2); const tax = s * (parseFloat(document.querySelector('[name="tax_rate"]')?.value) || 0) / 100; document.getElementById('ciTax').textContent = tax.toFixed(2); document.getElementById('ciTotal').textContent = (s + tax).toFixed(2); }
document.querySelector('[name="tax_rate"]')?.addEventListener('input', calcCI);
</script>
@endpush
@endsection