@extends('layouts.app')

@section('title', 'Transactions')
@section('page-title', 'Transaction Ledger')

@section('content')

<div class="page-header">
    <div>
        <h1>Transaction Ledger</h1>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item active">Transactions</li>
            </ol>
        </nav>
    </div>
    <a href="{{ route('transactions.create') }}" class="btn btn-lions">
        <i class="bi bi-plus-lg me-1"></i> New Transaction
    </a>
</div>

{{-- ── Filter Bar ──────────────────────────────────────────────────────────── --}}
<div class="card mb-4">
    <div class="card-body">
        <form method="GET" action="{{ route('transactions.index') }}" class="row g-2 align-items-end">
            <div class="col-6 col-md-2">
                <label class="form-label">Account</label>
                <select name="account_id" class="form-select form-select-sm">
                    <option value="">All Accounts</option>
                    @foreach($accounts as $account)
                        <option value="{{ $account->id }}" {{ request('account_id') == $account->id ? 'selected' : '' }}>
                            {{ $account->type === 'administrative' ? 'Administrative' : 'Activity' }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="col-6 col-md-2">
                <label class="form-label">Type</label>
                <select name="type" class="form-select form-select-sm">
                    <option value="">All</option>
                    <option value="income"  {{ request('type') === 'income'  ? 'selected' : '' }}>Income</option>
                    <option value="expense" {{ request('type') === 'expense' ? 'selected' : '' }}>Expense</option>
                </select>
            </div>

            <div class="col-6 col-md-2">
                <label class="form-label">From</label>
                <input type="date" name="date_from" class="form-control form-control-sm" value="{{ request('date_from') }}">
            </div>

            <div class="col-6 col-md-2">
                <label class="form-label">To</label>
                <input type="date" name="date_to" class="form-control form-control-sm" value="{{ request('date_to') }}">
            </div>

            <div class="col-8 col-md-3">
                <label class="form-label">Search</label>
                <input type="text" name="search" class="form-control form-control-sm"
                       placeholder="Description, reference…" value="{{ request('search') }}">
            </div>

            <div class="col-4 col-md-1 d-flex gap-1">
                <button type="submit" class="btn btn-lions btn-sm flex-grow-1">
                    <i class="bi bi-search"></i>
                </button>
                <a href="{{ route('transactions.index') }}" class="btn btn-outline-secondary btn-sm">
                    <i class="bi bi-x"></i>
                </a>
            </div>
        </form>
    </div>
</div>

{{-- ── Totals Row ──────────────────────────────────────────────────────────── --}}
<div class="row g-3 mb-3">
    <div class="col-4">
        <div class="d-flex align-items-center gap-2 p-3 rounded" style="background:#d1fae5;">
            <i class="bi bi-arrow-down-circle text-success" style="font-size:20px;"></i>
            <div>
                <div style="font-size:11px;color:#065f46;font-weight:600;">TOTAL INCOME</div>
                <div class="fw-bold text-success">${{ number_format($filteredIncome, 2) }}</div>
            </div>
        </div>
    </div>
    <div class="col-4">
        <div class="d-flex align-items-center gap-2 p-3 rounded" style="background:#fee2e2;">
            <i class="bi bi-arrow-up-circle text-danger" style="font-size:20px;"></i>
            <div>
                <div style="font-size:11px;color:#991b1b;font-weight:600;">TOTAL EXPENSE</div>
                <div class="fw-bold text-danger">${{ number_format($filteredExpense, 2) }}</div>
            </div>
        </div>
    </div>
    <div class="col-4">
        <div class="d-flex align-items-center gap-2 p-3 rounded"
             style="background:{{ ($filteredIncome - $filteredExpense) >= 0 ? '#dbeafe' : '#fee2e2' }}">
            <i class="bi bi-calculator" style="font-size:20px;color:var(--lions-blue)"></i>
            <div>
                <div style="font-size:11px;color:var(--lions-blue);font-weight:600;">NET</div>
                <div class="fw-bold" style="color:{{ ($filteredIncome - $filteredExpense) >= 0 ? 'var(--lions-blue)' : '#c0392b' }}">
                    ${{ number_format($filteredIncome - $filteredExpense, 2) }}
                </div>
            </div>
        </div>
    </div>
</div>

{{-- ── Transaction Table ───────────────────────────────────────────────────── --}}
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0">
            <i class="bi bi-table me-2" style="color:var(--lions-gold)"></i>
            Transactions
            <span class="badge bg-secondary ms-1" style="font-size:11px">{{ $transactions->total() }}</span>
        </h5>
    </div>

    <div class="table-responsive">
        <table class="table mb-0">
            <thead>
                <tr>
                    <th>
                        <a href="{{ request()->fullUrlWithQuery(['sort' => 'transaction_date', 'sort_dir' => request('sort_dir') === 'asc' ? 'desc' : 'asc']) }}"
                           class="text-decoration-none text-secondary">
                            Date <i class="bi bi-arrow-down-up ms-1"></i>
                        </a>
                    </th>
                    <th>Account</th>
                    <th>
                        <a href="{{ request()->fullUrlWithQuery(['sort' => 'type', 'sort_dir' => request('sort_dir') === 'asc' ? 'desc' : 'asc']) }}"
                           class="text-decoration-none text-secondary">
                            Type <i class="bi bi-arrow-down-up ms-1"></i>
                        </a>
                    </th>
                    <th>Category</th>
                    <th>Description</th>
                    <th>Reference</th>
                    <th class="text-end">
                        <a href="{{ request()->fullUrlWithQuery(['sort' => 'amount', 'sort_dir' => request('sort_dir') === 'asc' ? 'desc' : 'asc']) }}"
                           class="text-decoration-none text-secondary">
                            Amount <i class="bi bi-arrow-down-up ms-1"></i>
                        </a>
                    </th>
                    <th class="text-center">Rec.</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @forelse($transactions as $tx)
                <tr>
                    <td style="white-space:nowrap;font-size:13px">
                        {{ $tx->transaction_date->format('d M Y') }}
                    </td>
                    <td>
                        <span class="badge {{ $tx->account->type === 'administrative' ? 'badge-admin' : 'badge-activity' }}" style="font-size:11px">
                            {{ $tx->account->type === 'administrative' ? 'Admin' : 'Activity' }}
                        </span>
                    </td>
                    <td>
                        <span class="badge {{ $tx->type === 'income' ? 'badge-income' : 'badge-expense' }}" style="font-size:11px">
                            {{ $tx->type_badge }}
                        </span>
                    </td>
                    <td style="font-size:13px">{{ $tx->category }}</td>
                    <td style="font-size:13px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">
                        {{ $tx->description ?? '—' }}
                    </td>
                    <td style="font-size:12px;color:#6b7280">{{ $tx->reference_no ?? '—' }}</td>
                    <td class="text-end fw-semibold {{ $tx->type === 'income' ? 'text-success' : 'text-danger' }}">
                        {{ $tx->type === 'income' ? '+' : '−' }}${{ number_format($tx->amount, 2) }}
                    </td>
                    <td class="text-center">
                        <button class="btn btn-sm p-0 border-0 bg-transparent reconcile-btn"
                                data-id="{{ $tx->id }}"
                                data-reconciled="{{ $tx->is_reconciled ? '1' : '0' }}"
                                title="{{ $tx->is_reconciled ? 'Reconciled — click to unmark' : 'Mark as reconciled' }}">
                            <i class="bi {{ $tx->is_reconciled ? 'bi-check-circle-fill text-success' : 'bi-circle text-secondary' }}"
                               style="font-size:16px"></i>
                        </button>
                    </td>
                    <td style="white-space:nowrap">
                        <a href="{{ route('transactions.show', $tx) }}" class="btn btn-sm btn-outline-secondary btn-sm py-0">
                            <i class="bi bi-eye"></i>
                        </a>
                        <a href="{{ route('transactions.edit', $tx) }}" class="btn btn-sm btn-outline-primary py-0">
                            <i class="bi bi-pencil"></i>
                        </a>
                        <form method="POST" action="{{ route('transactions.destroy', $tx) }}" class="d-inline"
                              onsubmit="return confirm('Delete this transaction? This cannot be undone.')">
                            @csrf @method('DELETE')
                            <button class="btn btn-sm btn-outline-danger py-0">
                                <i class="bi bi-trash"></i>
                            </button>
                        </form>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="9" class="text-center py-5 text-muted">
                        <i class="bi bi-inbox" style="font-size:32px;"></i>
                        <div class="mt-2">No transactions found.</div>
                        <a href="{{ route('transactions.create') }}" class="btn btn-lions btn-sm mt-2">
                            Record First Transaction
                        </a>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    @if($transactions->hasPages())
    <div class="card-footer d-flex justify-content-between align-items-center" style="background:#fafbfd">
        <span style="font-size:13px;color:#6b7280">
            Showing {{ $transactions->firstItem() }}–{{ $transactions->lastItem() }} of {{ $transactions->total() }} transactions
        </span>
        {{ $transactions->links('pagination::bootstrap-5') }}
    </div>
    @endif
</div>

@endsection

@push('scripts')
<script>
// ── AJAX Reconcile Toggle ─────────────────────────────────────────────────────
document.querySelectorAll('.reconcile-btn').forEach(btn => {
    btn.addEventListener('click', function () {
        const id = this.dataset.id;
        fetch(`/transactions/${id}/reconcile`, {
            method: 'PATCH',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                'Accept': 'application/json',
            }
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                const icon = this.querySelector('i');
                if (data.is_reconciled) {
                    icon.className = 'bi bi-check-circle-fill text-success';
                    this.title = 'Reconciled — click to unmark';
                } else {
                    icon.className = 'bi bi-circle text-secondary';
                    this.title = 'Mark as reconciled';
                }
            }
        });
    });
});
</script>
@endpush