{% 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">Student Feedback</h3>
                        </div>
                        <!-- /.card-header -->
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>S.N</th>
                                        <th>Student Name</th>
                                        <th>Student Session</th>
                                        <th>Message</th>
                                        <th>Sended On</th>
                                        <th>Reply</th>
                                    </tr>
                                </thead>
                                {% for feedback in feedbacks %}
                                    <tbody>
                                        <tr>
                                            <td>{{ forloop.counter }}</td>
                                            <td>{{ feedback.student_id.first_name }}</td>
                                            <td>{{ feedback.student_id.academic_year.start_date }}</td>
                                            <td>{{ feedback.feedback }}</td>
                                            <td>{{ feedback.created_at }}</td>
                                            <td>
                                                {% if feedback.feedback_reply == "" %}
                                                    <button class="btn btn-success reply_open_modal"
                                                            data-toggle="modal"
                                                            data-target="#replyModal">Reply</button>
                                                {% else %}
                                                    {{ feedback.feedback_reply }}
                                                {% endif %}
                                            </td>
                                        </tr>
                                    </tbody>
                                {% endfor %}
                            </table>
                        </div>
                    </div>
                    <!-- /.card -->
                </div>
            </div>
        </div>
        <!-- /.container-fluid -->
    </section>
    {% comment %} Modal to Reply Feedback {% endcomment %}
    <!-- Modal -->
    <div class="modal fade"
         id="replyModal"
         tabindex="-1"
         role="dialog"
         aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Reply Feedback</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>
                        Reply to: <b><span id="reply_name"></span></b>
                    </p>
                    <input type="hidden" id="reply_id" name="reply_id" />
                    <textarea class="form-control" rows="5" id="reply_message"></textarea>
                </div>
                <div class="modal-footer">
                    {% comment %} <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> {% endcomment %}
                    <button type="button" class="btn btn-primary btn-block" id="reply_button">Reply</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% comment %} Custom JS to Identify the Reply and Post Reply {% endcomment %}
{% block custom_js %}
    <script>
        $(document).ready(function(){
            $(".reply_open_modal").click(function(){
                // Getting Value from Table
                var id = $(this).parents("tr").children("td:eq(0)").text(); //Getting Selected Row ID (Frist Column)
                var name = $(this).parents("tr").children("td:eq(2)").text(); //Getting Selected Name (3rd Column)

                // Adding the Value from Table to Modal form
                $("#reply_id").val(id);
                $("#reply_name").text(name);
            });

            $(document).on("click", "#reply_button", function(){
                //Disabling the Button while data is being saved in Server
                $(this).attr("disabled", "disabled")
                $(this).text("Sending Reply...")

                //console.log("SAVE")


                var id=$("#reply_id").val();
                var reply=$("#reply_message").val();
                //console.log(student_data);

                // Saving Attendance Data into Database

                $.ajax({
                    url:'{% url 'student_feedback_message_reply' %}',
                    type:'POST',
                    data:{id:id, reply:reply},
                })


                .done(function(response){

                    if(response=="True")
                    {
                        alert("Reply Sent!")
                    }
                    else
                    {
                        alert("Failed to Send Reply!")
                    }
                    location.reload()

                    //console.log(response)
                })

                .fail(function(){
                    alert("Error in Sending Feedback Reply.")
                })

            })

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