@extends('frontend.layouts.main')

@section('content')

<main class="home bg-light-grey">
    <!-- Banner section -->
    <section class="bs-banner clr-white">
        <div class="container">
            <div class="row align-item-center">
                <div class="col-lg-6 align-self-center">
                    <div class="content-wrapper">
                        <h2 class="title typ-theme max-800 wow fadeInUp" data-wow-duration="0.2s">Explore <span
                                class="typ-green">Unocue Pro</span> Courses

                        </h2>
                        <p class="para typ-theme wow fadeInUp" data-wow-duration="0.4s">Empowering the next generation
                            of professionals
                        </p>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="img-section">
                        <div class="img-area">
                            <picture>
                                <source srcset="assets/images/courses/Coursessize.png" media="(max-width: 767px)" />
                                <img class="img-fluid wow fadeIn" data-wow-duration="1s"
                                    src="assets/images/courses/Coursessize.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">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Banner section -->

    <section class="lyt-section padding72 typ-filter-area courceclr-white" id="jobSectionSearch">
        <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="#pricingModal" data-label="Department">
                                        Pricing</div>
                                    <div class="btn-filter typ-12Medium" data-bs-toggle="modal"
                                        data-bs-target="#modeModal" data-label="Level">Mode
                                    </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" id="appliedDiv">
                                    <div class="all-filter">
                                        <span class="filterText">All Filters</span>
                                        <a class="applied" data-bs-toggle="modal"
                                            data-bs-target="#filterApplied">Applied <span class="count" id="fliterCountNumber">(5)</span></a>
                                    </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>Mode</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">
                                        
                                            <li>
                                            <div class="form-check mod-checkbox ">
                                                        <input class="form-check-input" type="checkbox" name="mode" value="ONLINE"
                                                            id="ONLINE" placeholder="ONLINE" onclick="filter(event)">
                                                        <label class="form-check-label" for="ONLINE">
                                                    Online
                                                        </label>
                                                    </div>
                                            </li>
                                            <li>
                                            <div class="form-check mod-checkbox ">
                                                        <input class="form-check-input" type="checkbox" name="mode" value="OFFLINE"
                                                            id="OFFLINE" placeholder="OFFLINE" onclick="filter(event)">
                                                        <label class="form-check-label" for="OFFLINE">
                                                 Offline
                                                        </label>
                                                    </div>
                                            </li>
                                        </ul>
                                       
                                    </div>

                                </li>


                                <li class="nav-item">
                                    <a class="nav-link" data-bs-target="#level-nav" data-bs-toggle="collapse" href="#"
                                        aria-expanded="false">
                                        <span>Pricing</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">
                                        
                                            <li>
                                            <div class="form-check mod-checkbox ">
                                                        <input class="form-check-input" type="checkbox" name="payment" value="PAID"
                                                            id="PAID" placeholder="PAID" onclick="filter(event)">
                                                        <label class="form-check-label" for="PAID">
                                                        Premium
                                                        </label>
                                                    </div>
                                            </li>
                                            <li>
                                            <div class="form-check mod-checkbox ">
                                                        <input class="form-check-input" type="checkbox" name="payment" value="FREE"
                                                            id="FREE" placeholder="FREE" onclick="filter(event)">
                                                        <label class="form-check-label" for="FREE">
                                                        Free
                                                        </label>
                                                    </div>
                                            </li>
                                        </ul>
                                       
                                    </div>

                                </li>
                            </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="countDynamic">{{$courcesCount}}</span> Courses</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 mrgB32     wow fadeInUp" data-wow-duration="0.6s" id="job-container">
                            @php
                            $labels=['label','typ-yellow','typ-blue'];
                            @endphp
                            @foreach($cources as $key=> $cource)
                            @php
                            $label = $labels[$key % count($labels)]; 
                            @endphp
                            <div class="col-xxl-4 col-xl-6 col-md-6">
                                <a href="{{ route('cource.detail',[$cource->slug])}}" class="bs-card h-100">
                                    <div class="typ-job typ-rating typ-opportunities cource-blackborder">
                                        <div class="img-area">
                                            <img class="img-fluid" src="{{$cource->banner_image}}"
                                                alt="job">
                                            <span class="label {{$label}}">{{$cource->category_name}}</span>
                                        </div>
                                        <div class="card-text">
                                            <div class="date-time">
                                                <div class="date">
                                                    <span class="icon icon-calender"></span>
                                                    <span class="date-range">{{ date('F j', strtotime($cource->start_date)) }} - {{ date('F j, Y', strtotime($cource->end_date)) }}</span>
                                                </div>
                                                <div class="days">
                                                    <span class="days-pending">{{$cource->remaining_days}} Left</span>
                                                    <span class="icon icon-time-filter"></span>
                                                </div>
                                            </div>
                                            <h3 class="title">{{$cource->title}}</h3>
                                            @if($cource->is_online == 1)
                                            <div class="status">
                                                <div class="online">
                                                    <span class="icon icon-dot"></span>
                                                    <span class="text">Live Online</span> 
                                                </div>
                                                <span class="line">|</span>
                                                @if($cource->video_link_type == "zoom")
                                                <div class="img-section">
                                                    <img class="img-fluid" src="assets/images/zoom.svg" alt="zoom">
                                                </div>
                                                @elseif($cource->video_link_type == "microsoft")
                                                <div class="img-section">
                                                    <img class="img-fluid" src="assets/images/microsoft-team.png" alt="microsoft">
                                                </div>
                                                @else
                                                <div class="img-section">
                                                    <img class="img-fluid" src="assets/images/google-meet-logo.svg" alt="meet">
                                                </div>
                                                @endif
                                            </div>
                                            @else
                                            <div class="status">
                                                <div class="online typ-blue">
                                                    <span class="icon icon-dot"></span>
                                                    <span class="text">Classroom/offline</span>
                                                </div>
                                                    <span class="line">|</span>
                                                <div class="online typ-blue">
                                                    <span class="icon icon-map-icon"></span>
                                                    <span class="text">{{$cource->city_name}}</span>
                                                </div>
                                            </div>
                                            @endif
                                        </div>
                                        <div class="card-footer">
                                            <div class="price-rating-section">
                                                @if($cource->pricing == "FREE")
                                                <div class="price">
                                                    <span class="orange">FREE</span>
                                                </div>
                                                @else
                                                @if($cource->discouned_amount == "")
                                                <div class="price">
                                                    <span class="orange">₹ {{$cource->amount}}</span>
                                                </div>
                                                @else
                                                <div class="price">
                                                    <span class="orange">₹ {{$cource->discouned_amount}}</span>
                                                    <span class="grey">₹ {{$cource->amount}}</span>
                                                </div>
                                                @endif
                                                @endif
                                                <!-- <div class="review">
                                                    <div class="bs-stars">
                                                        <span class="count">3.5</span>
                                                        <ul class="rate">
                                                            <li><span class="icon-star-fill"></span></li>
                                                            <li><span class="icon-star-fill"></span></li>
                                                            <li><span class="icon-star-fill"></span></li>
                                                            <li><span class="icon-star-half"></span></li>
                                                            <li><span class="icon-star-blank"></span></li>
                                                        </ul>
                                                    </div>
                                                </div> -->
                                            </div>
                                        </div>
                                    </div>
                                </a>
                             </div>
                             @endforeach
                        </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">{{$cources->links()}}</li>
                                        </li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    
                        <!-- <div class="row">
                            <div class="col-md-12 text-center">
                                <a class="btn bs-btn typ-cta wow fadeInUp" data-wow-duration="1s">Load More <span
                                        class="icon icon-right-arrow1"></span></a>
                            </div>
                        </div> -->
                    </div>
                </div>
            </div>
    </section>



