@extends('layouts.finance')

@section('title', 'Edit Transaction')
@section('subtitle', 'Edit transaction #' . $transaction->id)

@section('content')
@php
    $metadata = $transaction->metadata ?? [];
    $isCardTransaction = (int) $transaction->credit_card_id > 0;
    $isBankTransaction = (int) $transaction->bank_account_id > 0;
    $txKind = old('tx_kind', $metadata['tx_kind'] ?? ($transaction->type === 'income' ? 'Deposit' : 'Payment'));
    $txCategory = old('tx_category', $metadata['tx_category'] ?? null);
    $editMode = old('tx_mode', $transaction->type === 'income' ? 'credit' : 'debit');
    $bankCreditCategories = ['Manual Credit', 'Factory Payout', 'Pearson Testing Services', 'Debt', 'Collectibles', 'Credit from KuickPay', 'Pending KuickPay', 'Credit from PayFast', 'Pending PayFast', 'Others'];
    $bankDebitCategories = ['Transferring in another linked account', 'Invoice', 'Debt', 'Factory', 'Lent', 'Expense', 'Credit Card'];
    $cardCreditCategories = ['Manual Amount'];
    $cardDebitCategories = ['Invoice', 'Debt', 'Expense', 'Zakat', 'Charity', 'Factory', 'Bank Charges', 'Others', 'Manual Charge'];
    $editCategoryOptionsByMode = [
        'bank' => [
            'credit' => $bankCreditCategories,
            'debit' => $bankDebitCategories,
        ],
        'card' => [
            'credit' => $cardCreditCategories,
            'debit' => $cardDebitCategories,
        ],
    ];
    $initialCategoryOptions = $isCardTransaction
        ? ($editMode === 'credit' ? $cardCreditCategories : $cardDebitCategories)
        : ($editMode === 'credit' ? $bankCreditCategories : $bankDebitCategories);
    if ($txCategory && ! in_array($txCategory, $initialCategoryOptions, true)) {
        $initialCategoryOptions[] = $txCategory;
    }
    $txCurrency = $transaction->bankAccount?->currency ?? $transaction->creditCard?->currency ?? $metadata['currency'] ?? 'USD';
    $transferSplitCurrency = $metadata['transfer_partial_currency'] ?? $txCurrency;
    $txStatus = old('status', $metadata['status'] ?? 'Cleared');
    $transferSplitsText = old(
        'transfer_partial_amounts',
        collect($metadata['transfer_partial_amounts'] ?? [])->filter()->implode("\n")
    );
    $usesTransferSplits = old(
        'use_transfer_splits',
        collect($metadata['transfer_partial_amounts'] ?? [])->filter()->isNotEmpty() ? '1' : '0'
    ) === '1';
    $invoiceNumbers = old('invoice_numbers', $metadata['invoice_numbers'] ?? []);
    $selectedExpenseCategoryId = old('expense_category_id', $metadata['expense_category_id'] ?? null);
    $selectedExpenseSubcategoryId = old('expense_subcategory_id', $metadata['expense_subcategory_id'] ?? null);
    $selectedEmployeeId = old('employee_id', $metadata['employee_id'] ?? null);
    $selectedDebtId = old('debt_id', $metadata['debt_id'] ?? null);
    $selectedCreditCardId = old('credit_card_id', $metadata['credit_card_id'] ?? null);
    $editAmount = old('amount', number_format((float) ($metadata['gross_amount'] ?? $transaction->amount), 2, '.', ''));
    $editFeeAmount = old('fee_amount', isset($metadata['fee_amount']) && $metadata['fee_amount'] !== null
        ? number_format((float) $metadata['fee_amount'], 2, '.', '')
        : '');
    $editConversionRate = old('conversion_rate', isset($metadata['base_conversion_rate']) && $metadata['base_conversion_rate'] !== null
        ? number_format((float) $metadata['base_conversion_rate'], 4, '.', '')
        : ($transaction->conversion_rate !== null ? number_format((float) $transaction->conversion_rate, 4, '.', '') : ''));
    $allSubcategories = \App\Models\ExpenseSubcategory::query()
        ->orderBy('name')
        ->get(['id', 'expense_category_id', 'name'])
        ->map(fn ($subcategory) => [
            'id' => (string) $subcategory->id,
            'expense_category_id' => (string) $subcategory->expense_category_id,
            'name' => $subcategory->name,
        ])
        ->all();
    $accountLabel = $isCardTransaction
        ? trim(($transaction->creditCard->issuer ?? '-').' - '.($transaction->creditCard->card_name ?? '').' ('.$txCurrency.')')
        : trim(($transaction->bankAccount->name ?? '-').' - '.($transaction->bankAccount->bank_name ?? '').' ('.$txCurrency.')');
    $returnUrl = $returnUrl ?? route('finance.transactions', array_filter([
        'bucket' => $transaction->bankAccount?->transactionCategoryKey() ?? 'credit-cards',
        'bank_account_id' => $transaction->bank_account_id,
        'credit_card_id' => $transaction->credit_card_id,
    ]));
