@extends('layouts.admin')

@section('content')
<div class="content-section">
    <h1 class="page-title">Tableau de Bord</h1>

    <div class="row">
        <div class="col-md-3">
            <div class="stats-card">
                <div class="stats-icon">
                    <i class="fas fa-images"></i>
                </div>
                <h3>{{ $countImages}}</h3>
                <p>Images</p>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stats-card">
                <div class="stats-icon">
                    <i class="fas fa-concierge-bell"></i>
                </div>
                <h3>{{ $countServices }}</h3>
                <p>Services</p>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stats-card">
                <div class="stats-icon">
                    <i class="fas fa-heart"></i>
                </div>
                <h3>{{ $countPosts }}</h3>
                <p>Actualités</p>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stats-card">
                <div class="stats-icon">
                    <i class="fas fa-chess"></i>
                </div>
                <h3>{{ $countStrategies }}</h3>
                <p>Stratégies</p>
            </div>
        </div>
    </div>

    <div class="row mt-4">
        <div class="col-md-6">
            <div class="content-card">
                <h5>Visiteurs Quotidiens (14 Derniers Jours)</h5>
                <div class="chart-container" id="culturesChart">
                    <canvas id="dailyVisitorsChart"></canvas>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="content-card">
                <h5>Visiteurs par Pays</h5>
                <div class="chart-container">
                    <canvas id="countryVisitorsChart"></canvas>
                </div>
            </div>
        </div>
        <div class="col-md-12">
            <div class="content-card">
                <h5>Visiteurs Mensuels (6 Derniers Mois)</h5>
                <div class="chart-container">
                    <canvas id="monthlyVisitorsChart"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>


        {{-- <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">Visitor Statistics</h5>
                </div>
                <div class="card-body">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>Country</th>
                                <th>Visitors</th>
                                <th>Percentage</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php
                                $totalVisitors = $visitorsByCountry->sum('count');
                            @endphp
                            @foreach($visitorsByCountry as $country)
                            <tr>
                                <td>{{ $country->country_name }}</td>
                                <td>{{ $country->count }}</td>
                                <td>{{ round(($country->count / $totalVisitors) * 100, 2) }}%</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div> --}}

@endsection

@section('styles')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        .chart-container {
            position: relative;
            height: 300px;
            width: 100%;
        }
        .card {
            margin-bottom: 20px;
        }
    </style>
@endsection

@section('scripts')
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<script>
    // Add this line to make sure DOM is loaded
    document.addEventListener('DOMContentLoaded', function() {
        // Add console logging to help debug
        console.log('Daily Labels:', {!! $dailyLabels !!});
        console.log('Daily Data:', {!! $dailyData !!});
        console.log('Monthly Labels:', {!! $monthlyLabels !!});
        console.log('Monthly Data:', {!! $monthlyData !!});
        console.log('Country Labels:', {!! $countryLabels !!});
        console.log('Country Data:', {!! $countryData !!});

    // Daily Visitors Chart
    const dailyCtx = document.getElementById('dailyVisitorsChart').getContext('2d');
    const dailyVisitorsChart = new Chart(dailyCtx, {
        type: 'line',
        data: {
            labels: {!! $dailyLabels !!},
            datasets: [{
                label: 'Daily Visitors',
                data: {!! $dailyData !!},
                backgroundColor: 'rgba(54, 162, 235, 0.2)',
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 2,
                tension: 0.1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        precision: 0
                    }
                }
            }
        }
    });

    // Monthly Visitors Chart
    const monthlyCtx = document.getElementById('monthlyVisitorsChart').getContext('2d');
    const monthlyVisitorsChart = new Chart(monthlyCtx, {
        type: 'bar',
        data: {
            labels: {!! $monthlyLabels !!},
            datasets: [{
                label: 'Monthly Visitors',
                data: {!! $monthlyData !!},
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                borderColor: 'rgba(75, 192, 192, 1)',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        precision: 0
                    }
                }
            }
        }
    });

    // Country Visitors Chart
    const countryCtx = document.getElementById('countryVisitorsChart').getContext('2d');
    const countryVisitorsChart = new Chart(countryCtx, {
        type: 'pie',
        data: {
            labels: {!! $countryLabels !!},
            datasets: [{
                data: {!! $countryData !!},
                backgroundColor: [
                    'rgba(255, 99, 132, 0.7)',
                    'rgba(54, 162, 235, 0.7)',
                    'rgba(255, 206, 86, 0.7)',
                    'rgba(75, 192, 192, 0.7)',
                    'rgba(153, 102, 255, 0.7)',
                    'rgba(255, 159, 64, 0.7)',
                    'rgba(199, 199, 199, 0.7)',
                    'rgba(83, 102, 255, 0.7)',
                    'rgba(40, 159, 64, 0.7)',
                    'rgba(210, 199, 199, 0.7)',
                ],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'right',
                }
            }
        }
    });
    });
</script>
@endsection