{% extends 'left-base.html.twig' %}

{% block title %}Listing{% endblock %}

{% block customStyle %}
    <style>
        /* Filter navigation styling */
        .filter-nav {
            background-color: #f8f9fa;
            padding: 1rem;
            border-radius: 5px;
            margin-bottom: 1rem;
        }
        /* Card spacing */
        .listing-card {
            margin-bottom: 1rem;
        }
        /* Loader style */
        .infinite-loader {
            text-align: center;
            padding: 1rem;
        }
        .range-filter {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        input[type="range"] {
            width: 100%;
        }
    </style>
{% endblock %}
{% block body %}
    {{ parent() }}
{# Main layout with left sidebar and content area #}
<div class="container-fluid mt-4">
    <div class="row">
        <!-- Left Sidebar -->
        <aside class="col-12 col-md-3">
            <div class="list-group mb-3">
                <div class="range-filter">
                    {% set percentage=100 %}
                    {% if data.percentage is defined and data.percentage is not empty %}
                    {% set percentage = data.percentage %}
                    {% endif %}
                    <label for="minPercentage">Minimum Percentage:</label>
                    <input type="range" id="minPercentage" name="minPercentage" min="0" max="100" value="0" step="1">
                    <span id="minPercentageValue">0%</span>

                    <label for="maxPercentage">Maximum Percentage:</label>
                    <input type="range" id="maxPercentage" name="maxPercentage" min="0" max="100" value="{{ percentage }}" step="1">
                    <span id="maxPercentageValue">{{ percentage }}%</span>
                </div>
                <div class="mb-3"></div>
                <div class="mb-3">
                    <label for="areaSelect" class="form-label">Select Area</label>
                    <select class="form-select" id="areaSelect" multiple>
                        <option value="">Select Area</option>
                        {% for area in areas %}
                            <option value="{{ area.id }}">{{ area.areaName }}</option>
                        {% endfor %}
                        <!-- Add more areas as needed -->
                    </select>
                </div>
                <div class="mb-3">
                    <button id="applyFilters" class="btn btn-primary" type="button">Apply Filter</button>
                </div>
            </div>
        </aside>
        <!-- Main Content Area -->
        <main class="col-12 col-md-9">
            <div class="row">
                <!-- Right Listing Area -->
                <div class="col-12">
                    <!-- Search College Name Bar -->
                    <div class="mb-4">
                        <div class="input-group">
                            <input type="text" class="form-control form-control-lg" id="searchName"
                                   placeholder="Search by College Name..." autocomplete="off">
                            <button class="btn btn-primary" id="searchButton" type="button">
                                <i class="bi bi-search"></i> <!-- Bootstrap search icon -->
                            </button>
                        </div>
                    </div>

                    <div id="listingContainer" class="row">
                    {# listing all items#}
                    </div>
                    <div id="loader" class="infinite-loader d-none">
                        <div class="spinner-border" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</div>
{% endblock %}
{% block customJs %}
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function () {
            new window.TomSelect('#areaSelect', {
                plugins: ['remove_button'],
                create: true,
                sortField: {
                    field: 'text',
                    direction: 'asc'
                }
            });
        });
    </script>
    <script type="module">
        $(document).ready(function(){
            var page = 1;
            var loading = false;
            var noMoreResults = false;

            // Function to load listings via AJAX with applied filters
            function loadListings(reset = false) {
                if (loading || noMoreResults) return;
                loading = true;
                $('#loader').removeClass('d-none');

                if (reset) {
                    page = 1;
                    noMoreResults = false;
                    $('#listingContainer').empty();
                    // Re-bind the scroll event in case it was disabled earlier.
                    $(window).off('scroll').on('scroll', checkScroll);
                }

                // Collect filters
                var minPercentage = $('#minPercentage').val();
                var maxPercentage = $('#maxPercentage').val();
                var area = $('#areaSelect').val();
                var searchName = $('#searchName').val();
                var type = '{{ type|default("") }}';
                let extra = {{ data|json_encode|raw }};

                $.ajax({
                    url: '{{ path("ajax_listing_load_more") }}', // AJAX endpoint route
                    method: 'GET',
                    data: {
                        page: page,
                        minPercentage: minPercentage,
                        maxPercentage: maxPercentage,
                        area: area,
                        type: type,
                        'qparams': extra,
                        searchName:searchName
                    },
                    success: function(response) {
                        // Assume response.html is the HTML fragment of college cards
                        if (response.html && response.html.trim().length) {
                            $('#listingContainer').append(response.html);
                            page++;
                        } else {
                            // If no results are returned, set flag and disable further loading.
                            noMoreResults = true;
                            $(window).off('scroll');
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('Error loading listings:', error);
                        // Stop further auto-loading if an error occurs.
                        noMoreResults = true;
                        $(window).off('scroll');
                    },
                    complete: function() {
                        loading = false;
                        $('#loader').addClass('d-none');
                        // If the page still isn't scrollable and there are more results, auto-load more.
                        if (!noMoreResults && $(document).height() <= $(window).height()) {
                            loadListings();
                        }
                    }
                });
            }

            // Function to check scroll position and load more listings
            function checkScroll() {
                if($(window).scrollTop() + $(window).height() >= $(document).height() - 100){
                    loadListings();
                }
            }
            $(window).on('scroll', checkScroll);

            // Filter button click: resets listings
            $('#applyFilters').click(function(){
                noMoreResults = false;
                loadListings(true);
            });

            // Initial load of listings.
            loadListings();

            // Range filter update code (min and max percentage)
            const minPercentageInput = document.getElementById('minPercentage');
            const maxPercentageInput = document.getElementById('maxPercentage');
            const minPercentageValue = document.getElementById('minPercentageValue');
            const maxPercentageValue = document.getElementById('maxPercentageValue');

            function updateMinPercentage() {
                const minValue = parseInt(minPercentageInput.value);
                const maxValue = parseInt(maxPercentageInput.value);
                if (minValue > maxValue) {
                    minPercentageInput.value = maxValue;
                }
                minPercentageValue.textContent = minPercentageInput.value + '%';
            }

            function updateMaxPercentage() {
                const minValue = parseInt(minPercentageInput.value);
                const maxValue = parseInt(maxPercentageInput.value);
                if (maxValue < minValue) {
                    maxPercentageInput.value = minValue;
                }
                maxPercentageValue.textContent = maxPercentageInput.value + '%';
            }

            minPercentageInput.addEventListener('input', updateMinPercentage);
            maxPercentageInput.addEventListener('input', updateMaxPercentage);
            $('#searchName').on('input', function() {
                noMoreResults = false;
                loadListings(true);
            });
        });
    </script>
{% endblock %}