@extends('admin.layouts.app')

<x-assets.datatables />

@push('page-css')
    <link rel="stylesheet" href="{{asset('assets/plugins/chart.js/Chart.min.css')}}">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@3.9.0/dist/fullcalendar.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"> <!-- Ajout de Animate.css -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.0/main.min.css">


    <style>
        @keyframes scroll {
            0% { transform: translateY(0); }
            100% { transform: translateY(-100%); }
        }

        .scrolling-table {
            display: block;
            animation: scroll linear infinite;
        }
        badge {
            display: inline-block;
            padding: 0.5rem 1rem;
            font-size: 0.875rem;
            font-weight: 600;
            text-align: center;
            border-radius: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s; /* Smooth transitions */
            border-radius: 12px; /* Rounded corners */
 

        }
        .badge-primary {
            background-color: #007bff;
            color: #fff;
        }
        .badge-success {
            background-color: #28a745;
            color: #fff;
        }
        .badge-danger {
            background-color: #dc3545;
            color: #fff;
        }
        .badge-warning {
            background-color: #ffc107;
            color: #212529;
        }
        .badge-light {
            background-color: #f8f9fa;
            color: #212529;
        }
        .badge-light:hover {
            background-color: #e2e6ea;
            transform: translateY(-2px);
        }
        .count-up {

        display: inline-block;
        transition: transform 0.5s ease-out;
    }
        .animate-count {
            font-weight: 600;
        }
       .card {
            border-radius: 40px;
            border: none;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s, box-shadow 0.3s;
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
        }

        select {
            padding: 0.5rem;
            border-radius: 5px;
            border: 1px solid #ced4da;
        }

        .table thead th {
            background-color: #f1f1f1;
        }

        .card-title {
        font-family: 'Roboto', sans-serif; /* Utilisation d'une police moderne */
        font-weight: 600; /* Poids du texte plus audacieux */
        font-size: 1.25rem; /* Taille du texte ajustée */
        color: #333; /* Couleur du texte */
        margin-bottom: 1rem; /* Espace sous le titre */
        text-transform: uppercase; /* Majuscules pour un effet moderne */
        border-bottom: 2px solid #f1f1f1; /* Bordure sous le titre */
        padding-bottom: 0.5rem; /* Espace sous la bordure */
    }

    /* Style pour les titres dans le header des cartes */
    .card-header {
        background-color: #f9f9f9; /* Couleur de fond */
        border-bottom: 1px solid #e1e1e1; /* Bordure inférieure */
        padding: 1rem; /* Espacement interne */
    }
  /* Styles pour le calendrier */
  .calendar-card {
            border-radius: 20px; /* Rounded corners */
            overflow: hidden; /* Hide overflow to maintain rounded corners */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s, box-shadow 0.3s;
        }
        .calendar-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
        }

/* Police moderne */
body, table {
    font-family: 'Roboto', sans-serif;
}

