@extends('layouts.admin')

@section('title', 'Transactions')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">All Transactions <span class="page-title-count">({{ $transactions->total() ?? 0 }})</span></h1>
    </div>
    <div class="page-actions">
        <a href="{{ route('admin.transactions.export', request()->query()) }}" class="btn btn-outline">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 11v2a1 1 0 001 1h8a1 1 0 001-1v-2M8 3v8M5 8l3 3 3-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
            Export
        </a>
    </div>
</div>

<div class="stats-grid stats-grid-4">
    <x-stat-card title="Total Transactions" value="{{ number_format($totalTransactions ?? 0) }}" color="blue">
        <x-slot:icon>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M4 7h16M4 12h16M4 17h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
        </x-slot:icon>
    </x-stat-card>
    <x-stat-card title="Total Volume" value="{{ site_money($totalVolume ?? 0) }}" color="green">
        <x-slot:icon>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5"/><path d="M12 7v10M9 9h6c1.1 0 2 .9 2 2s-.9 2-2 2H9M9 13h6c1.1 0 2 .9 2 2s-.9 2-2 2H9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
        </x-slot:icon>
    </x-stat-card>
    <x-stat-card title="Pending" value="{{ number_format($pendingCount ?? 0) }}" color="orange">
        <x-slot:icon>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5"/><path d="M12 7v5l3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
        </x-slot:icon>
    </x-stat-card>
    <x-stat-card title="Failed" value="{{ number_format($failedCount ?? 0) }}" color="red">
        <x-slot:icon>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5"/><path d="M15 9l-6 6M9 9l6 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
        </x-slot:icon>
    </x-stat-card>
</div>

