@extends('layouts.base-refonte')

@section('title','Mes cours')

@section('css')
    <style>
        @media 
        only screen and (min-width: 1600px), 
        only screen and (min-width: 1200px) and (max-width: 1599px) {
            .courses-search.search-2 {
                max-width: 100%;
                margin-left: 1em;
            }
        }

        .ellipsis {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }

        /* Lecturer's styles */
        .single-courses-rating {
            padding: 0.8em;
        }

        .single-courses-rating .courses .courses-thumb a {
            display: flex;
            justify-content: center;
        }

        .single-courses-rating .courses .courses-content {
            padding-left: 15px;
        }

        @media (min-width: 768px){
            .single-courses-rating .courses .courses-thumb a img {
                height: 130px;
                width: 130px;
                object-fit: cover;
            }

            .single-courses-rating .courses .courses-content {
                max-width: 52%;
            }
        }

        .single-courses-rating .courses .courses-content .title {
            font-family: 'Gordita';
        }

        .single-courses-rating .courses .courses-content .average-rating {
            margin-top: 0.25em;
        }

        .single-courses-rating .rating {
            padding: 1em;
        }

        .rating-content .rating-progress-bar {
            width: 100%;
            height: 3px;
            background-color: #d3ded7;
            margin-top: 0px;
        }

        .rating-content .rating-progress-bar .rating-line {
            height: 100%;
            background-color: #309255;
        }

        .single-courses-rating .rating-content .courses-rating p {
            font-size: .8em;
        }

        .single-courses-rating .rating .rating-content .btn {
            font-size: 12px;
            padding: 0 5px;
            height: 35px;
            line-height: 35px;
            margin-top: 1em;
            width: fit-content;
        }

        /* 
         ===================================
            search css 
         ===================================
        */
        .s-info {
            text-align: center;
            margin-top: 30px;
        }

        .s-info.init .s-init, .s-info:not(.init) .s-filtered {
            display: block;
        }

        .s-info:not(.init) .s-init, .s-info .s-filtered  {
            display: none;
        }

        #s-filter-reset {
            line-height: 1.5;
            padding: 0.5em;
            margin-left: 0.5em;
        }

        .s-items {
            transition: opacity .2s ease 0s;
        }

        .s-not-match {
           display: none;
        }
        
        /* for debug purposes */
        .s-not-match .single-courses {
            border: 2px solid red;
        }
    </style>
@endsection

