@extends('Layouts.index')
@section('content')
<style>
    #pagination-container {
        margin-top: 20px;
    }

    .pagination {
        display: flex;
        justify-content: center;
        margin-bottom: 20px;
    }

    .pagination .page-item .page-link {
        padding: 10px 15px;
        margin: 0 5px;
        border-radius: 5px;
    }
</style>
<div class="content-wrapper px-lg-10 px-sm-0">
    <div class="row">
        <div class="col-lg-12 pt-6">
            <h2 class="fs-26 fw-semibold text-primary text-center mb-7" id="pelatihan-title">Pelatihan <span class="text-dark">Jagoti</span></h2>
        </div>

    </div>
    <!-- filter-side -->
    @if(session('alert'))
        <div class="position-relative alert alert-danger alert-icon alert-dismissible border border-danger fade show fs-15" role="alert">
            @if(is_array(session('alert')))
                @foreach(session('alert') as $alert)
                    <p><i class="uil uil-times-circle"></i> {{ $alert }}</p>
                @endforeach
            @else
                <p><i class="uil uil-times-circle"></i> {{ session('alert') }}</p>
            @endif
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif


    <div class="row d-flex justify-content-between px-5 px-md-11 mb-4">
        <div class="col-lg-3 px-0 col-sm-7 col-7 col-md-3">
            <a class="d-lg-none btn btn-outline-dark" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
                <h4 class="fs-17 mb-0 text-dark">
                    <span class="me-2 ">
                        <i class="fa-solid fa-sliders"></i>
                    </span>Filter
                </h4>
            </a>
            <h4 class="fs-17 mb-0 d-none d-lg-block">
                <div id="filtering-course" class="btn btn-primary">
                    <span class="me-2">
                        <i class="fa-solid fa-sliders"></i>
                    </span>Filter
                </div>
            </h4>
        </div>
        <div class="col-md-5 col-lg-3 pe-lg-0 d-sm-block d-none">
            <form id="filter-form">
                <div class="input-group">
                    <input type="text" id="search_input" name="search_input" class="form-control" placeholder="Pencarian...">
                    <button id="filter-courses" type="submit" class="btn btn-primary fs-16 filter-courses">Cari</button>
                </div>
        </div>
        <div class="d-inline d-lg-none d-sm-none d-block px-0" style="width: 107px;">
            <h4 class="nav-item btn btn-primary py-1 mb-0 float-end"><a class="nav-link fs-20" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-search"><span><i class="uil uil-search"></i></span></a></h4>
        </div>
    </div>



    <div class="offcanvas offcanvas-start bg-light" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">
        <div class="offcanvas-header ">
            <h5 class="offcanvas-title fw-semibold" id="staticBackdropLabel"><span><i class="fa-solid fa-sliders"></i></span> Filter</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <div class="card-header">
                <h5 class="fw-semibold">Jenis Kursus</h5>
                <div class="form-group">
                    <div class="form-check">
                        <input class="form-check-input jenis-kursus-radio" type="radio" name="jenis_kursus" id="jenis_course1" checked value="">
                        <label class="form-check-label fs-14" for="jenis_course1">
                            Semua
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input jenis-kursus-radio" type="radio" name="jenis_kursus" id="jenis_course2" value="rekomendasi">
                        <label class="form-check-label fs-14" for="jenis_course2">
                            Rekomendasi
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input jenis-kursus-radio" type="radio" name="jenis_kursus" id="jenis_course3" value="terpopuler">
                        <label class="form-check-label fs-14" for="jenis_course3">
                            Terpopuler
                        </label>
                    </div>
                </div>
            </div>
            <div class="card-header d-none">
                <h5 class="fw-semibold d-none">Kategori Kursus</h5>
                <div class="form-group d-none">
                    @foreach ($category as $ctgy)
                    <div class="form-check">
                        <input class="form-check-input kategori-kursus-checkbox" type="checkbox" name="kategori_kursus[]" id="kategory_kursus_{{ $ctgy->id }}" value="{{ $ctgy->id }}">
                        <label class="form-check-label fs-15" for="kategory_kursus_{{ $ctgy->id }}">
                            {{ $ctgy->name }}
                        </label>
                    </div>
                    @endforeach
                </div>
            </div>
            <div class="card-header">
                <h5 class="fw-semibold">Harga</h5>
                <div class="form-group">
                    <div class="form-check">
                        <input class="form-check-input harga-kursus-checkbox" type="checkbox" name="harga_kursus[]" id="flexRadioDefault1" value="1">
                        <label class="form-check-label fs-15" for="flexCheckDefault1">
                            Gratis
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input harga-kursus-checkbox" type="checkbox" name="harga_kursus[]" id="flexRadioDefault2" value="2">
                        <label class="form-check-label fs-15" for="flexCheckDefault2">
                            &lt; 100.000
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input harga-kursus-checkbox" type="checkbox" name="harga_kursus[]" id="flexRadioDefault3" value="3">
                        <label class="form-check-label fs-15" for="flexCheckDefault3">
                            100.000 - 300.000
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input harga-kursus-checkbox" type="checkbox" name="harga_kursus[]" id="flexRadioDefault4" value="4">
                        <label class="form-check-label fs-15" for="flexCheckDefault4">
                            300.000 - 700.000
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input harga-kursus-checkbox" type="checkbox" name="harga_kursus[]" id="flexRadioDefault5" value="5">
                        <label class="form-check-label fs-15" for="flexCheckDefault5">
                            700.000 - 1.000.000
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input harga-kursus-checkbox" type="checkbox" name="harga_kursus[]" id="flexRadioDefault6" value="6">
                        <label class="form-check-label fs-15" for="flexCheckDefault6">
                            &gt; 1.000.000
                        </label>
                    </div>
                </div>
            </div>
            <div class="card-footer">
                <button type="submit" class="btn btn-primary fs-16 filter-courses" id="filter-courses">
                    <span class="me-2">
                        <i class="fa-solid fa-search"></i>
                    </span>Cari
                </button>
            </div>
        </div>
    </div>
    <div class="row px-3 px-md-5">
        <div id="filtering-menu" class="col-lg-3 col-md-3 d-none d-lg-block">
            <div class="card">
                <div class="card-header">
                    <h5 class="fw-semibold">Jenis Pelatihan</h5>
                    <div class="form-group">
                        <div class="form-check">
                            <input class="form-check-input jenis-kursus-radio" type="radio" name="jenis_kursus" id="jenis_course1" checked value="">
                            <label class="form-check-label fs-14" for="jenis_course1">
                                Semua
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input jenis-kursus-radio" type="radio" name="jenis_kursus" id="jenis_course2" value="rekomendasi">
                            <label class="form-check-label fs-14" for="jenis_course2">
                                Rekomendasi
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input jenis-kursus-radio" type="radio" name="jenis_kursus" id="jenis_course3" value="terpopuler">
                            <label class="form-check-label fs-14" for="jenis_course3">
                                Terpopuler
                            </label>
                        </div>
                    </div>
                </div>
                <div class="card-header d-none">
                    <h5 class="fw-semibold d-none">Kategori Kursus</h5>
                    <div class="form-group d-none">
                        @foreach ($category as $ctgy)
                        <div class="form-check">
                            <input class="form-check-input kategori-kursus-checkbox" type="checkbox" name="kategori_kursus[]" id="kategory_kursus_{{ $ctgy->id }}" value="{{ $ctgy->id }}">
                            <label class="form-check-label fs-15" for="kategory_kursus_{{ $ctgy->id }}">
                                {{ $ctgy->name }}
                            </label>
                        </div>
                        @endforeach
                    </div>
                </div>
                <div class="card-header">
                    <h5 class="fw-semibold">Harga</h5>
                    <div class="form-group">
                        <div class="form-check">
                            <input class="form-check-input harga-kursus-checkbox" type="checkbox" name="harga_kursus[]" id="flexRadioDefault1" value="1">
                            <label class="form-check-label fs-15" for="flexCheckDefault1">
                                Gratis
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input harga-kursus-checkbox" type="checkbox" name="harga_kursus[]" id="flexRadioDefault2" value="2">
                            <label class="form-check-label fs-15" for="flexCheckDefault2">
                                &lt; 100.000
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input harga-kursus-checkbox" type="checkbox" name="harga_kursus[]" id="flexRadioDefault3" value="3">
                            <label class="form-check-label fs-15" for="flexCheckDefault3">
                                100.000 - 300.000
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input harga-kursus-checkbox" type="checkbox" name="harga_kursus[]" id="flexRadioDefault4" value="4">
                            <label class="form-check-label fs-15" for="flexCheckDefault4">
                                300.000 - 700.000
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input harga-kursus-checkbox" type="checkbox" name="harga_kursus[]" id="flexRadioDefault5" value="5">
                            <label class="form-check-label fs-15" for="flexCheckDefault5">
                                700.000 - 1.000.000
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input harga-kursus-checkbox" type="checkbox" name="harga_kursus[]" id="flexRadioDefault6" value="6">
                            <label class="form-check-label fs-15" for="flexCheckDefault6">
                                &gt; 1.000.000
                            </label>
                        </div>
                    </div>
                </div>
                <div class="card-footer d-flex justify-content-end">
                    <button type="submit" class="btn btn-primary fs-16 filter-courses-1" id="filter-courses">
                        <span class="me-2">
                            <i class="fa-solid fa-search"></i>
                        </span> Cari
                    </button>
                </div>
                </form>
            </div>
        </div>
        <div id="content-list" class="col-lg-9 pb-9 px-lg-0 px-sm-8 px-md-9">
            <style>
                #loading {
                    transition: display 1s ease-in-out;
                }
            </style>

            <div class="preloader text-center" id="loading" style="background-color: rgb(255, 255, 255); width: 100%; height: 100%; z-index: 9999; place-items: center; margin-top: 2rem">
                <img src="{{ asset('needed/img/loading/loader-2.gif') }}">
            </div>
            <form id="gtm-form" method="post" action="{{ $intmoodle->url }}/customcode/integrasiPost.php">
                <input type="hidden" value="@if(Session::has('user')){{ Session::get('user')[0]['username']}}@endif" name="username">
                <input type="hidden" value="@if(Session::has('user')){{ Session::get('user')[0]['password']}}@endif" name="password">
                <input type="hidden" id="course_id" name="course_id">
                <input type="hidden" value="" id="callback" name="callback">
            </form>
            <div id="list_courses">
            </div>

            <div id="pagination-container">
                <nav aria-label="Page navigation">
                    <ul class="pagination justify-content-center">
                        <!-- Pagination items akan digenerate di sini oleh JavaScript -->
                    </ul>
                </nav>
            </div>
        </div>
    </div>

