@extends('layouts.admin')

@section('title', 'Transaction Reports')
@section('page-title', 'Transaction Reports')

@section('content')
<div class="card shadow">
    <div class="card-header bg-primary text-white py-3">
        <div class="d-flex justify-content-between align-items-center">
            <h5 class="mb-0">Transaction Reports</h5>
            <div class="btn-group">
                <button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown">
                    <i class="fas fa-download me-2"></i>Export
                </button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#" id="exportCSV">CSV</a></li>
                    <li><a class="dropdown-item" href="#" id="exportPDF">PDF</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="card-body">
        <!-- Filters -->
        <div class="row mb-4">
            <div class="col-md-12">
                <form id="filterForm" class="row g-3">
                    <div class="col-md-3">
                        <label for="user_id" class="form-label">User</label>
                        <select class="form-control" id="user_id" name="user_id">
                            <option value="">All Users</option>
                            @foreach($users as $user)
                                <option value="{{ $user->id }}">{{ $user->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label for="type" class="form-label">Type</label>
                        <select class="form-control" id="type" name="type">
                            <option value="">All Types</option>
                            <option value="topup">Top-up</option>
                            <option value="sms_cost">SMS Cost</option>
                            <option value="referral">Referral</option>
                            <option value="withdrawal">Withdrawal</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label for="status" class="form-label">Status</label>
                        <select class="form-control" id="status" name="status">
                            <option value="">All Status</option>
                            <option value="approved">Approved</option>
                            <option value="pending">Pending</option>
                            <option value="rejected">Rejected</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label for="start_date" class="form-label">Start Date</label>
                        <input type="date" class="form-control" id="start_date" name="start_date">
                    </div>
                    <div class="col-md-2">
                        <label for="end_date" class="form-label">End Date</label>
                        <input type="date" class="form-control" id="end_date" name="end_date">
                    </div>
                    <div class="col-md-1 d-flex align-items-end">
                        <button type="submit" class="btn btn-primary me-2">
                            <i class="fas fa-filter me-2"></i>Filter
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Statistics -->
        <div class="row mb-4">
            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card border-left-primary shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                    Total Transactions</div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['total_transactions'] }}</div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-exchange-alt fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card border-left-success shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                    Total Amount</div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800">৳{{ number_format($stats['total_amount'], 2) }}</div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-money-bill-wave fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card border-left-warning shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                    Pending</div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['pending'] }}</div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-clock fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card border-left-info shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                    Top-ups</div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['topups'] }}</div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-credit-card fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Reports Table -->
        <div class="table-responsive">
            <table class="table table-bordered table-hover" id="transactionReportsTable">
                <thead class="table-dark">
                    <tr>
                        <th>ID</th>
                        <th>User</th>
                        <th>Type</th>
                        <th>Amount</th>
                        <th>Previous Balance</th>
                        <th>New Balance</th>
                        <th>Description</th>
                        <th>Status</th>
                        <th>Date</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($transactions as $transaction)
                    <tr>
                        <td>{{ $transaction->id }}</td>
                        <td>
                            <div class="d-flex align-items-center">
                                <div class="avatar bg-primary text-white rounded-circle me-2" 
                                     style="width: 30px; height: 30px; line-height: 30px; text-align: center; font-size: 12px;">
                                    {{ strtoupper(substr($transaction->user->name, 0, 1)) }}
                                </div>
                                {{ $transaction->user->name }}
                            </div>
                        </td>
                        <td>
                            @php
                                $typeClass = [
                                    'topup' => 'success',
                                    'sms_cost' => 'danger',
                                    'referral' => 'info',
                                    'withdrawal' => 'warning'
                                ][$transaction->type] ?? 'secondary';
                            @endphp
                            <span class="badge bg-{{ $typeClass }}">
                                {{ ucfirst($transaction->type) }}
                            </span>
                        </td>
                        <td>
                            <strong class="{{ $transaction->type === 'topup' || $transaction->type === 'referral' ? 'text-success' : 'text-danger' }}">
                                ৳{{ number_format($transaction->amount, 2) }}
                            </strong>
                        </td>
                        <td>৳{{ number_format($transaction->previous_balance, 2) }}</td>
                        <td>৳{{ number_format($transaction->new_balance, 2) }}</td>
                        <td>{{ $transaction->description }}</td>
                        <td>
                            @php
                                $statusClass = [
                                    'approved' => 'success',
                                    'pending' => 'warning',
                                    'rejected' => 'danger'
                                ][$transaction->status] ?? 'secondary';
                            @endphp
                            <span class="badge bg-{{ $statusClass }}">
                                {{ ucfirst($transaction->status) }}
                            </span>
                        </td>
                        <td>{{ $transaction->created_at->format('M j, Y H:i') }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <div class="d-flex justify-content-between align-items-center mt-3">
            <div>Showing {{ $transactions->firstItem() }} to {{ $transactions->lastItem() }} of {{ $transactions->total() }} records</div>
            <div>
                {{ $transactions->links() }}
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Filter form submission
    $('#filterForm').submit(function(e) {
        e.preventDefault();
        loadTransactionReports();
    });

    // Export functionality
    $('#exportCSV').click(function() {
        exportTransactionReport('csv');
    });

    $('#exportPDF').click(function() {
        exportTransactionReport('pdf');
    });

    function loadTransactionReports() {
        const formData = $('#filterForm').serialize();
        // AJAX call to load filtered data
        $.ajax({
            url: '{{ route("admin.reports.transactions") }}',
            data: formData,
            success: function(response) {
                // Update table and statistics
                console.log('Transaction reports loaded', response);
            }
        });
    }

    function exportTransactionReport(format) {
        const formData = $('#filterForm').serialize();
        window.location.href = `{{ route("admin.reports.transactions.export") }}?${formData}&format=${format}`;
    }
});
</script>
@endpush