@extends('admin.layout.index')
@section('title', 'Reports and Analytics')
@section('custom-style')
    <style>
        .card-title {
            color: #fff !important;
        }

        .card-number {
            font-size: 24px;
            font-weight: bold;
            color: #fff !important;
        }

        .card {
            background-color: #2b2b2b;
            border: none;
        }

        .chart-container {
            position: relative;
            height: 400px;
            margin-top: 20px;
        }
    </style>
@endsection

@section('content')
    <div class="page-content">
        <div class="container-fluid">

            <!-- Start Page Title -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                        <h4 class="mb-sm-0">{{ __('translations.Reports and Analytics') }}</h4>

                        <div class="page-title-right">
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item"><a href="javascript:void(0);">{{ __('translations.Admin') }}</a></li>
                                <li class="breadcrumb-item active">{{ __('translations.Reports and Analytics') }}</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End Page Title -->

            <!-- Dashboard Cards -->
            <div class="row">
                <div class="col-md-4">
                    <div class="card text-white">
                        <div class="card-body">
                            <h5 class="card-title">{{ __('translations.Active Users') }}</h5>
                            <p class="card-number">1500</p>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="card text-white">
                        <div class="card-body">
                            <h5 class="card-title">{{ __('translations.Appointments This Month') }}</h5>
                            <p class="card-number">450</p>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="card text-white">
                        <div class="card-body">
                            <h5 class="card-title">{{ __('translations.Average Wait Time') }}</h5>
                            <p class="card-number">15 mins</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Chart Section -->
            <div class="row">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title text-white">{{ __('translations.Appointments Overview') }}</h5>
                            <div class="chart-container">
                                <canvas id="appointmentsChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title text-white">{{ __('translations.Revenue Generated') }}</h5>
                            <div class="chart-container">
                                <canvas id="revenueChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Report Section -->
            <div class="row">
                <div class="col-md-12">
                    <div class="card text-white">
                        <div class="card-body">
                            <h5 class="card-title">{{ __('translations.Generate Reports') }}</h5>
                            <button class="btn btn-primary">{{ __('translations.Download Report') }}</button>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

@endsection

@section('custom-script')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        // Appointments Chart
        var appointmentsCtx = document.getElementById('appointmentsChart').getContext('2d');
        var appointmentsChart = new Chart(appointmentsCtx, {
            type: 'line',
            data: {
                labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4'],
                datasets: [{
                    label: 'Appointments',
                    data: [100, 150, 200, 250],
                    backgroundColor: 'rgba(54, 162, 235, 0.2)',
                    borderColor: 'rgba(54, 162, 235, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        // Revenue Chart
        var revenueCtx = document.getElementById('revenueChart').getContext('2d');
        var revenueChart = new Chart(revenueCtx, {
            type: 'bar',
            data: {
                labels: ['January', 'February', 'March', 'April'],
                datasets: [{
                    label: 'Revenue',
                    data: [3000, 4000, 3500, 5000],
                    backgroundColor: 'rgba(255, 99, 132, 0.2)',
                    borderColor: 'rgba(255, 99, 132, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    </script>
@endsection