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

{% block title %}College Directory{% endblock %}

{% block body %}
    <h1>College Directory</h1>

    <div class="filters">
        <form id="filterForm" method="get" action="{{ path('home') }}">
            <select name="area">
                <option value="">Select Area</option>
                {% for area in areas %}
                    <option value="{{ area.areaName }}">{{ area.areaName }}</option>
                {% endfor %}
            </select>
            <select name="medium">
                <option value="">Select Medium</option>
                {% for medium in mediums %}
                    <option value="{{ medium.mediumName }}">{{ medium.mediumName }}</option>
                {% endfor %}
            </select>
            <select name="zone">
                <option value="">Select Zone</option>
                {% for zone in zones %}
                    <option value="{{ zone.zoneName }}">{{ zone.zoneName }}</option>
                {% endfor %}
            </select>
            <select name="stream">
                <option value="">Select Stream</option>
                {% for stream in streams %}
                    <option value="{{ stream.streamName }}">{{ stream.streamName }}</option>
                {% endfor %}
            </select>
            <select name="region">
                <option value="">Select Region</option>
                {% for region in regions %}
                    <option value="{{ region.regionName }}">{{ region.regionName }}</option>
                {% endfor %}
            </select>
            <button type="submit">Filter</button>
        </form>
    </div>

    <div id="college-list">
        {% include 'home/_colleges.html.twig' with {colleges: colleges} %}
    </div>

    <div id="loading" style="display:none;">Loading...</div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        let page = {{ page }};
        let loading = false;

        // Infinite scroll logic
        $(window).scroll(function() {
            if (loading) return;
            if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
                loading = true;
                page++;
                $('#loading').show();

                // Get filter parameters
                let filters = $('#filterForm').serialize();

                $.ajax({
                    url: '{{ path("load_more_colleges") }}',
                    data: filters + '&page=' + page,
                    success: function(response) {
                        if ($.trim(response.html) === "") {
                            $('#loading').html('No more colleges to load.');
                        } else {
                            $('#college-list').append(response.html);
                            $('#loading').hide();
                            loading = false;
                        }
                    }
                });
            }
        });
    </script>
{% endblock %}