{% extends 'base.html.twig' %}
{% block title %}Location and Stream{% endblock %}

{% block customStyle %}
    <style>
        .location-card {
            max-width: 500px;
            margin: 0 auto;
            border: none;
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }
        .location-card .card-body {
            padding: 2rem;
        }
        .optional-filter {
            display: none;
            margin-top: 1rem;
        }
    </style>
{% endblock %}

{% block body %}
    {{ parent() }}
    <div class="container py-5">
        <div class="card location-card">
            <div class="card-body">
                <h2 class="text-center">Find by Location</h2>
                <form id="locationForm" method="post">

                    {% if type == 'college' %}
                        <div class="mb-3">
                            <label for="region" class="form-label">Region</label>
                            <select id="region" name="region" class="form-select">
                                <option value="">Select a region</option>
                                {% for region in regions %}
                                    <option value="{{ region.id }}">{{ region.regionName }}</option>
                                {% endfor %}
                            </select>
                        </div>

                        <div class="mb-3">
                            <label for="stream" class="form-label">Stream</label>
                            <select id="stream" name="stream" class="form-select">
                                <option value="">Select a stream</option>
                                {% for stream in streams %}
                                    <option value="{{ stream.id }}">{{ stream.streamName }}</option>
                                {% endfor %}
                            </select>
                        </div>

                        <div class="form-check mb-3">
                            <input class="form-check-input" type="checkbox" value="1" id="togglePercentage">
                            <label class="form-check-label" for="togglePercentage">
                                Search by Percentage
                            </label>
                        </div>

                        <div class="optional-filter" id="percentageFilter">
                            <label for="percentage" class="form-label">Enter Minimum Percentage</label>
                            <input id="percentage" name="percentage" type="number" class="form-control" min="0" max="100" placeholder="e.g. 50">
                        </div>
                        <div class="my-3 py-2" style="border-top:1px solid #ccc;">
                        <b class="text-primary">Disclaimer :</b> The percentages and admission data shown on Infostaan.in are indicative and based on past trends — for official and up-to-date information, please refer to the respective college’s website.
</div>
                    {% elseif type == 'classes' %}
                        <div class="mb-3">
                            <label for="stream" class="form-label">Stream</label>
                            <select id="stream" name="stream" class="form-select">
                                <option value="">Select a stream</option>
                                {% for stream in streams %}
                                    <option value="{{ stream.id }}">{{ stream.streamName }}</option>
                                {% endfor %}
                            </select>
                        </div>

                        <div class="mb-3">
                            <label for="region" class="form-label">Region</label>
                            <select id="region" name="region" class="form-select">
                                <option value="">Select a region</option>
                                {% for region in regions %}
                                    <option value="{{ region.id }}">{{ region.regionName }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    {% endif %}

                    <button type="submit" class="btn btn-primary w-100 mt-3">Search</button>
                </form>

        
            </div>
        </div>
    </div>
{% endblock %}

{% block customJs %}
    <script type="module">
        $(document).ready(function () {
            $('#togglePercentage').change(function () {
                if (this.checked) {
                    $('#percentageFilter').slideDown();
                } else {
                    $('#percentageFilter').slideUp();
                    $('#percentage').val('');
                }
            });
        });
    </script>
{% endblock %}