@endphp

<div class="flex items-center gap-3 mb-5">
    <a class="btn" href="{{ $returnUrl }}">
        <span style="display:inline-flex;align-items:center;gap:6px">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg>
            Transactions
        </span>
    </a>
    <div class="text-sm" style="color:var(--muted)">
        Transactions / <span style="color:var(--text);font-weight:600">Edit #{{ $transaction->id }}</span>
    </div>
</div>

<div class="card" style="max-width:920px;margin:0 auto">
    <div class="section-head">
        <div>
            <h3>Edit Transaction</h3>
            <div class="text-xs muted mt-3">Update the transaction details. Funding account/card and currency stay fixed.</div>
        </div>
        <a class="btn" href="{{ $returnUrl }}">Back</a>
    </div>

    <form method="POST" action="{{ route('finance.transactions.update', $transaction) }}" class="p-4" id="transactionEditForm">
        @csrf
        @method('PUT')

        <input type="hidden" name="return_url" value="{{ $returnUrl }}">
        <input type="hidden" name="tx_kind" id="tx_kind" value="{{ $txKind }}">
        <input type="hidden" name="source" value="{{ old('source', $transaction->source) }}">

        <div class="mb-4">
            <label class="label" for="account">Account / Card</label>
            <input class="field" id="account" value="{{ $accountLabel }}" disabled style="background:var(--bg-2)">
        </div>

        <div class="grid grid-cols-2 gap-3 mb-4">
            <div>
                <label class="label" for="transaction_date">Date</label>
                <input class="field" id="transaction_date" type="date" name="transaction_date" value="{{ old('transaction_date', $transaction->transaction_date?->toDateString()) }}" required>
            </div>
            <div>
                <label class="label" for="amount">Amount ({{ $txCurrency }})</label>
                <input class="field" id="amount" type="number" step="0.01" min="0.01" name="amount" value="{{ $editAmount }}" required>
            </div>
        </div>

        <div class="grid grid-cols-2 gap-3 mb-4">
            <div>
                <label class="label" for="conversion_rate">Conversion Rate</label>
                <input class="field" id="conversion_rate" type="number" step="0.0001" min="0.0001" name="conversion_rate" value="{{ $editConversionRate }}" placeholder="optional">
            </div>
            <div id="feeGroup">
                <label class="label" for="fee_amount">+ Fee ({{ $txCurrency }})</label>
                <input class="field" id="fee_amount" type="number" step="0.01" min="0" name="fee_amount" value="{{ $editFeeAmount }}" placeholder="0.00">
                <div class="text-xs mt-1" style="color:var(--muted)" id="feePreview">Optional fee deducted before money reaches the bank.</div>
                <div class="text-xs mt-1" style="color:var(--muted)">Clear this field to remove the fee and restore the full amount.</div>
            </div>
        </div>

        <div class="grid grid-cols-2 gap-3 mb-4">
            <div>
                <label class="label" for="tx_mode">Type</label>
                <select class="field" id="tx_mode" name="tx_mode">
                    <option value="credit" @selected($editMode === 'credit')>{{ $isCardTransaction ? 'Credit / Payment' : 'Credit Transaction' }}</option>
                    <option value="debit" @selected($editMode === 'debit')>{{ $isCardTransaction ? 'Debit / Charge' : 'Debit Transaction' }}</option>
                </select>
            </div>
            <div>
                <label class="label" for="tx_category">Category</label>
                <select class="field" id="tx_category" name="tx_category">
                    @foreach($initialCategoryOptions as $category)
                        <option value="{{ $category }}" @selected($txCategory === $category)>{{ $category }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        <div class="grid grid-cols-2 gap-3 mb-4">
            <div>
                <label class="label" for="status">Status</label>
                <select class="field" id="status" name="status">
                    @foreach(['Cleared', 'Pending', 'Failed'] as $status)
                        <option value="{{ $status }}" @selected($txStatus === $status)>{{ $status }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        <div class="mb-4" id="transferSplitToggleGroup">
            <input type="hidden" name="use_transfer_splits" value="0">
            <label class="label" style="display:flex;align-items:center;gap:8px;font-weight:600">
                <input id="use_transfer_splits" type="checkbox" name="use_transfer_splits" value="1" style="width:auto" @checked($usesTransferSplits)>
                Split / partial amount
            </label>
            <div class="text-xs mt-1" style="color:var(--muted)">Enable this to record the partial amounts that make up this transaction.</div>
        </div>

        <div class="mb-4" id="transferSplitsGroup">
            <label class="label" for="transfer_partial_amounts">Partial / Split Amounts</label>
            <textarea class="field" id="transfer_partial_amounts" name="transfer_partial_amounts" rows="3" maxlength="2000" placeholder="e.g., 1000000&#10;1000000&#10;1000000">{{ $transferSplitsText }}</textarea>
            <div class="text-xs mt-1" style="color:var(--muted)" id="transferSplitsHint">Use one amount per line, comma, or space.</div>
        </div>

        <div class="mb-4" id="invoiceGroup">
            <label class="label">Invoice Numbers</label>
            <div class="tx-edit-list">
                @foreach($unpaidInvoices as $invoice)
                    <label class="tx-edit-option">
                        <input type="checkbox" name="invoice_numbers[]" value="{{ $invoice->invoice_number }}" @checked(in_array($invoice->invoice_number, $invoiceNumbers, true))>
                        <span>
                            <strong>{{ $invoice->invoice_number }}</strong>
                            <small>{{ $invoice->supplier_name ?: $invoice->client_name }} - {{ $invoice->currency }} {{ number_format((float) $invoice->amount + (float) ($invoice->fee_amount ?? 0), 2) }}</small>
                        </span>
                    </label>
                @endforeach
            </div>
        </div>

        <div class="grid grid-cols-2 gap-3 mb-4">
            <div id="debtGroup">
                <label class="label" for="debt_id">Debt / Obligation</label>
                <select class="field" id="debt_id" name="debt_id">
                    <option value="">Select outstanding item</option>
                    @foreach($payableDebts as $debt)
                        <option value="{{ $debt->id }}" @selected((string) $selectedDebtId === (string) $debt->id)>{{ $debt->name }}{{ $debt->lender ? ' - '.$debt->lender : '' }} - {{ $metrics->money($debt->outstanding_balance, $debt->currency) }}</option>
                    @endforeach
                </select>
            </div>
            <div id="cardPaymentGroup">
                <label class="label" for="credit_card_id">Credit Card</label>
                <select class="field" id="credit_card_id" name="credit_card_id">
                    <option value="">Select credit card</option>
                    @foreach($activeCardsWithPayable as $card)
                        <option value="{{ $card->id }}" @selected((string) $selectedCreditCardId === (string) $card->id)>{{ $card->issuer }} - {{ $card->card_name }} ({{ $card->currency }})</option>
                    @endforeach
                </select>
            </div>
        </div>

        <div class="grid grid-cols-2 gap-3 mb-4" id="expenseGroup">
            <div>
                <label class="label" for="expense_category_id">Expense Category</label>
                <select class="field" id="expense_category_id" name="expense_category_id">
                    <option value="">Select expense category</option>
                    @foreach($expenseCategories as $category)
                        <option value="{{ $category->id }}" data-type="{{ $category->type }}" @selected((string) $selectedExpenseCategoryId === (string) $category->id)>{{ $category->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="label" for="expense_subcategory_id">Subcategory</label>
                <select class="field" id="expense_subcategory_id" name="expense_subcategory_id">
                    <option value="">Select subcategory</option>
                </select>
            </div>
        </div>

        <div class="mb-4" id="employeeGroup">
            <label class="label" for="employee_id">Employee</label>
            <select class="field" id="employee_id" name="employee_id">
                <option value="">Select employee</option>
                @foreach($activeEmployees as $employee)
                    <option value="{{ $employee->id }}" @selected((string) $selectedEmployeeId === (string) $employee->id)>{{ $employee->name }}{{ $employee->designation ? ' - '.$employee->designation : '' }}</option>
                @endforeach
            </select>
        </div>

        <div class="grid grid-cols-2 gap-3 mb-4">
            <div>
                <label class="label" for="reference">Reference / Bank Trans ID</label>
                <input class="field" id="reference" type="text" name="reference" maxlength="255" value="{{ old('reference', $transaction->reference) }}" placeholder="optional">
            </div>
            <div>
                <label class="label" for="counterparty">{{ $transaction->type === 'income' ? 'Received From' : 'Paid To' }}</label>
                <input class="field" id="counterparty" type="text" name="counterparty" maxlength="255" value="{{ old('counterparty', $transaction->counterparty) }}" placeholder="optional">
            </div>
        </div>

        <div class="mb-4">
            <label class="label" for="description">Description / Notes</label>
            <textarea class="field" id="description" name="description" rows="3" maxlength="2000" placeholder="optional">{{ old('description', $transaction->description) }}</textarea>
        </div>

        <div class="flex items-center gap-2" style="justify-content:flex-end">
            <a class="btn" href="{{ $returnUrl }}">Cancel</a>
            <button class="btn btn-primary" type="submit">Save Changes</button>
        </div>
    </form>
</div>
@endsection

@push('styles')
    <style>
        .tx-edit-list {
            display: grid;
            gap: 8px;
            max-height: 220px;
            overflow-y: auto;
            padding: 8px;
            border: 1px solid var(--border);
            border-radius: 10px;
            background: #fff;
        }
        .tx-edit-option {
            display: grid;
            grid-template-columns: 18px minmax(0, 1fr);
            gap: 9px;
            align-items: start;
            padding: 8px;
            border: 1px solid var(--border-2);
            border-radius: 8px;
            cursor: pointer;
        }
        .tx-edit-option:hover {
            background: #f8fafc;
            border-color: #cbd5e1;
        }
        .tx-edit-option small {
            display: block;
            margin-top: 2px;
            color: var(--muted);
            font-size: 11px;
        }
    </style>
@endpush

@push('scripts')
    <script>
        (function () {
            const modeField = document.getElementById('tx_mode');
            const kindField = document.getElementById('tx_kind');
            const categoryField = document.getElementById('tx_category');
            const amountField = document.getElementById('amount');
            const feeField = document.getElementById('fee_amount');
            const feeGroup = document.getElementById('feeGroup');
            const conversionRateField = document.getElementById('conversion_rate');
            const feePreview = document.getElementById('feePreview');
            const useTransferSplitsField = document.getElementById('use_transfer_splits');
            const transferSplitToggleGroup = document.getElementById('transferSplitToggleGroup');
            const transferSplitsGroup = document.getElementById('transferSplitsGroup');
            const transferSplitsField = document.getElementById('transfer_partial_amounts');
            const transferSplitsHint = document.getElementById('transferSplitsHint');
            const invoiceGroup = document.getElementById('invoiceGroup');
            const debtGroup = document.getElementById('debtGroup');
            const cardPaymentGroup = document.getElementById('cardPaymentGroup');
            const expenseGroup = document.getElementById('expenseGroup');
            const employeeGroup = document.getElementById('employeeGroup');
            const expenseCategoryField = document.getElementById('expense_category_id');
            const expenseSubcategoryField = document.getElementById('expense_subcategory_id');
            const selectedExpenseSubcategoryId = @json($selectedExpenseSubcategoryId ? (string) $selectedExpenseSubcategoryId : '');
            const allSubcategories = @json($allSubcategories);
            const txCurrency = @json($txCurrency);
            const isCardTransaction = @json($isCardTransaction);
            const categoryOptions = @json($editCategoryOptionsByMode);
            const originalCategory = @json($txCategory);
            const isPkrCurrency = txCurrency === 'PKR';
            const feeEditable = @json((bool) ($feeEditable ?? false));
            const transferSplitCurrency = @json($transferSplitCurrency);
            const splitCurrencyMatchesAmount = txCurrency === transferSplitCurrency;

            function kindForCategory(mode, category) {
                if (mode === 'credit') {
                    if (isCardTransaction) {
                        return 'Receipt';
                    }

                    return ['Credit from KuickPay', 'Pending KuickPay', 'Credit from PayFast', 'Collectibles'].includes(category)
                        ? 'Receipt'
                        : 'Deposit';
                }

                return category === 'Transferring in another linked account' ? 'Transfer' : 'Payment';
            }

            function syncCategoryOptions(preferCurrent = true) {
                const mode = modeField.value;
                const list = (isCardTransaction ? categoryOptions.card : categoryOptions.bank)[mode] || [];
                const current = preferCurrent ? (categoryField.value || originalCategory || '') : '';
                const options = list.includes(current) || ! current ? list : [...list, current];

                categoryField.innerHTML = options
                    .map((category) => `<option value="${category}">${category}</option>`)
                    .join('');

                if (options.includes(current)) {
                    categoryField.value = current;
                }
            }

            function syncSubcategories() {
                const categoryId = expenseCategoryField.value;
                const matches = allSubcategories.filter((subcategory) => subcategory.expense_category_id === categoryId);

                expenseSubcategoryField.innerHTML = '<option value="">Select subcategory</option>'
                    + matches.map((subcategory) => `<option value="${subcategory.id}">${subcategory.name}</option>`).join('');

                if (selectedExpenseSubcategoryId) {
                    expenseSubcategoryField.value = selectedExpenseSubcategoryId;
                }
            }

            function syncEditFields() {
                const category = categoryField.value;
                const mode = modeField.value;
                const selectedExpenseOpt = expenseCategoryField.options[expenseCategoryField.selectedIndex];
                const expenseType = selectedExpenseOpt ? (selectedExpenseOpt.dataset.type || '') : '';
                kindField.value = kindForCategory(mode, category);

                transferSplitToggleGroup.hidden = false;
                transferSplitsGroup.hidden = ! useTransferSplitsField.checked;
                transferSplitsField.disabled = ! useTransferSplitsField.checked;
                invoiceGroup.hidden = category !== 'Invoice';
                debtGroup.hidden = ! ['Debt', 'Zakat', 'Charity', 'Factory', 'Bank Charges'].includes(category);
                cardPaymentGroup.hidden = category !== 'Credit Card';
                expenseGroup.hidden = category !== 'Expense';
                employeeGroup.hidden = ! (category === 'Expense' && expenseType === 'salary');
                // feeEditable mirrors the server rule behind the inline "+ Fee"
                // action, so a fee added from the ledger row (transfer, payout, …)
                // remains editable here instead of the field vanishing.
                const supportsFee = feeEditable
                    || (mode === 'credit'
                        && ['Manual Credit', 'Debt'].includes(category)
                        && ! isPkrCurrency);
                feeGroup.hidden = ! supportsFee;
                if (! supportsFee) {
                    feeField.value = '';
                }
                updateFeePreview();
            }

            function parseSplitAmounts(value) {
                return String(value || '')
                    .split(/[\s,]+/)
                    .map((part) => part.trim())
                    .filter(Boolean)
                    .map((part) => Number(part))
                    .filter((amount) => Number.isFinite(amount) && amount > 0);
            }

            function formatDecimal(value, scale) {
                const numeric = Number(value);
                if (! Number.isFinite(numeric)) {
                    return '';
                }

                return numeric.toFixed(scale);
            }

            function updateTransferSplitTotal() {
                const amounts = parseSplitAmounts(transferSplitsField.value);
                if (amounts.length === 0) {
                    transferSplitsHint.textContent = 'Use one amount per line, comma, or space.';
                    return;
                }

                const total = amounts.reduce((sum, amount) => sum + amount, 0);
                if (splitCurrencyMatchesAmount) {
                    amountField.value = formatDecimal(total, 2);
                    updateFeePreview();
                }
                transferSplitsHint.textContent = `${amounts.length} partial amount${amounts.length === 1 ? '' : 's'} totaling ${total.toLocaleString(undefined, { maximumFractionDigits: 4 })} ${transferSplitCurrency}.`
                    + (splitCurrencyMatchesAmount ? '' : ` Transaction amount stays in ${txCurrency}.`);
            }

            function updateFeePreview() {
                const gross = Number(amountField.value);
                const fee = Number(feeField.value || 0);
                const baseRate = Number(conversionRateField.value || 0);

                if (! (fee > 0)) {
                    feePreview.textContent = 'Optional fee deducted before money reaches the bank.';
                    feePreview.style.color = 'var(--muted)';
                    return;
                }

                if (! (gross > 0) || fee >= gross) {
                    feePreview.textContent = 'Fee must be less than the amount.';
                    feePreview.style.color = '#dc2626';
                    return;
                }

                const net = gross - fee;
                let text = `Net received in bank: ${net.toLocaleString(undefined, { maximumFractionDigits: 2 })} ${txCurrency}.`;
                if (! isPkrCurrency && baseRate > 0) {
                    const effectiveRate = (gross * baseRate) / net;
                    text += ` Effective rate: ${effectiveRate.toLocaleString(undefined, { minimumFractionDigits: 4, maximumFractionDigits: 4 })} PKR per 1 ${txCurrency}.`;
                }
                feePreview.textContent = text;
                feePreview.style.color = '#059669';
            }

            expenseCategoryField.addEventListener('change', function () {
                syncSubcategories();
                syncEditFields();
            });
            modeField.addEventListener('change', function () {
                syncCategoryOptions(false);
                syncEditFields();
            });
            categoryField.addEventListener('change', syncEditFields);
            amountField.addEventListener('input', updateFeePreview);
            feeField.addEventListener('input', updateFeePreview);
            conversionRateField.addEventListener('input', updateFeePreview);
            useTransferSplitsField.addEventListener('change', function () {
                if (useTransferSplitsField.checked) {
                    updateTransferSplitTotal();
                }
                syncEditFields();
            });
            transferSplitsField.addEventListener('input', updateTransferSplitTotal);
            document.getElementById('transactionEditForm').addEventListener('submit', function () {
                if (useTransferSplitsField.checked) {
                    if (splitCurrencyMatchesAmount) {
                        updateTransferSplitTotal();
                    }
                    return;
                }

                transferSplitsField.value = '';
                transferSplitsField.disabled = false;
            });

            syncSubcategories();
            syncCategoryOptions(true);
            if (useTransferSplitsField.checked) {
                updateTransferSplitTotal();
            }
            syncEditFields();
            updateFeePreview();
        })();
    </script>
@endpush