<div class="card" style="margin-top: 1.5rem;">
    <div class="card-header">
        <form method="GET" action="{{ route('admin.transactions') }}" class="filter-bar filter-bar-wrap">
            <div class="filter-search">
                <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><circle cx="8" cy="8" r="5.5" stroke="currentColor" stroke-width="1.5"/><path d="M12 12l4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Search customer, reference..." class="filter-search-input">
            </div>
            <div class="filter-group">
                <input type="date" name="date_from" value="{{ request('date_from') }}" class="form-input" placeholder="From">
            </div>
            <div class="filter-group">
                <input type="date" name="date_to" value="{{ request('date_to') }}" class="form-input" placeholder="To">
            </div>
            <div class="filter-group">
                <select name="type" class="filter-select">
                    <option value="">All Types</option>
                    <option value="credit" {{ request('type') === 'credit' ? 'selected' : '' }}>Credit</option>
                    <option value="debit" {{ request('type') === 'debit' ? 'selected' : '' }}>Debit</option>
                    <option value="deposit" {{ request('type') === 'deposit' ? 'selected' : '' }}>Deposit</option>
                    <option value="withdrawal" {{ request('type') === 'withdrawal' ? 'selected' : '' }}>Withdrawal</option>
                    <option value="transfer" {{ request('type') === 'transfer' ? 'selected' : '' }}>Transfer</option>
                </select>
            </div>
            <div class="filter-group">
                <select name="status" class="filter-select">
                    <option value="">All Status</option>
                    <option value="completed" {{ request('status') === 'completed' ? 'selected' : '' }}>Completed</option>
                    <option value="pending" {{ request('status') === 'pending' ? 'selected' : '' }}>Pending</option>
                    <option value="failed" {{ request('status') === 'failed' ? 'selected' : '' }}>Failed</option>
                    <option value="reversed" {{ request('status') === 'reversed' ? 'selected' : '' }}>Reversed</option>
                </select>
            </div>
            <div class="filter-group">
                <input type="number" name="min_amount" value="{{ request('min_amount') }}" class="form-input" placeholder="Min amount" step="0.01">
            </div>
            <div class="filter-group">
                <input type="number" name="max_amount" value="{{ request('max_amount') }}" class="form-input" placeholder="Max amount" step="0.01">
            </div>
            <button type="submit" class="btn btn-primary btn-sm">Filter</button>
            @if(request()->hasAny(['search','date_from','date_to','type','status','min_amount','max_amount']))
            <a href="{{ route('admin.transactions') }}" class="btn btn-outline btn-sm">Clear</a>
            @endif
        </form>
    </div>

    @if($transactions->isNotEmpty())
    <form method="POST" action="{{ route('admin.transactions.bulk') }}" id="bulk-delete-form">
        @csrf
        @method('DELETE')
        <div class="card-header" style="border-top: 1px solid var(--border, #e2e8f0);">
            <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Delete all selected transactions? This cannot be undone.')" disabled id="bulk-delete-btn">
                Delete Selected
            </button>
        </div>
    </form>
    @endif

    <x-data-table :emptyMessage="'No transactions found.'" :paginator="$transactions ?? null">
        <x-slot:thead>
            <th style="width: 40px;">
                @if($transactions->isNotEmpty())
                <input type="checkbox" class="form-checkbox" id="select-all" title="Select all on page">
                @endif
            </th>
            <th>Reference</th>
            <th>Customer</th>
            <th>Type</th>
            <th>Amount</th>
            <th>Fee</th>
            <th>Status</th>
            <th>Date</th>
            <th>Actions</th>
        </x-slot:thead>
        <x-slot:tbody>
            @forelse($transactions ?? [] as $transaction)
            <tr>
                <td>
                    <input type="checkbox" class="form-checkbox bulk-check" name="ids[]" value="{{ $transaction->id }}" form="bulk-delete-form">
                </td>
                <td><span class="text-mono">{{ $transaction->reference }}</span></td>
                <td>{{ $transaction->user->name ?? 'N/A' }}</td>
                <td><span class="badge badge-{{ $transaction->type === 'credit' || $transaction->type === 'deposit' ? 'green' : 'blue' }}">{{ ucfirst($transaction->type) }}</span></td>
                <td class="text-semibold">{{ site_money($transaction->amount) }}</td>
                <td>{{ site_money($transaction->fee ?? 0) }}</td>
                <td><span class="badge badge-{{ $transaction->status === 'completed' ? 'green' : ($transaction->status === 'pending' ? 'orange' : 'red') }}">{{ ucfirst($transaction->status) }}</span></td>
                <td>{{ $transaction->created_at->format('M d, Y H:i') }}</td>
                <td>
                    <div class="table-actions">
                        <a href="{{ route('admin.transactions.show', $transaction->id) }}" class="btn btn-sm btn-outline">View</a>
                        @if($transaction->status === 'pending')
                        <form method="POST" action="{{ route('admin.transactions.approve', $transaction->id) }}" class="inline">
                            @csrf
                            @method('PATCH')
                            <button type="submit" class="btn btn-sm btn-outline btn-green" onclick="return confirm('Approve this transaction?')">Approve</button>
                        </form>
                        @endif
                        @if(in_array($transaction->status, ['completed', 'pending']) && $transaction->can_reverse)
                        <form method="POST" action="{{ route('admin.transactions.reverse', $transaction->id) }}" class="inline">
                            @csrf
                            @method('POST')
                            <button type="submit" class="btn btn-sm btn-outline btn-orange" onclick="return confirm('Reverse this transaction? This action will create a reversal entry.')">Reverse</button>
                        </form>
                        @endif
                        <form method="POST" action="{{ route('admin.transactions.destroy', $transaction->id) }}" class="inline">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-sm btn-outline btn-danger" title="Delete" onclick="return confirm('Are you sure you want to delete this transaction?')">Delete</button>
                        </form>
                    </div>
                </td>
            </tr>
@empty
            <tr>
                <td colspan="9">
                    <div class="data-table-empty-content">
                        <svg width="48" height="48" viewBox="0 0 48 48" fill="none"><circle cx="24" cy="24" r="24" fill="#F1F5F9"/><path d="M16 20h16M16 26h10" stroke="#94A3B8" stroke-width="1.5" stroke-linecap="round"/><rect x="12" y="14" width="24" height="20" rx="3" stroke="#94A3B8" stroke-width="1.5"/></svg>
                        <p>No transactions found.</p>
                    </div>
                </td>
            </tr>
            @endforelse
        </x-slot:tbody>
    </x-data-table>
</div>
@endsection

@push('scripts')
<script>
(function () {
    const selectAll = document.getElementById('select-all');
    const checkboxes = document.querySelectorAll('.bulk-check');
    const bulkBtn = document.getElementById('bulk-delete-btn');

    if (!selectAll || !bulkBtn) return;

    function updateBulkState() {
        const checked = document.querySelectorAll('.bulk-check:checked');
        bulkBtn.disabled = checked.length === 0;
        if (selectAll) {
            selectAll.checked = checkboxes.length > 0 && checked.length === checkboxes.length;
        }
    }

    checkboxes.forEach(cb => cb.addEventListener('change', updateBulkState));
    selectAll.addEventListener('change', function () {
        checkboxes.forEach(cb => cb.checked = selectAll.checked);
        updateBulkState();
    });
})();
</script>
@endpush