@extends('layouts.finance')

@php
    $isEdit = $debt->exists;
@endphp

@section('title', $isEdit ? 'Edit Debt' : 'Add Debt')
@section('subtitle', $isEdit ? 'Update loan or line of credit details' : 'Enter loan or line of credit details before adding it')

@section('content')
@php
    $typeOptions = ['Loan', 'Line of Credit', 'Debt', 'Invoice'];
    $selectedType = old('debt_type', $debt->debt_type);
    $selectedInvoiceId = old('source_invoice_id');
@endphp
<div class="card" style="max-width:760px;margin:0 auto">
    <div class="section-head">
        <div>
            <h3>{{ $isEdit ? 'Edit Debt' : 'Add Debt' }}</h3>
            <div class="text-xs muted mt-3">Debt balances feed total liabilities, reports, and dashboard KPIs.</div>
        </div>
        <a class="btn" href="{{ route('finance.liabilities') }}">Back</a>
    </div>

    <form method="POST" action="{{ $isEdit ? route('finance.liabilities.debts.update', $debt) : route('finance.liabilities.debts.store') }}" class="p-4">
        @csrf
        @if($isEdit)
            @method('PUT')
        @endif

        <div class="grid grid-cols-2 gap-3 mb-4">
            <div>
                <label class="label" for="name">Name</label>
                <input class="field" id="name" name="name" value="{{ old('name', $debt->name) }}" required maxlength="255" placeholder="Equipment Loan">
            </div>
            <div>
                <label class="label" for="debt_type">Type</label>
                <select class="field" id="debt_type" name="debt_type" required>
                    @foreach($typeOptions as $typeOption)
                        <option value="{{ $typeOption }}" @selected($selectedType === $typeOption)>{{ $typeOption }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        @if(! $isEdit)
        <div class="mb-4" id="sourceInvoiceGroup" hidden>
            <label class="label" for="source_invoice_id">Invoice<span style="color:#ef4444">*</span></label>
            <select class="field" id="source_invoice_id" name="source_invoice_id">
                <option value="">Select unpaid invoice</option>
                @foreach(($invoiceDebtOptions ?? []) as $invoice)
                    @php
                        $invoiceTotal = (float) $invoice->amount + (float) ($invoice->fee_amount ?? 0);
                        $invoiceLender = $invoice->supplier_name ?: ($invoice->client_name ?: 'Supplier');
                    @endphp
                    <option value="{{ $invoice->id }}"
                            @selected((string) $selectedInvoiceId === (string) $invoice->id)
                            data-invoice-number="{{ $invoice->invoice_number }}"
                            data-lender="{{ $invoiceLender }}"
                            data-currency="{{ $invoice->currency }}"
                            data-amount="{{ $invoiceTotal }}"
                            data-product="{{ $invoice->product_name }}">
                        {{ $invoice->invoice_number }} - {{ $invoiceLender }} - {{ $invoice->currency }} {{ number_format($invoiceTotal, 2) }}{{ $invoice->product_name ? ' - '.$invoice->product_name : '' }}
                    </option>
                @endforeach
            </select>
            <div class="text-xs muted mt-3">Saving an invoice debt changes the invoice status to debt and creates the linked debt record.</div>
        </div>
        @endif

        <div class="grid grid-cols-2 gap-3 mb-4">
            <div>
                <label class="label" for="lender">Lender</label>
                <input class="field" id="lender" name="lender" value="{{ old('lender', $debt->lender) }}" required maxlength="255" placeholder="Chase Bank">
            </div>
            <div>
                <label class="label" for="currency">Currency</label>
                <select class="field" id="currency" name="currency" required>
                    @foreach(['USD', 'PKR', 'AUD'] as $currency)
                        <option value="{{ $currency }}" @selected(old('currency', $debt->currency) === $currency)>{{ $currency }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        <div class="grid grid-cols-2 gap-3 mb-4">
            <div>
                <label class="label" for="outstanding_balance">Outstanding Balance</label>
                <input class="field" id="outstanding_balance" type="number" step="0.01" min="0" name="outstanding_balance" value="{{ old('outstanding_balance', $debt->outstanding_balance ?? 0) }}" required>
            </div>
            <div>
                <label class="label" for="monthly_payment">Monthly Payment</label>
                <input class="field" id="monthly_payment" type="number" step="0.01" min="0" name="monthly_payment" value="{{ old('monthly_payment', $debt->monthly_payment ?? 0) }}" required>
            </div>
        </div>

        <div class="grid grid-cols-2 gap-3 mb-4">
            <div>
                <label class="label" for="interest_rate">Interest Rate</label>
                <input class="field" id="interest_rate" type="number" step="0.0001" min="0" max="100" name="interest_rate" value="{{ old('interest_rate', $debt->interest_rate ?? 0) }}" required>
            </div>
            <div>
                <label class="label" for="notes">Notes</label>
                <input class="field" id="notes" name="notes" value="{{ old('notes', $debt->notes) }}" maxlength="2000" placeholder="Optional">
            </div>
        </div>

        <label class="flag mb-4" style="width:max-content">
            <input type="checkbox" name="is_active" value="1" @checked(old('is_active', $debt->is_active ?? true))>
            Active
        </label>

        <div class="flex items-center justify-end gap-2">
            <a class="btn" href="{{ route('finance.liabilities') }}">Cancel</a>
            <button class="btn btn-primary" type="submit">{{ $isEdit ? 'Update Debt' : 'Save Debt' }}</button>
        </div>
    </form>
</div>
@endsection

@push('scripts')
    <script>
        (function () {
            const type = document.getElementById('debt_type');
            const invoiceGroup = document.getElementById('sourceInvoiceGroup');
            const invoice = document.getElementById('source_invoice_id');
            if (!invoiceGroup || !invoice) {
                return;
            }
            const name = document.getElementById('name');
            const lender = document.getElementById('lender');
            const currency = document.getElementById('currency');
            const outstanding = document.getElementById('outstanding_balance');
            const notes = document.getElementById('notes');

            function syncInvoiceFields() {
                const isInvoice = type.value === 'Invoice';
                invoiceGroup.hidden = !isInvoice;
                invoice.required = isInvoice;

                if (!isInvoice) {
                    invoice.value = '';
                    return;
                }

                const option = invoice.options[invoice.selectedIndex];
                if (!option || !option.value) {
                    return;
                }

                name.value = 'Invoice ' + (option.dataset.invoiceNumber || option.textContent.trim());
                lender.value = option.dataset.lender || '';
                currency.value = option.dataset.currency || currency.value;
                outstanding.value = Number(option.dataset.amount || 0).toFixed(2);

                if (!notes.value && option.dataset.product) {
                    notes.value = 'Product: ' + option.dataset.product;
                }
            }

            type.addEventListener('change', syncInvoiceFields);
            invoice.addEventListener('change', syncInvoiceFields);
            syncInvoiceFields();
        })();
    </script>
@endpush