@extends('admin.layouts.app')

@section('title', 'Transactions')

@section('content')
    <div class="container-fluid">
        <!-- Header Section -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h2 class="text-warning mb-1">
                            <i class="fas fa-exchange-alt me-2"></i>Transaction History
                        </h2>
                        <p class="text-white mb-0">Manage and monitor all financial transactions</p>
                    </div>
                    <div class="d-flex gap-2">
                        <button class="btn btn-dark border-warning text-warning" data-bs-toggle="modal"
                            data-bs-target="#filterModal">
                            <i class="fas fa-filter me-2"></i>Filter
                        </button>
                        <button class="btn btn-warning" onclick="exportTransactions()">
                            <i class="fas fa-file-export me-2"></i>Export
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Search Input -->
        <div class="row mb-4">
            <div class="col-12">
                <label for="searchInput" class="form-label text-warning"><span>Search</span> Transactions</label>
                <input type="text" id="searchInput" class="form-control bg-dark text-white border-warning"
                    placeholder="<span>Search</span> by Date, User, Type, Amount, Description, or Status..."
                    style="max-width: 300px;">
            </div>
        </div>

        <!-- Statistics Cards -->
        <div class="row mb-4">
            <div class="col-md-3">
                <div class="card bg-dark border-warning">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="text-white mb-2">Total Volume</h6>
                                <h3 class="text-warning mb-0">${{ number_format($transactions->sum('amount') ?? 0, 2) }}
                                </h3>
                            </div>
                            <div class="bg-warning bg-opacity-10 p-3 rounded">
                                <i class="fas fa-dollar-sign text-warning fa-2x"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-dark border-success">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="text-white mb-2">Total Deposits</h6>
                                <h3 class="text-success mb-0">
                                    ${{ number_format($transactions->where('type', 'deposit')->sum('amount') ?? 0, 2) }}
                                </h3>
                            </div>
                            <div class="bg-success bg-opacity-10 p-3 rounded">
                                <i class="fas fa-arrow-down text-success fa-2x"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-dark border-info">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="text-white mb-2">Total Withdrawals</h6>
                                <h3 class="text-info mb-0">
                                    ${{ number_format($transactions->where('type', 'withdrawal')->sum('amount') ?? 0, 2) }}
                                </h3>
                            </div>
                            <div class="bg-info bg-opacity-10 p-3 rounded">
                                <i class="fas fa-arrow-up text-info fa-2x"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-dark border-danger">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="text-white mb-2">Pending Amount</h6>
                                <h3 class="text-danger mb-0">
                                    ${{ number_format($transactions->where('status', 'pending')->sum('amount') ?? 0, 2) }}
                                </h3>
                            </div>
                            <div class="bg-danger bg-opacity-10 p-3 rounded">
                                <i class="fas fa-clock text-danger fa-2x"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Transactions Table -->
        <div class="card bg-dark border-warning">
            <div class="card-body">
                @if ($transactions->isEmpty())
                    <div class="alert alert-warning text-center">
                        No transactions found.
                    </div>
                @else
                    <div class="table-responsive">
                        <table class="table table-dark table-hover align-middle" id="transactionsTable">
                            <thead>
                                <tr>
                                    <th class="text-warning"><i class="fas fa-calendar me-2"></i>Date & Time</th>
                                    <th class="text-warning"><i class="fas fa-user me-2"></i>User</th>
                                    <th class="text-warning"><i class="fas fa-tag me-2"></i>Type</th>
                                    <th class="text-warning"><i class="fas fa-dollar-sign me-2"></i>Amount</th>
                                    <th class="text-warning"><i class="fas fa-info-circle me-2"></i>Description</th>
                                    <th class="text-warning"><i class="fas fa-check-circle me-2"></i>Status</th>
                                    <th class="text-warning"><i class="fas fa-check-circle me-2"></i>Details</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($transactions as $transaction)
                                    <tr>
                                        <td class="text-white">
                                            <div>
                                                {{ $transaction->created_at ? $transaction->created_at->format('M d, Y') : 'N/A' }}
                                            </div>
                                            <small
                                                class="text-muted">{{ $transaction->created_at ? $transaction->created_at->format('h:i A') : 'N/A' }}</small>
                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <img src="https://ui-avatars.com/api/?name={{ urlencode($transaction->user->name ?? 'Unknown') }}&background=ffc107&color=000"
                                                    alt="{{ $transaction->user->name ?? 'Unknown' }}"
                                                    class="rounded-circle me-2" style="width: 32px; height: 32px;">
                                                <div>
                                                    <a href="{{ $transaction->user ? route('admin.users.details', $transaction->user->id) : '#' }}"
                                                        class="text-warning text-decoration-none">
                                                        {{ $transaction->user->name ?? 'Unknown User' }}
                                                    </a>
                                                    <div class="text-muted small">ID:
                                                        #{{ $transaction->user->id ?? 'N/A' }}</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <span
                                                class="fallback-type">{{ ucfirst($transaction->type ?? 'unknown') }}</span>
                                        </td>
                                        <td
                                            class="text-{{ $transaction->type === 'deposit' ? 'success' : 'info' }} fw-bold">
                                            ${{ number_format($transaction->amount ?? 0, 2) }}
                                        </td>
                                        <td class="text-white">{{ $transaction->description ?? 'N/A' }}</td>
                                        <td>
                                            <span
                                                class="fallback-status">{{ ucfirst($transaction->status ?? 'unknown') }}</span>
                                        </td>
                                        <td>
                                            <a href="{{ route('admin.transactions.show', $transaction->id) }}"
                                                class="btn btn-dark border-warning text-warning">
                                                <i class="fas fa-eye"></i> View Details
                                            </a>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif

                <div class="d-flex justify-content-between align-items-center mt-4">
                    <div class="text-muted">
                        Showing {{ $transactions->firstItem() ?? 0 }} to {{ $transactions->lastItem() ?? 0 }} of
                        {{ $transactions->total() ?? 0 }} transactions
                    </div>
                    <div>
                        {{ $transactions->links() }}
                    </div>
                </div>
            </div>
        </div>

        <!-- Filter Modal -->
        <div class="modal fade" id="filterModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content bg-dark border-warning">
                    <div class="modal-header border-warning">
                        <h5 class="modal-title text-warning">
                            <i class="fas fa-filter me-2"></i>Filter Transactions
                        </h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form id="filterForm">
                            <div class="mb-3">
                                <label class="form-label text-warning">Transaction Type</label>
                                <select id="filterType" class="form-select bg-dark text-white border-warning"
                                    name="type">
                                    <option value="">All Types</option>
                                    <option value="deposit">Deposits</option>
                                    <option value="withdrawal">Withdrawals</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label class="form-label text-warning">Status</label>
                                <select id="filterStatus" class="form-select bg-dark text-white border-warning"
                                    name="status">
                                    <option value="">All Status</option>
                                    <option value="completed">Completed</option>
                                    <option value="pending">Pending</option>
                                    <option value="rejected">Rejected</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label class="form-label text-warning">Date Range</label>
                                <div class="input-group">
                                    <input type="date" id="filterStartDate"
                                        class="form-control bg-dark text-white border-warning" name="start_date">
                                    <span class="input-group-text bg-dark text-warning border-warning">to</span>
                                    <input type="date" id="filterEndDate"
                                        class="form-control bg-dark text-white border-warning" name="end_date">
                                </div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label text-warning">Amount Range</label>
                                <div class="input-group">
                                    <span class="input-group-text bg-dark text-warning border-warning">$</span>
                                    <input type="number" id="filterMinAmount"
                                        class="form-control bg-dark text-white border-warning" placeholder="Min"
                                        name="min_amount">
                                    <span class="input-group-text bg-dark text-warning border-warning">to</span>
                                    <input type="number" id="filterMaxAmount"
                                        class="form-control bg-dark text-white border-warning" placeholder="Max"
                                        name="max_amount">
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer border-warning">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="button" class="btn btn-warning" onclick="applyFilters()">Apply Filters</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- View Transaction Modal -->
        <div class="modal fade" id="viewModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content bg-dark border-warning">
                    <div class="modal-header border-warning">
                        <h5 class="modal-title text-warning">
                            <i class="fas fa-info-circle me-2"></i>Transaction Details
                        </h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <h6 class="text-warning">Transaction ID</h6>
                                <p class="text-white" id="view-id">N/A</p>
                            </div>
                            <div class="col-md-6 mb-3">
                                <h6 class="text-warning">User</h6>
                                <p class="text-white" id="view-user">N/A</p>
                            </div>
                            <div class="col-md-6 mb-3">
                                <h6 class="text-warning">Type</h6>
                                <p class="text-white" id="view-type-details"
                                    style="display: block !important; visibility: visible !important;">N/A</p>
                            </div>
                            <div class="col-md-6 mb-3">
                                <h6 class="text-warning">Amount</h6>
                                <p class="text-white" id="view-amount">N/A</p>
                            </div>
                            <div class="col-md-6 mb-3">
                                <h6 class="text-warning">Status</h6>
                                <p class="text-white" id="view-status"
                                    style="display: block !important; visibility: visible !important;">N/A</p>
                            </div>
                            <div class="col-md-6 mb-3">
                                <h6 class="text-warning">Date & Time</h6>
                                <p class="text-white" id="view-date">N/A</p>
                            </div>
                            <div class="col-12 mb-3">
                                <h6 class="text-warning">Description</h6>
                                <p class="text-white" id="view-description">N/A</p>
                            </div>
                            <div class="col-12 mb-3">
                                <h6 class="text-warning">Admin Notes</h6>
                                <p class="text-white" id="view-notes">N/A</p>
                            </div>
                            <div class="col-12 mb-3" id="screenshot-container">
                                <h6 class="text-warning">Screenshot</h6>
                                <div id="view-screenshot">No screenshot available</div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer border-warning">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @push('styles')
        <style>
            .badge,
            .fallback-type,
            .fallback-status {
                display: inline-block !important;
                visibility: visible !important;
                opacity: 1 !important;
            }

            .fallback-type,
            .fallback-status {
                display: none;
            }

            .table td,
            .table th {
                display: table-cell !important;
                visibility: visible !important;
                opacity: 1 !important;
            }
        </style>
    @endpush

    @push('scripts')
        <script>
            // Search functionality
            document.getElementById('searchInput').addEventListener('input', function() {
                const searchValue = this.value.toLowerCase();
                const table = document.getElementById('transactionsTable');
                const rows = table.getElementsByTagName('tbody')[0].getElementsByTagName('tr');

                for (let row of rows) {
                    const cells = row.getElementsByTagName('td');
                    let match = false;

                    // Check columns: Date & Time (0), User (1), Type (2), Amount (3), Description (4), Status (5)
                    for (let i of [0, 1, 2, 3, 4, 5]) {
                        if (cells[i]) {
                            // For Date & Time column, check both date and time
                            if (i === 0) {
                                const date = cells[i].getElementsByTagName('div')[0]?.textContent.toLowerCase();
                                const time = cells[i].getElementsByTagName('small')[0]?.textContent.toLowerCase();
                                if (date?.includes(searchValue) || time?.includes(searchValue)) {
                                    match = true;
                                }
                            }
                            // For User column, check name and ID
                            else if (i === 1) {
                                const name = cells[i].getElementsByTagName('a')[0]?.textContent.toLowerCase();
                                const id = cells[i].getElementsByTagName('div')[1]?.textContent.toLowerCase();
                                if (name?.includes(searchValue) || id?.includes(searchValue)) {
                                    match = true;
                                }
                            }
                            // For other columns, check text content
                            else if (cells[i].textContent.toLowerCase().includes(searchValue)) {
                                match = true;
                            }
                        }
                        if (match) break;
                    }

                    row.style.display = match ? '' : 'none';
                }
            });

            // Filter functionality
            function applyFilters() {
                const type = document.getElementById('filterType').value.toLowerCase();
                const status = document.getElementById('filterStatus').value.toLowerCase();
                const startDate = document.getElementById('filterStartDate').value;
                const endDate = document.getElementById('filterEndDate').value;
                const minAmount = parseFloat(document.getElementById('filterMinAmount').value) || 0;
                const maxAmount = parseFloat(document.getElementById('filterMaxAmount').value) || Infinity;

                const table = document.getElementById('transactionsTable');
                const rows = table.getElementsByTagName('tbody')[0].getElementsByTagName('tr');

                for (let row of rows) {
                    const cells = row.getElementsByTagName('td');
                    let match = true;

                    // Type filter (column 2)
                    if (type && cells[2]) {
                        const cellType = cells[2].textContent.toLowerCase();
                        if (cellType !== type) match = false;
                    }

                    // Status filter (column 5)
                    if (status && cells[5]) {
                        const cellStatus = cells[5].textContent.toLowerCase();
                        if (cellStatus !== status) match = false;
                    }

                    // Date range filter (column 0)
                    if ((startDate || endDate) && cells[0]) {
                        const dateText = cells[0].getElementsByTagName('div')[0]?.textContent;
                        if (dateText && dateText !== 'N/A') {
                            const rowDate = new Date(dateText);
                            if (startDate && new Date(startDate) > rowDate) match = false;
                            if (endDate && new Date(endDate) < rowDate) match = false;
                        } else {
                            match = false;
                        }
                    }

                    // Amount range filter (column 3)
                    if ((minAmount > 0 || maxAmount < Infinity) && cells[3]) {
                        const amountText = cells[3].textContent.replace('$', '').replace(/,/g, '');
                        const amount = parseFloat(amountText) || 0;
                        if (amount < minAmount || amount > maxAmount) match = false;
                    }

                    row.style.display = match ? '' : 'none';
                }

                $('#filterModal').modal('hide');
            }

            // Ensure jQuery is loaded
            if (typeof jQuery === 'undefined') {
                console.error('jQuery is not loaded');
                alert('jQuery is not loaded. Please check your layout file.');
                document.querySelectorAll('.fallback-type, .fallback-status').forEach(el => {
                    el.style.display = 'inline';
                });
            } else {
                console.log('jQuery loaded successfully');
            }

            // Ensure Bootstrap is loaded
            if (typeof bootstrap === 'undefined') {
                console.error('Bootstrap is not loaded');
                alert('Bootstrap is not loaded. Please check your layout file.');
            } else {
                console.log('Bootstrap loaded successfully');
            }

            function viewDetails(id, user, type, amount, description, status, date, notes, screenshot) {
                console.log('View Details Called:', {
                    id,
                    user,
                    type,
                    amount,
                    description,
                    status,
                    date,
                    notes,
                    screenshot
                });

                try {
                    document.getElementById('view-id').textContent = id || 'N/A';
                    document.getElementById('view-user').textContent = user || 'Unknown';
                    document.getElementById('view-type-details').textContent = type ? (type.charAt(0).toUpperCase() + type
                        .slice(1)) : 'Unknown';
                    document.getElementById('view-amount').textContent = amount ? '$' + amount : 'N/A';
                    document.getElementById('view-description').textContent = description || 'No description';
                    document.getElementById('view-status').textContent = status ? (status.charAt(0).toUpperCase() + status
                        .slice(1)) : 'Unknown';
                    document.getElementById('view-date').textContent = date || 'N/A';
                    document.getElementById('view-notes').textContent = notes || 'No notes available';

                    const screenshotContainer = document.getElementById('view-screenshot');
                    const screenshotSection = document.getElementById('screenshot-container');
                    if (screenshot && screenshot !== 'N/A' && screenshot !== '') {
                        screenshotContainer.innerHTML =
                            `<img src="${screenshot}" alt="Transaction Screenshot" class="img-fluid" style="max-height: 300px;" onerror="this.parentElement.innerHTML='Invalid screenshot URL';">`;
                        screenshotSection.style.display = 'block';
                    } else {
                        screenshotContainer.innerHTML = 'No screenshot available';
                        screenshotSection.style.display = 'block';
                    }

                    console.log('Modal content updated successfully');
                    $('#viewModal').modal('show');
                    console.log('Modal opened successfully');
                } catch (e) {
                    console.error('Modal show error:', e);
                    alert('Error opening modal: ' + e.message);
                }
            }

            function approveTransaction(id) {
                console.log('Approving transaction:', id);
                if (confirm('Are you sure you want to approve this transaction?')) {
                    fetch(`/admin/transactions/${id}/status`, {
                            method: 'PATCH',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                            },
                            body: JSON.stringify({
                                status: 'completed'
                            })
                        })
                        .then(response => {
                            console.log('Approve response:', response);
                            if (!response.ok) throw new Error('Network response was not ok');
                            return response.json();
                        })
                        .then(data => {
                            console.log('Approve data:', data);
                            if (data.success) {
                                location.reload();
                            } else {
                                alert('Failed to approve transaction: ' + (data.message || 'Unknown error'));
                            }
                        })
                        .catch(error => {
                            console.error('Approve error:', error);
                            alert('Error approving transaction: ' + error.message);
                        });
                }
            }

            function rejectTransaction(id) {
                console.log('Rejecting transaction:', id);
                if (confirm('Are you sure you want to reject this transaction?')) {
                    fetch(`/admin/transactions/${id}/status`, {
                            method: 'PATCH',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                            },
                            body: JSON.stringify({
                                status: 'rejected'
                            })
                        })
                        .then(response => {
                            console.log('Reject response:', response);
                            if (!response.ok) throw new Error('Network response was not ok');
                            return response.json();
                        })
                        .then(data => {
                            console.log('Reject data:', data);
                            if (data.success) {
                                location.reload();
                            } else {
                                alert('Failed to reject transaction: ' + (data.message || 'Unknown error'));
                            }
                        })
                        .catch(error => {
                            console.error('Reject error:', error);
                            alert('Error rejecting transaction: ' + error.message);
                        });
                }
            }

            function exportTransactions() {
                console.log('Export transactions called');
                // Implement export logic
            }

            // Debugging: Log transactions data
            console.log('Transactions:', @json($transactions->toArray()));
            $(document).ready(function() {
                console.log('Document ready, transactions count:', @json($transactions->count()));
                @foreach ($transactions as $transaction)
                    console.log('Transaction ID {{ $transaction->id }}:', {
                        type: '{{ $transaction->type ?? 'N/A' }}',
                        status: '{{ $transaction->status ?? 'N/A' }}',
                        user: '{{ addslashes($transaction->user->name ?? 'Unknown') }}',
                        description: '{{ addslashes($transaction->description ?? 'N/A') }}'
                    });
                @endforeach
                document.querySelectorAll('.badge').forEach(badge => {
                    console.log('Badge content:', badge.textContent, 'Visible:', badge.offsetParent !== null);
                });
            });
        </script>
    @endpush
@endsection