/* Style de la carte */
.card-table {
    background-color: #f8f9fa;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Style du titre */
.card-title {
    font-size: 24px;
    color: #343a40;
}

/* Style du tableau */
.table-hover tbody tr:hover {
    background-color: #f1f1f1;
    transition: background-color 0.3s ease;
}

/* En-tête de tableau */
.table thead th {
    background-color: #007bff;
    color: white;
    padding: 12px;
}

/* Contenu du tableau */
.table tbody td {
    padding: 10px;
    color: #495057;
}

/* Animation d'apparition */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.table tbody tr {
    animation: fadeIn 0.5s ease-in;
}



    </style>
@endpush


@push('page-header')
<div class="col-sm-12">
	<h3 class="page-title">Bonjour {{auth()->user()->name}}!</h3>
	<ul class="breadcrumb">
		<li class="breadcrumb-item active">Tableau de Bord</li>
	</ul>
</div>
@endpush

@section('content')
<div class="row">
    <div class="col-xl-3 col-sm-6 col-12">
        <div class="card border-0 shadow-sm rounded-lg">
            <div class="card-body p-4">
                <div class="d-flex align-items-center">
                    <div class="dash-widget-icon bg-primary text-white rounded-circle p-3 me-3">
                        <i class="fe fe-money"></i>
                    </div>
                    <div class="dash-count">
                        <h3 id="countContrats" class="text-primary mb-0 animate-count" style="font-weight: 600;">{{ $all_contrats }}</h3>
                    </div>
                </div>
                <div class="mt-3">
                    <a href='/contrats' class="text-decoration-none text-primary">
                        <h6 class="mb-1" style="font-weight: 600;">Contrats de Maintenance</h6>
                    </a>
                    <a href='/contrats' class="text-decoration-none text-primary">
                        <div class="d-flex align-items-center">
                            <span class="badge badge-primary">Voir plus &rarr;</span>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-sm-6 col-12">
        <div class="card border-0 shadow-sm rounded-lg">
            <div class="card-body p-4">
                <div class="d-flex align-items-center">
                    <div class="dash-widget-icon bg-success text-white rounded-circle p-3 me-3">
                        <i class="fe fe-credit-card"></i>
                    </div>
                    <div class="dash-count">
                        <h3 id="countClients" class="text-success mb-0 animate-count" style="font-weight: 600;">{{ $all_clients }}</h3>
                    </div>
                </div>
                <div class="mt-3">
                    <a href='/clients' class="text-decoration-none text-success">
                        <h6 class="mb-1" style="font-weight: 600;">Clients</h6>
                    </a>
                    <a href='/clients' class="text-decoration-none text-success">
                        <div class="d-flex align-items-center">
                            <span class="badge badge-success">Voir plus &rarr;</span>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-sm-6 col-12">
        <div class="card border-0 shadow-sm rounded-lg">
            <div class="card-body p-4">
                <div class="d-flex align-items-center">
                    <div class="dash-widget-icon bg-danger text-white rounded-circle p-3 me-3">
                        <i class="fe fe-folder"></i>
                    </div>
                    <div class="dash-count">
                        <h3 id="countEquipements" class="text-danger mb-0 animate-count" style="font-weight: 600;">{{ $all_equipements }}</h3>
                    </div>
                </div>
                <div class="mt-3">
                    <a href="/equipements" class="text-decoration-none text-danger">
                        <h6 class="mb-1" style="font-weight: 600;">Equipements</h6>
                    </a>
                    <a href='/equipements' class="text-decoration-none text-danger">
                        <div class="d-flex align-items-center">
                            <span class="badge badge-danger">Voir plus &rarr;</span>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-sm-6 col-12">
        <div class="card border-0 shadow-sm rounded-lg">
            <div class="card-body p-4">
                <div class="d-flex align-items-center">
                    <div class="dash-widget-icon bg-warning text-white rounded-circle p-3 me-3">
                        <i class="fe fe-users"></i>
                    </div>
                    <div class="dash-count">
                        <h3 id="countUsers" class="text-warning mb-0 animate-count" style="font-weight: 600;">{{ $users }}</h3>
                    </div>
                </div>
                <div class="mt-3">
                    <a href='/users' class="text-decoration-none text-warning">
                        <h6 class="mb-1" style="font-weight: 600;">Personnel</h6>
                    </a>
                    <a href='/users' class="text-decoration-none text-warning">
                        <div class="d-flex align-items-center">
                            <span class="badge badge-warning">Voir plus &rarr;</span>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row justify-content-center">
    <div class="col-12">
         <div class="card card-table p-3">
             <div class="card-header">
                 <h4 class="card-title text-center" style="text-transform: uppercase !important;">Interventions en Cours</h4>
             </div>
             <div class="card-body">
                 <div class="table-container">
                     <div class="table-responsive">
                         <table id="intervention-progress-table" class="datatable table table-hover table-center mb-0">
                             <thead>
                                 <tr class="text-uppercase">
                                     <th>Etat</th>
                                     <th>Client</th>
                                     <th>Equipement</th>
                                     <th>Intervenant(s)</th>
                                     <th>Panne</th>
                                 </tr>
                             </thead>
                             <tbody>
                                 <!-- Contenu du tableau -->
                             </tbody>
                         </table>
                     </div>
                 </div>
             </div>
         </div>
     </div>
 </div>
<!-- Tableau des taches en Cours --
 <div class="row justify-content-center">
    <div class="col-12">
         <div class="card card-table p-3">
             <div class="card-header">
                 <h4 class="card-title text-center" style="text-transform: uppercase !important;">Taches en Cours</h4>
             </div>
             <div class="card-body">
                 <div class="table-container">
                     <div class="table-responsive">
                         <table id="tache-table" class="datatable table table-hover table-center mb-0">
                             <thead>
                                 <tr class="text-uppercase">
                                     <th>Type</th>
                                     <th>Technicien/ingénieur</th>
                                     <th>Fournisseur/client</th>
                                     <th>date</th>

                                 </tr>
                             </thead>
                             <tbody>
                                 <!-- Contenu du tableau --
                             </tbody>
                         </table>
                     </div>
                 </div>
             </div>
         </div>
     </div>
 </div>
<!-- Tableau des taches en Cours -->

 <!-- Nouveaux éléments affichés sous le tableau -->
 <div class="row d-flex justify-content-center align-items-center mt-1"> <!-- Centrage horizontal et vertical -->
     <!-- Calendrier -->
     <div class="col-md-12 d-flex justify-content-center align-items-center mb-3">
         <div class="card card-calendar" style="width: 100%; max-width: 800px;">
             <div class="card-header">
                 <h6 class="card-title text-center">Maintenance Préventive</h6>
             </div>
             <div class="card-body d-flex justify-content-center align-items-center">
                 <iframe src="https://calendar.google.com/calendar/embed?src=7ff90f956b84596b59ca09b35085f02110487299c7002b895c1fced2d5db6a80%40group.calendar.google.com&ctz=Africa%2FTunis"
                         style="border: 0; width: 100%; height: 500px;" frameborder="0" scrolling="no"></iframe>
             </div>
         </div>
     </div>

     <!-- Pie Charts -->
     <div class="col-md-12 d-flex justify-content-center align-items-center flex-wrap">
         <!-- Premier Pie Chart -->
         <div class="col-md-6 d-flex justify-content-center align-items-center mb-3">
             <div class="card card-chart" style="width: 100%; max-width: 400px; height: 300px;">
                 <div class="card-header">
                     <h6 class="card-title text-center">Instances Interventions</h6>
                 </div>
                 <div class="card-body d-flex justify-content-center align-items-center">
                     <canvas id="pieChart_interventions" style="width: 100%; height: 200px;"></canvas>
                 </div>
             </div>
         </div>

         <!-- Deuxième Pie Chart -->
         <div class="col-md-6 d-flex justify-content-center align-items-center mb-3">
            <div class="card card-chart" style="width: 100%; max-width: 400px; height: 300px;">
                <div class="card-header">
                    <h6 class="card-title text-center">Contrats de Maintenance</h6>
                </div>
                <div class="card-body d-flex justify-content-center align-items-center">
                    <canvas id="pieChart_contrats" style="width: 100%; height: 200px;"></canvas>
                </div>
            </div>
        </div>
     </div>
 </div>

 <script>
    var ctx = document.getElementById('pieChart_contrats').getContext('2d');

    var pieChartContrats = new Chart(ctx, {
        type: 'pie',
        data: {
            labels: ['Contrats en cours', 'Contrats proche expiration'],
            datasets: [{
                data: [{{ $contrats_encours }}, {{ $contrats_procheexpire }}],
                backgroundColor: ['#FF6384', '#36A2EB'],
                hoverBackgroundColor: ['#FF6384', '#36A2EB'],
            }]
        },
        options: {
            onClick: function(e, elements) {
                if (elements.length > 0) {
                    var chartElement = elements[0];
                    var label = pieChartContrats.data.labels[chartElement.index];

                    if (label === 'Contrats en cours') {
                        window.location.href = "{{ route('contrats.encours') }}";
                    } else if (label === 'Contrats proche expiration') {
                        window.location.href = "{{ route('contrats.procheexpire') }}";
                    }
                }
            }
        }
    });
</script>


<!-- Sélection d'année -->
<form method="GET" action="{{ route('dashboard') }}" class="mt-3"> <!-- Réduction du margin-top -->
    <label for="year">Sélectionnez l'année :</label>
    <select name="year" id="year" onchange="this.form.submit()">
        @foreach($years as $year)
            <option value="{{ $year }}" {{ $year == $selectedYear ? 'selected' : '' }}>
                {{ $year }}
            </option>
        @endforeach
    </select>
</form>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<!-- Chart display -->
<div class="row mt-3"> <!-- Réduction du margin-top -->
    <!-- Top 5 équipements ayant le plus de temps d'arrêt annuel -->
    <div class="col-md-6">
        <div class="card card-chart">
            <div class="card-header">
                <h4 class="card-title" style="margin-bottom: 0;">Top 5 des équipements ayant le plus de temps d'arrêt annuel</h4>
            </div>
            <div class="card-body p-2"> <!-- Réduction du padding -->
                <canvas id="barChartEquipements"></canvas>
            </div>
        </div>
    </div>

    <!-- Modalités - Fréquence d'arrêt -->
    <div class="col-md-6">
        <div class="card card-chart">
            <div class="card-header">
                <h4 class="card-title" style="margin-bottom: 0;">Modalités - Fréquence d'arrêt</h4>
            </div>
            <div class="card-body p-2"> <!-- Réduction du padding -->
                <canvas id="barChartModalites"></canvas>
            </div>
        </div>
    </div>
</div>

<!-- Card for Pie Charts -->
<div class="row mt-3"> <!-- Réduction du margin-top -->
    <!-- Suivi d'état des interventions non clôturées -->
    <div class="col-md-6">
        <div class="card card-chart">
            <div class="card-header">
                <h5 class="card-title" style="margin-bottom: 0;">Suivi d'état des interventions non Clôturées</h5>
            </div>
            <div class="card-body p-2"> <!-- Réduction du padding -->
                <canvas id="pieChart_nonCloture"></canvas>
            </div>
        </div>
    </div>

    <!-- Interventions clôturées -->
    <div class="col-md-6">
        <div class="card card-chart">
            <div class="card-header">
                <h5 class="card-title" style="margin-bottom: 0;">Interventions Clôturées</h5>
            </div>
            <div class="card-body p-2"> <!-- Réduction du padding -->
                <canvas id="pieChart_rapport"></canvas>
            </div>
        </div>
    </div>
</div>

<!-- Top 5 Clients avec plus d'Interventions & Interventions des 5 Principaux Clients -->
<div class="row mt-3"> <!-- Réduction du margin-top -->
    <!-- Top 5 Clients avec plus d'Interventions -->
    <div class="col-md-6">
        <div class="card card-chart">
            <div class="card-header">
                <h4 class="card-title" style="margin-bottom: 0;">Top 5 Clients avec plus d'Interventions</h4>
            </div>
            <div class="card-body p-2"> <!-- Réduction du padding -->
                <canvas id="topClientsChart"></canvas>
            </div>
        </div>
    </div>

    <!-- Interventions des 5 Principaux Clients (Tableau) -->
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title" style="margin-bottom: 0;">Interventions des 5 Principaux Clients</h4>
            </div>
            <div class="card-body p-2"> <!-- Réduction du padding -->
                <div class="table-responsive" style="max-height: 300px;">
                    <table id="equipementTable" class="table table-striped">
                        <thead>
                            <tr>
                                <th>Client</th>
                                <th>Équipement</th>
                                <th>Description panne</th>
                                <th>Date d'Intervention</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($clientDetails as $detail)
                                <tr>
                                    <td>{{ $detail['client'] }}</td>
                                    <td>{{ $detail['equipment'] }}</td>
                                    <td>{{ $detail['description panne'] }}</td>
                                    <td>{{ $detail['date'] }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .card-chart iframe {
        width: 100%;
        height: 300px;
    }

    .card-table {
        padding: 0.5rem;
    }

    .card-chart .card-header h4,
    .card-chart .card-header h5,
    .card-chart .card-header h6 {
        margin-bottom: 0;
    }
</style>




@endsection
<!-- FullCalendar JS -->
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.0/main.min.js"></script>


@push('page-js')
<script>
    // Function to limit a string to the first two words
    function limitToTwoWords(str) {
        const words = str.split(' ');
        return words.slice(0, 2).join(' ');
    }

    // Original client labels for tooltips
    var fullClientLabels = @json($clientLabels);
    // Truncated client labels for chart display
    var truncatedClientLabels = fullClientLabels.map(label => limitToTwoWords(label));

    var ctx = document.getElementById('topClientsChart').getContext('2d');
    var topClientsChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: truncatedClientLabels,
            datasets: [{
                label: 'Nombre d\'Interventions',
                backgroundColor: '#36A2EB',
                data: @json($clientInterventions),
                stack: 'Stack 0'
            }]
        },
        options: {
            responsive: true,
            scales: {
                x: {
                    stacked: true,
                    beginAtZero: true
                },
                y: {
                    stacked: true,
                    beginAtZero: true
                }
            },
            plugins: {
                tooltip: {
                    callbacks: {
                        title: function(tooltipItems) {
                            // Get the index of the data point being hovered
                            const index = tooltipItems[0].dataIndex;
                            // Return the full name for the tooltip
                            return fullClientLabels[index];
                        }
                    }
                }
            }
        }
    });

    $(document).ready(function() {
        $('#equipementTable').DataTable();
    });
