{% 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 style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px;">
                        {% 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;">
                            <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 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="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 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);
    }

    if (pinInput) pinInput.addEventListener('input', checkDuplicates);
    if (rollInput) rollInput.addEventListener('input', checkDuplicates);
    
    if (classSelect) {
        classSelect.addEventListener('change', function() {
            checkDuplicates();
            // Only auto-load subjects if NOT in edit mode or if user intentionally changed class
            if (!isEdit) {
                loadClassSubjects(this.value);
            }
        });
    }
});
</script>
{% endblock %}