@extends('frontend.layouts.main')

@section('content')
    <main class="home bg-light-grey">
        <!-- Banner section -->



        <section class="bs-banner " style="background-color: #00917c;">
            <div class="container">
                <div class="row align-item-center">
                    <div class="col-lg-6 align-self-center">
                        <div class="content-wrapper">
                            <h2 class="title max-800 wow fadeInUp" data-wow-duration="0.2s">Learn from the
                                best: Join our
                                <span>Masterclass</span>
                            </h2>
                            <p class="para wow fadeInUp" data-wow-duration="0.4s">Level up your expertise with
                                industry-leading insights and hands-on learning in Masterclass.</p>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="img-section">
                            <div class="img-area">
                                <picture>
                                    <source srcset="assets/images/masterclass/Masterclass-NEW-02.png"
                                        media="(max-width: 767px)" />
                                    <img class="img-fluid wow fadeIn" data-wow-duration="1s"
                                        src="assets/images/masterclass/Masterclass-NEW-02.png" alt="girl">
                                </picture>
                                <img class="vector-1 wow fadeInUp" data-wow-duration="2.8s"
                                    src="assets/images/use-svg/triangle.svg" alt="vector">
                                <img class="vector-2 wow fadeInUp" data-wow-duration="3s"
                                    src="assets/images/use-svg/plus-svg.svg" alt="vector">

                                <img class="vector-6 wow fadeInUp" data-wow-duration="3s"
                                    src="assets/images/use-svg/trading-graph.svg" alt="vector">

                                <img class="vector-3 wow fadeInUp" data-wow-duration="3.2s"
                                    src="assets/images/use-svg/doller-orange.svg" alt="vector">
                                <img class="vector-4 wow fadeInUp" data-wow-duration="3.5s"
                                    src="assets/images/use-svg/computer.svg" alt="vector">
                                <img class="vector-5 wow fadeInUp" data-wow-duration="3.7s"
                                    src="assets/images/use-svg/figma.svg" alt="vector">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- Banner section -->

        <section class="lyt-section typ-filter-area">
            <div class="container">
                <div class="row">
                    <div class="col-md-12 d-md-block d-lg-none overflow-hidden position-btn-sticky">
                        <div class="bs-mobile-filter">
                            <div class="mobile-btn-wrapper">
                                <div class="mobile-filter">
                                    <div class="filter-img" data-bs-toggle="modal" data-bs-target="#filterApplied">
                                        <img src="assets/images/use-svg/filter.svg" alt="filter">
                                        <span class="filter-dot"></span>
                                    </div>
                                    <div class="btn-section">
                                        <div class="btn-filter typ-12Medium" data-bs-toggle="modal"
                                            data-bs-target="#departmentModal" data-label="Department">
                                            Departments</div>
                                        <div class="btn-filter typ-12Medium" data-bs-toggle="modal"
                                            data-bs-target="#exampleModal" data-label="Level">Level
                                        </div>
                                        <div class="btn-filter typ-12Medium" data-bs-toggle="modal"
                                            data-bs-target="#pricingModal" data-label="Pricing">Pricing
                                        </div>
                                        <div class="BottomFilters_placeholder__1sCvR">&nbsp;</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 d-none d-lg-block wow fadeInUp" data-wow-duration="0.4s">

                        <div class="bs-filter">
                            <div id="sidebar" class="sidebar">
                                <ul class="sidebar-nav" id="sidebar-nav">
                                    <li class="nav-item">
                                        <div class="all-filter">
                                            <span class="filterText">All Filters</span>
                                            <span class="applied" data-bs-toggle="modal"
                                                data-bs-target="#filterApplied">Applied <span class="count"
                                                    id="applied_count"> </span></span>
                                        </div>
                                    </li><!-- End Forms Nav -->

                                    <li class="nav-item">
                                        <a class="nav-link" data-bs-target="#department-nav" data-bs-toggle="collapse"
                                            href="#" aria-expanded="false">
                                            <span>Departments</span><i class="icon icon-arrow "></i>
                                        </a>
                                        <div id="department-nav" class="nav-content collapse show"
                                            data-bs-parent="#sidebar-nav">
                                            <ul class="scrollElement">
                                                @foreach ($departments as $index => $department)
                                                    <li class="{{ $index >= 4 ? 'd-none' : '' }}">
                                                        <div class="form-check mod-checkbox typ-modal">
                                                            <input class="form-check-input checkbox side-barcat"
                                                                id="department_{{ $department->id }}"
                                                                name="{{ $department->department_name }}"
                                                                onchange="handleCategoryChange(this)"
                                                                type="checkbox" value="{{ $department->id }}">
                                                            <label class="form-check-label"
                                                                for="department_{{ $department->id }}">
                                                                <!-- Use "for" attribute to associate label with input -->
                                                                {{ $department->department_name }}
                                                            </label>
                                                        </div>
                                                    </li>
                                                @endforeach

                                            </ul>

                                            <!-- </form> -->
                                            <div class="viewMore {{ count($departments) <= 4 ? 'd-none' : '' }}">
                            <a class="viewLink" data-bs-toggle="modal" data-bs-target="#departmentModal" href="javascript:void(0)" onclick="viewMore()">View More</a>
                        </div>
                                        </div>

                                    </li><!-- End Forms Nav -->

                                    <li class="nav-item">
                                        <a class="nav-link" data-bs-target="#level-nav" data-bs-toggle="collapse"
                                            href="#" aria-expanded="false">
                                            <span>Level</span><i class="icon icon-arrow "></i>
                                        </a>
                                        <div id="level-nav" class="nav-content collapse show"
                                            data-bs-parent="#sidebar-nav">
                                            <ul class="scrollElement">
                                                @foreach ($difficulty_levels as $index => $difficulty_level)
                                                    <li class="">
                                                        <div class="form-check mod-checkbox typ-modal">
                                                            <input class="form-check-input checkbox"
                                                                id="{{ $difficulty_level->difficulty_level }}"
                                                                name="{{ $difficulty_level->difficulty_level }}"
                                                                onchange="handleDifficultyChange(this),handleApplyChanges()"
                                                                type="checkbox" value="{{ $difficulty_level->id }}">
                                                            <label class="form-check-label"
                                                                for="{{ $difficulty_level->difficulty_level }}">
                                                                {{ $difficulty_level->difficulty_level }}
                                                            </label>
                                                        </div>
                                                    </li>
                                                @endforeach

                                            </ul>
                                            <!-- </form> -->

                                           
                                        </div>

                                    </li><!-- End Forms Nav -->

                                    <li class="nav-item">
                                        <a class="nav-link" data-bs-target="#pricing-nav" data-bs-toggle="collapse"
                                            href="#" aria-expanded="false">
                                            <span>Pricing</span><i class="icon icon-arrow "></i>
                                        </a>
                                        <div id="pricing-nav" class="nav-content collapse show"
                                            data-bs-parent="#sidebar-nav">
                                            <ul class="scrollElement">
                                                <li>
                                                    <div class="form-check mod-checkbox typ-modal">
                                                        <input class="form-check-input checkbox"
                                                            onchange="pricingChange(this)" name="PREMIUM" type="checkbox"
                                                            value="PREMIUM" id="PREMIUM">
                                                        <label class="form-check-label" for="PREMIUM">
                                                            Premium
                                                        </label>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="form-check mod-checkbox typ-modal">
                                                        <input class="form-check-input checkbox"
                                                            onchange="pricingChange(this)" name="FREE" type="checkbox"
                                                            value="FREE" id="FREE">
                                                        <label class="form-check-label" for="FREE">
                                                            Free
                                                        </label>
                                                    </div>
                                                </li>
                                            </ul>


                                        </div>

                                    </li><!-- End Forms Nav -->
                                </ul>
                                </aside>
                            </div>
                        </div>


                    </div>
                    <div class="col-lg-9">
                        <div class="job-card-section">
                            <div class="row position-count-stickey">
                                <div class="col-md-12">
                                    <div class="job-value wow fadeInUp" data-wow-duration="0.4s">
                                        <h2 class="numbers"><span class="count" id="count">0</span>Masterclasses</h2>
                                        {{-- <div class="sort-area">
                                            <select class="form-select custom-select" aria-label="Default select example">
                                                <option selected>Sort By: Relevency</option>
                                                <option value="relevance">Relevance</option>
                                                <option value="date">Date</option>
                                            </select>
                                        </div> --}}
                                    </div>

                                </div>
                            </div>
                            <div class="row gap-create-24 wow fadeInUp" id="datas" data-wow-duration="0.6s">



                            </div>
                            <div class="row" id="paginationHide">
                                <div class="col-md-12 ">
                                    <nav class="bs-pagination" aria-label="Page navigation example">
                                        <ul class="pagination justify-content-end">
                                            <li class="page-item active">{{ $master_classes->links() }}</li>
                                            </li>
                                        </ul>
                                    </nav>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
        </section>
        <!-- <section class="lyt-section typ-resource typ-greydot-bg typ-our-student">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="heading-wrapper typ-center mb-0">
                            <h2 class="bs-heading wow fadeInUp" data-wow-duration="0.4s"
                                style="visibility: visible; animation-duration: 0.4s; animation-name: fadeInUp;">
                                Hear from Our Masterclass Alumni
                            </h2>
                        </div>
                    </div>
                </div>


                <div class="row swiper-reverse-margin">
                    <div class="col-md-12">
                        <div class="custom-navigation margB wow fadeInUp" data-wow-duration="0.8s">
                            <div class="swiper-button-next top-next"></div>
                            <div class="swiper-button-prev top-prev"></div>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="bs-swiper typ-opp wow fadeInUp" data-wow-duration="0.8s">
                            <div class="swiper our-student">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                        <div class="bs-testimonial master-testmonial text-center position-relative">
                                            <div class="person-img">
                                                <img src="assets/images/masterclass/testimonial/testimonial1.png"
                                                    class="img-fluid" alt="">
                                            </div>
                                            <h2 class="bs-para">Shakshi Kankaria</h2>
                                            <p>The masterclass provided invaluable insights and practical skills. The
                                                interactive sessions and personalized attention helped me grasp complex
                                                concepts easily. Highly recommend!
                                            </p>

                                            <div class="quoat-img">
                                                <img src="assets/images/quoat1.png" alt="">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="swiper-slide">
                                        <div class="bs-testimonial master-testmonial text-center position-relative">
                                            <div class="person-img">
                                                <img src="assets/images/masterclass/testimonial/testimonial1.png"
                                                    class="img-fluid" alt="">
                                            </div>
                                            <h2 class="bs-para">Shakshi Kankaria</h2>
                                            <p>The masterclass provided invaluable insights and practical skills. The
                                                interactive sessions and personalized attention helped me grasp complex
                                                concepts easily. Highly recommend!
                                            </p>

                                            <div class="quoat-img">
                                                <img src="assets/images/quoat1.png" alt="">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="swiper-slide">
                                        <div class="bs-testimonial master-testmonial text-center position-relative">
                                            <div class="person-img">
                                                <img src="assets/images/masterclass/testimonial/testimonial1.png"
                                                    class="img-fluid" alt="">
                                            </div>
                                            <h2 class="bs-para">Shakshi Kankaria</h2>
                                            <p>The masterclass provided invaluable insights and practical skills. The
                                                interactive sessions and personalized attention helped me grasp complex
                                                concepts easily. Highly recommend!
                                            </p>

                                            <div class="quoat-img">
                                                <img src="assets/images/quoat1.png" alt="">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="swiper-slide">
                                        <div class="bs-testimonial master-testmonial text-center position-relative">
                                            <div class="person-img">
                                                <img src="assets/images/masterclass/testimonial/testimonial1.png"
                                                    class="img-fluid" alt="">
                                            </div>
                                            <h2 class="bs-para">Shakshi Kankaria</h2>
                                            <p>The masterclass provided invaluable insights and practical skills. The
                                                interactive sessions and personalized attention helped me grasp complex
                                                concepts easily. Highly recommend!
                                            </p>

                                            <div class="quoat-img">
                                                <img src="assets/images/quoat1.png" alt="">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section> -->



    </main>

    <!-- Modal -->
    <div class="bs-modal modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog  modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title fs-5" id="exampleModalLabel">Difficulty Levels</h2>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="location-nav" class="nav-content">
                        <div class="location-search">
                            <div class="input-group">
                                <span class="input-group-text" id="basic-addon1"><span
                                        class="icon icon-search"></span></span>
                                <input type="text" id="searchDifficultyLevels" class="form-control"
                                    placeholder="Search" aria-label="searchLocation" aria-describedby="basic-addon1">
                            </div>
                        </div>
                        <ul class="scrollElement" id="DifficultyLevelsModalSearch">
                            @foreach ($difficulty_levels as $difficulty_level)
                                <li>
                                    <div class="form-check mod-checkbox typ-modal">
                                        <input class="form-check-input checkbox"
                                            id="{{ $difficulty_level->difficulty_level }}"
                                            name="{{ $difficulty_level->difficulty_level }}"
                                            onchange="handleDifficultyChange(this)" type="checkbox"
                                            value="{{ $difficulty_level->id }}">
                                        <label class="form-check-label" for="beginner">
                                            {{ $difficulty_level->difficulty_level }}
                                        </label>
                                    </div>
                                </li>
                            @endforeach

                        </ul>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" onclick="handleApplyChanges()" class="btn bs-btn typ-apply">Apply
                        Changes</button>
                </div>
            </div>
        </div>
    </div>


    <div class="bs-modal modal fade" id="departmentModal" tabindex="-1" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog  modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title fs-5" id="exampleModalLabel">Departments</h2>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="location-nav" class="nav-content">
                        <div class="location-search">
                            <div class="input-group">
                                <span class="input-group-text" id="basic-addon1"><span
                                        class="icon icon-search"></span></span>
                                <input id="departmentSearch" type="text" class="form-control" placeholder="Search"
                                    aria-label="searchLocation" aria-describedby="basic-addon1">
                            </div>
                        </div>
                        <ul class="scrollElement" id="departmentSearchappend">
                            @foreach ($departments as $department)
                                <li>
                                    <div class="form-check mod-checkbox typ-modal">
                                        <input class="form-check-input checkbox" id="{{ $department->department_name }}"
                                            name="{{ $department->department_name }}"
                                            onchange="handleModalCategoryChange(this)" type="checkbox"
                                            value="{{ $department->id }}">
                                        <label class="form-check-label" for="{{ $department->department_name }}">
                                            {{ $department->department_name }}
                                        </label>
                                    </div>
                                </li>
                            @endforeach



                        </ul>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" onclick="handleApplyChanges()" class="btn bs-btn typ-apply">Apply
                        Changes</button>
                </div>
            </div>
        </div>
    </div>
     <!-- Modal -->
     <div class="bs-modal modal fade" id="pricingModal" tabindex="-1" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog  modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title fs-5" id="exampleModalLabel">Pricing</h2>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="location-nav" class="nav-content">
                      
                        <ul class="scrollElement">
                                                <li>
                                                    <div class="form-check mod-checkbox typ-modal">
                                                        <input class="form-check-input checkbox"
                                                            onchange="pricingChange(this)" name="PREMIUM" type="checkbox"
                                                            value="PREMIUM" id="PREMIUM">
                                                        <label class="form-check-label" for="PREMIUM">
                                                            Premium
                                                        </label>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="form-check mod-checkbox typ-modal">
                                                        <input class="form-check-input checkbox"
                                                            onchange="pricingChange(this)" name="FREE" type="checkbox"
                                                            value="FREE" id="FREE">
                                                        <label class="form-check-label" for="FREE">
                                                            Free
                                                        </label>
                                                    </div>
                                                </li>
                                            </ul>



                        </ul>
                    </div>
                </div>
                <!-- <div class="modal-footer">
                    <button type="button" onclick="handleApplyChanges()" class="btn bs-btn typ-apply">Apply
                        Changes</button>
                </div> -->
            </div>
        </div>
    </div>



    <!-- Button trigger modal -->
    <!-- Modal -->
    <div class="bs-modal typ-applied modal fade" id="filterApplied" tabindex="-1" aria-labelledby="filterAppliedLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="modal-hd">
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        <a href="" class="title">Remove All</a>
                    </div>
                    <div class="nav-content">
                        <ul class="scrollElement" id="difficultyList">


                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <script>
       var departments = [];