</script>





<script>
    $(document).ready(function() {
        var table = $('#intervention-progress-table').DataTable({
            processing: true,
            serverSide: false,
            ajax: "{{route('interventions.progressing')}}",
            columns: [
                {data: 'etat_final_global', name: 'etat_final_global',
                } ,
                {data: 'client', name: 'client'},
                {data: 'equipement', name: 'equipement'},
                {
                    data: 'destinateur',
                    name: 'destinateur',
                    render: function(data, type, row) {
                        // If destinateur is null or empty, display "intervention avec sous-traitant"
                        if (!data || data === "null") {
                            return 'intervention avec sous-traitant';
                        }
                        return data; // Return the actual destinateur value if it exists
                    }
                },
                {data: 'description_panne', name: 'description_panne'},

            ]
        });

    });
</script>
<!-- Tableau des taches en Cours --
<script>
    $(document).ready(function() {
        var table = $('#tache-table').DataTable({
            processing: false,
            serverSide: false,
            ajax: "{{ route('taches.index') }}",
            columns: [
                {data: 'type', name: 'type'},
                {
                    data: 'user', // Utilisez 'users' si c'est une collection d'utilisateurs
                    name: 'user',
                    render: function(data, type, row) {
                        // Vérifiez si 'data' est un tableau, puis concaténez les noms
                        if (Array.isArray(data)) {
                            return data.map(function(user) {
                                return user.name; // Adaptez 'name' au champ contenant le nom
                            }).implode(', ');
                        }
                        return 'Aucun utilisateur'; // Si aucun utilisateur n'est disponible
                    }
                },
                {data: 'fournisseur', name: 'fournisseur'},
                {data: 'date', name: 'date'},
            ]
        });
    });
