{% extends 'layout/frontEndLayout.html.twig' %}

{% block name %}
    Welcome to LiveEdu

{% endblock %}

{% block body %}

    <div id="carouselExampleControls" class="carousel slide bs-slider box-slider" data-ride="carousel" data-pause="hover" data-interval="false">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleControls" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleControls" data-slide-to="1"></li>
            <li data-target="#carouselExampleControls" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner" role="listbox" data-ride="carousel"
         data-interval="5000">
            <div class="carousel-item active">
                <div id="home" class="first-section" style="background-image:url({{ asset('assets/images/slider-01.jpg') }});">
                    <div class="dtab">
                        <div class="container">
                            <div class="row">
                                <div class="col-md-12 col-sm-12 text-right">
                                    <div class="big-tagline">
                                        <h2>
                                            Bilingual Secondary Institute BETHESDA implements
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            											
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
                                            <strong>
                                                
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                											
                                                                LiveEdu                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
                                            </strong>
                                        </h2>

                                    </div>
                                </div>
                            </div>
                            <!-- end row -->
                            <br/>
                            <br/>
                            <br/>
                            <br/>
                            <br/>
                            <br/>
                            <br/>
                            <br/>
                            <br/>
                            <br/>
                            <br/>
                            <br/>
                            <br/>
                            <br/>
                        </div>
                    <!-- end container -->
                    </div>
                </div>
            <!-- end section -->

            </div>
            <div class="carousel-item">
                <div id="home" class="first-section" style="background-image:url({{ asset('assets/images/slider-02.jpg') }});">
                    <div class="dtab">
                        <div class="container">
                            <div class="row">
                                <div class="col-md-12 col-sm-12 text-left">
                                    <div class="big-tagline">
                                        <h2 data-animation="animated zoomInRight">
                                            LiveEdu
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            											
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
                                            <strong>
                                                software online services
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
                                            </strong>
                                        </h2>

                                    </div>
                                </div>
                            </div>
                            <!-- end row -->
                            <br/>
                            <br/>
                            <br/>
                            <br/>
                            <br/>
                            <br/>
                            <br/>
                            <br/>
                            <br/>
                            <br/>
                            <br/>
                            <br/>
                            <br/>
                            <br/>
                        </div>
                    <!-- end container -->
                    </div>
                </div>
            <!-- end section -->
            </div>
             <div class="carousel-item">
                <div id="home" class="first-section" style="background-image:url({{ asset('assets/images/slide_04.PNG') }});">
                    <div class="dtab">
                        <div class="container">
                            <div class="row">
                                <div class="col-md-12 col-sm-12 text-left">
                                    <div class="big-tagline">
                                        <h2 data-animation="animated zoomInRight">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            											
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
                                            <strong>
                                                LiveEdu adds transparancy
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
                                            </strong>
                                             for quality education
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
                                        </h2>

                                    </div>
                                </div>
                            </div>
                            <!-- end row -->
                            <br/>
                            <br/>
                            <br/>
                            <br/>
                            <br/>
                            <br/>
                            <br/>
                            <br/>
                            <br/>
                            <br/>
                            <br/>
                            <br/>
                            <br/>
                            <br/>
                        </div>
                    <!-- end container -->
                    </div>
                </div>
            <!-- end section -->
            </div>
            <!-- Left Control -->
            <a class="new-effect carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
                <span class="fa fa-angle-left" aria-hidden="true"></span>
                <span class="sr-only">
                    Previous
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
                </span>
            </a>

            <!-- Right Control -->
            <a class="new-effect carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
                <span class="fa fa-angle-right" aria-hidden="true"></span>
                <span class="sr-only">
                    Next
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
                </span>
            </a>
        </div>
    </div>

    <section class="card">
        <article class="row card-body" id="officialExams">
            <h1 class="card-title text-center">Taux de reussite aux examens officiels session {{year.code}}</h1> 
             {% for key in results|keys %}
                    <div class="col-6 col-md-3 " >
                        <canvas id={{key}}  height="120" data-exam-objects=" {{results[key]}}"></canvas>
                    </div>
             {% endfor %}
        </article>
       
    </section>
 
