@extends('layouts.admin')

@section('title', 'Reports & Analytics')

@section('content')
<div class="page-header">
    <h1>Reports & Analytics</h1>
    <p class="text-muted">View detailed analytics and reports</p>
</div>

<!-- Monthly Revenue Chart -->
<div class="row mb-4">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Monthly Revenue (Last 12 Months)</h5>
            </div>
            <div class="card-body">
                <canvas id="revenueChart" height="80"></canvas>
            </div>
        </div>
    </div>
</div>

<!-- Booking Trends & Class Distribution -->
<div class="row mb-4">
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Booking Trends (Last 7 Days)</h5>
            </div>
            <div class="card-body">
                <canvas id="bookingTrendChart"></canvas>
            </div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Class Distribution</h5>
            </div>
            <div class="card-body">
                <canvas id="classDistributionChart"></canvas>
            </div>
        </div>
    </div>
</div>

<!-- User Growth -->
<div class="row mb-4">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">User Growth (Last 7 Days)</h5>
            </div>
            <div class="card-body">
                <canvas id="userGrowthChart" height="80"></canvas>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
    // Monthly Revenue Chart
    const revenueCtx = document.getElementById('revenueChart').getContext('2d');
    const monthlyRevenue = @json($monthlyRevenue);

    new Chart(revenueCtx, {
        type: 'line',
        data: {
            labels: Object.keys(monthlyRevenue),
            datasets: [{
                label: 'Revenue (Rp)',
                data: Object.values(monthlyRevenue),
                borderColor: '#667eea',
                backgroundColor: 'rgba(102, 126, 234, 0.1)',
                tension: 0.4,
                fill: true,
                pointRadius: 5,
                pointBackgroundColor: '#667eea'
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    display: true,
                    position: 'top'
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        callback: function(value) {
                            return 'Rp ' + value.toLocaleString('id-ID');
                        }
                    }
                }
            }
        }
    });

    // Booking Trends Chart
    const bookingTrendCtx = document.getElementById('bookingTrendChart').getContext('2d');
    const bookingTrends = @json($bookingTrends);

    new Chart(bookingTrendCtx, {
        type: 'bar',
        data: {
            labels: Object.keys(bookingTrends),
            datasets: [{
                label: 'Bookings',
                data: Object.values(bookingTrends),
                backgroundColor: '#764ba2'
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    display: true
                }
            },
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });

    // Class Distribution Chart
    const classDistributionCtx = document.getElementById('classDistributionChart').getContext('2d');
    const classDistribution = @json($classDistribution);

    new Chart(classDistributionCtx, {
        type: 'pie',
        data: {
            labels: classDistribution.map(d => d.class.charAt(0).toUpperCase() + d.class.slice(1)),
            datasets: [{
                data: classDistribution.map(d => d.total),
                backgroundColor: ['#667eea', '#764ba2', '#f093fb', '#4facfe']
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'bottom'
                }
            }
        }
    });

    // User Growth Chart
    const userGrowthCtx = document.getElementById('userGrowthChart').getContext('2d');
    const userGrowth = @json($userGrowth);

    new Chart(userGrowthCtx, {
        type: 'line',
        data: {
            labels: Object.keys(userGrowth),
            datasets: [{
                label: 'Cumulative Users',
                data: Object.values(userGrowth),
                borderColor: '#198754',
                backgroundColor: 'rgba(25, 135, 84, 0.1)',
                tension: 0.4,
                fill: true,
                pointRadius: 5,
                pointBackgroundColor: '#198754'
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    display: true,
                    position: 'top'
                }
            },
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
</script>
@endsection