</main>

<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">
                    <!-- <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" class="form-control" placeholder="Search" id="departmentSearch"
                                aria-label="searchLocation" aria-describedby="basic-addon1">
                        </div>
                    </div> -->
                    <ul class="scrollElement" id="">
             
                       <li>
                                            <div class="form-check mod-checkbox ">
                                                        <input class="form-check-input" type="checkbox" name="payment" value="PAID"
                                                            id="PAID" placeholder="PAID" onclick="filter(event)">
                                                        <label class="form-check-label" for="PAID">
                                                        Premium
                                                        </label>
                                                    </div>
                                            </li>
                                            <li>
                                            <div class="form-check mod-checkbox ">
                                                        <input class="form-check-input" type="checkbox" name="payment" value="FREE"
                                                            id="FREE" placeholder="FREE" onclick="filter(event)">
                                                        <label class="form-check-label" for="FREE">
                                                        Free
                                                        </label>
                                                    </div>
                                            </li>
                        
                    </ul>
                </div>
            </div>
            <div class="modal-footer">
                <!-- <button type="button" class="btn bs-btn typ-outline" data-bs-dismiss="modal">Clear All</button> -->
                <button type="button" onclick="filterApply()" class="btn bs-btn typ-apply">Apply Changes</button>
            </div>
        </div>
    </div>
