{% extends 'admin/base_site.html' %}
{% block 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">View Attendance</h3>
                        </div>
                        <!-- /.card-header -->
                        {% comment %} Display Messages {% endcomment %}
                        {% if messages %}
                            <div class="form-group">
                                <div class="col-12">
                                    {% for message in messages %}
                                        {% if message.tags == "error" %}
                                            <div class="alert alert-danger alert-dismissible fade show"
                                                 role="alert"
                                                 style="margin-top: 10px">
                                                {{ message }}
                                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                        {% elif message.tags == "success" %}
                                            <div class="alert alert-success alert-dismissible fade show"
                                                 role="alert"
                                                 style="margin-top: 10px">
                                                {{ message }}
                                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                        {% endif %}
                                    {% endfor %}
                                </div>
                            </div>
                        {% endif %}
                        <div class="card-body">
                            <div class="form-group">
                                <label>Subject</label>
                                <select class="form-control" name="subject" id="subject">
                                    {% for subject in subjects %}<option value="{{ subject.id }}">{{ subject.name }}</option>{% endfor %}
                                </select>
                            </div>
                            <div class="form-group">
                                <label>Academic Year</label>
                                <select class="form-control" name="session_year_id" id="session_year_id">
                                    {% for academic_year in academic_years %}
                                        <option value="{{ academic_year.id }}">{{ academic_year.start_date }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <!-- /.card-body -->
                        <div class="card-footer">
                            <button type="button" class="btn btn-primary" id="fetch_attendance">Fetch Attendance Date</button>
                        </div>
                        <div class="card-footer">
                            <div class="form-group" id="attendance_block" style="display:none;">
                                <label>Attendance Date</label>
                                <select class="form-control" name="attendance_date" id="attendance_date"></select>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="alert alert-danger" id="error_attendance" style="display:none"></div>
                            <div class="alert alert-success"
                                 id="success_attendance"
                                 style="display:none"></div>
                        </div>
                        <div class="card-footer" id="fetch_student_block" style="display:none;">
                            <button type="button" class="btn btn-primary" id="fetch_student">Fetch Student Data</button>
                        </div>
                        <!-- /.card-body -->
                        {% comment %} <div class="card-footer">
                                <button type="button" class="btn btn-primary" id="save_student">Save Data</button>
                        </div> {% endcomment %}
                    </div>
                    {% comment %} Displaying Students Here {% endcomment %}
                    <div class="card-footer" id="student_data"></div>
                </div>
                <!-- /.card -->
            </div>
        </div>
    </div>
    <!-- /.container-fluid -->
</section>
{% endblock %}
{% block custom_js %}
    <script>
    $(document).ready(function(){


        //Fetching Attendance Date

        $("#fetch_attendance").click(function(){
                var subject = $("#subject").val()
                var academic_year_id = $("#academic_year_id").val()
                //console.log(subject)
                //console.log(session_year_id)

                $.ajax({
                    url:'{% url 'get_attendance_dates' %}',
                    type:'POST',
                    data:{subject:subject, academic_year_id:academic_year_id},
                })


                .done(function(response){
                    var json_data = JSON.parse(response);
                    if(json_data.length>0)
                    {
                        var html_data = "";
                        for (key in json_data)
                        {
                            html_data+="<option value='"+ json_data[key]["id"] +"'>"+ json_data[key]["attendance_date"] +"</option>"
                        }
                        $("#error_attendance").html("");
                        $("#error_attendance").hide();
                        $("#attendance_block").show();
                        $("#fetch_student_block").show();
                        $("#attendance_date").html(html_data);
                        //console.log(response)
                        //alert("Something")
                    }
                    else
                    {
                        $("#error_attendance").html("No Attendance Data Found.");
                        $("#error_attendance").show();
                        $("#attendance_block").hide();
                        $("#fetch_student_block").hide();
                        $("#attendance_date")="" //Empty the Date Dropdown also
                    }

                })

                .fail(function(){
                    alert("Error in getting Attendance Dates.")
                    $("#error_attendance").html("");
                    $("#fetch_student_block").hide();
                    $("#attendance_block").hide();
                });


        })

        // Now Working on Fetch Student after attendance date selected
        $("#fetch_student").click(function(){

            // Displaying Students Based on Staff, Course and Session Enrolled

            //var subject=$("#subject").val()
            //var session_year=$("#session_year").val()
            var attendance_date=$("#attendance_date").val()

            $.ajax({
                url:'{% url 'admin_get_attendance_student' %}',
                type:'POST',
                data:{attendance_date:attendance_date},
            })


            .done(function(response){
                var json_data=JSON.parse(response);
                //console.log(json_data)
                //Displaying Attendance Date Input and Students Attendance
                var div_data="<div class='form-group'><label>Student Attendance: </label></div>"
                div_data+="<div class='form-group'><div class='row'>"

                for(key in json_data)
                {
                    div_data+="<div class='col-lg-3'><div class='form-check'>";

                    div_data+="<label class='form-check-label'>"+ json_data[key]['name']+" </label> ";

                    // Displaying Present and Absent

                    if(json_data[key]['status'])
                    {
                        div_data+="<b>[ Present ]</b>";
                    }
                    else
                    {
                        div_data+="<b>[ Absent ]</b>";
                    }
                    //Displaying Present and Absent Ends Here


                    div_data+="</div></div> ";
                }
                div_data+="</div></div>";

                $("#student_data").html(div_data);

            })
            .fail(function(){
                alert("Error in Fetching Students.")
            })


        })

    })
    </script>
{% endblock custom_js %}