{{-- resources/views/invoicing/create.blade.php --}}
@extends('layouts.app')
@section('title', 'New Invoice')
@section('page_title', 'New Invoice')
@section('page_subtitle', 'Create a manual invoice')

@section('content')

<div class="row justify-content-center">
<div class="col-xl-8">

<div class="d-flex gap-2 mb-3">
    <a href="{{ tenant_route('invoicing.invoices.index') }}"
       class="btn btn-sm btn-outline-secondary">← Back</a>
</div>

<form method="POST"
      action="{{ tenant_route('invoicing.invoices.store') }}"
      id="invoiceForm">
@csrf

<div class="row g-3">

    {{-- Billing Details --}}
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <span class="card-title">
                    <i class="bi bi-person me-2"
                       style="color:var(--clay)"></i>
                    Billing Details
                </span>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Guest</label>
                        <select name="guest_id" class="form-select">
                            <option value="">Select guest (optional)</option>
                            @foreach($guests as $guest)
                                <option value="{{ $guest->id }}"
                                        {{ old('guest_id') == $guest->id ? 'selected' : '' }}>
                                    {{ $guest->first_name }} {{ $guest->last_name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Company</label>
                        <select name="company_id" class="form-select">
                            <option value="">Select company (optional)</option>
                            @foreach($companies as $company)
                                <option value="{{ $company->id }}"
                                        {{ old('company_id') == $company->id ? 'selected' : '' }}>
                                    {{ $company->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-semibold">
                            Type <span class="text-danger">*</span>
                        </label>
                        <select name="type"
                                class="form-select @error('type') is-invalid @enderror"
                                required>
                            <option value="tax_invoice"
                                    {{ old('type', 'tax_invoice') === 'tax_invoice' ? 'selected' : '' }}>
                                Tax Invoice
                            </option>
                            <option value="proforma"
                                    {{ old('type') === 'proforma' ? 'selected' : '' }}>
                                Proforma Invoice
                            </option>
                            <option value="receipt"
                                    {{ old('type') === 'receipt' ? 'selected' : '' }}>
                                Receipt
                            </option>
                        </select>
                        @error('type')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-semibold">
                            Invoice Date <span class="text-danger">*</span>
                        </label>
                        <input type="date" name="invoice_date"
                               class="form-control @error('invoice_date') is-invalid @enderror"
                               value="{{ old('invoice_date', today()->toDateString()) }}"
                               required>
                        @error('invoice_date')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-semibold">
                            Due Date <span class="text-danger">*</span>
                        </label>
                        <input type="date" name="due_date"
                               class="form-control @error('due_date') is-invalid @enderror"
                               value="{{ old('due_date', today()->addDays(7)->toDateString()) }}"
                               required>
                        @error('due_date')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-semibold">Currency</label>
                        <select name="currency" class="form-select">
                            @foreach(config('kubhuka.general.supported_currencies', []) as $code => $currency)
                                <option value="{{ $code }}"
                                        {{ old('currency', tenant()->baseCurrency?->code ?? 'USD') === $code ? 'selected' : '' }}>
                                    {{ $code }} — {{ $currency['name'] }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Line Items --}}
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <span class="card-title">
                    <i class="bi bi-list-ul me-2"
                       style="color:var(--clay)"></i>
                    Line Items
                </span>
            </div>
            <div class="card-body">

                @error('items')
                    <div class="alert alert-danger py-2"
                         style="font-size:.8rem;">
                        {{ $message }}
                    </div>
                @enderror

                <div id="lineItems">
                    <div style="display:grid;
                                grid-template-columns:1fr 80px 100px 120px 40px;
                                gap:8px;margin-bottom:6px;">
                        <div style="font-size:.68rem;font-weight:700;
                                    text-transform:uppercase;
                                    letter-spacing:.08em;color:var(--muted);">
                            Description
                        </div>
                        <div style="font-size:.68rem;font-weight:700;
                                    text-transform:uppercase;
                                    letter-spacing:.08em;color:var(--muted);">
                            Qty
                        </div>
                        <div style="font-size:.68rem;font-weight:700;
                                    text-transform:uppercase;
                                    letter-spacing:.08em;color:var(--muted);">
                            Unit Price
                        </div>
                        <div style="font-size:.68rem;font-weight:700;
                                    text-transform:uppercase;
                                    letter-spacing:.08em;color:var(--muted);">
                            Tax Rate
                        </div>
                        <div></div>
                    </div>

                    <div id="itemRows">
                        @if(old('items'))
                            @foreach(old('items') as $i => $item)
                                <div class="item-row"
                                     style="display:grid;
                                            grid-template-columns:1fr 80px 100px 120px 40px;
                                            gap:8px;margin-bottom:8px;">
                                    <input type="text"
                                           name="items[{{ $i }}][description]"
                                           class="form-control form-control-sm"
                                           value="{{ $item['description'] }}"
                                           placeholder="Description"
                                           required>
                                    <input type="number"
                                           name="items[{{ $i }}][quantity]"
                                           class="form-control form-control-sm qty"
                                           value="{{ $item['quantity'] }}"
                                           min="0.01" step="0.01"
                                           onchange="calcRow(this)" required>
                                    <input type="number"
                                           name="items[{{ $i }}][unit_price]"
                                           class="form-control form-control-sm price"
                                           value="{{ $item['unit_price'] }}"
                                           min="0" step="0.01"
                                           onchange="calcRow(this)" required>
                                    <select name="items[{{ $i }}][tax_rate_id]"
                                            class="form-select form-select-sm tax">
                                        <option value="">No Tax</option>
                                        @foreach($taxRates as $tax)
                                            <option value="{{ $tax->id }}"
                                                    data-rate="{{ $tax->rate }}"
                                                    {{ ($item['tax_rate_id'] ?? '') == $tax->id ? 'selected' : '' }}>
                                                {{ $tax->code }} {{ $tax->rate }}%
                                            </option>
                                        @endforeach
                                    </select>
                                    <button type="button"
                                            onclick="removeRow(this)"
                                            class="btn btn-sm btn-outline-danger">
                                        <i class="bi bi-x"></i>
                                    </button>
                                </div>
                            @endforeach
                        @else
                            <div class="item-row"
                                 style="display:grid;
                                        grid-template-columns:1fr 80px 100px 120px 40px;
                                        gap:8px;margin-bottom:8px;">
                                <input type="text"
                                       name="items[0][description]"
                                       class="form-control form-control-sm"
                                       placeholder="e.g. Accommodation"
                                       required>
                                <input type="number"
                                       name="items[0][quantity]"
                                       class="form-control form-control-sm qty"
                                       value="1" min="0.01" step="0.01"
                                       onchange="calcRow(this)" required>
                                <input type="number"
                                       name="items[0][unit_price]"
                                       class="form-control form-control-sm price"
                                       value="0" min="0" step="0.01"
                                       onchange="calcRow(this)" required>
                                <select name="items[0][tax_rate_id]"
                                        class="form-select form-select-sm tax">
                                    <option value="">No Tax</option>
                                    @foreach($taxRates as $tax)
                                        <option value="{{ $tax->id }}"
                                                data-rate="{{ $tax->rate }}">
                                            {{ $tax->code }} {{ $tax->rate }}%
                                        </option>
                                    @endforeach
                                </select>
                                <button type="button"
                                        onclick="removeRow(this)"
                                        class="btn btn-sm btn-outline-danger">
                                    <i class="bi bi-x"></i>
                                </button>
                            </div>
                        @endif
                    </div>

                </div>

                <button type="button"
                        onclick="addRow()"
                        class="btn btn-sm btn-outline-secondary mt-1">
                    <i class="bi bi-plus-lg me-1"></i>Add Line
                </button>

                {{-- Running Total --}}
                <div style="display:flex;justify-content:flex-end;
                            margin-top:16px;">
                    <div style="width:200px;
                                background:var(--bg);
                                border-radius:8px;
                                padding:12px;">
                        <div style="display:flex;justify-content:space-between;
                                    font-size:.78rem;margin-bottom:4px;">
                            <span style="color:var(--muted);">Subtotal</span>
                            <span id="subtotalDisplay">0.00</span>
                        </div>
                        <div style="display:flex;justify-content:space-between;
                                    font-size:.78rem;margin-bottom:4px;">
                            <span style="color:var(--muted);">Tax</span>
                            <span id="taxDisplay">0.00</span>
                        </div>
                        <div style="display:flex;justify-content:space-between;
                                    font-size:.88rem;font-weight:700;
                                    padding-top:6px;
                                    border-top:1px solid var(--border);">
                            <span>Total</span>
                            <span id="totalDisplay"
                                  style="color:var(--clay);">
                                0.00
                            </span>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    {{-- Notes --}}
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Notes</label>
                        <textarea name="notes" rows="2"
                                  class="form-control"
                                  placeholder="Notes visible on invoice...">{{ old('notes') }}</textarea>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">
                            Terms & Conditions
                        </label>
                        <textarea name="terms" rows="2"
                                  class="form-control"
                                  placeholder="Payment terms...">{{ old('terms') }}</textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-12 d-flex gap-2">
        <button type="submit" class="btn btn-primary">
            <i class="bi bi-receipt me-1"></i>Create Invoice
        </button>
        <a href="{{ tenant_route('invoicing.invoices.index') }}"
           class="btn btn-outline-secondary">Cancel</a>
    </div>

</div>
</form>

</div>
</div>

@endsection

@push('scripts')
<script>
let rowIndex = {{ old('items') ? count(old('items')) : 1 }};

function addRow() {
    const container = document.getElementById('itemRows');
    const div = document.createElement('div');
    div.className = 'item-row';
    div.style.cssText = 'display:grid;grid-template-columns:1fr 80px 100px 120px 40px;gap:8px;margin-bottom:8px;';

    const taxOptions = `<option value="">No Tax</option>` +
        @json($taxRates->map(fn($t) => ['id' => $t->id, 'code' => $t->code, 'rate' => $t->rate]))
        .map(t => `<option value="${t.id}" data-rate="${t.rate}">${t.code} ${t.rate}%</option>`)
        .join('');

    div.innerHTML = `
        <input type="text" name="items[${rowIndex}][description]"
               class="form-control form-control-sm"
               placeholder="Description" required>
        <input type="number" name="items[${rowIndex}][quantity]"
               class="form-control form-control-sm qty"
               value="1" min="0.01" step="0.01"
               onchange="calcRow(this)" required>
        <input type="number" name="items[${rowIndex}][unit_price]"
               class="form-control form-control-sm price"
               value="0" min="0" step="0.01"
               onchange="calcRow(this)" required>
        <select name="items[${rowIndex}][tax_rate_id]"
                class="form-select form-select-sm tax"
                onchange="updateTotals()">
            ${taxOptions}
        </select>
        <button type="button" onclick="removeRow(this)"
                class="btn btn-sm btn-outline-danger">
            <i class="bi bi-x"></i>
        </button>
    `;
    container.appendChild(div);
    rowIndex++;
    div.querySelector('input[type=text]').focus();
}

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

function calcRow(input) {
    updateTotals();
}

function updateTotals() {
    let subtotal = 0, tax = 0;

    document.querySelectorAll('.item-row').forEach(row => {
        const qty   = parseFloat(row.querySelector('.qty')?.value) || 0;
        const price = parseFloat(row.querySelector('.price')?.value) || 0;
        const taxSel = row.querySelector('.tax');
        const taxRate = taxSel?.selectedOptions[0]?.dataset?.rate
            ? parseFloat(taxSel.selectedOptions[0].dataset.rate) : 0;

        const line    = qty * price;
        const lineTax = line * (taxRate / 100);
        subtotal += line;
        tax      += lineTax;
    });

    document.getElementById('subtotalDisplay').textContent =
        subtotal.toFixed(2);
    document.getElementById('taxDisplay').textContent =
        tax.toFixed(2);
    document.getElementById('totalDisplay').textContent =
        (subtotal + tax).toFixed(2);
}

updateTotals();
</script>
@endpush