</div>

<div class="bs-modal modal fade" id="modeModal" 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">Mode</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" class="form-control" placeholder="Search" id="difficultylevelSearch"
                                aria-label="searchLocation" aria-describedby="basic-addon1">
                        </div>
                    </div>
                    <ul class="scrollElement" id="">
                  
                    <li>
                                            <div class="form-check mod-checkbox ">
                                                        <input class="form-check-input" type="checkbox" name="mode" value="ONLINE"
                                                            id="ONLINE" placeholder="ONLINE" onclick="filter(event)">
                                                        <label class="form-check-label" for="ONLINE">
                                                   Online
                                                        </label>
                                                    </div>
                                            </li>
                                            <li>
                                            <div class="form-check mod-checkbox ">
                                                        <input class="form-check-input" type="checkbox" name="mode" value="OFFLINE"
                                                            id="OFFLINE" placeholder="OFFLINE" onclick="filter(event)">
                                                        <label class="form-check-label" for="OFFLINE">
                                                    Offline
                                                        </label>
                                                    </div>
                                            </li>
                      
                    </ul>
                </div>
            </div>
            <div class="modal-footer">
                <!-- <button type="button" class="btn bs-btn typ-outline" data-bs-dismiss="modal">Clear All</button> -->
                <button type="button" onclick="filterApply()" 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="" onclick="removeAll(event)" class="title">Remove All</a>
                </div>
                <div class="nav-content">
                    <ul class="scrollElement" id="applied">
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#appliedDiv").hide();


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

            $.ajax({
                url: "{{ route('department.search') }}",
                method: 'POST',
                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" type="checkbox" name="department" value="' + department.id + '" id="department' + department.id + '" placeholder="' + department.department_name + '" onclick="filterChange(event)">' +
                                '<label class="form-check-label" for="department' + 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);
                }
            });

        });

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

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

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

        });

    });





    var numCheckedCheckboxes = 0;

    var selectedFilters = [];

    var checkboxData = [];


    function filterChange(event) {
        var checkbox = event.currentTarget;
        var checkboxValue = checkbox.value;
        var checkboxName = checkbox.name;
        var filterID = checkbox.id;
        var placeholder = checkbox.placeholder;
        console.log("placeholder>>", placeholder);

        checkboxData.push({
            checkbox: checkbox,
            checkboxValue: checkboxValue,
            checkboxName: checkboxName,
            placeholder: placeholder,
            filterID: filterID
        });
    }

    function filterApply() {
        if (checkboxData.length > 0) {
            selectedFilters = [];
            checkboxData.forEach(function (checkbox) {
                var filterName = checkbox.checkbox.name;
                var filterValue = checkbox.checkbox.value;
                var filterID = checkbox.checkbox.id;
                var placeholder = checkbox.checkbox.placeholder;

                // Check if the checkbox is checked
                if (checkbox.checkbox.checked) {
                    var checkboxesWithSameID = document.querySelectorAll('input[type="checkbox"][id="' + filterID + '"]');
                    checkboxesWithSameID.forEach(function (checkbox) {
                        checkbox.checked = true;
                    });

                    var checkboxID = checkbox.checkbox.id;
                    console.log("checkboxID>>",checkboxID);

                      if ($('#applied input[type="checkbox"]#' + checkboxID).length === 0) {
                        var html = '<li>' +
                            '<div class="form-check mod-checkbox typ-modal">' +
                            '<input class="form-check-input" type="checkbox" name="' + checkbox.checkbox.name + '" value="' + checkbox.checkbox.value + '" id="' + checkboxID + '" onclick="filterChecked(event)" checked>' +
                            '<label class="form-check-label" for="' + checkboxID + '">' +
                            checkbox.checkbox.placeholder +
                            '</label>' +
                            '</div>' +
                            '</li>';
                        $('#applied').append(html);
                        numCheckedCheckboxes++;
                        $('#departmentSearch').val('');
                    }
                } else {
                    selectedFilters = selectedFilters.filter(function (filter) {
                        return filter.value !== checkbox.value;
                    });
                    var checkboxesWithSameID = document.querySelectorAll('input[type="checkbox"][id="' + filterID + '"]');
                    checkboxesWithSameID.forEach(function (checkbox) {
                        checkbox.checked = false;
                    });
                    
                    var existingLi = $('#applied').find('input[type="checkbox"][id="' + filterID + '"]').closest('li');
                    if (existingLi.length > 0) {
                        existingLi.remove();
                        numCheckedCheckboxes--;
                    }
                    $('#departmentSearch').val('');
                }
                selectedFilters = Array.from(document.querySelectorAll('input[type="checkbox"]:checked')).map(function (checkbox) {
                    return {
                        name: checkbox.name,
                        value: checkbox.value
                    };
                });
                if (numCheckedCheckboxes > 0) {
                    $('#fliterCountNumber').empty();
                    $("#appliedDiv").show();
                    $('#fliterCountNumber').append(numCheckedCheckboxes);
                } else (
                    $("#appliedDiv").hide()
                )
            });
        }
        console.log("selectedFilters>>>", selectedFilters);
        performAjaxRequest(selectedFilters);
        $('#modeModal').modal('hide');
        $('#pricingModal').modal('hide');
    }

    function removeAll(event) {
        event.preventDefault(); // Prevent default form submission

        // Uncheck all checkboxes
        $('input[type="checkbox"]').prop('checked', false);

        // Clear selectedFilters array
        selectedFilters = [];
        $('#applied').empty();
        $('#appliedDiv').hide();
        $('#filterApplied').modal('hide');

        // Reset numCheckedCheckboxes globally
        numCheckedCheckboxes = 0;

        // Perform Ajax request with empty selectedFilters
        performAjaxRequest(selectedFilters);
    }

    function filterChecked(event) {
        var checkbox = event.currentTarget;
        // console.log("checkbox>>",checkbox);
        var checkboxValue = checkbox.value;
        var checkboxName = checkbox.name;
        var filterID = checkbox.id;

        if (checkbox.checked) {
            var checkboxesWithSameID = document.querySelectorAll('input[type="checkbox"][id="' + filterID + '"]');
            checkboxesWithSameID.forEach(function (checkbox) {
                checkbox.checked = true;
            });
            var html = '<li>' +
                '<div class="form-check mod-checkbox typ-modal">' +
                '<input class="form-check-input" type="checkbox" name="' + checkbox.name + '" value="' + checkbox.value + '" id="' + checkbox.id + '" onclick="filterChecked(event)" checked>' +
                '<label class="form-check-label" for="' + checkbox.id + '">' +
                checkbox.placeholder +
                '</label>' +
                '</div>' +
                '</li>';
            $('#applied').append(html);
            numCheckedCheckboxes++;
        } else {
            selectedFilters = selectedFilters.filter(function (filter) {
                return filter.value !== checkbox.value;
            });
            var checkboxesWithSameID = document.querySelectorAll('input[type="checkbox"][id="' + filterID + '"]');
            checkboxesWithSameID.forEach(function (checkbox) {
                checkbox.checked = false;
            });
            numCheckedCheckboxes--;
        }
        selectedFilters = Array.from(document.querySelectorAll('input[type="checkbox"]:checked')).map(function (checkbox) {
            return {
                name: checkbox.name,
                value: checkbox.value
            };
        });
        if (numCheckedCheckboxes > 0) {
            $('#fliterCountNumber').empty();
            $("#appliedDiv").show();
            $('#fliterCountNumber').append(numCheckedCheckboxes);
        } else (
            $("#appliedDiv").hide()
        )

        console.log("selectedFilters>>>", selectedFilters);
        performAjaxRequest(selectedFilters);
        var existingLi = $('#applied').find('input[type="checkbox"][id="' + filterID + '"]').closest('li');

        // If found, remove the <li>
        if (existingLi.length > 0) {
            existingLi.remove();
        }

        $('#filterApplied').modal('hide');
    }



    function filter(event) {
        var checkbox = event.currentTarget;
        // console.log("checkbox>>",checkbox);
        var checkboxValue = checkbox.value;
        var checkboxName = checkbox.name;
        var filterID = checkbox.id;

        if (checkbox.checked) {
            var checkboxesWithSameID = document.querySelectorAll('input[type="checkbox"][id="' + filterID + '"]');
            checkboxesWithSameID.forEach(function (checkbox) {
                checkbox.checked = true;
            });
            var html = '<li>' +
                '<div class="form-check mod-checkbox typ-modal">' +
                '<input class="form-check-input" type="checkbox" name="' + checkbox.name + '" value="' + checkbox.value + '" id="' + checkbox.id + '" onclick="filterChecked(event)" checked>' +
                '<label class="form-check-label" for="' + checkbox.id + '">' +
                checkbox.placeholder +
                '</label>' +
                '</div>' +
                '</li>';
            $('#applied').append(html);
            numCheckedCheckboxes++;
        } else {
            selectedFilters = selectedFilters.filter(function (filter) {
                return filter.value !== checkbox.value;
            });
            var checkboxesWithSameID = document.querySelectorAll('input[type="checkbox"][id="' + filterID + '"]');
            checkboxesWithSameID.forEach(function (checkbox) {
                checkbox.checked = false;
            });
            numCheckedCheckboxes--;
            var existingLi = $('#applied').find('input[type="checkbox"][id="' + filterID + '"]').closest('li');
        if (existingLi.length > 0) {
            existingLi.remove();
        }
        }
        selectedFilters = Array.from(document.querySelectorAll('input[type="checkbox"]:checked')).map(function (checkbox) {
            return {
                name: checkbox.name,
                value: checkbox.value
            };
        });


        if (numCheckedCheckboxes > 0) {
            $('#fliterCountNumber').empty();
            $("#appliedDiv").show();
            $('#fliterCountNumber').append(numCheckedCheckboxes);
        } else {
            $("#appliedDiv").hide()
        }
        console.log("selectedFilters>>>", selectedFilters);
        performAjaxRequest(selectedFilters);
    }

    function formatstartDate(dateString) {
    var date = new Date(dateString);
    var options = { month: 'long', day: 'numeric'};
    return date.toLocaleDateString('en-US', options);
}