var difficulty_levels = [];
var pricing = [];
var tempDepartments = [];
var tempDifficultyLevels = [];
var sorting_order = 'desc'; // Default sorting order

        function handleSorting(value) {
            sorting_order = value;
            getVWEP();

        }

        function handleApplyChanges() {
    // Close the modal
    $('#departmentModal').modal('hide');

    // Sync departments
    departments = [...tempDepartments]; // Copy modal selections to departments state

    // Update sidebar checkboxes for departments
    const sidebarDepartmentCheckboxes = document.querySelectorAll('#department-nav input[type="checkbox"]');
    sidebarDepartmentCheckboxes.forEach(function(checkbox) {
        checkbox.checked = departments.includes(checkbox.value);
    });

    // Apply the changes and refresh content
    getVWEP();
}

function handleModalCategoryChange(checkbox) {
    var value = checkbox.getAttribute('value');
    if (checkbox.checked) {
        tempDepartments.push(value);
    } else {
        const index = tempDepartments.indexOf(value);
        if (index !== -1) {
            tempDepartments.splice(index, 1);
        }
    }
}

$('#departmentModal').on('hidden.bs.modal', function() {
    tempDepartments = [...departments]; // Reset modal state to match sidebar
    const modalDepartmentCheckboxes = document.querySelectorAll('#departmentModal input[type="checkbox"]');
    modalDepartmentCheckboxes.forEach(function(checkbox) {
        checkbox.checked = departments.includes(checkbox.value);
    });
});
    function viewMore() {
        // Sync the modal checkboxes with the current state of the sidebar checkboxes
        tempDepartments = [...departments]; // Copy current sidebar state to modal state

        const sidebarCheckboxes = document.querySelectorAll('#sidebar input[type="checkbox"]');
        sidebarCheckboxes.forEach(function(checkbox) {
            const modalCheckbox = document.querySelector(`#departmentModal input[name="${checkbox.name}"]`);
            if (modalCheckbox) {
                modalCheckbox.checked = checkbox.checked;
            }
        });

        // Show the modal
        $('#departmentModal').modal('show');
    }


        function handleDifficultyChange(checkbox) {
            var name = checkbox.getAttribute('name');
            var value = checkbox.getAttribute('value');
            var id = checkbox.getAttribute('id');

            // console.log("Checkbox value >>>",checkbox);
            if (checkbox.checked) {
                // console.log(checkbox.value)
                difficulty_levels.push(checkbox.value)
                handleCheckboxChange(checkbox)

                var li = document.createElement('div');
                li.innerHTML = `<li class="form-check mod-checkbox typ-modal">
                            <input class="form-check-input checkbox" checked type="checkbox" name="${name}" onchange="removeDifficultyLi(this)" value="${value}" id="${name}">
                            <label class="form-check-label" for="${name}">${name}</label>
                        </li>`;

                var referenceDiv = document.getElementById('difficultyList');

                referenceDiv.append(li)
                // Insert the li element after the reference div

                //    getVWEP();
            } else {
                var existingLi = $('#difficultyList').find('input[type="checkbox"][id="' + name + '"]').closest('li');

                if (existingLi.length > 0) {
                    existingLi.remove();
                }
                const index = difficulty_levels.indexOf(checkbox.value);
                if (index !== -1) {
                    difficulty_levels.splice(index, 1);
                    // console.log("Updated departments array:", departments);
                    // getVWEP();
                }

                handleCheckboxChange(checkbox)
            }

        }


        function removeDifficultyLi(checkbox) {

            var name = checkbox.getAttribute('name');
            var value = checkbox.getAttribute('value');
            var id = checkbox.getAttribute('id');

            var existingLi = $('#difficultyList').find('input[type="checkbox"][id="' + name + '"]').closest('li');

            if (existingLi.length > 0) {
                existingLi.remove();
            }
            const index = difficulty_levels.indexOf(checkbox.value);
            if (index !== -1) {
                difficulty_levels.splice(index, 1);
                getVWEP();
            }

            handleCheckboxChange(checkbox)

        }


        function pricingChange(checkbox) {

            var name = checkbox.getAttribute('name');
            var value = checkbox.getAttribute('value');
            var id = checkbox.getAttribute('id');

            // console.log("pricing checkbox value >>>",checkbox);
            if (checkbox.checked) {
                // console.log(checkbox.value)
                pricing.push(checkbox.value)
                handleCheckboxChange(checkbox)

                var li = document.createElement('div');
                li.innerHTML = `<li class="form-check mod-checkbox typ-modal">
                            <input class="form-check-input checkbox" checked type="checkbox" name="${name}" onchange="removePricingLi(this)" value="${value}" id="${name}">
                            <label class="form-check-label" for="${name}">${name}</label>
                        </li>`;

                var referenceDiv = document.getElementById('difficultyList');

                referenceDiv.append(li)
                // Insert the li element after the reference div

                getVWEP();
            } else {

                var existingLi = $('#difficultyList').find('input[type="checkbox"][id="' + name + '"]').closest('li');

                if (existingLi.length > 0) {
                    existingLi.remove();
                }
                const index = pricing.indexOf(checkbox.value);
                if (index !== -1) {
                    pricing.splice(index, 1);
                    // console.log("Updated pricing array:", pricing);
                    getVWEP();
                }

                handleCheckboxChange(checkbox)
            }
            $('#pricingModal').modal('hide');

        }

        function removePricingLi(checkbox) {
            var name = checkbox.getAttribute('name');
            var value = checkbox.getAttribute('value');
            var id = checkbox.getAttribute('id');

            var existingLi = $('#difficultyList').find('input[type="checkbox"][id="' + name + '"]').closest('li');

            if (existingLi.length > 0) {
                existingLi.remove();
            }
            const index = pricing.indexOf(checkbox.value);
            if (index !== -1) {
                pricing.splice(index, 1);
                // console.log("Updated departments array:", pricing);
                getVWEP();
            }

            handleCheckboxChange(checkbox)
            $('#pricingModal').modal('hide');

        }


        function handleCategoryChange(checkbox) {
        var value = checkbox.getAttribute('value');

        // Handle sidebar checkbox change
        if (checkbox.checked) {
            departments.push(value);
        } else {
            const index = departments.indexOf(value);
            if (index !== -1) {
                departments.splice(index, 1);
            }
        }

        getVWEP(); // Apply the filter changes immediately
    }


        // function handleCategoryChange(checkbox) {

        //     var name = checkbox.getAttribute('name');
        //     var value = checkbox.getAttribute('value');
        //     var id = checkbox.getAttribute('id');

        //     if (checkbox.checked) {
        //         departments.push(checkbox.value)
        //         handleCheckboxChange(checkbox)

        //         var li = document.createElement('div');
        //         li.innerHTML = `<li class="form-check mod-checkbox typ-modal">
        //                     <input class="form-check-input checkbox" checked type="checkbox" name="${name}" onchange="removeCategoryLi(this)" value="${value}" id="${name}">
        //                     <label class="form-check-label" for="${name}">${name}</label>
        //                 </li>`;

        //         var referenceDiv = document.getElementById('difficultyList');

        //         referenceDiv.append(li)
        //         // Insert the li element after the reference div

        //         //    getVWEP();
        //     } else {
        //         var existingLi = $('#difficultyList').find('input[type="checkbox"][id="' + name + '"]').closest('li');

        //         if (existingLi.length > 0) {
        //             existingLi.remove();
        //         }
        //         const index = departments.indexOf(checkbox.value);
        //         if (index !== -1) {
        //             departments.splice(index, 1);
        //             // console.log("Updated departments array:", departments);
        //             // getVWEP();
        //         }

        //         handleCheckboxChange(checkbox)
        //     }
        // }

        function removeCategoryLi(checkbox) {
            var name = checkbox.getAttribute('name');
            var value = checkbox.getAttribute('value');
            var id = checkbox.getAttribute('id');

            var existingLi = $('#difficultyList').find('input[type="checkbox"][id="' + name + '"]').closest('li');

            if (existingLi.length > 0) {
                existingLi.remove();
            }
            const index = departments.indexOf(checkbox.value);
            if (index !== -1) {
                departments.splice(index, 1);
                // console.log("Updated departments array:", departments);
                getVWEP();
            }

            handleCheckboxChange(checkbox)

        }


        // Function to handle checkbox change
        function handleCheckboxChange(checkbox) {
            var type = checkbox.getAttribute('name');
            var value = checkbox.getAttribute('value');


            var checkboxes = document.querySelectorAll('.checkbox');

            checkboxes.forEach(function(item) {
                if (item.getAttribute('name') === type && item.getAttribute('value') === value) {
                    item.checked = checkbox.checked;
                }
            });

        }

        function formatNumber(number) {
    if (Number.isInteger(number)) {
        return number.toString(); // Return as string without decimal part
    } else {
        return number.toFixed(1); // Return with one decimal place
    }
}

        function getVWEP(currentPage) {
            const token = '{{ csrf_token() }}';


            document.getElementById('applied_count').innerText = difficulty_levels.length + departments.length + pricing
                .length;

            var fragment = document.createDocumentFragment();

            var datasElement = document.getElementById('datas');
            while (datasElement.firstChild) {
                datasElement.removeChild(datasElement.firstChild);
            }
            fetch("{{ route('getMasterClassList') }}", {
                    method: "POST",
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-Token': token
                    },
                    body: JSON.stringify({
                        'departments': departments,
                        'sorting_order': sorting_order,
                        'difficulty_levels': difficulty_levels,
                        'pricing': pricing,
                        'page': currentPage
                    }),
                }).then(response => response.json())
                .then((data) => {
                    // console.log("Data is >>>", data);
                    // $("#paginationHide").hide();


                    if (data.pagination == '') {
                        $("#paginationHide").hide();
                    } else {
                        $("#paginationHide").show();
                    }

        
                    if(data.data.data.length <1){
                  $('#datas').html(
                        '<section class="lyt-section" id="dataNotFound">' +
                        '<div class="notfound">' +
                        '<div class="content-wrapper">' +
                        '<h2>Data Not Found!</h2>' +
                        '<img class="img-fluid" src="assets/images/not-found.png" alt="not-found">' +
                        '</div>' +
                        '</div>' +
                        '</section>'
                    );
                }
                    if (data.total) {
                        document.getElementById('count').innerText = data.queryCount;
                    } else {
                        document.getElementById('count').innerText = 0;
                    }

                    const labels=['label','typ-yellow','typ-blue'];

                    for (var i = 0; i < data.data.data.length; i++) {

                        const masterClass = data.data.data[i];

                        const label = labels[i % labels.length];

                        var svgname="";

                        if(masterClass.difficulty_level=="Advance"){
                            svgname="advance.svg";
                        }else if(masterClass.difficulty_level=="Intermediate"){
                            svgname="intermediate.svg";
                        }else{
                            svgname="begin.svg";
                        }

                        var plainTextDescription = masterClass.description.replace(/<[^>]*>?/gm, '');
                        var truncatedDescription = plainTextDescription.length > 180 ? plainTextDescription.substring(0, 180) + '...' : plainTextDescription;

                        var totalNumber = masterClass.total_feedbacks * 5;
                    var averageRating = totalNumber>0 ? masterClass.rating / totalNumber * 5 : 0;
                    var fullStars = Math.floor(averageRating);
                    var halfStar = averageRating - fullStars >= 0.5 ? 1 : 0;

                    averageRating=formatNumber(averageRating);

                        var div = document.createElement('div');
                        div.className = 'col-xxl-4 col-xl-6 col-md-6';
                        div.innerHTML = '<a href="{{ route('showMasterClasses', '') }}/' + masterClass.id +
                            '" class="bs-card h-100">' +
                            ' <div class="typ-job typ-rating">' +
                            ' <div class="img-area">' +
                            '     <img class="img-fluid img-widthmaster" src="' + masterClass.banner_image + '" alt="masterclass">' +
                            '     <span class="label '+label+'">' + masterClass.department_name + '</span>' +
                            ' </div>' +
                            ' <div class="card-text">' +
                            '<div class="flex11auto">'+
                             '     <h3 class="title singleLineText">' + masterClass.title + '</h3>' +
                            '     <div class="descriptionText mb-2 twoLineText">'+truncatedDescription+'</div>' +
                            '</div>'+
                            
                            '     <div class="status">' +
                            '         <div class="time">' +
                            '             <span class="icon icon-time"></span>' +
                            '            <span class="timeHours">' + masterClass.duration+ '</span>' +
                            '         </div>' +
                            '         <span class="line">|</span>' +
                            '         <div class="time">' +
                            '             <img src="assets/images/svg/video-cam.svg" alt="Lessons">' +
                            '             <span class="timeHours">' + masterClass.lectures_count + ' Lessons</span>' +
                            '         </div>' +
                            '         <span class="line">|</span>' +
                            '         <div class="time">' +
                            '             <img src="assets/images/svg/'+svgname+'" alt="intermediate">' +
                            '             <span class="timeHours">' + masterClass.difficulty_level + '</span>' +
                            '         </div>' +
                            '     </div>' +
                            ' </div>' +
                            '<div class="card-footer">' +
                            '    <div class="price-rating-section">' +
                            ((masterClass.pricing==='PREMIUM') ? 
                            '        <div class="price">' +
                            '            <span class="orange">₹ ' + masterClass.discouted_price + '</span>' +
                            '            <span class="grey">₹ ' + masterClass.price + '</span>' +
                            '        </div>' 
                               :
                            '        <div class="price">' +
                            '            <span class="orange">FREE</span>' +
                            '            <span class="grey"></span>' +
                            '        </div>' 
                            )+
                            '        <div class="review">' +
                            '            <div class="bs-stars">' +
                            '                <span class="count">'+averageRating+'</span>' +
                            '                <ul class="rate">' +
                                '                    ' + Array(fullStars).fill('<li><span class="icon-star-fill"></span></li>').join('') +
                                '                    ' + (halfStar ? '<li><span class="icon-star-half"></span></li>' : '') +
                                '                    ' + Array(5 - fullStars - halfStar).fill('<li><span class="icon-star-blank"></span></li>').join('') +
                                '                </ul>' +
                            '            </div>' +
                            '        </div>' +
                            '    </div>' +
                            '</div>' +
                            '</div>' +
                            '</a>';
                        fragment.appendChild(div);

                    }
                    document.getElementById('datas').appendChild(fragment);
                    $('.bs-pagination ul').html($(data.pagination).html());

                }).catch(() => {
                    this.message = 'Ooops! Something went wrong!';

                })
        }


        getVWEP();


        $(document).ready(function() {
            $(document).on('click', '.pagination a', function(event) {
                event.preventDefault();
                var page = $(this).attr('href').split('page=')[1];
                currentPage = page;

                getVWEP(currentPage);
            });
        });
    </script>


    <script>
        const token = '{{ csrf_token() }}';


        $('#searchDifficultyLevels').keyup(function() {
            var term = $(this).val();
            // alert(term);

            $.ajax({
                url: "{{ route('fetchDifficultyLevels') }}",
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': token
                },
                data: {
                    term: term
                },
                success: function(response) {
                    if (response.status == 200) {
                        // console.log(' response:', response);
                        $('#DifficultyLevelsModalSearch').empty();
                        response.data.forEach(function(difficulty_level) {
                            var html = '<li>' +
                                '<div class="form-check mod-checkbox typ-modal">' +
                                '<input class="form-check-input" type="checkbox" name="' +
                                difficulty_level.difficulty_level + '" value="' +
                                difficulty_level.id + '" id="' + difficulty_level
                                .difficulty_level + '" placeholder="' + difficulty_level
                                .difficulty_level +
                                '" onclick="handleDifficultyChange(this)">' +
                                '<label class="form-check-label" for="' + difficulty_level
                                .difficulty_level + '">' +
                                difficulty_level.difficulty_level +
                                '</label>' +
                                '</div>' +
                                '</li>';

                            // Append the generated HTML to the ul element
                            $('#DifficultyLevelsModalSearch').append(html);
                        });
                    } else {
                        $('#DifficultyLevelsModalSearch').html('Data Not Found');
                    }
                },
                error: function(error) {
                    console.error('AJAX error:', error);
                }
            });

        });



        $('#departmentSearch').keyup(function() {
            var term = $(this).val();
            // alert(term);
            // console.log("term>>>", term);

            $.ajax({
                url: "{{ route('department.search') }}",
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': token
                },
                data: {
                    term: term
                },
                success: function(response) {
                    if (response.status == 200) {
                        // console.log(' response:', response);
                        $('#departmentSearchappend').empty();
                        response.data.forEach(function(department) {
                            var html = '<li>' +
                                '<div class="form-check mod-checkbox typ-modal">' +
                                '<input class="form-check-input checkbox" type="checkbox" name="' +
                                department.department_name + '" value="' + department.id +
                                '" id="' + department.department_name + '" placeholder="' +
                                department.department_name +
                                '" onclick="handleCategoryChange(this)">' +
                                '<label class="form-check-label" for="' + department
                                .department_name + '' + department.id + '">' +
                                department.department_name +
                                '</label>' +
                                '</div>' +
                                '</li>';

                            // Append the generated HTML to the ul element
                            $('#departmentSearchappend').append(html);
                        });
                    } else {
                        $('#departmentSearchappend').html('Data Not Found');
                    }
                },
                error: function(error) {
                    console.error('AJAX error:', error);
                }
            });

        });
    </script>
@endsection