</script>
<!-- Tableau des taches en Cours -->

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var ctx = document.getElementById('barChartEquipements').getContext('2d');

        // Fonction pour tronquer les labels
        function truncateLabel(label, wordLimit) {
            var words = label.split(' ');
            if (words.length > wordLimit) {
                return words.slice(0, wordLimit).join(' ') + '...';
            }
            return label;
        }

        // Troncature des labels
        var truncatedLabels = @json($labelsEquipements).map(label => truncateLabel(label, 4));

        var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: truncatedLabels,
                datasets: [{
                    label: 'Durée d\'arrêt des 5 équipements les plus impactés par année',
                    data: @json($durationsEquipements),
                    backgroundColor: '#FF6384',
                }]
            },
            options: {
                onHover: function(evt, elements) {
                    if (elements.length > 0) {
                        document.body.style.cursor = 'pointer'; // Changez le curseur en "hand"
                    } else {
                        document.body.style.cursor = 'default'; // Rétablissez le curseur par défaut
                    }
                },
                plugins: {
                    title: {
                        display: false, // Désactivez l'affichage du titre
                    }
                },
                scales: {
                    x: {
                        title: {
                            display: true,
                            text: 'EQUIPEMENT'
                        },
                        ticks: {
                            autoSkip: false, // Désactiver le saut automatique des ticks
                            maxRotation: 90, // Rotation maximale des ticks (90 degrés)
                            minRotation: 45, // Rotation minimale des ticks (45 degrés)
                            font: {
                                size: 10 // Taille de la police des ticks
                            }
                        }
                    },
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: 'Durée d\'arrêt (mois)'
                        }
                    }
                },
                onClick: function(evt, elements) {
                    if (elements.length > 0) {
                        const index = elements[0].index;
                        const id = @json($equipementIds) ? @json($equipementIds)[index] : null;
                        if (id) {
                            redirectToShowPage(id);
                        }
                    }
                },
                animation: {
                    duration: 6000, // Duration of the animation in milliseconds
                    easing: 'easeOutQuart' // Easing function for the animation
                }
            }
        });

        function redirectToShowPage(id) {
            window.location.href = '{{ url('equipements') }}/' + encodeURIComponent(id);
        }
    });
    </script>