{% endblock %}
{% block javascripts %}
    {{ parent() }}
   <script type="text/javascript">
            //Generate a random color
            const randomRgbColor = (type) => {
                                    if (type === "ECHEC") {
                return "rgb(255,0,0)"; // rouge pur
            } else {
                // Couleurs aléatoires pour les autres
                let r = Math.floor(Math.random() * 256);
                let g = Math.floor(Math.random() * 256);
                let b = Math.floor(Math.random() * 256);
                return `rgb(${r},${g},${b})`;
            }
            ;

             };
            const colors=[], datasets = []; 
             
           const  troisiemeAllExamsGraph = $("#troisiemeall"), troisiemeEspExamsGraph = $("#troisiemeesp") ,
            premiereCExamsGraph = $("#premiere_c"), premiereDExamsGraph = $("#premiere_d") ,
            premiereAEspExamsGraph = $("#premierea4esp"), premiereAAllExamsGraph = $("#premierea4all"),
            terminaleCExamsGraph = $("#terminalec"), terminaleDExamsGraph = $("#terminale_d") , 
            terminaleAEspExamsGraph = $("#terminaleaesp"), terminaleAAllExamsGraph = $("#terminaleaall"),
            formvArtExamsGraph = $("#formvarts"), formvScienceExamsGraph = $("#formvscience")
            ; 
           
           const troisiemeAllExamsData = troisiemeAllExamsGraph.data('examObjects'), troisiemeEspExamsData = troisiemeEspExamsGraph.data('examObjects'),
           premiereCExamsData = premiereCExamsGraph.data('examObjects'), premiereDExamsData = premiereDExamsGraph.data('examObjects'), 
           premiereAEspExamsData = premiereAEspExamsGraph.data('examObjects'), premiereAAllExamsData = premiereAAllExamsGraph.data('examObjects'),
           terminaleCExamsData = terminaleCExamsGraph.data('examObjects'), terminaleDExamsData = terminaleDExamsGraph.data('examObjects'),
           terminaleAEspExamsData = terminaleAEspExamsGraph.data('examObjects'), terminaleAAllExamsData = terminaleAAllExamsGraph.data('examObjects'),
           formvArtExamsData = formvArtExamsGraph.data('examObjects'),formvScienceExamsData = formvScienceExamsGraph.data('examObjects');
           
          
            // Draw the graph of official exam results
            // Draw the graph of official exam results
            const drawCanvas = (examData, examGraph, name) => {
                // Parser une seule fois au lieu de 3
                const parsedData = JSON.parse(examData);

                // Convertir explicitement en nombres
                const values = parsedData["mentionCountCategories"].map(v => Number(v));

                // Vérifier si des valeurs sont invalides
                console.log("➡️ Graph:", name, "Labels:", parsedData["mentionCategories"], "Values:", values);

                // Générer les couleurs
                const colors = parsedData["mentionCategories"].map(cat => randomRgbColor(cat));

                // Créer le graphe
                const examChart = new Chart(examGraph, {
                    type: "doughnut",
                    data: {
                        labels: parsedData["mentionCategories"],
                        datasets: [{
                            data: values,
                            backgroundColor: colors
                        }]
                    },
                    options: {
                        cutout: "70%",
                        plugins: {
                            title: {
                                display: true,
                                text: name,
                                font: {
                                    size: 16,
                                    family: 'Helvetica Neue',
                                },
                                position: 'bottom',
                            }
                        }
                    }
                });
            };


             // Disposition des canVas dans le frontEnd
            drawCanvas(terminaleDExamsData,terminaleDExamsGraph , "Terminale D" );
            drawCanvas(terminaleCExamsData,terminaleCExamsGraph , "Terminale C" );
            drawCanvas(terminaleAAllExamsData,terminaleAAllExamsGraph , "Terminale A All" );
            drawCanvas(terminaleAEspExamsData,terminaleAEspExamsGraph , "Terminale A Esp" );
            drawCanvas(premiereAAllExamsData,premiereAAllExamsGraph , "Premiere A All" );
            drawCanvas(premiereAEspExamsData,premiereAEspExamsGraph , "Premiere A Esp" );
            drawCanvas(premiereCExamsData,premiereCExamsGraph , "Premiere C" );
            drawCanvas(premiereDExamsData,premiereDExamsGraph , "Premiere D" );
            drawCanvas(troisiemeAllExamsData,troisiemeAllExamsGraph , "Troisieme All" );
            drawCanvas(troisiemeEspExamsData,troisiemeEspExamsGraph , "Troisieme Esp" );
            drawCanvas(formvArtExamsData,formvArtExamsGraph , "FORM 5 Art(.../5)" );
            drawCanvas(formvScienceExamsData,formvScienceExamsGraph , "FORM 5 Science(../5)" );
            

   </script>

{% endblock javascripts %}