@extends('layouts.sidebar')
@section('content')

<div class="container">
    <h2 class="mb-4">Report Dashboard</h2>
    <!-- Tiles Row -->

    <!-- Font Awesome for icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
    <style>
        .dashboard-tile {
            background:#fff;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            border-left: 6px solid #007bff;
            transition: box-shadow 0.2s;
            min-height: 120px;
        }
        .dashboard-tile.tile-2 { border-left-color: #28a745; }
        .dashboard-tile.tile-3 { border-left-color: #ffc107; }
        .dashboard-tile.tile-4 { border-left-color: #17a2b8; }
        .dashboard-tile.tile-5 { border-left-color: #6610f2; }
        .dashboard-tile.tile-6 { border-left-color: #fd7e14; }
        .dashboard-tile.tile-7 { border-left-color: #e83e8c; }
        .dashboard-tile.tile-8 { border-left-color: #343a40; }
        .dashboard-tile .tile-icon {
            font-size: 2.2rem;
            margin-bottom: 0.5rem;
            color: #007bff;
        }
        .dashboard-tile.tile-2 .tile-icon { color: #28a745; }
        .dashboard-tile.tile-3 .tile-icon { color: #ffc107; }
        .dashboard-tile.tile-4 .tile-icon { color: #17a2b8; }
        .dashboard-tile.tile-5 .tile-icon { color: #6610f2; }
        .dashboard-tile.tile-6 .tile-icon { color: #fd7e14; }
        .dashboard-tile.tile-7 .tile-icon { color: #e83e8c; }
        .dashboard-tile.tile-8 .tile-icon { color: #343a40; }
    </style>
    <div class="row mb-4">
        <div class="col-lg-9">
            <div class="row">
                <div class="col-md-4 col-12 mb-3">
                    <div class="card text-center dashboard-tile tile-6">
                        <div class="card-body">
                            <div class="tile-icon"><i class="fa fa-coins"></i></div>
                            <h6 class="card-title">Revenue (Top-ups)</h6>
                            <h3 class="mb-0">${{ number_format($topupRevenue ?? 0, 2) }}</h3>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-12 mb-3">
                    <div class="card text-center dashboard-tile tile-7">
                        <div class="card-body">
                            <div class="tile-icon"><i class="fa fa-credit-card"></i></div>
                            <h6 class="card-title">Revenue (Subscriptions)</h6>
                            <h3 class="mb-0">${{ number_format($subscriptionRevenue ?? 0, 2) }}</h3>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-12 mb-3">
                    <div class="card text-center dashboard-tile tile-2">
                        <div class="card-body">
                            <div class="tile-icon"><i class="fa fa-check-circle"></i></div>
                            <h6 class="card-title">Active Subscriptions</h6>
                            <h3 class="mb-0">{{ $activeSubscriptions ?? 0 }}</h3>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-12 mb-3">
                    <div class="card text-center dashboard-tile tile-1">
                        <div class="card-body">
                            <div class="tile-icon"><i class="fa fa-users"></i></div>
                            <h6 class="card-title">Total Users</h6>
                            <h3 class="mb-0">{{ $totalUsers ?? 0 }}</h3>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-12 mb-3">
                    <div class="card text-center dashboard-tile tile-3">
                        <div class="card-body">
                            <div class="tile-icon"><i class="fa fa-user-check"></i></div>
                            <h6 class="card-title">Total Subscribers</h6>
                            <h3 class="mb-0">{{ $totalSubscriptions ?? 0 }}</h3>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-12 mb-3">
                    <div class="card text-center dashboard-tile tile-5">
                        <div class="card-body">
                            <div class="tile-icon"><i class="fa fa-users-cog"></i></div>
                            <h6 class="card-title">Total Team</h6>
                            <h3 class="mb-0">{{ $teamsCount ?? 0 }}</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-3">
            <div class="card mb-4 shadow subscriber-plan-card" style="background: #f8fff8;display: flex; flex-direction: column; justify-content: center; align-items: center;">
                <div class="card-body d-flex flex-column align-items-center justify-content-center" style="width:100%;">
                    <div class="tile-icon mb-1"><i class="fa fa-chart-pie"></i></div>
                    <h6 class="card-title">Subscribers by Plan</h6>
                    <h3 class="mb-2"><span id="subscriberTotalTile">0</span></h3>
                    <div style="width: 180px; height: 180px; margin: 0 auto;">
                        <canvas id="subscriberPlanChartTile" style="max-height: 170px;"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Example static data, replace with AJAX or blade variables for real data
const topupData = {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    datasets: [{
        label: 'Top-up Revenue',
        data: [1200, 1500, 1100, 1800, 1700, 2000],
        backgroundColor: 'rgba(54, 162, 235, 0.5)',
        borderColor: 'rgba(54, 162, 235, 1)',
        borderWidth: 1
    }]
};
new Chart(document.getElementById('topupChart'), {
    type: 'bar',
    data: topupData,
    options: { responsive: true }
});

// Example static data for subscribers by plan (replace with blade variables for real data)
var planData = @json($subscribersByPlan);
const subscriberPlanData = {
    labels: planData.map(plan => plan.plan_name),
    datasets: [{
        label: 'Subscribers',
        data: planData.map(plan => plan.total),
        backgroundColor: [
            'rgba(54, 162, 235, 0.7)',
            'rgba(255, 206, 86, 0.7)',
            'rgba(75, 192, 192, 0.7)'
        ],
        borderColor: [
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)'
        ],
        borderWidth: 1
    }]
};
// Show total subscribers count and render pie chart in tile
document.addEventListener('DOMContentLoaded', function() {
    const total = subscriberPlanData.datasets[0].data.reduce((a, b) => a + b, 0);
    var tileTotal = document.getElementById('subscriberTotalTile');
    if (tileTotal) tileTotal.textContent = 'Total Subscribers:'+total;
    // Render pie chart in tile
    var pieTile = document.getElementById('subscriberPlanChartTile');
    if (pieTile) {
        new Chart(pieTile, {
            type: 'pie',
            data: subscriberPlanData,
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        display: true,
                        position: 'bottom',
                        labels: { boxWidth: 14, font: { size: 11 } }
                    }
                }
            }
        });
    }
});



</script>
@endsection