<!-- FullCalendar JS -->
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.0/main.min.js"></script>


<script>
    document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');

        var calendar = new FullCalendar.Calendar(calendarEl, {
            plugins: [ 'dayGrid', 'timeGrid', 'interaction' ],
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay'
            },
            initialView: 'dayGridMonth',
            events: @json($events), // Ensure $events is properly populated in your controller
            editable: true,
            selectable: true,
            selectMirror: true,
            dayMaxEvents: true,
            eventClick: function(info) {
                // Handle event click
                console.log(info.event);
            },
            select: function(info) {
                // Handle selection
                console.log(info);
            }
        });

        calendar.render();
    });
</script>
<style>
    .cursor-pointer {
        cursor: pointer !important;
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var ctx = document.getElementById('barChartModalites').getContext('2d');

        var modaliteLabels = @json($modaliteLabels);
        var modaliteCounts = @json($modaliteCounts);
        var modaliteIds = @json($modaliteIds);

        var barChartModalites = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: modaliteLabels,
                datasets: [{
                    label: 'Nombre d\'arrêts par modalité',
                    data: modaliteCounts,
                    backgroundColor: 'rgba(75, 192, 192, 0.6)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: 'Nombre d\'arrêts'
                        }
                    },
                    x: {
                        title: {
                            display: true,
                            text: 'Modalités'
                        },
                        ticks: {
                            autoSkip: false,
                            maxRotation: 45,
                            minRotation: 45,
                            maxTicksLimit: 20
                        }
                    }
                },
                plugins: {
                    legend: {
                        display: true,
                        position: 'top',
                    }
                },
                onClick: function(evt, elements) {
                    if (elements.length > 0) {
                        const index = elements[0].index;
                        const id = modaliteIds[index]; // Use modaliteIds array correctly
                        if (id) {
                            redirectToShowPage(id);
                        }
                    }
                },
                onHover: function(event, chartElement) {
                    if (chartElement.length > 0) {
                        // Hovering over a bar
                        event.native.target.style.cursor = 'pointer';
                    } else {
                        // Not hovering over a bar
                        event.native.target.style.cursor = 'default';
                    }
                },
                animation: {
                    duration: 6000, // Duration of the animation in milliseconds
                    easing: 'easeOutQuart' // Easing function for the animation
                }
            }
        });

        function redirectToShowPage(id) {
            window.location.href = '{{ url('modalites') }}/' + encodeURIComponent(id);
        }
    });
