document.addEventListener('DOMContentLoaded', function() {
    const sliders = document.querySelectorAll(".custom-slider");

    for (const slider of sliders) {
        const slider_track = slider.querySelector(".custom-slider__track")

        function update_progress(bar, progress) {
            bar.style.width = Math.round(progress) + "%";
        }
        
        const progress_bar_container = slider.querySelector(".progress-bar");
        const progress_bar = slider.querySelector(".progress-bar > div");

        if (progress_bar) {
            slider_track.addEventListener('scroll', function () {
                const scroll_left = slider_track.scrollLeft;
                const scroll_width = slider_track.scrollWidth;
                const client_width = slider_track.clientWidth;
                const max_scroll = scroll_width - client_width;

                let progress = 100.0;
                if (max_scroll > 0.0) {
                    progress = Math.min(scroll_left / max_scroll * 100.0, 100.0);
                }

                update_progress(progress_bar, progress);
            });

            progress_bar_container.addEventListener('pointerdown', function(e) {
                const rect = progress_bar_container.getBoundingClientRect();
                const click_x = e.clientX - rect.left;
                let progress = Math.max(Math.min(click_x / rect.width * 100.0, 100.0), 0.0);

                const scroll_width = slider_track.scrollWidth;
                const client_width = slider_track.clientWidth;
                const max_scroll = scroll_width - client_width;

                if (max_scroll > 0.0) {
                    const scroll_left = (progress / 100.0) * max_scroll;
                    slider_track.scrollLeft = Math.round(scroll_left);
                }


                progress_bar_container.setPointerCapture(e.pointerId);

                function progress_pointer_move(ev) {
                    const rect = progress_bar_container.getBoundingClientRect();
                    const click_x = ev.clientX - rect.left;
                    let progress = Math.max(Math.min(click_x / rect.width * 100.0, 100.0), 0.0);

                    const scroll_width = slider_track.scrollWidth;
                    const client_width = slider_track.clientWidth;
                    const max_scroll = scroll_width - client_width;

                    if (max_scroll > 0.0) {
                        const scroll_left = (progress / 100.0) * max_scroll;
                        slider_track.scrollLeft = Math.round(scroll_left);
                    }
                }

                function progress_pointer_up(ev) {
                    progress_bar_container.releasePointerCapture(ev.pointerId);
                    progress_bar_container.removeEventListener('pointermove', progress_pointer_move);
                    progress_bar_container.removeEventListener('pointerup', progress_pointer_up);
                }

                progress_bar_container.addEventListener('pointermove', progress_pointer_move)
                progress_bar_container.addEventListener('pointerup', progress_pointer_up);
            });
        }

        slider_track.addEventListener('pointerdown', function (e) {
            slider_track.setPointerCapture(e.pointerId);

            function slider_pointer_move(ev) {
                const delta_x = ev.movementX;
                const current_scroll = slider_track.scrollLeft;
                const new_scroll = Math.max(current_scroll - delta_x, 0.0);
                slider_track.scrollLeft = new_scroll;
            }

            function slider_pointer_up(ev) {
                slider_track.releasePointerCapture(ev.pointerId);
                slider_track.removeEventListener('pointermove', slider_pointer_move);
                slider_track.removeEventListener('pointerup', slider_pointer_up);
            }

            slider_track.addEventListener('pointermove', slider_pointer_move)
            slider_track.addEventListener('pointerup', slider_pointer_up);
        });
    }
});
