{% extends 'school/base_school.html' %}

{% block title %}{% if is_edit %}Edit Student{% else %}Add Student{% endif %} | STD Lab{% endblock %}

{% block page_title %}{% if is_edit %}Edit Student{% else %}Add New Student{% endif %}{% endblock %}

{% block content %}
<div class="card" style="max-width: 800px; margin: 0 auto;">
    <form method="post" enctype="multipart/form-data">
        {% csrf_token %}
        {% if error %}<div style="color: var(--danger-red); margin-bottom: 24px; font-weight: 600; background: rgba(239, 68, 68, 0.05); padding: 12px; border-radius: 0; border: 1px solid rgba(239, 68, 68, 0.1);">{{ error }}</div>{% endif %}

        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px;">
            <div>
                <h4 style="font-size: 0.9rem; text-transform: uppercase; color: #10b981; margin-bottom: 20px; font-weight: 800; border-left: 4px solid #10b981; padding-left: 12px;">Basic Credentials</h4>
                
                <div class="form-group">
                    <label>Student PIN / ID (Device ID)</label>
                    <input type="text" id="pinInput" name="pin" value="{{ student.pin }}" {% if is_edit %}readonly style="background-color: #f1f5f9; color: #94a3b8; cursor: not-allowed;"{% endif %} required placeholder="e.g. 1001">
                    <div id="pinError" style="color: #ef4444; font-size: 0.75rem; font-weight: 700; margin-top: 6px; display: none;"><i class="fas fa-exclamation-circle"></i> This PIN already exists.</div>
                </div>

                <div class="form-group">
                    <label>Full Name</label>
                    <input type="text" name="name" value="{{ student.name }}" required placeholder="e.g. John Doe">
                </div>

                <div class="form-group">
                    <label>Academic Roll Number</label>
                    <input type="number" id="rollInput" name="roll" value="{{ student.roll|default:'' }}" required placeholder="e.g. 1">
                    <div id="rollError" style="color: #ef4444; font-size: 0.75rem; font-weight: 700; margin-top: 6px; display: none;"><i class="fas fa-exclamation-circle"></i> This Roll Number is already occupied in the selected class.</div>
                </div>

                <div class="form-group">
                    <label>Assign to Class</label>
                    <select id="classSelect" name="student_class" required style="width: 100%; border: 1.5px solid #e5e7eb; border-radius: 0; padding: 12px 15px; font-weight: 700; color: #1f2937; background: #fff;">
                        <option value="">-- Select Class --</option>
                        {% for c in classes %}
                            <option value="{{ c.id }}" {% if student.student_class_id == c.id %}selected{% endif %}>{{ c.name }}</option>
                        {% endfor %}
                    </select>
                </div>
                
                <div class="form-group">
                    <label>Admission / Enrollment Date</label>
                    <input type="date" name="admission_date" value="{{ student.admission_date|date:'Y-m-d' }}">
                </div>

                <div class="form-group">
                    <label>Student Photo</label>
                    <div style="display: flex; align-items: center; gap: 15px;">
                        {% if student.photo %}
                        <img src="{{ student.photo.url }}" style="width: 50px; height: 50px; border-radius: 0; object-fit: cover; border: 2px solid #e2e8f0;">
                        {% endif %}
                        <input type="file" name="photo" accept="image/*" style="padding: 10px; font-size: 0.8rem;">
                    </div>
                </div>
            </div>

            <div>
                <h4 style="font-size: 0.9rem; text-transform: uppercase; color: #3b82f6; margin-bottom: 20px; font-weight: 800; border-left: 4px solid #3b82f6; padding-left: 12px;">Guardian & Identification</h4>
                
                <div class="form-group">
                    <label>Father's Name</label>
                    <input type="text" name="father_name" value="{{ student.father_name|default:'' }}" placeholder="Name of father">
                </div>

                <div class="form-group">
                    <label>Mother's Name</label>
                    <input type="text" name="mother_name" value="{{ student.mother_name|default:'' }}" placeholder="Name of mother">
                </div>

                <div class="form-group">
                    <label>Date of Birth (Optional)</label>
                    <input type="date" name="dob" value="{{ student.dob|date:'Y-m-d' }}">
                </div>

                <div class="form-group">
                    <label>Birth Certificate Number (Optional)</label>
                    <input type="text" name="birth_certificate" value="{{ student.birth_certificate_number|default:'' }}" placeholder="e.g. 20121234567890">
                </div>

                <div class="form-group" style="margin-top: 30px;">
                    <label style="color: #10b981; margin-bottom: 15px; display: block;">Assign Fee Purposes</label>
                    <div id="feesGrid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; border: 1.5px solid #e5e7eb; padding: 15px; border-radius: 0;">
                        {% for ft in fee_types %}
                            <label style="display: flex; align-items: center; gap: 10px; background: #f8fafc; padding: 10px 15px; border-radius: 0; border: 1px solid #e2e8f0; cursor: pointer; transition: 0.3s; margin-bottom: 0;"
                                   class="fee-item" data-id="{{ ft.id }}">
                                <input type="checkbox" name="fee_types" value="{{ ft.id }}" 
                                    {% if ft.id in current_fee_types %}checked{% endif %}
                                    style="width: 20px; height: 20px; accent-color: #10b981;">
                                <div>
                                    <div style="font-size: 0.85rem; font-weight: 700; color: #1e293b;">{{ ft.name }}</div>
                                    <div style="font-size: 0.75rem; color: #64748b;">৳{{ ft.default_amount }}</div>
                                </div>
                            </label>
                        {% empty %}
                        <div style="font-size: 0.82rem; color: #94a3b8; font-style: italic;">No fee models found. <a href="{% url 'fee_type_add' %}" style="color: #10b981; font-weight: 700;">Add Fee Purpose &rarr;</a></div>
                        {% endfor %}
                    </div>
                </div>
                <div class="form-group" style="margin-top: 30px;">
                    <label style="color: #3b82f6; margin-bottom: 15px; display: block;">Enroll Subjects</label>
                    <div id="subjectsGrid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; border: 1.5px solid #e5e7eb; padding: 15px; border-radius: 0; min-height: 50px;">
                        {% for s in all_subjects %}
                        <label style="display: flex; align-items: center; gap: 10px; background: #f8fafc; padding: 8px 12px; border-radius: 0; border: 1px solid #e2e8f0; cursor: pointer; margin-bottom: 0;">
                            <input type="checkbox" name="subject_ids" value="{{ s.id }}" 
                                {% if s.id in current_subjects %}checked{% endif %}
                                style="width: 20px; height: 20px; accent-color: #3b82f6;">
                            <div style="font-size: 0.85rem; font-weight: 700; color: #1e293b;">{{ s.name }}</div>
                        </label>
                        {% empty %}
                        <div id="noSubjectsMsg" style="font-size: 0.82rem; color: #94a3b8; font-style: italic;">Select a class to see available subjects.</div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>

        <div>
            <h4 style="font-size: 0.9rem; text-transform: uppercase; color: #64748b; margin-top: 20px; margin-bottom: 20px; font-weight: 800; border-left: 4px solid #64748b; padding-left: 12px;">Contact & Address</h4>
            
            <div class="form-group">
                <label>Contact Number</label>
                <input type="text" name="contact" value="{{ student.contact_number|default:'' }}" placeholder="e.g. +88017xxxxxxxx">
            </div>

            <div class="form-group">
                <label>Current Address</label>
                <textarea name="address" rows="3" placeholder="Enter residential address">{{ student.address|default:'' }}</textarea>
            </div>

            {% if user.profile.school.is_individual_sms_enabled %}
            <div style="background: #f8fafc; border: 1.5px solid #e2e8f0; padding: 20px; border-radius: 0; margin-top: 20px; display: flex; justify-content: space-between; align-items: center;">
                <div>
                    <h5 style="font-weight: 800; color: #1e293b; margin-bottom: 4px;">Student SMS Status</h5>
                    <p style="font-size: 0.75rem; color: #64748b; font-weight: 600;">If disabled, this student will not receive any attendance or admission alerts.</p>
                </div>
                <label class="switch-sms">
                    <input type="checkbox" name="is_sms_enabled" {% if not is_edit or student.is_sms_enabled %}checked{% endif %}>
                    <span class="slider-sms round-sms"></span>
                </label>
            </div>
            <style>
                .switch-sms { position: relative; display: inline-block; width: 44px; height: 22px; }
                .switch-sms input { opacity: 0; width: 0; height: 0; }
                .slider-sms { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #1e293b; transition: .3s; border: 2px solid #1e293b; }
                .slider-sms:before { position: absolute; content: ""; height: 14px; width: 14px; left: 2px; bottom: 2px; background-color: white; transition: .3s; }
                input:checked + .slider-sms { background-color: #10b981; border-color: #10b981; }
                input:checked + .slider-sms:before { transform: translateX(22px); }
            </style>
            {% endif %}
        </div>


        <div style="background: #f8fafc; border: 1.5px solid #e2e8f0; padding: 25px; border-radius: 0; margin-top: 30px;">
            <h4 style="font-size: 0.9rem; text-transform: uppercase; color: #f59e0b; margin-bottom: 20px; font-weight: 800; border-left: 4px solid #f59e0b; padding-left: 12px;">Biometric Enrollment (ZKTeco Remote Scan)</h4>
            <p style="font-size: 0.8rem; color: #64748b; font-weight: 600; margin-bottom: 20px;">Use this interface to trigger physical fingerprint enrollment mode directly on your selected ZKTeco device.</p>
            
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 20px;">
                <div class="form-group" style="margin-bottom: 0;">
                    <label>Select Device</label>
                    <select id="deviceSelect" style="width: 100%; border: 1.5px solid #e5e7eb; border-radius: 0; padding: 10px 12px; font-weight: 700; color: #1f2937; background: #fff;">
                        <option value="">-- Choose Device --</option>
                        {% for d in devices %}
                            <option value="{{ d.id }}">{{ d.name }} ({{ d.serial_number }})</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group" style="margin-bottom: 0;">
                    <label>Select Finger</label>
                    <select id="fingerSelect" style="width: 100%; border: 1.5px solid #e5e7eb; border-radius: 0; padding: 10px 12px; font-weight: 700; color: #1f2937; background: #fff;">
                        <option value="0">Right Thumb (0)</option>
                        <option value="1">Right Index (1)</option>
                        <option value="2">Right Middle (2)</option>
                        <option value="3">Right Ring (3)</option>
                        <option value="4">Right Little (4)</option>
                        <option value="5">Left Thumb (5)</option>
                        <option value="6">Left Index (6)</option>
                        <option value="7">Left Middle (7)</option>
                        <option value="8">Left Ring (8)</option>
                        <option value="9">Left Little (9)</option>
                    </select>
                </div>
            </div>

            <div style="display: flex; align-items: center; gap: 15px;">
                <button type="button" id="btnEnroll" class="btn" style="background-color: #f59e0b; border-color: #f59e0b; color: #fff; padding: 10px 20px; font-size: 0.85rem; height: auto;">TRIGGER ENROLLMENT</button>
                <div id="enrollStatus" style="font-size: 0.85rem; font-weight: 700; display: none; align-items: center; gap: 8px;">
                    <span id="enrollSpinner" class="spinner" style="display: inline-block; width: 14px; height: 14px; border: 2px solid #f59e0b; border-top-color: transparent; border-radius: 50%; animation: spin 1s linear infinite;"></span>
                    <span id="enrollMsg" style="color: #475569;">Initializing...</span>
                </div>
            </div>
            
            <style>
                @keyframes spin {
                    0% { transform: rotate(0deg); }
                    100% { transform: rotate(360deg); }
                }
            </style>
        </div>

        <!-- Template Debugging Section (Helper to diagnose production display issues) -->
        {% if user.is_superuser or user.profile.role == 'SCHOOL_ADMIN' %}
        <div style="margin-top: 30px; padding: 20px; background: #f8fafc; border: 1.5px dashed #cbd5e1; border-radius: 0; font-size: 0.8rem; color: #475569;">
            <h5 style="font-weight: 800; color: #1e293b; margin-bottom: 10px; text-transform: uppercase; font-size: 0.75rem;"><i class="fas fa-bug"></i> Biometric Debug Panel</h5>
            <ul style="list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px;">
                <li><strong>Current School:</strong> {{ user.profile.school.name }} (Code: {{ user.profile.school.code }})</li>
                <li><strong>Individual SMS Enabled:</strong> {{ user.profile.school.is_individual_sms_enabled|yesno:"Yes,No" }}</li>
                <li><strong>Total Devices Passed:</strong> {{ devices|length }}</li>
                <li><strong>Devices List:</strong> 
                    {% if devices %}
                        {% for d in devices %}
                            [{{ d.name }} - S/N: {{ d.serial_number }} (Authorized: {{ d.is_authorized|yesno:"Yes,No" }}, Terminated: {{ d.is_terminated|yesno:"Yes,No" }})]{% if not forloop.last %}, {% endif %}
                        {% endfor %}
                    {% else %}
                        <span style="color: #ef4444; font-weight: 700;">No devices found in context!</span> (Ensure devices are authorized and not terminated for this school in the admin panel).
                    {% endif %}
                </li>
            </ul>
        </div>
        {% endif %}

        <div style="display: flex; gap: 12px; margin-top: 32px; padding-top: 30px; border-top: 1px solid #f1f5f9;">
            <button type="submit" id="submitBtn" class="btn" style="flex: 1; justify-content: center; height: 50px; font-size: 1rem;">{% if is_edit %}UPDATE{% else %}SAVE{% endif %}</button>
            <a href="{% url 'student_list' %}" class="btn" style="flex: 1; justify-content: center; background-color: #f1f5f9; color: #475569; height: 50px; font-size: 1rem;">GO BACK</a>
        </div>
    </form>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    let checkTimeout;
    const pinInput = document.getElementById('pinInput');
    const rollInput = document.getElementById('rollInput');
    const classSelect = document.getElementById('classSelect');
    const subjectsGrid = document.getElementById('subjectsGrid');
    const feesGrid = document.getElementById('feesGrid');
    
    const pinError = document.getElementById('pinError');
    const rollError = document.getElementById('rollError');
    const submitBtn = document.getElementById('submitBtn');
    
    const currentStudentId = "{{ student.id|default:'' }}";
    const isEdit = {{ is_edit|yesno:"true,false" }};

    function loadClassSubjects(classId) {
        if (!classId) {
            subjectsGrid.innerHTML = '<div id="noSubjectsMsg" style="font-size: 0.82rem; color: #94a3b8; font-style: italic;">Select a class to see available subjects.</div>';
            return;
        }

        fetch(`/school/students/api/get-subjects/?class_id=${classId}`)
            .then(r => r.json())
            .then(data => {
                if (data.subjects.length === 0) {
                    subjectsGrid.innerHTML = '<div style="font-size: 0.82rem; color: #ef4444; font-weight: 600;">No subjects defined for this class. Add subjects first.</div>';
                } else {
                    subjectsGrid.innerHTML = '';
                    data.subjects.forEach(sub => {
                        const label = document.createElement('label');
                        label.style = 'display: flex; align-items: center; gap: 10px; background: #f8fafc; padding: 8px 12px; border-radius: 0; border: 1px solid #e2e8f0; cursor: pointer; margin-bottom: 0;';
                        label.innerHTML = `
                            <input type="checkbox" name="subject_ids" value="${sub.id}" checked
                                style="width: 20px; height: 20px; accent-color: #3b82f6;">
                            <div style="font-size: 0.85rem; font-weight: 700; color: #1e293b;">${sub.name}</div>
                        `;
                        subjectsGrid.appendChild(label);
                    });
                }
            });
    }

    function checkDuplicates() {
        clearTimeout(checkTimeout);
        checkTimeout = setTimeout(() => {
            const pin = pinInput.value.trim();
            const roll = rollInput.value.trim();
            const class_id = classSelect.value.trim();
            
            if (!pin && !roll) return;
            
            const params = new URLSearchParams({
                pin: pin,
                roll: roll,
                class_id: class_id,
                exclude_id: currentStudentId
            });

            fetch(`/school/students/api/check-duplicate/?${params.toString()}`)
                .then(r => r.json())
                .then(data => {
                    let hasError = false;
                    
                    if (data.pin_exists) {
                        pinError.style.display = 'block';
                        pinInput.style.borderColor = '#ef4444';
                        hasError = true;
                    } else {
                        pinError.style.display = 'none';
                        pinInput.style.borderColor = '';
                    }

                    if (data.roll_exists && class_id) {
                        rollError.style.display = 'block';
                        rollInput.style.borderColor = '#ef4444';
                        hasError = true;
                    } else {
                        rollError.style.display = 'none';
                        rollInput.style.borderColor = '';
                    }
                    
                    submitBtn.disabled = hasError;
                    submitBtn.style.opacity = hasError ? '0.5' : '1';
                    submitBtn.style.cursor = hasError ? 'not-allowed' : 'pointer';
                })
                .catch(e => console.error("Validation error", e));
        }, 500);
    }

    function loadClassFees(classId) {
        if (!classId) return;

        fetch(`/school/students/api/get-fees/?class_id=${classId}`)
            .then(r => r.json())
            .then(data => {
                const assignedFeeIds = data.fees.map(f => String(f.id));
                const feeLabels = document.querySelectorAll('.fee-item');
                
                feeLabels.forEach(label => {
                    const feeId = label.getAttribute('data-id');
                    const checkbox = label.querySelector('input');
                    
                    if (assignedFeeIds.includes(feeId)) {
                        label.style.display = 'flex';
                        if (!isEdit) checkbox.checked = true;
                    } else {
                        if (!isEdit) {
                            label.style.display = 'none';
                            checkbox.checked = false;
                        }
                    }
                });
            });
    }

    // Initial Load for Add Mode (if class is pre-selected)
    if (classSelect && classSelect.value && !isEdit) {
        loadClassSubjects(classSelect.value);
        loadClassFees(classSelect.value);
    }

    if (pinInput) pinInput.addEventListener('input', checkDuplicates);
    if (rollInput) rollInput.addEventListener('input', checkDuplicates);
    
    if (classSelect) {
        classSelect.addEventListener('change', function() {
            checkDuplicates();
            // Only auto-load subjects and fees if NOT in edit mode
            if (!isEdit) {
                loadClassSubjects(this.value);
                loadClassFees(this.value);
            }
        });
    }

    // Biometric Enrollment Script
    const btnEnroll = document.getElementById('btnEnroll');
    if (btnEnroll) {
        btnEnroll.addEventListener('click', function() {
            const deviceId = document.getElementById('deviceSelect').value;
            const fingerId = document.getElementById('fingerSelect').value;
            const enrollStatus = document.getElementById('enrollStatus');
            const enrollSpinner = document.getElementById('enrollSpinner');
            const enrollMsg = document.getElementById('enrollMsg');

            if (!deviceId) {
                alert("Please select a device first!");
                return;
            }

            btnEnroll.disabled = true;
            btnEnroll.style.opacity = '0.5';
            btnEnroll.style.cursor = 'not-allowed';
            
            enrollStatus.style.display = 'flex';
            enrollSpinner.style.display = 'inline-block';
            enrollMsg.style.color = '#475569';
            enrollMsg.innerText = "Queueing command on server...";

            const pinVal = document.getElementById('pinInput').value.trim();
            if (!currentStudentId && !pinVal) {
                alert("Please enter a Student PIN/ID first!");
                btnEnroll.disabled = false;
                btnEnroll.style.opacity = '1';
                btnEnroll.style.cursor = 'pointer';
                enrollStatus.style.display = 'none';
                return;
            }

            const payload = {
                device_id: deviceId,
                finger_id: fingerId
            };
            if (currentStudentId) {
                payload.student_id = currentStudentId;
            } else {
                payload.pin = pinVal;
            }

            // Post command to API
            fetch('/school/students/api/enroll-finger/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': '{{ csrf_token }}'
                },
                body: JSON.stringify(payload)
            })
            .then(r => r.json())
            .then(data => {
                if (data.success) {
                    const cmdId = data.command_id;
                    enrollMsg.innerText = "Waiting for device to receive command (heartbeat)...";
                    pollCommandStatus(cmdId);
                } else {
                    resetEnrollUI(data.error || "Failed to trigger enrollment.");
                }
            })
            .catch(err => {
                console.error(err);
                resetEnrollUI("Connection error occurred.");
            });

            function pollCommandStatus(cmdId) {
                let attempts = 0;
                const interval = setInterval(() => {
                    attempts++;
                    if (attempts > 60) { // Limit to 2 minutes (60 * 2s)
                        clearInterval(interval);
                        resetEnrollUI("Timeout: Device did not respond.");
                        return;
                    }

                    fetch(`/school/students/api/command-status/${cmdId}/`)
                    .then(r => r.json())
                    .then(res => {
                        if (res.success) {
                            if (res.status === 'SENT') {
                                enrollSpinner.style.display = 'inline-block';
                                enrollMsg.style.color = '#3b82f6';
                                enrollMsg.innerText = "Command received. Please place your finger on the device sensor 3 times.";
                            } else if (res.status === 'SUCCESS') {
                                clearInterval(interval);
                                enrollSpinner.style.display = 'none';
                                enrollMsg.style.color = '#10b981';
                                enrollMsg.innerText = "Fingerprint enrolled successfully!";
                                btnEnroll.disabled = false;
                                btnEnroll.style.opacity = '1';
                                btnEnroll.style.cursor = 'pointer';
                            } else if (res.status === 'FAILED') {
                                clearInterval(interval);
                                resetEnrollUI("Enrollment failed or rejected by device.");
                            }
                        }
                    })
                    .catch(e => console.error(e));
                }, 2000);
            }

            function resetEnrollUI(msg) {
                enrollSpinner.style.display = 'none';
                enrollMsg.style.color = '#ef4444';
                enrollMsg.innerText = msg;
                btnEnroll.disabled = false;
                btnEnroll.style.opacity = '1';
                btnEnroll.style.cursor = 'pointer';
            }
        });
    }
});
</script>
{% endblock %}