</script>




<script>
    document.addEventListener('DOMContentLoaded', function() {
        function animateCount(id, endValue, duration) {
            let startValue = 0;
            const element = document.getElementById(id);
            const increment = endValue / (duration / 50);

            function updateCount() {
                startValue += increment;
                if (startValue >= endValue) {
                    element.innerHTML = endValue;
                } else {
                    element.innerHTML = Math.round(startValue);
                    setTimeout(updateCount, 50);
                }
            }

            // Apply CSS transition for smoother updates
            element.style.transition = 'transform 0.5s ease-out';
            updateCount();
        }

        animateCount('countContrats', {{ $all_contrats }}, 2000);
        animateCount('countClients', {{ $all_clients }}, 2000);
        animateCount('countEquipements', {{ $all_equipements }}, 2000);
        animateCount('countUsers', {{ $users }}, 2000);
    });
</script>



<script>
    document.addEventListener("DOMContentLoaded", function() {
        const ctx = document.getElementById('pieChart_interventions').getContext('2d');

        const data = {
            labels: ['Interventions non Clôturées', 'Interventions Clôturées'],
            datasets: [{
                data: [{{ $intervention_non_cloture }}, {{ $intervention_cloture }}],
                backgroundColor: ['#FF6384', '#36A2EB']
            }]
        };

        const pieChart = new Chart(ctx, {
            type: 'pie',
            data: data,
            options: {
                onClick: (e, elements) => {
                    if (elements.length > 0) {
                        const segmentIndex = elements[0].index;
                        if (segmentIndex === 0) {
                            window.location.href = '/interventions.unclosed';
                        } else if (segmentIndex === 1) {
                            window.location.href = '/interventions.archive';
                        }
                    }
                }
            }
        });
    });
