{% extends 'template.html' %}

{% block title %}النقاط{% endblock %}

{% block content %}
    <header class="text-center">
        <h1 class="text-3xl sm:text-4xl font-bold text-gray-900 mb-6">نظام نقاط الطلاب</h1>
        <nav class="mb-8">
            <ul class="flex justify-center space-x-4 space-x-reverse bg-white p-2 rounded-full shadow-lg inline-flex">
                <li>
                    <a href="{{ url_for('index') }}" class="text-gray-700 hover:text-blue-700 hover:bg-blue-50 font-medium px-6 py-3 rounded-full transition-all duration-300 ease-in-out hover:shadow-sm transform hover:scale-105">الصفحة الرئيسية</a>
                </li>
                <li>
                    <a href="{{ url_for('record') }}" class="text-gray-700 hover:text-blue-700 hover:bg-blue-50 font-medium px-6 py-3 rounded-full transition-all duration-300 ease-in-out hover:shadow-sm transform hover:scale-105">تسجيل حضور أو حفظ</a>
                </li>
                <li>
                    <a href="{{ url_for('points') }}" class="text-white bg-blue-600 hover:bg-blue-700 font-semibold px-6 py-3 rounded-full transition-all duration-300 ease-in-out shadow-md">النقاط</a>
                </li>
            </ul>
        </nav>
    </header>

    <div class="bg-white p-8 rounded-xl shadow-lg mb-8">
        <h2 class="text-2xl font-semibold mb-6 text-gray-800 border-b pb-4">إدارة نقاط الطلاب</h2>
        <form id="points-form" action="{{ url_for('points') }}" method="POST">
            <div class="mb-6">
                <label class="block text-sm font-medium text-gray-700 mb-2">اختر الطلاب:</label>
                <div class="flex items-center mb-3">
                    <input type="checkbox" id="all_students_checkbox" name="all_students" class="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                    <label for="all_students_checkbox" class="ml-2 block text-sm text-gray-900 cursor-pointer">كل الطلاب</label>
                </div>

                <div id="individual_student_selection">
                    <label for="search_student_input" class="block text-sm font-medium text-gray-700 mb-1">ابحث عن طالب</label>
                    <input type="text" id="search_student_input" placeholder="اكتب اسم الطالب للبحث..."
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 text-right" dir="rtl">
                    <select name="student_id" id="student_id" required size="5"
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 mt-2">
                        <option value="">اختر طالباً...</option>
                        {% for student in students %}
                            <option value="{{ student.id }}" data-student-name="{{ student.student_name }}">{{ student.student_name }} (النقاط الحالية: {{ student.points }})</option>
                        {% endfor %}
                    </select>
                </div>
            </div>

            <div class="mb-6 flex space-x-4 space-x-reverse">
                <button type="button" id="add-points-btn" data-operation="add" class="flex-1 px-6 py-3 bg-green-600 text-white font-semibold rounded-lg shadow-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all">
                    إضافة نقاط
                </button>
                <button type="button" id="remove-points-btn" data-operation="remove" class="flex-1 px-6 py-3 bg-red-600 text-white font-semibold rounded-lg shadow-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-all">
                    خصم نقاط
                </button>
            </div>

            <div class="mb-6">
                <label for="point_amount" class="block text-sm font-medium text-gray-700 mb-1">المبلغ</label>
                <div class="flex space-x-2 space-x-reverse">
                    <button type="button" class="quick-add-btn px-4 py-2 bg-gray-200 text-gray-700 font-semibold rounded-lg hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400" data-points="5">5 نقاط</button>
                    <button type="button" class="quick-add-btn px-4 py-2 bg-gray-200 text-gray-700 font-semibold rounded-lg hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400" data-points="10">10 نقاط</button>
                    <button type="button" class="quick-add-btn px-4 py-2 bg-gray-200 text-gray-700 font-semibold rounded-lg hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400" data-points="15">15 نقطة</button>
                    <button type="button" class="quick-add-btn px-4 py-2 bg-gray-200 text-gray-700 font-semibold rounded-lg hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400" data-points="20">20 نقطة</button>
                    <input type="number" name="point_amount" id="point_amount" placeholder="أو أدخل يدوياً" min="1" required class="flex-1 px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 text-right">
                </div>
            </div>

            <input type="hidden" name="operation" id="operation-input">

            <div class="mt-8 text-left">
                <button type="submit" id="submit-points-btn" class="px-8 py-3 bg-blue-600 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all" disabled>
                    تطبيق النقاط
                </button>
            </div>
        </form>
    </div>

    <div class="bg-white p-6 rounded-xl shadow-lg">
        <h2 class="text-2xl font-semibold mb-4 text-gray-800 border-b pb-4">قائمة الطلاب والنقاط</h2>
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 text-right">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">#</th>
                        <th class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">اسم الطالب</th>
                        <th class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">النقاط</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    {% for student in students %}
                        <tr class="hover:bg-gray-50 transition-colors duration-200">
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-gray-700">{{ loop.index }}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ student.student_name }}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-lg font-semibold text-blue-700">{{ student.points }}</td>
                        </tr>
                    {% else %}
                        <tr>
                            <td colspan="3" class="text-center py-6 text-gray-500">لم تتم إضافة أي طالب بعد.</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <script>
        const addPointsBtn = document.getElementById('add-points-btn');
        const removePointsBtn = document.getElementById('remove-points-btn');
        const pointAmountInput = document.getElementById('point_amount');
        const operationInput = document.getElementById('operation-input');
        const submitPointsBtn = document.getElementById('submit-points-btn');
        const quickAddButtons = document.querySelectorAll('.quick-add-btn');

        const searchStudentInput = document.getElementById('search_student_input');
        const studentSelect = document.getElementById('student_id');
        const studentOptions = Array.from(studentSelect.options);

        // New elements
        const allStudentsCheckbox = document.getElementById('all_students_checkbox');
        const individualStudentSelectionDiv = document.getElementById('individual_student_selection');

        // Function to perform a fuzzy match (same as before)
        function fuzzyMatch(pattern, text) {
            pattern = pattern.toLowerCase();
            text = text.toLowerCase();
            let patternIdx = 0;
            let textIdx = 0;

            while (patternIdx < pattern.length && textIdx < text.length) {
                if (pattern[patternIdx] === text[textIdx]) {
                    patternIdx++;
                }
                textIdx++;
            }
            return patternIdx === pattern.length;
        }

        // Function to filter dropdown options (updated to respect allStudentsCheckbox)
        function filterStudentDropdown() {
            if (allStudentsCheckbox.checked) {
                return; // Do not filter if 'All Students' is checked
            }

            const searchTerm = searchStudentInput.value.trim();
            studentSelect.innerHTML = ''; // Clear current options

            const defaultOption = document.createElement('option');
            defaultOption.value = '';
            defaultOption.textContent = 'اختر طالباً...';
            studentSelect.appendChild(defaultOption);

            if (searchTerm === '') {
                studentOptions.forEach(option => {
                    if (option.value !== '') { // Re-add only actual student options
                        studentSelect.appendChild(option.cloneNode(true));
                    }
                });
            } else {
                studentOptions.forEach(option => {
                    const studentName = option.dataset.studentName;
                    if (option.value !== '' && studentName && fuzzyMatch(searchTerm, studentName)) {
                        studentSelect.appendChild(option.cloneNode(true));
                    }
                });
            }
            // Ensure the selected value remains valid or reset if hidden
            if (studentSelect.value !== '' && studentSelect.selectedOptions[0].parentElement !== studentSelect) {
                studentSelect.value = ''; // Deselect if the current choice is now hidden
            }
            updateSubmitButtonState();
        }

        // Function to update the submit button state (modified for all_students_checkbox)
        function updateSubmitButtonState() {
            const studentSelected = studentSelect.value !== '';
            const allStudentsChecked = allStudentsCheckbox.checked;
            const amountEntered = pointAmountInput.value.trim() !== '' && parseInt(pointAmountInput.value) > 0;
            const operationSelected = operationInput.value !== '';

            // The button is enabled if:
            // (a specific student is selected OR all students checkbox is checked)
            // AND a valid amount is entered
            // AND an operation (add/remove) is selected
            if ((studentSelected || allStudentsChecked) && amountEntered && operationSelected) {
                submitPointsBtn.disabled = false;
                submitPointsBtn.classList.remove('bg-gray-400', 'hover:bg-gray-500');
                submitPointsBtn.classList.add('bg-blue-600', 'hover:bg-blue-700');
            } else {
                submitPointsBtn.disabled = true;
                submitPointsBtn.classList.remove('bg-blue-600', 'hover:bg-blue-700');
                submitPointsBtn.classList.add('bg-gray-400', 'hover:bg-gray-500');
            }
        }

        // Event listener for All Students checkbox
        allStudentsCheckbox.addEventListener('change', () => {
            if (allStudentsCheckbox.checked) {
                individualStudentSelectionDiv.classList.add('hidden'); // Hide individual selection
                studentSelect.removeAttribute('required'); // No longer required if all students
                studentSelect.value = ''; // Clear selection
                searchStudentInput.value = ''; // Clear search input
                filterStudentDropdown(); // Reset dropdown visually
            } else {
                individualStudentSelectionDiv.classList.remove('hidden'); // Show individual selection
                studentSelect.setAttribute('required', 'required'); // Make dropdown required again
            }
            updateSubmitButtonState();
        });

        addPointsBtn.addEventListener('click', () => {
            operationInput.value = 'add';
            addPointsBtn.classList.add('bg-green-700');
            removePointsBtn.classList.remove('bg-red-700');
            updateSubmitButtonState();
        });

        removePointsBtn.addEventListener('click', () => {
            operationInput.value = 'remove';
            removePointsBtn.classList.add('bg-red-700');
            addPointsBtn.classList.remove('bg-green-700');
            updateSubmitButtonState();
        });

        quickAddButtons.forEach(button => {
            button.addEventListener('click', () => {
                pointAmountInput.value = button.dataset.points;
                updateSubmitButtonState();
            });
        });

        pointAmountInput.addEventListener('input', updateSubmitButtonState);
        studentSelect.addEventListener('change', updateSubmitButtonState);
        searchStudentInput.addEventListener('input', filterStudentDropdown);

        // Initial state check when the page loads
        // Trigger checkbox change listener on load to set initial state
        allStudentsCheckbox.dispatchEvent(new Event('change'));
        updateSubmitButtonState();

        const pointsForm = document.getElementById('points-form');
        if (pointsForm) {
            pointsForm.addEventListener('submit', () => {
                submitPointsBtn.disabled = true;
                submitPointsBtn.textContent = 'جاري المعالجة...';
            });
        }
    </script>
{% endblock %}