@extends('layouts.base-refonte')

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

@section('css')
    <style>
        .newest-select select {
            display: none;
        }
        
        .newest-select {
            padding-top: 0;
        }

        .newest-select .nice-select {
            min-width: 8rem;
        }

        .nice-select .list {
            width: 100%;
        }

        .newest-select .nice-select .list li {
            padding-top: 0px;
            padding-bottom: 0px;
        }

        .nice-select .option.disabled {
            display: none;
        }

        @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;
        }

        .single-courses .courses-images a img {
            height: 205px;
            object-fit: cover;
        }

        .single-courses .courses-content .courses-author .author .author-thumb a img {
            height: 50px;
            object-fit: cover;
        }

        .single-courses .courses-content .title a {
            height: 2.8em;
            display: -webkit-box;
        }

        /* 
         ===================================
            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><a href="index.html" class="tran3s">Accueil</a></li>
                    <li>/</li>
                    <li>Mes cours</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="Code, intitule ou enseignant de l'EC...">
                    <button><i class="icofont-search"></i></button>
                </div>
                <ul class="category-menu mt-0">
                    <li>
                        <label style="font-size: 0.7em;">Niveau</label>
                        <div class="newest-select">
                            <select name="niveau" id="niveau">
                                <option value="ALL">Tous</option>
                                @foreach ($niveaux as $n)
                                    <option value="{{ $n['text'] }}" data-year="{{ $n['annee'] }}">{{ $n['text'] }}</option>
                                @endforeach
                            </select>
                        </div>
                    </li>
                    <li>
                        <label style="font-size: 0.7em;">Semestre</label>
                        <div class="newest-select">
                            <select name="semestre" id="semestre">
                                <option value="ALL">Tous</option>
                                @foreach ($semestres as $annee => $arr)
                                    @foreach ($arr as $s)
                                        <option value="{{ $s }}" data-year="{{ $annee }}">{{ $s }}</option>
                                    @endforeach
                                @endforeach
                            </select>
                        </div>
                    </li>
                    <li>
                        <label style="font-size: 0.7em;">Cours</label>
                        <div class="newest-select">
                            <select name="type_cours" id="type_cours">
                                <option value="ALL">Tous</option>
                                <option value="normal">Normal</option>
                                <option value="reprise">Reprise</option>
                            </select>
                        </div>
                    </li>
                </ul>
            </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 $i => $ec)
                        <div class="col-lg-4 col-md-6 s-items">
                            <!-- Single Courses Start -->
                            <div class="single-courses">
                                <div class="courses-images">
                                    <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">
                                    <div class="courses-author">
                                        @php
                                            $prof = $profs[$ec["matricule"]][0];
                                        @endphp
                                        <div class="author">
                                            <div class="author-thumb">
                                                <a href="{{route("profil", $prof['matricule'])}}">
                                                    <img 
                                                        src="{{ $meta['pp_path'].$prof['cheminPhoto'] }}" 
                                                        onerror="this.onerror=null;this.src='{{ asset('images/avatars/user.jpg') }}';"
                                                        alt="Author"
                                                    >
                                                </a>
                                            </div>
                                            <div class="author-name">
                                                <a class="name s-search" href="{{route("profil", $prof['matricule'])}}">
                                                    {{ $prof["nom"]." ".$prof["prenom"] }}
                                                </a>
                                            </div>
                                        </div>
                                        <div class="tag">
                                            <a href="javaScript:void(0);" class="s-niveau">{{ findNiveau($ec['niveauFormation'])." ".$ec['annee']}}</a>
                                        </div>
                                    </div>

                                    <h4 class="title">
                                        <a href="{{route('details_cours',["course" => $ec['id_EC'] ])}}" class="s-search ellipsis">{{ $ec['intituleEcu'] }}</a>
                                    </h4>
                                    <div class="courses-meta">
                                        <span class="s-search"><i class="icofont-slack"></i>{{ $ec['code_ecu'] }}</span>
                                        <span><i class="icofont-read-book"></i>{{ $ec['credit'] }} Crédit(s)</span>
                                    </div>
                                    <div class="courses-price-review">
                                        <div class="courses-price">
                                            S<span class="s-semestre">{{ $ec['semestre'] }}</span>
                                            <span class="sale-parice mr-0"> | </span>
                                            <span class="old-parice" style="text-decoration: none;">EC 
                                                <span class="s-type_cours">{{ $ec['premiere_inscription'] == $ec['inscription_actuelle'] ? "normal" : "reprise" }}</span>
                                            </span>
                                        </div>
                                        <div class="courses-review">
                                            <a 
                                                href="{{route('details_cours',["course" => $ec['id_EC'] ])}}" 
                                                class="btn btn-secondary btn-hover-primary btn-sm" 
                                                style="line-height: inherit;"
                                            >
                                                voir <i class="fa fa-external-link"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Single Courses End -->
                        </div>
                    @endforeach
                </div>
            </div>
            <!-- Courses Wrapper End  -->

            <!-- Page Pagination End -->
            <!-- <div class="page-pagination">
                <ul class="pagination justify-content-center">
                    <li><a href="#"><i class="icofont-rounded-left"></i></a></li>
                    <li><a class="active" href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#"><i class="icofont-rounded-right"></i></a></li>
                </ul>
            </div> -->
            <!-- Page Pagination End -->

            <!-- Load more Start -->
            <!-- <div class="mt-4 text-center">
                <a class="btn btn-dark btn-hover-light" href="#">
                    voir plus (reste 22)
                    <i class="icofont-circled-down"></i>
                </a>
            </div> -->
            <!-- Load more End -->
        </div>
    </div>
    <!-- Courses End -->

@endsection

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

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

        (function() {
            $(".newest-select select").on("change", updateNiceSelect);

            $("#niveau").on("change", handleNiveauSemestersRelationship);

            // apply filter when inputs change
            implicitDebounce("applyFilter" , 500);

            $("#niveau").on("change", applyFilter);
            $("#semestre").on("change", applyFilter);
            $("#type_cours").on("change", applyFilter);
            $("#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);
        })()

        function updateNiceSelect(e){
            $('#' + e.currentTarget.id).niceSelect('update');
        }

        // handle semestre state regarding niveau's value
        function handleNiveauSemestersRelationship(){
            const niveau = $("#niveau").val();

            // hide all semesters
            $("#semestre option[data-year]").attr("disabled", true);

            // show semesters that are relevent to selected niveau
            if (niveau == "ALL") {
                $("#semestre option[data-year]").attr("disabled", false);
            } else {
                const year = $(`#niveau option[value='${niveau}']`).data("year");
                $(`#semestre option[data-year='${year}']`).attr("disabled", false);
            }

            // set "ALL" as value of semester
            $('#semestre').val("ALL");
            $('#semestre').trigger("change");
        }

        function applyFilter(e) {
            // console.log(e);
            
            const filters = {
                "niveau": $("#niveau").val(),
                "semestre": $("#semestre").val(),
                "type_cours": $("#type_cours").val(),
                "search": normalizeString($("#search").val()),
            };

            api.totalFiltered = 0;

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

                // niveau check
                v = el.find(".s-niveau").text();
                if (filters.niveau != "ALL" && filters.niveau != v ) {
                    el.addClass("s-not-match");
                    return true; // move to next item
                }

                // semestre check
                v = el.find(".s-semestre").text();
                if (filters.semestre != "ALL" && filters.semestre != v ) {
                    el.addClass("s-not-match");
                    return true; // move to next item
                }

                // type cours check
                v = el.find(".s-type_cours").text();
                if (filters.type_cours != "ALL" && filters.type_cours != v ) {
                    el.addClass("s-not-match");
                    return true; // move to next item
                }

                // 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 (
                $("#niveau").val() != "ALL" ||
                $("#semestre").val() != "ALL" ||
                $("#type_cours").val() != "ALL" ||
                $("#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() {
            $("#niveau").val("ALL").trigger("change"); // will trigger semestre too
            $("#type_cours").val("ALL").trigger("change");
            $("#search").val("").trigger("input");
        }
    </script>
@endsection