{% extends 'hod_template/base_template.html' %}

{% block page_title %}
    Add Student
{% endblock page_title %}

{% block main_content %}

{% load static %}

<section class="content">
        <div class="container-fluid">

            <div class="row">
                <div class="col-md-12">
                    <!-- general form elements -->
                    <div class="card card-primary">
                    <div class="card-header">
                        <h3 class="card-title">Add Student</h3>
                    </div>
                    <!-- /.card-header -->
                    <!-- form start -->
                    {% url 'add_student_save' as action_path %}
                    {% include 'hod_template/form_template.html' with messages=messages form=form action_path=action_path button_text="Add Student" %}

                    </div>
                    <!-- /.card -->

                </div>
            </div>

        </div><!-- /.container-fluid -->
      </section>

  {% endblock main_content %}

  {% block custom_js %}
    {% comment %} Checking if email and username already exists or not usin Ajax {% endcomment %}

    <script>
        $(document).ready(function(){
            // keyup event will be triggered when user leaves keyboard
            $("#id_email").keyup(function(){
                var email = $(this).val();

                if(email!=""){
                    $.ajax({
                        url : '{% url 'check_email_exist' %}',
                        type : 'POST',
                        data : {email:email}
                    })
                    .done(function(response){
                        //console.log(response);

                        if(response == "True"){
                            $(".email_error").remove();
                            $("<span class='email_error' style='color: red; padding: 5px; font-weight: bold;'> Email Not Available. </span>").insertAfter("#id_email")
                        }
                        else{
                            $(".email_error").remove();
                            $("<span class='email_error' style='color: green; padding: 5px; font-weight: bold;'> Email Available. </span>").insertAfter("#id_email")
                        }
                    })

                    .fail(function(){
                        console.log("Failed");
                    })
                }
                else{
                    $(".email_error").remove();
                }
                
            })

            $("#id_username").keyup(function(){
                var username = $(this).val();
                
                if(username!=""){
                    $.ajax({
                        url : '{% url 'check_username_exist' %}',
                        type : 'POST',
                        data : {username:username}
                    })
                    .done(function(response){
                        //console.log(response);

                        if(response == "True"){
                            $(".username_error").remove();
                            $("<span class='username_error' style='color: red; padding: 5px; font-weight: bold;'> Username Not Available. </span>").insertAfter("#id_username")
                        }
                        else{
                            $(".username_error").remove();
                            $("<span class='username_error' style='color: green; padding: 5px; font-weight: bold;'> Username Available. </span>").insertAfter("#id_username")
                        }
                    })

                    .fail(function(){
                        console.log("Failed");
                    })
                }
                else{
                    $(".username_error").remove();
                }
                
            })
        })
    </script>

  {% endblock custom_js %}