@extends('admin.layouts.app')

@section('title', 'Dashboard')

@section('content')
    <div class="container-fluid">
        <!-- Stats Cards -->
        <div class="row mb-4">
            <div class="col-12 col-md-6 col-xl-3 mb-3">
                <div class="card bg-dark border-warning dash-card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="text-warning mb-0">Total Users</h6>
                                <h3 class="text-white mb-0">{{ $totalUsers }}</h3>
                            </div>
                            <div class="avatar bg-warning bg-opacity-10 rounded-circle p-3">
                                <i class="fas fa-users text-warning fs-4"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-6 col-xl-3 mb-3">
                <div class="card bg-dark border-warning dash-card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="text-warning mb-0">Total Balance</h6>
                                <h3 class="text-white mb-0">${{ number_format($totalBalance, 2) }}</h3>
                            </div>
                            <div class="avatar bg-warning bg-opacity-10 rounded-circle p-3">
                                <i class="fas fa-wallet text-warning fs-4"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-6 col-xl-3 mb-3">
                <div class="card bg-dark border-warning dash-card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="text-warning mb-0">Active Users</h6>
                                <h3 class="text-white mb-0">{{ $activeUsers }}</h3>
                            </div>
                            <div class="avatar bg-warning bg-opacity-10 rounded-circle p-3">
                                <i class="fas fa-user-check text-warning fs-4"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-6 col-xl-3 mb-3">
                <div class="card bg-dark border-warning dash-card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="text-warning mb-0">Pending Withdrawals</h6>
                                <h3 class="text-white mb-0">{{ $pendingWithdrawals }}</h3>
                            </div>
                            <div class="avatar bg-warning bg-opacity-10 rounded-circle p-3">
                                <i class="fas fa-money-bill-wave text-warning fs-4"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Analytics Section -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card bg-dark border-warning">
                    <div class="card-header border-warning">
                        <div class="d-flex flex-column flex-md-row justify-content-between align-items-center">
                            <h5 class="text-warning mb-3 mb-md-0">
                                <i class="fas fa-chart-line me-2"></i>Analytics
                            </h5>
                            <div class="btn-group">
                                <button type="button" class="btn btn-sm btn-warning" onclick="updateChart('daily')">Daily</button>
                                <button type="button" class="btn btn-sm btn-outline-warning" onclick="updateChart('weekly')">Weekly</button>
                                <button type="button" class="btn btn-sm btn-outline-warning" onclick="updateChart('monthly')">Monthly</button>
                                <button type="button" class="btn btn-sm btn-outline-warning" onclick="updateChart('yearly')">Yearly</button>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <canvas id="analyticsChart" height="300"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!-- Notification Dropdown -->
        <div class="dropdown-menu dropdown-menu-end bg-dark border-warning p-0" id="notificationDropdown" style="width: 300px;">
            <div class="d-flex justify-content-between align-items-center p-3 border-bottom border-warning">
                <h6 class="text-warning mb-0">Notifications</h6>
                <button class="btn btn-sm btn-warning" onclick="clearAllNotifications()">
                    Clear All
                </button>
            </div>
            <div class="notification-list" style="max-height: 300px; overflow-y: auto;">
                @foreach ($notifications as $notification)
                    <div class="notification-item p-3 border-bottom border-warning" data-id="{{ $notification->id }}">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <p class="text-white mb-1">{{ $notification->message }}</p>
                                <small class="text-muted">{{ $notification->created_at->diffForHumans() }}</small>
                            </div>
                            <button class="btn btn-sm btn-outline-warning" onclick="clearNotification({{ $notification->id }})">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        // Initialize Chart
        const ctx = document.getElementById('analyticsChart').getContext('2d');
        const chart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: [],
                datasets: [{
                    label: 'Users',
                    data: [],
                    borderColor: '#ffc107',
                    tension: 0.4,
                    fill: true,
                    backgroundColor: 'rgba(255, 193, 7, 0.1)'
                }, {
                    label: 'Transactions',
                    data: [],
                    borderColor: '#0dcaf0',
                    tension: 0.4,
                    fill: true,
                    backgroundColor: 'rgba(13, 202, 240, 0.1)'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        labels: {
                            color: '#fff'
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        grid: {
                            color: 'rgba(255, 255, 255, 0.1)'
                        },
                        ticks: {
                            color: '#fff'
                        }
                    },
                    x: {
                        grid: {
                            color: 'rgba(255, 255, 255, 0.1)'
                        },
                        ticks: {
                            color: '#fff'
                        }
                    }
                }
            }
        });

        // Update chart based on time period
        function updateChart(period) {
            document.querySelectorAll('.btn-group .btn').forEach(btn => {
                btn.classList.remove('btn-warning');
                btn.classList.add('btn-outline-warning');
            });
            event.target.classList.remove('btn-outline-warning');
            event.target.classList.add('btn-warning');

            fetch(`/admin/analytics/${period}`)
                .then(response => response.json())
                .then(data => {
                    chart.data.labels = data.labels;
                    chart.data.datasets[0].data = data.users;
                    chart.data.datasets[1].data = data.transactions;
                    chart.update();
                });
        }

        // Clear single notification
        function clearNotification(id) {
            fetch(`/admin/notifications/${id}/clear`, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            }).then(() => {
                document.querySelector(`.notification-item[data-id="${id}"]`).remove();
            });
        }

        // Clear all notifications
        function clearAllNotifications() {
            fetch('/admin/notifications/clear-all', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            }).then(() => {
                document.querySelector('.notification-list').innerHTML = '';
            });
        }

        // Initialize with daily data
        updateChart('daily');
    </script>
@endsection