@extends('layouts.app')
@section('title', 'Edit Transaction')
@section('page-title', 'Edit Transaction')

@section('content')

<div class="page-header">
    <div>
        <h1>Edit Transaction #{{ $transaction->id }}</h1>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('transactions.index') }}">Transactions</a></li>
                <li class="breadcrumb-item"><a href="{{ route('transactions.show', $transaction) }}">#{{ $transaction->id }}</a></li>
                <li class="breadcrumb-item active">Edit</li>
            </ol>
        </nav>
    </div>
</div>

<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header">
                <h5><i class="bi bi-pencil me-2" style="color:var(--lions-gold)"></i>Edit Transaction</h5>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ route('transactions.update', $transaction) }}" enctype="multipart/form-data">
                    @csrf @method('PUT')

                    <div class="row g-3 mb-3">
                        <div class="col-md-6">
                            <label class="form-label">Account</label>
                            <select name="account_id" id="account_id" class="form-select" required>
                                @foreach($accounts as $account)
                                    <option value="{{ $account->id }}"
                                            data-type="{{ $account->type }}"
                                            {{ old('account_id', $transaction->account_id) == $account->id ? 'selected' : '' }}>
                                        {{ $account->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Type</label>
                            <div class="d-flex gap-3 mt-1">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="type" id="type_income"
                                           value="income" {{ old('type', $transaction->type) === 'income' ? 'checked' : '' }}>
                                    <label class="form-check-label text-success fw-semibold" for="type_income">
                                        <i class="bi bi-arrow-down-circle"></i> Income
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="type" id="type_expense"
                                           value="expense" {{ old('type', $transaction->type) === 'expense' ? 'checked' : '' }}>
                                    <label class="form-check-label text-danger fw-semibold" for="type_expense">
                                        <i class="bi bi-arrow-up-circle"></i> Expense
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Category</label>
                        <select name="category" id="category" class="form-select" required>
                            {{-- Populated by JS --}}
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Description</label>
                        <textarea name="description" class="form-control" rows="2">{{ old('description', $transaction->description) }}</textarea>
                    </div>

                    <div class="row g-3 mb-3">
                        <div class="col-md-4">
                            <label class="form-label">Amount ($)</label>
                            <div class="input-group">
                                <span class="input-group-text">$</span>
                                <input type="number" name="amount" class="form-control"
                                       step="0.01" min="0.01"
                                       value="{{ old('amount', $transaction->amount) }}" required>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Transaction Date</label>
                            <input type="date" name="transaction_date" class="form-control"
                                   value="{{ old('transaction_date', $transaction->transaction_date->format('Y-m-d')) }}" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Reference No.</label>
                            <input type="text" name="reference_no" class="form-control"
                                   value="{{ old('reference_no', $transaction->reference_no) }}">
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">
                            Replace Receipt
                            @if($transaction->receipt_path)
                                <span class="badge bg-success ms-1" style="font-size:10px">Current: {{ basename($transaction->receipt_path) }}</span>
                            @endif
                        </label>
                        <input type="file" name="receipt" class="form-control" accept=".jpg,.jpeg,.png,.pdf">
                    </div>

                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="is_reconciled" id="is_reconciled"
                                   {{ old('is_reconciled', $transaction->is_reconciled) ? 'checked' : '' }}>
                            <label class="form-check-label" for="is_reconciled">Mark as Reconciled</label>
                        </div>
                    </div>

                    <div class="mb-4">
                        <label class="form-label">Internal Notes</label>
                        <textarea name="notes" class="form-control" rows="2">{{ old('notes', $transaction->notes) }}</textarea>
                    </div>

                    <div class="d-flex gap-2 justify-content-end">
                        <a href="{{ route('transactions.show', $transaction) }}" class="btn btn-outline-secondary">Cancel</a>
                        <button type="submit" class="btn btn-lions">
                            <i class="bi bi-save me-1"></i> Save Changes
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
(function() {
    const accountSelect  = document.getElementById('account_id');
    const categorySelect = document.getElementById('category');
    const typeRadios     = document.querySelectorAll('input[name="type"]');
    const currentCat     = '{{ old('category', $transaction->category) }}';

    const allCategories = {
        administrative: {
            income:  ['Member Dues','Fundraising Transfer','Miscellaneous Income','Interest Earned'],
            expense: ['Meeting Expenses','LCI Dues Remittance','District Dues Remittance','MD Dues Remittance',
                      'Office Supplies','Insurance','Bank Charges','Officer Expenses','Miscellaneous Expense'],
        },
        activity: {
            income:  ['Public Donation','Fundraising Event','Grant','Corporate Sponsorship','Government Funding','Miscellaneous Income'],
            expense: ['Service Project','Youth Program','Community Aid','Medical Service','Environmental Project',
                      'Disaster Relief','Charitable Donation','Event Expenses','Miscellaneous Expense'],
        },
    };

    function updateCategories() {
        const selectedOption = accountSelect.options[accountSelect.selectedIndex];
        const accountType    = selectedOption ? selectedOption.dataset.type : null;
        const txType         = document.querySelector('input[name="type"]:checked')?.value;

        categorySelect.innerHTML = '';

        const cats = allCategories[accountType]?.[txType] ?? [];
        // Also include current category if it's not in the list (custom or old)
        const allCats = cats.includes(currentCat) ? cats : [currentCat, ...cats];

        allCats.forEach(cat => {
            const opt      = document.createElement('option');
            opt.value      = cat;
            opt.textContent = cat;
            if (cat === currentCat) opt.selected = true;
            categorySelect.appendChild(opt);
        });
    }

    accountSelect.addEventListener('change', updateCategories);
    typeRadios.forEach(r => r.addEventListener('change', updateCategories));
    updateCategories();
})();
</script>
@endpush