@extends('adminlte::page')

@section('title', 'Dashboard')

@section('content_header')
    <h1>Tableau de Bord</h1>
@stop

@section('content')
<div class="row">
    <!-- Annonceurs -->
    <div class="col-lg-3 col-12">
        <div class="small-box bg-primary">
            <div class="inner">
                <h3>{{ $annonceurs }}</h3>
                <p>Nombre d'Annonceurs</p>
            </div>
            <div class="icon">
                <i class="fas fa-user-tie"></i>
            </div>
            <a href="#" class="small-box-footer">Plus d'infos <i class="fas fa-arrow-circle-right"></i></a>
        </div>
    </div>

    <!-- Transporteurs -->
    <div class="col-lg-3 col-12">
        <div class="small-box bg-success">
            <div class="inner">
                <h3>{{ $transporteurs }}</h3>
                <p>Nombre de Transporteurs</p>
            </div>
            <div class="icon">
                <i class="fas fa-truck"></i>
            </div>
            <a href="#" class="small-box-footer">Plus d'infos <i class="fas fa-arrow-circle-right"></i></a>
        </div>
    </div>

    <!-- Annonces de type Send -->
    <div class="col-lg-3 col-12">
        <div class="small-box bg-info">
            <div class="inner">
                <h3>{{ $sendCount }}</h3>
                <p>Annonces de type Envoyées</p>
            </div>
            <div class="icon">
                <i class="fas fa-paper-plane"></i>
            </div>
            <a href="#" class="small-box-footer">Plus d'infos <i class="fas fa-arrow-circle-right"></i></a>
        </div>
    </div>

    <!-- Annonces de type Transport -->
    <div class="col-lg-3 col-12">
        <div class="small-box bg-warning">
            <div class="inner">
                <h3>{{ $transporttypeCount }}</h3>
                <p>Annonces de type Transport</p>
            </div>
            <div class="icon">
                <i class="fas fa-shipping-fast"></i>
            </div>
            <a href="#" class="small-box-footer">Plus d'infos <i class="fas fa-arrow-circle-right"></i></a>
        </div>
    </div>

    <!-- Annonces de type Request -->
    <div class="col-lg-3 col-12">
        <div class="small-box bg-secondary">
            <div class="inner">
                <h3>{{ $requestCount }}</h3>
                <p>Demandes d'Annonces jeeby</p>
            </div>
            <div class="icon">
                <i class="fas fa-question-circle"></i>
            </div>
            <a href="#" class="small-box-footer">Plus d'infos <i class="fas fa-arrow-circle-right"></i></a>
        </div>
    </div>

    <!-- Annonces Confirmées -->
    <div class="col-lg-3 col-12">
        <div class="small-box bg-success">
            <div class="inner">
                <h3>{{ $confirmedCount }}</h3>
                <p>Annonces Confirmées</p>
            </div>
            <div class="icon">
                <i class="fas fa-check-circle"></i>
            </div>
            <a href="#" class="small-box-footer">Plus d'infos <i class="fas fa-arrow-circle-right"></i></a>
        </div>
    </div>

    <!-- Brouillons -->
    <div class="col-lg-3 col-12">
        <div class="small-box bg-secondary">
            <div class="inner">
                <h3>{{ $draftCount }}</h3>
                <p>Brouillons</p>
            </div>
            <div class="icon">
                <i class="fas fa-pencil-alt"></i>
            </div>
            <a href="#" class="small-box-footer">Plus d'infos <i class="fas fa-arrow-circle-right"></i></a>
        </div>
    </div>

    <!-- Annonces Actives -->
    <div class="col-lg-3 col-12">
        <div class="small-box bg-info">
            <div class="inner">
                <h3>{{ $activeCount }}</h3>
                <p>Annonces Actives</p>
            </div>
            <div class="icon">
                <i class="fas fa-bullhorn"></i>
            </div>
            <a href="#" class="small-box-footer">Plus d'infos <i class="fas fa-arrow-circle-right"></i></a>
        </div>
    </div>

    <!-- Annonces Désactivées -->
    <div class="col-lg-3 col-12">
        <div class="small-box bg-warning">
            <div class="inner">
                <h3>{{ $disabledCount }}</h3>
                <p>Annonces Désactivées</p>
            </div>
            <div class="icon">
                <i class="fas fa-ban"></i>
            </div>
            <a href="#" class="small-box-footer">Plus d'infos <i class="fas fa-arrow-circle-right"></i></a>
        </div>
    </div>

    <!-- Annonces Fermées -->
    <div class="col-lg-3 col-12">
        <div class="small-box bg-danger">
            <div class="inner">
                <h3>{{ $closedCount }}</h3>
                <p>Annonces Fermées</p>
            </div>
            <div class="icon">
                <i class="fas fa-times-circle"></i>
            </div>
            <a href="#" class="small-box-footer">Plus d'infos <i class="fas fa-arrow-circle-right"></i></a>
        </div>
    </div>
    

 
     <!-- Offres Acceptées -->
     <div class="col-lg-3 col-12">
        <div class="small-box bg-success">
            <div class="inner">
                <h3>{{ $acceptedOffers }}</h3>
                <p>Offres Acceptées</p>
            </div>
            <div class="icon">
                <i class="fas fa-check-circle"></i>
            </div>
            <a href="#" class="small-box-footer">Plus d'infos <i class="fas fa-arrow-circle-right"></i></a>
        </div>
    </div>

    <!-- Offres en Cours -->
    <div class="col-lg-3 col-12">
        <div class="small-box bg-warning">
            <div class="inner">
                <h3>{{ $pendingOffers }}</h3>
                <p>Offres en Cours</p>
            </div>
            <div class="icon">
                <i class="fas fa-hourglass-half"></i>
            </div>
            <a href="#" class="small-box-footer">Plus d'infos <i class="fas fa-arrow-circle-right"></i></a>
        </div>
    </div>

    <!-- Offres Refusées -->
    <div class="col-lg-3 col-12">
        <div class="small-box bg-danger">
            <div class="inner">
                <h3>{{ $refusedOffers }}</h3>
                <p>Offres Refusées</p>
            </div>
            <div class="icon">
                <i class="fas fa-times-circle"></i>
            </div>
            <a href="#" class="small-box-footer">Plus d'infos <i class="fas fa-arrow-circle-right"></i></a>
        </div>
    </div>
</div>
    <div class="row">
    <!-- Vos autres éléments (small boxes, graphiques existants) -->
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Nombre d'Annonces Créées par Mois</h3>
            </div>
            <div class="card-body">
                <canvas id="announcementsChart"></canvas>
            </div>
        </div>
    </div>
    <!-- Graphique des Offres -->
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Statistiques des Offres</h3>
            </div>
            <div class="card-body">
                <canvas id="offerChart"></canvas>
            </div>
        </div>
    </div>
</div>
</div>
@stop
@section('js')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        const ctx = document.getElementById('announcementsChart').getContext('2d');
        const announcementsChart = new Chart(ctx, {
            type: 'bar', // Type de graphique
            data: {
                labels: @json($months), // Les mois
                datasets: [{
                    label: 'Nombre d\'Annonces',
                    data: @json($totals), // Les totaux
                    backgroundColor: 'rgba(54, 162, 235, 0.5)',
                    borderColor: 'rgba(54, 162, 235, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        display: true,
                        position: 'top',
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    </script>
@stop