@extends('layouts.app')
@section('title', isset($invoice) ? 'Edit Invoice '.$invoice->number : 'New Sales Invoice')
@section('content')
<div class="page-header">
    <div>
        <div class="page-title">{{ isset($invoice) ? 'Edit Invoice '.$invoice->number : 'New Sales Invoice' }}</div>
        <div class="page-subtitle">{{ isset($invoice) ? 'Update invoice details' : 'Create a new sales invoice for a customer' }}</div>
    </div>
    <div class="page-actions">
        <a href="{{ route('sales.invoices.index') }}" class="btn btn-secondary"><i class="fas fa-arrow-left"></i> Back</a>
    </div>
</div>

<form method="POST" action="{{ isset($invoice) ? route('sales.invoices.update', $invoice) : route('sales.invoices.store') }}" id="invoice-form">
    @csrf
    @if(isset($invoice)) @method('PUT') @endif

    <div class="grid-2 mb-4">
        <!-- LEFT: Customer & Dates -->
        <div class="card">
            <div class="card-header"><span class="card-title">Invoice Details</span></div>
            <div class="card-body">
                <div class="form-group">
                    <label class="form-label">Customer <span class="required">*</span></label>
                    <select name="customer_id" class="form-control" required id="customer-select">
                        <option value="">Select Customer...</option>
                        @foreach($customers as $c)
                            <option value="{{ $c->id }}" {{ (old('customer_id', $invoice->customer_id ?? '') == $c->id) ? 'selected' : '' }}
                                data-credit="{{ $c->credit_days }}">
                                {{ $c->name }} {{ $c->phone ? '('.$c->phone.')' : '' }}
                            </option>
                        @endforeach
                    </select>
                    @error('customer_id')<span class="form-error">{{ $message }}</span>@enderror
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">Invoice Date <span class="required">*</span></label>
                        <input type="date" name="date" class="form-control" required
                            value="{{ old('date', isset($invoice) ? $invoice->date->format('Y-m-d') : date('Y-m-d')) }}"
                            id="invoice-date">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Due Date</label>
                        <input type="date" name="due_date" class="form-control" id="due-date"
                            value="{{ old('due_date', isset($invoice) && $invoice->due_date ? $invoice->due_date->format('Y-m-d') : '') }}">
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label">Income Account</label>
                    <select name="income_account_id" class="form-control">
                        <option value="">Select Account...</option>
                        @foreach($incomeAccounts as $acc)
                            <option value="{{ $acc->id }}" {{ old('income_account_id', $invoice->income_account_id ?? '') == $acc->id ? 'selected' : '' }}>
                                {{ $acc->code }} - {{ $acc->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>

        <!-- RIGHT: Notes & Terms -->
        <div class="card">
            <div class="card-header"><span class="card-title">Additional Information</span></div>
            <div class="card-body">
                <div class="form-group">
                    <label class="form-label">Terms & Conditions</label>
                    <textarea name="terms" class="form-control" rows="4" placeholder="Payment terms, conditions...">{{ old('terms', $invoice->terms ?? '') }}</textarea>
                </div>
                <div class="form-group">
                    <label class="form-label">Internal Notes</label>
                    <textarea name="notes" class="form-control" rows="4" placeholder="Internal notes (not shown on invoice)...">{{ old('notes', $invoice->notes ?? '') }}</textarea>
                </div>
            </div>
        </div>
    </div>

    <!-- LINE ITEMS -->
    <div class="card mb-4">
        <div class="card-header">
            <span class="card-title">Line Items</span>
            <button type="button" class="btn btn-sm btn-primary" onclick="addLine()"><i class="fas fa-plus"></i> Add Item</button>
        </div>
        <div class="table-wrapper">
            <table class="line-items-table" id="items-table">
                <thead>
                    <tr>
                        <th style="width:30%;">Item</th>
                        <th style="width:20%;">Description</th>
                        <th style="width:8%;">Qty</th>
                        <th style="width:7%;">Unit</th>
                        <th style="width:12%;">Rate</th>
                        <th style="width:8%;">Disc%</th>
                        <th style="width:8%;">Tax%</th>
                        <th style="width:10%;text-align:right;">Amount</th>
                        <th style="width:4%;"></th>
                    </tr>
                </thead>
                <tbody id="items-body">
                    @php $existingItems = isset($invoice) ? $invoice->items : collect(); @endphp
                    @if($existingItems->isNotEmpty())
                        @foreach($existingItems as $i => $line)
                        <tr class="item-row">
                            <td>
                                <select name="items[{{ $i }}][item_id]" class="form-control item-select" required onchange="fillItemData(this)">
                                    <option value="">Select item...</option>
                                    @foreach($items as $item)
                                        <option value="{{ $item->id }}" data-rate="{{ $item->standard_rate }}" data-tax="{{ $item->tax_rate }}" data-unit="{{ $item->unit }}"
                                            {{ $line->item_id == $item->id ? 'selected' : '' }}>
                                            {{ $item->code }} - {{ $item->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </td>
                            <td><input type="text" name="items[{{ $i }}][description]" class="form-control" value="{{ $line->description }}" placeholder="Description..."></td>
                            <td><input type="number" name="items[{{ $i }}][qty]" class="form-control qty" step="0.01" min="0.01" value="{{ $line->qty }}" onchange="calcLine(this)" required></td>
                            <td><input type="text" name="items[{{ $i }}][unit]" class="form-control" value="{{ $line->unit }}" style="width:60px;"></td>
                            <td><input type="number" name="items[{{ $i }}][rate]" class="form-control rate" step="0.01" min="0" value="{{ $line->rate }}" onchange="calcLine(this)" required></td>
                            <td><input type="number" name="items[{{ $i }}][discount_percent]" class="form-control disc" step="0.01" min="0" max="100" value="{{ $line->discount_percent }}" onchange="calcLine(this)"></td>
                            <td><input type="number" name="items[{{ $i }}][tax_rate]" class="form-control tax" step="0.01" min="0" value="{{ $line->tax_rate }}" onchange="calcLine(this)"></td>
                            <td><input type="text" class="form-control amount-display" style="text-align:right;font-weight:600;background:#f8fafc;" readonly value="{{ number_format($line->amount, 2) }}"></td>
                            <td><button type="button" class="btn btn-xs btn-danger" onclick="removeLine(this)"><i class="fas fa-times"></i></button></td>
                        </tr>
                        @endforeach
                    @else
                    <tr class="item-row">
                        <td>
                            <select name="items[0][item_id]" class="form-control item-select" required onchange="fillItemData(this)">
                                <option value="">Select item...</option>
                                @foreach($items as $item)
                                    <option value="{{ $item->id }}" data-rate="{{ $item->standard_rate }}" data-tax="{{ $item->tax_rate }}" data-unit="{{ $item->unit }}">
                                        {{ $item->code }} - {{ $item->name }}
                                    </option>
                                @endforeach
                            </select>
                        </td>
                        <td><input type="text" name="items[0][description]" class="form-control" placeholder="Description..."></td>
                        <td><input type="number" name="items[0][qty]" class="form-control qty" step="0.01" min="0.01" value="1" onchange="calcLine(this)" required></td>
                        <td><input type="text" name="items[0][unit]" class="form-control" value="pcs" style="width:60px;"></td>
                        <td><input type="number" name="items[0][rate]" class="form-control rate" step="0.01" min="0" value="0" onchange="calcLine(this)" required></td>
                        <td><input type="number" name="items[0][discount_percent]" class="form-control disc" step="0.01" min="0" max="100" value="0" onchange="calcLine(this)"></td>
                        <td><input type="number" name="items[0][tax_rate]" class="form-control tax" step="0.01" min="0" value="0" onchange="calcLine(this)"></td>
                        <td><input type="text" class="form-control amount-display" style="text-align:right;font-weight:600;background:#f8fafc;" readonly value="0.00"></td>
                        <td><button type="button" class="btn btn-xs btn-danger" onclick="removeLine(this)"><i class="fas fa-times"></i></button></td>
                    </tr>
                    @endif
                </tbody>
            </table>
        </div>

        <!-- TOTALS -->
        <div style="display:flex;justify-content:flex-end;padding:16px 20px;border-top:1px solid var(--border);">
            <div style="width:280px;">
                <div style="display:flex;justify-content:space-between;padding:6px 0;font-size:13px;">
                    <span style="color:var(--text-muted);">Subtotal</span>
                    <span id="total-subtotal" style="font-weight:500;">৳0.00</span>
                </div>
                <div style="display:flex;justify-content:space-between;padding:6px 0;font-size:13px;">
                    <span style="color:var(--text-muted);">Discount</span>
                    <span id="total-discount" style="color:var(--success);">-৳0.00</span>
                </div>
                <div style="display:flex;justify-content:space-between;padding:6px 0;font-size:13px;">
                    <span style="color:var(--text-muted);">Tax</span>
                    <span id="total-tax">৳0.00</span>
                </div>
                <div style="display:flex;justify-content:space-between;padding:10px 0;font-size:16px;font-weight:700;border-top:2px solid var(--border);margin-top:4px;">
                    <span>Total</span>
                    <span id="total-amount" style="color:var(--primary);">৳0.00</span>
                </div>
            </div>
        </div>
    </div>

    <!-- ACTIONS -->
    <div style="display:flex;justify-content:flex-end;gap:12px;">
        <a href="{{ route('sales.invoices.index') }}" class="btn btn-secondary">Cancel</a>
        <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> Save Invoice</button>
    </div>
</form>

@push('scripts')
<script>
// Items data for JS
const itemsData = {
    @foreach($items as $item)
    {{ $item->id }}: { rate: {{ $item->standard_rate }}, tax: {{ $item->tax_rate }}, unit: '{{ $item->unit }}', name: '{{ addslashes($item->name) }}' },
    @endforeach
};

let rowIndex = {{ isset($invoice) ? $invoice->items->count() : 1 }};

function addLine() {
    const tbody = document.getElementById('items-body');
    const row = document.createElement('tr');
    row.className = 'item-row';
    row.innerHTML = `
        <td>
            <select name="items[${rowIndex}][item_id]" class="form-control item-select" required onchange="fillItemData(this)">
                <option value="">Select item...</option>
                @foreach($items as $item)
                <option value="{{ $item->id }}" data-rate="{{ $item->standard_rate }}" data-tax="{{ $item->tax_rate }}" data-unit="{{ $item->unit }}">{{ $item->code }} - {{ addslashes($item->name) }}</option>
                @endforeach
            </select>
        </td>
        <td><input type="text" name="items[${rowIndex}][description]" class="form-control" placeholder="Description..."></td>
        <td><input type="number" name="items[${rowIndex}][qty]" class="form-control qty" step="0.01" min="0.01" value="1" onchange="calcLine(this)" required></td>
        <td><input type="text" name="items[${rowIndex}][unit]" class="form-control" value="pcs" style="width:60px;"></td>
        <td><input type="number" name="items[${rowIndex}][rate]" class="form-control rate" step="0.01" min="0" value="0" onchange="calcLine(this)" required></td>
        <td><input type="number" name="items[${rowIndex}][discount_percent]" class="form-control disc" step="0.01" min="0" max="100" value="0" onchange="calcLine(this)"></td>
        <td><input type="number" name="items[${rowIndex}][tax_rate]" class="form-control tax" step="0.01" min="0" value="0" onchange="calcLine(this)"></td>
        <td><input type="text" class="form-control amount-display" style="text-align:right;font-weight:600;background:#f8fafc;" readonly value="0.00"></td>
        <td><button type="button" class="btn btn-xs btn-danger" onclick="removeLine(this)"><i class="fas fa-times"></i></button></td>
    `;
    tbody.appendChild(row);
    rowIndex++;
    calcTotals();
}

function removeLine(btn) {
    const rows = document.querySelectorAll('.item-row');
    if (rows.length > 1) { btn.closest('tr').remove(); calcTotals(); }
}

function fillItemData(sel) {
    const id = sel.value;
    const row = sel.closest('tr');
    if (id && itemsData[id]) {
        row.querySelector('.rate').value = itemsData[id].rate;
        row.querySelector('.tax').value = itemsData[id].tax;
        row.querySelector('input[name*="[unit]"]').value = itemsData[id].unit;
        calcLine(sel);
    }
}

function calcLine(el) {
    const row = el.closest('tr');
    const qty  = parseFloat(row.querySelector('.qty').value) || 0;
    const rate = parseFloat(row.querySelector('.rate').value) || 0;
    const disc = parseFloat(row.querySelector('.disc').value) || 0;
    const tax  = parseFloat(row.querySelector('.tax').value) || 0;
    const base = qty * rate;
    const discAmt = base * disc / 100;
    const taxable = base - discAmt;
    const taxAmt  = taxable * tax / 100;
    const total   = taxable + taxAmt;
    row.querySelector('.amount-display').value = total.toFixed(2);
    calcTotals();
}

function calcTotals() {
    let subtotal = 0, discount = 0, taxAmount = 0;
    document.querySelectorAll('.item-row').forEach(row => {
        const qty  = parseFloat(row.querySelector('.qty')?.value) || 0;
        const rate = parseFloat(row.querySelector('.rate')?.value) || 0;
        const disc = parseFloat(row.querySelector('.disc')?.value) || 0;
        const tax  = parseFloat(row.querySelector('.tax')?.value) || 0;
        const base = qty * rate;
        const d    = base * disc / 100;
        const t    = (base - d) * tax / 100;
        subtotal += base; discount += d; taxAmount += t;
    });
    const total = subtotal - discount + taxAmount;
    document.getElementById('total-subtotal').textContent = '৳' + subtotal.toFixed(2);
    document.getElementById('total-discount').textContent = '-৳' + discount.toFixed(2);
    document.getElementById('total-tax').textContent = '৳' + taxAmount.toFixed(2);
    document.getElementById('total-amount').textContent = '৳' + total.toFixed(2);
}

// Auto-set due date from customer credit days
document.getElementById('customer-select')?.addEventListener('change', function() {
    const opt = this.options[this.selectedIndex];
    const days = parseInt(opt.dataset.credit) || 30;
    const invDate = document.getElementById('invoice-date').value;
    if (invDate) {
        const due = new Date(invDate);
        due.setDate(due.getDate() + days);
        document.getElementById('due-date').value = due.toISOString().split('T')[0];
    }
});

// Init totals
calcTotals();
</script>
@endpush
@endsection