{{-- resources/views/admin/invoices/create.blade.php --}}
@extends('admin.layouts.admin')
@section('title','New Invoice')
@section('page-title','New Invoice')
@section('admin-content')
<div style="margin-bottom:1rem;"><a href="{{ route('admin.invoices.index') }}" style="font-size:0.8rem;color:#9ca3af;text-decoration:none;">← Back to Invoices</a></div>
<form action="{{ route('admin.invoices.store') }}" method="POST" id="invoice-form">
    @csrf
    <div style="display:grid;grid-template-columns:1fr 300px;gap:1rem;align-items:start;">
        <div class="admin-card" style="display:flex;flex-direction:column;gap:0.85rem;">
            <h2 style="font-family:'Fraunces',serif;font-size:0.95rem;font-weight:700;padding-bottom:0.75rem;border-bottom:1px solid #f3f4f6;">Invoice Details</h2>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:0.75rem;">
                <div>
                    <label class="form-label">Client <span style="color:#dc2626;">*</span></label>
                    <select name="client_id" class="form-field" required>
                        <option value="" disabled selected>Select client…</option>
                        @foreach($clients as $c)
                        <option value="{{ $c->id }}" {{ request('client_id') == $c->id ? 'selected' : '' }}>{{ $c->display_name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="form-label">Currency</label>
                    <select name="currency" class="form-field">
                        <option value="NGN" selected>NGN (₦)</option>
                        <option value="USD">USD ($)</option>
                        <option value="GBP">GBP (£)</option>
                        <option value="EUR">EUR (€)</option>
                    </select>
                </div>
            </div>
            <div>
                <label class="form-label">Invoice Title <span style="color:#dc2626;">*</span></label>
                <input type="text" name="title" placeholder="e.g. Web Development — Phase 1" class="form-field" required>
            </div>
            <div>
                <label class="form-label">Notes</label>
                <textarea name="notes" rows="3" class="form-field" placeholder="Payment terms, bank details, or any other notes…"></textarea>
            </div>

            {{-- Line items --}}
            <div>
                <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:0.75rem;">
                    <label class="form-label" style="margin:0;">Line Items <span style="color:#dc2626;">*</span></label>
                    <button type="button" id="add-item" class="btn btn-outline btn-sm">+ Add Item</button>
                </div>
                <div id="items-container">
                    <div class="invoice-item" style="display:grid;grid-template-columns:1fr 80px 120px auto;gap:0.5rem;margin-bottom:0.5rem;align-items:center;">
                        <input type="text" name="items[0][description]" placeholder="Description…" class="form-field" required>
                        <input type="number" name="items[0][quantity]" value="1" min="0.01" step="0.01" class="form-field item-qty" style="text-align:center;" required>
                        <input type="number" name="items[0][unit_price]" placeholder="0.00" min="0" step="0.01" class="form-field item-price" required>
                        <button type="button" class="btn btn-danger btn-sm remove-item" style="padding:0.35rem 0.5rem;">×</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="admin-card" style="display:flex;flex-direction:column;gap:0.75rem;">
            <h2 style="font-family:'Fraunces',serif;font-size:0.95rem;font-weight:700;padding-bottom:0.75rem;border-bottom:1px solid #f3f4f6;">Settings</h2>
            <div>
                <label class="form-label">VAT Rate (%)</label>
                <input type="number" name="tax_rate" value="7.5" min="0" max="100" step="0.01" class="form-field">
            </div>
            <div>
                <label class="form-label">Due Date</label>
                <input type="date" name="due_date" class="form-field" min="{{ today()->format('Y-m-d') }}">
            </div>
            <div style="padding:0.85rem;background:#f8f8fa;border-radius:8px;font-size:0.8rem;">
                <div style="display:flex;justify-content:space-between;margin-bottom:0.35rem;"><span style="color:#9ca3af;">Subtotal</span><span id="preview-subtotal" style="font-weight:600;">₦0.00</span></div>
                <div style="display:flex;justify-content:space-between;margin-bottom:0.35rem;"><span style="color:#9ca3af;">VAT</span><span id="preview-tax" style="font-weight:600;">₦0.00</span></div>
                <div style="display:flex;justify-content:space-between;padding-top:0.5rem;border-top:1px solid #e5e7eb;"><span style="font-weight:700;">Total</span><span id="preview-total" style="font-family:'Fraunces',serif;font-size:1rem;font-weight:700;color:#2d3aff;">₦0.00</span></div>
            </div>
            <button type="submit" class="btn btn-primary" style="justify-content:center;">Create Invoice</button>
        </div>
    </div>
</form>

@push('admin-scripts')
<script>
let itemCount = 1;

document.getElementById('add-item').addEventListener('click', function() {
    const container = document.getElementById('items-container');
    const div = document.createElement('div');
    div.className = 'invoice-item';
    div.style = 'display:grid;grid-template-columns:1fr 80px 120px auto;gap:0.5rem;margin-bottom:0.5rem;align-items:center;';
    div.innerHTML = `
        <input type="text" name="items[${itemCount}][description]" placeholder="Description…" class="form-field" required>
        <input type="number" name="items[${itemCount}][quantity]" value="1" min="0.01" step="0.01" class="form-field item-qty" style="text-align:center;" required>
        <input type="number" name="items[${itemCount}][unit_price]" placeholder="0.00" min="0" step="0.01" class="form-field item-price" required>
        <button type="button" class="btn btn-danger btn-sm remove-item" style="padding:0.35rem 0.5rem;">×</button>
    `;
    container.appendChild(div);
    itemCount++;
    attachListeners();
    updateTotals();
});

function attachListeners() {
    document.querySelectorAll('.remove-item').forEach(btn => {
        btn.onclick = function() {
            if (document.querySelectorAll('.invoice-item').length > 1) {
                this.closest('.invoice-item').remove();
                updateTotals();
            }
        };
    });
    document.querySelectorAll('.item-qty, .item-price').forEach(inp => {
        inp.oninput = updateTotals;
    });
}

function updateTotals() {
    let subtotal = 0;
    document.querySelectorAll('.invoice-item').forEach(row => {
        const qty   = parseFloat(row.querySelector('.item-qty')?.value || 0);
        const price = parseFloat(row.querySelector('.item-price')?.value || 0);
        subtotal += qty * price;
    });
    const taxRate = parseFloat(document.querySelector('[name="tax_rate"]')?.value || 0);
    const tax     = subtotal * (taxRate / 100);
    const total   = subtotal + tax;
    document.getElementById('preview-subtotal').textContent = '₦' + subtotal.toFixed(2);
    document.getElementById('preview-tax').textContent      = '₦' + tax.toFixed(2);
    document.getElementById('preview-total').textContent    = '₦' + total.toFixed(2);
}

document.querySelector('[name="tax_rate"]')?.addEventListener('input', updateTotals);
attachListeners();
</script>
@endpush

@endsection