@extends('layouts.app')

@section('title', 'New Transaction')
@section('page-title', 'Record Transaction')

@section('content')

<div class="page-header">
    <div>
        <h1>Record Transaction</h1>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ route('transactions.index') }}">Transactions</a></li>
                <li class="breadcrumb-item active">New</li>
            </ol>
        </nav>
    </div>
</div>

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

        {{-- Account Separation Notice --}}
        <div class="alert alert-compliance mb-4" style="background:#eff6ff;border-color:#bfdbfe;border-left-color:var(--lions-blue);color:#1e3a8a;">
            <i class="bi bi-info-circle-fill me-2"></i>
            <strong>Dual Account Rule:</strong> Administrative expenses (dues, supplies, meetings) must use the <strong>Administrative Account</strong>.
            Public funds in the <strong>Activity Account</strong> may only be spent on service projects and charitable activities.
        </div>

        <div class="card">
            <div class="card-header">
                <h5><i class="bi bi-plus-circle me-2" style="color:var(--lions-gold)"></i>Transaction Details</h5>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ route('transactions.store') }}" enctype="multipart/form-data">
                    @csrf

                    {{-- Account & Type Row --}}
                    <div class="row g-3 mb-3">
                        <div class="col-md-6">
                            <label class="form-label">Account <span class="text-danger">*</span></label>
                            <select name="account_id" id="account_id" class="form-select" required>
                                <option value="">Select account…</option>
                                @foreach($accounts as $account)
                                    <option value="{{ $account->id }}"
                                            data-type="{{ $account->type }}"
                                            {{ (old('account_id', $selectedAccount?->id) == $account->id) ? 'selected' : '' }}>
                                        {{ $account->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Transaction Type <span class="text-danger">*</span></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', 'income') === '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') === '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>

                    {{-- Category --}}
                    <div class="mb-3">
                        <label class="form-label">Category <span class="text-danger">*</span></label>
                        <select name="category" id="category" class="form-select" required>
                            <option value="">Select account and type first…</option>
                        </select>
                        <div class="form-text">Categories change based on the selected account and type.</div>
                    </div>

                    {{-- Description --}}
                    <div class="mb-3">
                        <label class="form-label">Description</label>
                        <textarea name="description" class="form-control" rows="2"
                                  placeholder="Brief description of this transaction…">{{ old('description') }}</textarea>
                    </div>

                    <div class="row g-3 mb-3">
                        {{-- Amount --}}
                        <div class="col-md-4">
                            <label class="form-label">Amount ($) <span class="text-danger">*</span></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" placeholder="0.00"
                                       value="{{ old('amount') }}" required>
                            </div>
                        </div>

                        {{-- Date --}}
                        <div class="col-md-4">
                            <label class="form-label">Transaction Date <span class="text-danger">*</span></label>
                            <input type="date" name="transaction_date" class="form-control"
                                   value="{{ old('transaction_date', date('Y-m-d')) }}" required>
                        </div>

                        {{-- Reference --}}
                        <div class="col-md-4">
                            <label class="form-label">Reference No.</label>
                            <input type="text" name="reference_no" class="form-control"
                                   placeholder="Check #, receipt #…"
                                   value="{{ old('reference_no') }}">
                        </div>
                    </div>

                    {{-- Receipt Upload --}}
                    <div class="mb-3">
                        <label class="form-label">Receipt / Supporting Document</label>
                        <input type="file" name="receipt" class="form-control" accept=".jpg,.jpeg,.png,.pdf">
                        <div class="form-text">Accepted: JPG, PNG, PDF — max 5 MB</div>
                    </div>

                    {{-- Notes --}}
                    <div class="mb-4">
                        <label class="form-label">Internal Notes</label>
                        <textarea name="notes" class="form-control" rows="2"
                                  placeholder="Any internal notes for reconciliation…">{{ old('notes') }}</textarea>
                    </div>

                    <div class="d-flex gap-2 justify-content-end">
                        <a href="{{ route('transactions.index') }}" class="btn btn-outline-secondary">
                            Cancel
                        </a>
                        <button type="submit" class="btn btn-lions">
                            <i class="bi bi-save me-1"></i> Record Transaction
                        </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 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 = '<option value="">Select a category…</option>';

        if (!accountType || !txType) return;

        const cats = allCategories[accountType]?.[txType] ?? [];
        const oldVal = '{{ old('category') }}';

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

    accountSelect.addEventListener('change', updateCategories);
    typeRadios.forEach(r => r.addEventListener('change', updateCategories));

    // Initialize on page load
    updateCategories();
})();
</script>
@endpush