</script>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const ctx = document.getElementById('pieChart_contrats').getContext('2d');

        const data = {
            labels: ['Contrats En cours', 'Contrats Proche expiration'],
            datasets: [{
                data: [{{ $contrats_encours }}, {{ $contrats_procheexpire }}],
                backgroundColor: ['#32CD32', '#FF6347']
            }]
        };

        const pieChart = new Chart(ctx, {
            type: 'pie',
            data: data,
            options: {
                onClick: (e, elements) => {
                    if (elements.length > 0) {
                        const segmentIndex = elements[0].index;
                        if (segmentIndex === 0) {
                            window.location.href = '/contrats.encours';
                        } else if (segmentIndex === 1) {
                            window.location.href = '/contrats.procheexpire';
                        }
                    }
                }
            }
        });
    });
</script>


<!-- Script pour le premier pie chart (Interventions Non Clôturées) -->
<script>
    var ctx = document.getElementById('pieChart_nonCloture').getContext('2d');

    var backgroundColors = [
        'rgba(255, 99, 132, 0.1)',  // Poursuivre le diagnostic - Rouge clair
        'rgba(255, 0, 0, 0.1)',     // Attente rapport - Rouge foncé avec transparence animée
        'rgba(255, 206, 86, 0.1)',  // Demandé - Jaune clair
        'rgba(153, 102, 255, 0.1)', // Mise en attente - Violet clair
        'rgba(75, 192, 192, 0.1)',  // Devis à fournir - Vert clair
        'rgba(54, 162, 235, 0.1)',  // En cours - Bleu clair
        'rgba(255, 0, 0, 0.1)',     // Attente pièce - Rouge foncé avec transparence animée
        'rgba(75, 192, 192, 0.1)'   // Cloturé sans rapport - Vert clair
    ];

    var borderColors = [
        'rgba(255, 99, 132, 1)',    // Poursuivre le diagnostic - Rouge clair
        'rgba(255, 0, 0, 1)',       // Attente rapport - Rouge foncé
        'rgba(255, 206, 86, 1)',    // Demandé - Jaune clair
        'rgba(153, 102, 255, 1)',   // Mise en attente - Violet clair
        'rgba(75, 192, 192, 1)',    // Devis à fournir - Vert clair
        'rgba(54, 162, 235, 1)',    // En cours - Bleu clair
        'rgba(255, 0, 0, 1)',       // Attente pièce - Rouge foncé
        'rgba(75, 192, 192, 1)'     // Cloturé sans rapport - Vert clair
    ];

    var pieChart_nonCloture = new Chart(ctx, {
        type: 'pie',
        data: {
            labels: @json($nonClotureLabels),
            datasets: [{
                label: 'Nombre d\'Interventions Non Clôturées',
                data: @json($nonClotureCounts),
                backgroundColor: backgroundColors,
                borderColor: borderColors,
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'right',
                    align: 'top',
                    labels: {
                        boxWidth: 10,
                        padding: 15
                    }
                },
                tooltip: {
                    callbacks: {
                        label: function(tooltipItem) {
                            return tooltipItem.label + ': ' + tooltipItem.raw;
                        }
                    }
                }
            }
        }
    });

    // Fonction pour animer les couleurs rouges
    function animateRedColors() {
        var phase = 0;
        var increment = 0.02; // Diminuer l'incrément pour ralentir l'animation


        function update() {
            phase += increment;
            if (phase > 1 || phase < 0) {
                increment = -increment;
            }

            backgroundColors[1] = `rgba(255, 0, 0, ${0.1 + 0.9 * phase})`;  // Attente rapport - Rouge foncé animé
            backgroundColors[6] = `rgba(255, 0, 0, ${0.1 + 0.9 * phase})`;  // Attente pièce - Rouge foncé animé

            pieChart_nonCloture.update();
            requestAnimationFrame(update);
        }
        update();
    }

    animateRedColors();