</div>
<style>
    /* Container pagination agar tetap rapi */
    #pagination-container {
        display: flex;
        justify-content: center;
        overflow-x: auto; /* Jika terlalu lebar, bisa digeser */
        padding: 10px;
    }

    /* Styling untuk elemen pagination */
    .pagination {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        padding: 0;
        list-style: none;
    }

    /* Styling tombol pagination */
    .pagination .page-item {
        display: flex;
    }

    /* Responsif di layar kecil */
    @media (max-width: 576px) {
        .pagination {
            gap: 3px;
        }

        .pagination .page-link {
            padding: 5px 10px; /* Perkecil padding */
            font-size: 12px; /* Perkecil ukuran font */
        }

        /* Tombol 'Kembali' dan 'Lanjut' lebih kecil */
        .pagination .page-item a[style] {
            width: 80px !important; 
        }
    }

</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.18/dist/sweetalert2.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function () {
        $('.filter-courses, .filter-courses-1').on('click', function (event) {
            event.preventDefault();

            if ($(this).hasClass('filter-courses-1')) {
                $('html, body').animate({
                    scrollTop: $('#pelatihan-title').offset().top
                }, 'slow');
            }

            let searchValues = [];

            $('#search-form input, #filter-form input, .search-form input').each(function () {
                let value = $(this).val().trim();
                if (value) {
                    searchValues.push(value);
                }
            });

            let searchInputValue = searchValues.join(' ');

            executeFilter(searchInputValue);
        });

        let debounceTimer;
        $('#search-form, #search_input').on("input", function (event) {
            event.preventDefault();
            const searchInputValue = $(this).val().trim();
            clearTimeout(debounceTimer);

            debounceTimer = setTimeout(() => {
                executeFilter(searchInputValue);
            }, 1000);
        });

        $('.search-form, #filter-form').on("keydown", function(event) {
            if (event.key === "Enter") {
                event.preventDefault();
            }
        });

        // Klik tombol filter utama (filter-courses)
        $("#filtering-course").click(function () {
            // Menampilkan/menghapus menu filter
            $("#filtering-menu").fadeToggle(function () {
                $(this).toggleClass("d-lg-block");
                $("#content-list").toggleClass("col-lg-9");
            });

            // Toggle elemen content
            $("#list-content").toggleClass(function () {
                return $(this).hasClass("col-lg-12") ? "col-lg-9" : "col-lg-12";
            });
        });

        let allCourses = []; // Menyimpan semua data kursus
        let currentPage = 1; // Halaman saat ini
        let perPage = 5; // Jumlah kursus per halaman
        const maxPaginationButtons = 5; // Jumlah maksimum tombol pagination yang ditampilkan

        async function loadFilteredCourse(jenis_kursus, kategori_kursus, harga_kursus, search_input) {
            try {
                $("#loading").show();
                $("#list_courses").hide();
                $("#pagination-container ul.pagination").empty();

                const response = await $.ajax({
                    url: "{{ route('getListCourse') }}",
                    type: "GET",
                    dataType: "json",
                    data: {
                        jenis_kursus,
                        kategori_kursus,
                        harga_kursus,
                        search_input,
                        _token: "{{ csrf_token() }}",
                    },
                });

                allCourses = response;
                if (allCourses.length == 0) {
                    $('#list_courses').empty().append('<p class="text-center mt-5">Tidak ada data</p>').show();
                } else {
                    renderCourses(currentPage);
                    updatePagination();
                }
            } catch (error) {
                console.error(error);
            } finally {
                $("#loading").hide();
            }
        }

        function renderCourses(page) {
            let start = (page - 1) * perPage;
            let end = page * perPage;
            let paginatedCourses = allCourses.slice(start, end);

            let filteredCourseContainer = $("#list_courses");
            filteredCourseContainer.empty();

            paginatedCourses.forEach(course => {
                var html = `
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body p-1">
                            <div class="row">
                                <div class="col-lg-4 col-md-4">
                                    <figure class="rounded">
                                        <div class="d-block"> 
                                            ${course.link}    
                                                <img src="${course.image}" class="w-100" alt="Course Image">
                                            </a>
                                        </div>
                                    </figure>
                                </div>
                                <div class="col-lg-8 col-md-8 ps-lg-0">
                                    <div class="pt-0 ms-3 ms-sm-0">
                                        <span class="badge rounded-pill bg-primary fs-13 mb-0 mt-3 mt-sm-1 me-3">${course.category_name}</span>
                                        <h4 class="fw-semibold mb-0 mt-1 fs-16">
                                            ${course.link}    
                                                ${course.course_name}
                                            </a>
                                        </h4>
                                        <div class="review d-flex align-items-center">
                                            <p class="text-yellow fs-14">
                                                <span class="text-warning">${course.rating}</span>
                                            </p>
                                        </div>
                                        <div class="d-flex justify-content-between align-items-center px-sm-2">
                                            <h4 class="fw-semibold fs-16">${course.harga}</h4>
                                            <h4 class="nav-item me-lg-3 mb-0 ms-sm-10">
                                                ${course.button}
                                            </h4>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                `;
                filteredCourseContainer.append(html);
            });

            $("#list_courses").show();
        }

        function updatePagination() {
            let totalPages = Math.ceil(allCourses.length / perPage);
            let paginationContainer = $("#pagination-container ul.pagination");
            paginationContainer.empty();

            if (totalPages > 1) {
                if (currentPage > 1) {
                    paginationContainer.append(`
                        <li class="page-item">
                            <a class="page-link" href="#" style="width: 100px;" data-page="${currentPage - 1}">Kembali</a>
                        </li>
                    `);
                } else {
                    paginationContainer.append(`
                        <li class="page-item disabled">
                            <span class="page-link" style="width: 100px;">Kembali</span>
                        </li>
                    `);
                }

                let startPage = Math.max(1, currentPage - Math.floor(maxPaginationButtons / 2));
                let endPage = Math.min(totalPages, startPage + maxPaginationButtons - 1);

                if (startPage > 1) {
                    paginationContainer.append(`
                        <li class="page-item">
                            <a class="page-link" href="#" data-page="1">1</a>
                        </li>
                        <li class="page-item disabled"><span class="page-link">...</span></li>
                    `);
                }

                for (let i = startPage; i <= endPage; i++) {
                    let activeClass = (i === currentPage) ? "active" : "";
                    paginationContainer.append(`
                        <li class="page-item ${activeClass}">
                            <a class="page-link" href="#" data-page="${i}">${i}</a>
                        </li>
                    `);
                }

                if (endPage < totalPages) {
                    paginationContainer.append(`
                        <li class="page-item disabled"><span class="page-link">...</span></li>
                        <li class="page-item">
                            <a class="page-link" href="#" data-page="${totalPages}">${totalPages}</a>
                        </li>
                    `);
                }

                if (currentPage < totalPages) {
                    paginationContainer.append(`
                        <li class="page-item">
                            <a class="page-link" href="#" style="width: 100px;" data-page="${currentPage + 1}">Lanjut</a>
                        </li>
                    `);
                } else {
                    paginationContainer.append(`
                        <li class="page-item disabled">
                            <span class="page-link" style="
                            width: 100px;
                            color: #959ca9 !important;
                            pointer-events: none !important;
                            background-color: #ffffff !important;
                            border-color: rgba(164, 174, 198, 0.2) !important;">Lanjut</span>
                        </li>
                    `);
                }

                $(".page-link").on("click", function (e) {
                    e.preventDefault();
                    let selectedPage = parseInt($(this).data("page"));
                    if (!isNaN(selectedPage)) {
                        currentPage = selectedPage;
                        renderCourses(currentPage);
                        updatePagination();
                    }
                });
            }
        }

        function executeFilter(searchInputValue = "") {
            const jenisKursusValue = $(".jenis-kursus-radio:checked").val();
            const kategoriKursusValues = $(".kategori-kursus-checkbox:checked")
                .map(function () {
                    return this.value;
                })
                .get();
            const hargaKursusValues = $(".harga-kursus-checkbox:checked")
                .map(function () {
                    return this.value;
                })
                .get();

            currentPage = 1; 
            loadFilteredCourse(jenisKursusValue, kategoriKursusValues, hargaKursusValues, searchInputValue);
        }

        executeFilter();
    });
</script>

<script>
    function gtmDetailCourse(id) {
        $('#course_id').val(id);
        $('#callback').val('{{ url("/CoursePeserta") }}/' + id);
        // $('#callback').val('{{ $intmoodle->url }}course/view.php?id=' + id);

        $('#gtm-form').submit();
    }

    function alertNIK() {
        Swal.fire({
            icon: 'warning',
            // title: 'Oops...',
            text: 'Harap lengkapi NIK terlebih dahulu'
        })
    }
</script>

@endsection