@extends('layouts.admin')

@section('title', 'Dashboard')
@section('page-title', 'Dashboard')

@section('content')
    <!-- Documentation d'accueil du dashboard -->
    <div class="alert alert-info mb-4" style="background: #f4f8ff; border-left: 5px solid #5c5f99;">
        <h4 class="mb-2"><i class="fa fa-info-circle text-primary me-2"></i>Bienvenue sur l'administration 2ECG</h4>
        <ul class="mb-2">
            <li><b>Navigation :</b> Utilisez le menu à gauche pour accéder aux différentes sections (Produits, Services,
                Projets, Blog, etc.).</li>
            <li><b>Champs obligatoires :</b> Les champs marqués d'une * sont requis pour valider un formulaire.</li>
            <li><b>Images :</b> Les images doivent être au format JPG ou PNG. Pour les entités principales, utilisez le
                champ "Image principale". Les images uploadées sont automatiquement stockées et accessibles sur le site.
            </li>
            <li><b>Rich Text :</b> Les champs de description utilisent un éditeur riche (mise en forme, images, titres,
                etc.). Les images insérées dans le texte sont aussi gérées et redimensionnées automatiquement.</li>
            <li><b>Slugs :</b> Les slugs (URL) sont générés automatiquement à partir du nom/titre. Il n'est pas nécessaire
                de les remplir manuellement.</li>
            <li><b>Relations :</b> Pour lier un produit à une catégorie, un projet à une catégorie, etc., utilisez les menus
                déroulants prévus à cet effet.</li>
            <li><b>Icônes :</b> Pour certaines entités, vous pouvez choisir une icône FontAwesome via un sélecteur visuel.
            </li>
            <li><b>Vérification :</b> Avant de publier, vérifiez l'aperçu et la complétude des informations (images, textes,
                statuts, etc.).</li>
            <li><b>Accessibilité :</b> L'interface est conçue pour être simple et accessible, même sans expérience
                technique.</li>
        </ul>
        <div class="small text-muted">Pour toute question ou problème, contactez l'administrateur ou consultez la
            documentation complète.</div>
    </div>

    <div class="row g-4 mb-4">
        <div class="col-sm-6 col-xl-3">
            <div class="bg-light rounded d-flex align-items-center justify-content-between p-4">
                <i class="fa fa-chart-line fa-3x text-primary"></i>
                <div class="ms-3">
                    <p class="mb-2">Total Services</p>
                    <h6 class="mb-0">{{ $stats['services'] }}</h6>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-xl-3">
            <div class="bg-light rounded d-flex align-items-center justify-content-between p-4">
                <i class="fa fa-chart-bar fa-3x text-primary"></i>
                <div class="ms-3">
                    <p class="mb-2">Total Products</p>
                    <h6 class="mb-0">{{ $stats['products'] }}</h6>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-xl-3">
            <div class="bg-light rounded d-flex align-items-center justify-content-between p-4">
                <i class="fa fa-chart-area fa-3x text-primary"></i>
                <div class="ms-3">
                    <p class="mb-2">Total Projects</p>
                    <h6 class="mb-0">{{ $stats['projects'] }}</h6>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-xl-3">
            <div class="bg-light rounded d-flex align-items-center justify-content-between p-4">
                <i class="fa fa-chart-pie fa-3x text-primary"></i>
                <div class="ms-3">
                    <p class="mb-2">Total Blog Posts</p>
                    <h6 class="mb-0">{{ $stats['posts'] }}</h6>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4">
        <!-- Recent Contact Messages -->
        <div class="col-sm-12 col-md-6">
            <div class="bg-light rounded p-4 h-100">
                <div class="d-flex align-items-center justify-content-between mb-4">
                    <h6 class="mb-0">Recent Contact Messages</h6>
                    <a href="">Show All</a>
                </div>
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th scope="col">Name</th>
                                <th scope="col">Email</th>
                                <th scope="col">Subject</th>
                                <th scope="col">Source</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($recentContacts as $contact)
                                <tr>
                                    <td>{{ $contact->name }}</td>
                                    <td>{{ $contact->email }}</td>
                                    <td>{{ Str::limit($contact->subject, 20) }}</td>
                                    <td>{{ $contact->source }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Recent Analytics -->
        <div class="col-sm-12 col-md-6">
            <div class="bg-light rounded p-4 h-100">
                <div class="d-flex align-items-center justify-content-between mb-4">
                    <h6 class="mb-0">Recent Analytics</h6>
                    <a href="">Show All</a>
                </div>
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th scope="col">Type</th>
                                <th scope="col">Action</th>
                                <th scope="col">IP Address</th>
                                <th scope="col">Date</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($recentAnalytics as $analytic)
                                <tr>
                                    <td>{{ $analytic->type }}</td>
                                    <td>{{ $analytic->action }}</td>
                                    <td>{{ $analytic->ip_address }}</td>
                                    <td>{{ $analytic->created_at->format('M d, Y') }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4 mt-4">
        <!-- Analytics by Type -->
        <div class="col-sm-12 col-md-6">
            <div class="bg-light rounded p-4 h-100">
                <div class="d-flex align-items-center justify-content-between mb-4">
                    <h6 class="mb-0">Analytics by Type</h6>
                </div>
                <canvas id="analyticsByTypeChart"></canvas>
            </div>
        </div>

        <!-- Analytics by Action -->
        <div class="col-sm-12 col-md-6">
            <div class="bg-light rounded p-4 h-100">
                <div class="d-flex align-items-center justify-content-between mb-4">
                    <h6 class="mb-0">Analytics by Action</h6>
                </div>
                <canvas id="analyticsByActionChart"></canvas>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        // Analytics by Type Chart
        var typeCtx = document.getElementById('analyticsByTypeChart').getContext('2d');
        var typeChart = new Chart(typeCtx, {
            type: 'pie',
            data: {
                labels: [
                    @foreach ($analyticsByType as $analytic)
                        '{{ $analytic->type }}',
                    @endforeach
                ],
                datasets: [{
                    data: [
                        @foreach ($analyticsByType as $analytic)
                            {{ $analytic->count }},
                        @endforeach
                    ],
                    backgroundColor: [
                        '#FFB400',
                        '#0B2154',
                        '#4CAF50',
                        '#2196F3',
                        '#9C27B0',
                        '#FF5722'
                    ]
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'bottom'
                    }
                }
            }
        });

        // Analytics by Action Chart
        var actionCtx = document.getElementById('analyticsByActionChart').getContext('2d');
        var actionChart = new Chart(actionCtx, {
            type: 'bar',
            data: {
                labels: [
                    @foreach ($analyticsByAction as $analytic)
                        '{{ $analytic->action }}',
                    @endforeach
                ],
                datasets: [{
                    label: 'Count',
                    data: [
                        @foreach ($analyticsByAction as $analytic)
                            {{ $analytic->count }},
                        @endforeach
                    ],
                    backgroundColor: '#FFB400'
                }]
            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            precision: 0
                        }
                    }
                }
            }
        });
    </script>
@endpush