</script>


<!-- Script pour le second pie chart (Interventions avec et sans rapport) -->
<script>
    var ctx3 = document.getElementById('pieChart_rapport').getContext('2d');
    var pieChart3 = new Chart(ctx3, {
        type: 'pie',
        data: {
            labels: ['Sans Rapport', 'Avec Rapport'],
            datasets: [{
                label: 'Interventions avec et sans rapport',
                data: [{{ $countWithoutReport }}, {{ $countWithReport }}],
                backgroundColor: [
                    'rgba(255, 99, 132,1)',
                    'rgba(54, 162, 235, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'right',
                    align: 'top',
                    labels: {
                        boxWidth: 10,
                        padding: 15
                    }
                },
                tooltip: {
                    callbacks: {
                        label: function(tooltipItem) {
                            return tooltipItem.label + ': ' + tooltipItem.raw;
                        }
                    }
                }
            }
        }
    });
</script>



<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <!-- Ensure Chart.js is loaded -->

<script>
    document.addEventListener('DOMContentLoaded', function () {
        var ctx = document.getElementById('pieChart_contrats').getContext('2d');

        // Create the pie chart
        var pieChartContrats = new Chart(ctx, {
            type: 'pie',
            data: {
                labels: ['Contrats en cours', 'Contrats proche d\'expiration'],
                datasets: [{
                    backgroundColor: ['#7bb13c', '#FF0000'], // Static red color for the second segment
                    hoverBackgroundColor: ['#7bb13c', '#FF0000'], // Hover color
                    data: [{{ $contrats_encours }}, {{ $contrats_procheexpire }}] // Data
                }]
            },
            options: {
                plugins: {
                    legend: {
                        display: true
                    },
                    tooltip: {
                        callbacks: {
                            label: function(tooltipItem) {
                                return tooltipItem.label + ': ' + tooltipItem.formattedValue;
                            }
                        }
                    }
                }
            }
        });

        function animateRedColors() {
            var phase = 0;
            var increment = 0.02; // Speed of animation

            function update() {
                phase += increment;
                if (phase > 1 || phase < 0) {
                    increment = -increment; // Reverse direction
                }

                // Apply floating effect only to the red segment
                pieChartContrats.data.datasets[0].backgroundColor[1] = `rgba(255, 0, 0, ${0.1 + 0.9 * phase})`; // Floating red effect

                pieChartContrats.update();
                requestAnimationFrame(update); // Repeat animation
            }
            update();
        }

        animateRedColors(); // Start the animation
    });
</script>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const rows = document.querySelectorAll('#intervention-table tbody tr');
        const tableBody = document.querySelector('#intervention-table tbody');
        const visibleRowCount = 4;
        const totalRows = rows.length;
        let currentIndex = 0;

        function updateTable() {
            const start = currentIndex;
            const end = (start + visibleRowCount) % totalRows;
            const fragment = document.createDocumentFragment();

            for (let i = 0; i < visibleRowCount; i++) {
                const rowIndex = (start + i) % totalRows;
                const clonedRow = rows[rowIndex].cloneNode(true);
                clonedRow.style.animationDelay = `${i * 0.1}s`;
                fragment.appendChild(clonedRow);
            }

            tableBody.innerHTML = '';
            tableBody.appendChild(fragment);
            currentIndex = (currentIndex + 1) % totalRows;
        }

        function startScrolling() {
            updateTable();
            setInterval(updateTable, 2000); // Intervalle de 2 secondes, ajustez selon vos besoins
        }

        if (totalRows > visibleRowCount) {
            startScrolling();
        }
    });
</script>


@endpush