{% extends "layouts/public_layout.html" %}

{% block content %}
<div class="availability-page-container" style="max-width: 600px; margin: 0 auto;">
    
    <div style="text-align: center; margin-bottom: 20px;">
        <h2 style="color: var(--primary-blue); margin: 0; font-size: 22px;">{{ $page_title }}</h2>
    </div>
    
    <div style="background: var(--white); border-radius: 12px; box-shadow: 0 4px 15px rgba(15, 12, 41, 0.08); padding: 25px 20px; margin-bottom: 20px;">
        
        <form method="GET" action="" style="display: flex; flex-direction: column; gap: 15px;">
            
            <div style="display: flex; gap: 15px; flex-wrap: wrap;">
                <div style="flex: 1; min-width: 120px;">
                    <label for="classSelect" style="display: block; font-weight: bold; margin-bottom: 5px; color: var(--text-dark); font-size: 14px;">Class</label>
                    <select id="classSelect" name="class" style="width: 100%; padding: 10px; border: 1px solid var(--border-color); border-radius: 6px; font-size: 14px; color: var(--text-dark);" required>
                        <option value="">Select Class</option>
                        {% if !empty($classes_sections) %}
                            {% foreach array_keys($classes_sections) as $c %}
                                <option value="{{ $c }}" {% if $c == $selected_class %}selected{% endif %}>{{ $c }}</option>
                            {% endforeach %}
                        {% endif %}
                    </select>
                </div>
                
                <div style="flex: 1; min-width: 120px;">
                    <label for="sectionSelect" style="display: block; font-weight: bold; margin-bottom: 5px; color: var(--text-dark); font-size: 14px;">Section</label>
                    <select id="sectionSelect" name="section" style="width: 100%; padding: 10px; border: 1px solid var(--border-color); border-radius: 6px; font-size: 14px; color: var(--text-dark);" required>
                        <option value="">Select Section</option>
                        <!-- Populated by JS -->
                    </select>
                </div>
            </div>
            
            <button type="submit" style="width: 100%; padding: 12px; background-color: var(--primary-blue); color: var(--white); border: none; border-radius: 6px; font-size: 16px; font-weight: bold; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;">
                <span class="material-symbols-outlined" style="font-size: 20px;">search</span>
                Apply
            </button>
        </form>

    </div>

    <!-- Results Section -->
    {% if $selected_class !== '' && $selected_section !== '' %}
        <div style="background: var(--white); border-radius: 12px; box-shadow: 0 4px 15px rgba(15, 12, 41, 0.08); padding: 25px 20px;">
            <h3 style="color: var(--primary-blue); border-bottom: 2px solid var(--border-color); padding-bottom: 8px; margin-top: 0; margin-bottom: 15px; font-size: 18px;">
                Results for Class {{ $selected_class }} - Sec {{ $selected_section }}
            </h3>

            {% if !empty($students) %}
                <div style="display: flex; flex-direction: column; gap: 10px;">
                    {% foreach $students as $student %}
                    <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px 15px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-light);">
                        
                        <div>
                            <strong style="display: block; font-size: 16px; color: var(--text-dark); margin-bottom: 4px;">
                                {{ $student['student_name'] }}
                                {% if $student['is_complete'] %}
                                    <span style="display: inline-block; margin-left: 8px; background: #e6f0ff; color: var(--primary-blue); padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: bold; vertical-align: middle; border: 1px solid rgba(15, 12, 41, 0.1);">Uniform Collected</span>
                                {% endif %}
                            </strong>
                            <span style="font-size: 13px; color: var(--text-light);">ID: {{ $student['student_id'] }}</span>
                        </div>
                        
                        <div>
                            {% if $student['status'] === 'ready' %}
                                <span style="background: #e2f5ec; color: #198754; padding: 5px 12px; border-radius: 20px; font-size: 13px; font-weight: bold; display: inline-flex; align-items: center; gap: 4px; text-transform: lowercase;">
                                    <span class="material-symbols-outlined" style="font-size: 16px;">check_circle</span> ready
                                </span>
                            {% else %}
                                <span style="background: #fff8e6; color: #f6c23e; padding: 5px 12px; border-radius: 20px; font-size: 13px; font-weight: bold; display: inline-flex; align-items: center; gap: 4px; text-transform: lowercase;">
                                    <span class="material-symbols-outlined" style="font-size: 16px;">local_shipping</span> in-transit
                                </span>
                            {% endif %}
                        </div>

                    </div>
                    {% endforeach %}
                </div>
            {% else %}
                <p style="color: var(--text-light); font-size: 14px; text-align: center; padding: 20px 0;">No students found for this class and section.</p>
            {% endif %}
        </div>
    {% endif %}

</div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const classesData = {{ json_encode($classes_sections) | raw }};
        const classSelect = document.getElementById('classSelect');
        const sectionSelect = document.getElementById('sectionSelect');
        const selectedSection = '{{ $selected_section }}';
        
        function populateSections(c, s) {
            sectionSelect.innerHTML = '<option value="">Select Section</option>';
            if (c && classesData[c]) {
                classesData[c].forEach(function(sec) {
                    const opt = document.createElement('option');
                    opt.value = sec;
                    opt.textContent = sec;
                    if (sec === s) {
                        opt.selected = true;
                    }
                    sectionSelect.appendChild(opt);
                });
            }
        }

        // Initialize on load
        if (classSelect.value) {
            populateSections(classSelect.value, selectedSection);
        }

        // Update on change
        classSelect.addEventListener('change', function() {
            populateSections(this.value, '');
        });
    });
</script>
{% endblock %}