@section('content')
        
    <!-- 
    =============================================
        Theme Inner Banner
    ============================================== 
    -->
    <div class="inner-banner">
        <div class="opacity">
            <div class="container">
                <h2>Mes cours</h2>
                <ul>
                    <li></li>
                    {{-- <li><a href="index.html" class="tran3s">Accueil</a></li>
                    <li>/</li>
                    <li>Voyez ici vos matières</li> --}}
                </ul>
            </div> <!-- /.container -->
        </div> <!-- /.opacity -->
    </div> <!-- /.inner-banner -->

    {{-- alert with content --}}
    @include('partials.alert')

    <!-- Courses Start -->
    <div class="section section-padding">
        <div class="container">
            <!-- All Courses Top Start -->
            <div class="courses-top">

                <!-- Section Title Start -->
                <div class="section-title shape-01">
                    @php
                        $current_year = session('schools_info')['current_year'];  // for hosted only
                    @endphp
                    <h2 class="main-title">Mes <span>Cours</span> de {{ ($current_year - 1).'-'.$current_year }}</h2>
                </div>
                <!-- Section Title End -->
            </div>
            <!-- All Courses Top End -->

            <!-- Courses Category Wrapper Start  -->
            <div class="courses-category-wrapper" style="margin-top: 3em;">
                <div class="courses-search search-2">
                    <input type="text" name="search" id="search" placeholder="Retrouver un EC par son code, intitule, Filière, niveau ...">
                    <button><i class="icofont-search"></i></button>
                </div>
            </div>
            <!-- Courses Category Wrapper End  -->

            <!-- Search info  -->
            <div class="s-info init">
                <div class="s-init">
                    <span class="fw-bold s-init-total">00</span>
                    ECs aux total
                </div>
                <div class="s-filtered">
                    <span class="fw-bold s-filtered-total">00</span>
                    ECs répondant aux filtres  
                    <button 
                        id="s-filter-reset"
                        class="btn btn-secondary btn-hover-primary"
                    >
                        reinitialiser les filtres <i class="fa fa-undo ms-0"></i>
                    </button>
                </div>
            </div>
            <!-- Search info  -->

            <!-- Courses Wrapper Start  -->
            <div class="courses-wrapper-02">
                <div class="row">
                    @foreach ($ecs as $code_ecu => $group)
                        @php
                            $ec_sample = $group[0];
                            $i = $loop->index;
                        @endphp
                        <div class="col-lg-6 col-md-12 s-items">
                            <!-- Single Courses Start -->
                            <div class="single-courses-rating">
        
                                <!-- Courses Start -->
                                <div class="courses">
                                    <div class="courses-thumb">
                                        <a href="javaScript:void(0);"><img src="{{asset('edule/images/courses/courses-0'.( $i%5+1 ).'.jpg')}}" alt="Courses"></a>
                                    </div>
                                    <div class="courses-content">
                                        <h4 class="title"><a href="javaScript:void(0);" class="s-search">{{$ec_sample["intituleEcu"]}}</a></h4>
                                        <div class="average-rating">
                                            <span class="label s-search"><i class="icofont-slack"></i> {{$ec_sample["code_ecu"]}}</span>
                                        </div>
                                    </div>
                                    <div class="courses-btn">
                                        <a class="btn" href="javaScript:void(0);" class="s-search">{{findNiveau($ec_sample['niveauFormation']).' '.$ec_sample['annee']}}</a>
                                    </div>
                                </div>
                                <!-- Courses End -->
        
                                <!-- Rating Start -->
                                <div class="row">
                                    @php
                                        $nb_filieres = count($group);
                                    @endphp
                                    @foreach ($group as $filiere_ec)
                                        @php
                                            $nbHeureExec = empty($filiere_ec['Heures_effectuees']) ? 0 : $filiere_ec['Heures_effectuees'];
                                            $nbHeure = $filiere_ec['masse_horaire'] ? $filiere_ec['masse_horaire'] : 1;
                                           
                                            $p = ($nbHeureExec < $nbHeure) ? ($nbHeureExec * 100 / $nbHeure) : 100;
                                            $p = number_format($p,2);

                                            // if ($p < 50) {
                                            //     $percent_class = 'bg-danger';
                                            // } else if(($p < 70)) {
                                            //     $percent_class = 'bg-warning';
                                            // } else {
                                            //     $percent_class = 'bg-success';
                                            // }
                                        @endphp
                                        <div class='{{ $nb_filieres > 1 ? "col-lg-6 col-md-12" : "col-12" }}'>
                                            <div class="rating">
                                                <div class="rating-content ps-0">
                                                    <h4 class="name s-search">{{$filiere_ec["sigleFilieres"]}}</h4>
                                                    <span class="date mt-0 s-search">({{$filiere_ec["intituleFilieres"]}})</span>
                                                    <div class="courses-rating mt-2">
                                                        <p class="mb-0">{{ $p }}% heures effectuées</p>
                                                        <div class="rating-progress-bar">
                                                            <div class="rating-line" style="width: {{$p}}%;"></div>
                                                        </div>
                                                    </div>
                                                    <div class="d-flex justify-content-start">
                                                        <a 
                                                            href="{{route('pcourse.show', $filiere_ec['id_EC'])}}" 
                                                            class="btn me-2" 
                                                            data-bs-toggle="tooltip"
                                                            title="Mise à disposition des médias; évolution des étudiants...etc"
                                                        >
                                                            Gestion <i class="fa fa-gears"></i>
                                                        </a>
                                                        <a 
                                                            href="{{route('pcourse.view',$filiere_ec['id_EC'])}}" 
                                                            class="btn" 
                                                            data-bs-toggle="tooltip"
                                                            title="Commentaires & avis autour des médias de l'EC"
                                                        >
                                                            Interactions<i class="fa fa-comments-o"></i>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                                <!-- Rating End -->
        
                            </div>
                            <!-- Single Courses End -->
                        </div>
                    @endforeach
                </div>
            </div>
            <!-- Courses Wrapper End  -->
        </div>
    </div>
    <!-- Courses End -->

@endsection

@section('script')
    <script>
        const api = {
            sItems: "s-items",
            total: 0,
            totalFiltered: 0,

            sNotMatch: "s-not-match",
            sInputs: {
                "search": "s-search",
            },
        };

        (function() {
            implicitDebounce("applyFilter", 500);
            
            $("#search").on("input", applyFilter);

            $("#s-filter-reset").on("click", resetFilters);

            // total items info
            api.total = $("." + api.sItems).length;
            $(".s-info .s-init-total:eq(0)").text(api.total);
        })()

        // allow to filter items
        function applyFilter(e) {
            const filters = {
                "search": normalizeString($("#search").val()),
            };

            api.totalFiltered = 0;

            let v = ""; // a temp variable used to take values
            $("." + api.sItems).each((i,el) => {
                el = $(el);

                // search string check
                if (filters.search.length) {
                    let match = false;

                    el.find(".s-search").each((j,x) => {
                        v = normalizeString($(x).text());
                        if(v.indexOf(filters.search) != -1) {
                            match = true;
                            return false; // break loop over s-search
                        }

                        // FIXME | HACK : with v.search(filters.search), even a regExp given by user give result !
                    });

                    if (!match) {
                        el.addClass("s-not-match");
                        return true; // move to next item
                    }
                }

                // item match all filters
                el.removeClass("s-not-match");
                api.totalFiltered++;
            });
            
            updateFilterInfoUI();
        }

        function updateFilterInfoUI() {
            if ($("#search").val().trim().length) {
                $(".s-info .s-filtered-total:eq(0)").text(api.totalFiltered);
                $(".s-info").removeClass("init");
            } else {
                $(".s-info").addClass("init");
            }
        }

        function resetFilters() {
            $("#search").val("").trigger("input");
        }
    </script>
@endsection