function formatendDate(dateString) {
    var date = new Date(dateString);
    var options = { month: 'long', day: 'numeric', year: 'numeric' };
    return date.toLocaleDateString('en-US', options);
}


    function performAjaxRequest(filterValues, currentPage) {
        console.log('Data to be sent:', filterValues);
        $.ajax({
            url: "{{ route('FilterCource') }}",
            method: 'POST',
            data: { filterValues: filterValues, page: currentPage },
            success: function (response) {
                if (response.status == 200) {
                    console.log(' response:', response);
                    if (response.pagination == '') {
                        $("#paginationHide").hide();
                        updateJobContainer(response);
                    } else {
                        $("#paginationHide").show();
                        updateJobContainerpagination(response, response.pagination);
                    }
                } else {
                    document.getElementById("countDynamic").innerHTML = 0;
                    $("#paginationHide").hide();
                    var container = $('#job-container');
                     container.empty();
                     $('#job-container').html(
                        '<section class="lyt-section padding0" 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>'
                    );
                }
            },
            error: function (error) {
                console.error('AJAX error:', error);
            }
        });


    }

    function updateJobContainerpagination(response, pagination) {
        document.getElementById("countDynamic").innerHTML = response.count;
        var container = $('#job-container');
        container.empty();
        var jobDetailsUrl = @json(route('cource.detail', ['slug_placeholder']));

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

        response.data.data.forEach(function (item, index) {
            var label = labels[index % labels.length];
    var cardHtml = '<div class="col-xxl-4 col-xl-6 col-md-6">' +
        '<a href="' + jobDetailsUrl.replace('slug_placeholder', item.slug) + '" class="bs-card h-100">' +
        '<div class="typ-job typ-rating typ-opportunities cource-blackborder">' +
        '<div class="img-area">' +
        '<img class="img-fluid" src="' + item.banner_image + '" alt="job">' +
        '<span class="label ' + label + '">' + item.category_name + '</span>' +
        '</div>' +
        '<div class="card-text">' +
        '<div class="date-time">' +
        '<div class="date">' +
        '<span class="icon icon-calender"></span>' +
        '<span class="date-range">' + formatstartDate(item.start_date) + ' - ' + formatendDate(item.end_date) + '</span>' +
        '</div>' +
        '<div class="days">' +
        '<span class="days-pending">' + item.remaining_days + ' Left</span>' +
        '<span class="icon icon-time-filter"></span>' +
        '</div>' +
        '</div>' +
        '<h3 class="title">' + item.title + '</h3>' +
        (item.is_online == 1 ?
            '<div class="status">' +
            '<div class="online">' +
            '<span class="icon icon-dot"></span>' +
            '<span class="text">Live Online</span>' +
            '</div>' +
            '<span class="line">|</span>' +
            '<div class="img-section">' +
            (item.video_link_type == "zoom" ?
                '<img class="img-fluid" src="assets/images/zoom.svg" alt="zoom">' :
                (item.video_link_type == "microsoft" ?
                    '<img class="img-fluid" src="assets/images/microsoft-team.png" alt="microsoft">' :
                    '<img class="img-fluid" src="assets/images/google-meet-logo.svg" alt="meet">')
            ) +
            '</div>' +
            '</div>' :
            '<div class="status">' +
            '<div class="online typ-blue">' +
            '<span class="icon icon-dot"></span>' +
            '<span class="text">Classroom/offline</span>' +
            '</div>' +
            '<span class="line">|</span>' +
            '<div class="online typ-blue">' +
            '<span class="icon icon-map-icon"></span>' +
            '<span class="text">' + item.city_name + '</span>' +
            '</div>' +
            '</div>') +
        '</div>' +
        '<div class="card-footer">' +
        '<div class="price-rating-section">' +
        (item.pricing !== "FREE" && item.discouned_amount !== undefined && item.discouned_amount !== "" ?
            '<div class="price">' +
            '<span class="orange">₹ ' + item.discouned_amount + '</span>' +
            '<span class="grey">₹ ' + item.amount + '</span>' +
            '</div>' :
            '<div class="price">' +
            '<span class="orange">FREE</span>' +
            '</div>') +

        '</div>' +
        '</div>' +
        '</div>' +
        '</a>' +
        '</div>';

    container.append(cardHtml);
});
        $('.bs-pagination ul').html($(pagination).html());
        document.getElementById('jobSectionSearch').scrollIntoView({ behavior: 'smooth' });
    }

    function updateJobContainer(response) {
        console.log("responseqqq>>>", response);
        document.getElementById("countDynamic").innerHTML = response.count;
        var container = $('#job-container');
        container.empty();
        var jobDetailsUrl = @json(route('cource.detail', ['slug_placeholder']));

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

        response.data.data.forEach(function (item, index) {
            var label = labels[index % labels.length];
        var cardHtml = '<div class="col-xxl-4 col-xl-6 col-md-6">' +
        '<a href="' + jobDetailsUrl.replace('slug_placeholder', item.slug) + '" class="bs-card h-100">' +
        '<div class="typ-job typ-rating typ-opportunities cource-blackborder">' +
        '<div class="img-area">' +
        '<img class="img-fluid" src="' + item.banner_image + '" alt="job">' +
        '<span class="label ' + label + '">' + item.category_name + '</span>' +
        '</div>' +
        '<div class="card-text">' +
        '<div class="date-time">' +
        '<div class="date">' +
        '<span class="icon icon-calender"></span>' +
        '<span class="date-range">' + formatstartDate(item.start_date) + ' - ' + formatendDate(item.end_date) + '</span>' +
        '</div>' +
        '<div class="days">' +
        '<span class="days-pending">' + item.remaining_days + ' Left</span>' +
        '<span class="icon icon-time-filter"></span>' +
        '</div>' +
        '</div>' +
        '<h3 class="title">' + item.title + '</h3>' +
        (item.is_online == 1 ?
            '<div class="status">' +
            '<div class="online">' +
            '<span class="icon icon-dot"></span>' +
            '<span class="text">Live Online</span>' +
            '</div>' +
            '<span class="line">|</span>' +
            '<div class="img-section">' +
            (item.video_link_type == "zoom" ?
                '<img class="img-fluid" src="assets/images/zoom.svg" alt="zoom">' :
                (item.video_link_type == "microsoft" ?
                    '<img class="img-fluid" src="assets/images/microsoft-team.png" alt="microsoft">' :
                    '<img class="img-fluid" src="assets/images/google-meet-logo.svg" alt="meet">')
            ) +
            '</div>' +
            '</div>' :
            '<div class="status">' +
            '<div class="online typ-blue">' +
            '<span class="icon icon-dot"></span>' +
            '<span class="text">Classroom/offline</span>' +
            '</div>' +
            '<span class="line">|</span>' +
            '<div class="online typ-blue">' +
            '<span class="icon icon-map-icon"></span>' +
            '<span class="text">' + item.city_name + '</span>' +
            '</div>' +
            '</div>') +
        '</div>' +
        '<div class="card-footer">' +
        '<div class="price-rating-section">' +
        (item.pricing !== "FREE" && item.discouned_amount !== undefined && item.discouned_amount !== "" && item.discouned_amount !== null ?
            '<div class="price">' +
            '<span class="orange">₹ ' + item.discouned_amount + '</span>' +
            '<span class="grey">₹ ' + item.amount + '</span>' +
            '</div>' :
            (item.pricing !== "FREE" && item.discouned_amount !== undefined && item.discouned_amount !== "" ?
            '<div class="price">' +
            '<span class="orange">₹ ' + item.amount + '</span>' +
         
            '</div>':
            '<div class="price">' +
            '<span class="orange">FREE</span>' +
            '</div>') )+
        '</div>' +
        '</div>' +
        '</div>' +
        '</a>' +
        '</div>';

    container.append(cardHtml);
    document.getElementById('jobSectionSearch').scrollIntoView({ behavior: 'smooth' });
});



    }

    $(document).ready(function () {
    $(document).on('click', '.pagination a', function (event) {
        event.preventDefault();
        $('.pagination a').removeClass('active'); // Remove active class from all pagination links
        $(this).addClass('active'); // Add active class to the clicked pagination link
        var page = $(this).attr('href').split('page=')[1];
        currentPage = page;
        selectedFilters = selectedFilters;
        console.log(selectedFilters);
        performAjaxRequest(selectedFilters, currentPage);
    });
});

</script>