{% extends '::base.html.twig' %}
{% block usercss %}
    {{ parent() }}
    <style>
        @media
        only screen and (max-width: 760px),
        (min-device-width: 768px) and (max-device-width: 1024px)  { 

            /*
            Label the data
            */
            td:nth-of-type(1):before { content: "#"; }
            td:nth-of-type(2):before { content: "Batch Name"; }
            td:nth-of-type(3):before { content: "Exam"; }
            td:nth-of-type(4):before { content: "Invigilator Code"; }
            td:nth-of-type(5):before { content: "Scheduled at"; }
            td:nth-of-type(6):before { content: "Time Table"; }
            td:nth-of-type(7):before { content: "View Details"; }
        }


        .batch_candidates{
            background-color: #4A9CAE;
            border-radius: 5px;
            color: white;
            float: left;
            padding: 3px;
            width: 150px;
            margin-left: 5px;
            margin-top: 5px;
        }

    </style>
{% endblock %}
{% block body -%}
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h6>View Scheduled Exam List</h6>
                </div>
                <div class="panel-body">  
                    <div class="button_container">
                        {#<a class="btn btn-success" href="{{ path('batch_new') }}">
                            Add New Batch
                        </a>#}
                    </div>
                    <div class="data_container">
                        <table class="table table-bordered" id="table_responsive">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Batch Name</th>
                                    <th>Exam</th>
                                    <th>Invigilator Code</th>
                                    <th>Scheduled at</th>
                                    <th>Exam Stop Time</th>
                                    <th>Grace Period(in Min.)</th>
                                    <th>Time Table</th>
                                    <th>Modify</th>
                                    <th>Result</th>
                                    <th>View Details</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% set slno = 1 %}
                                {% for entity in entities %}
                                    <tr>
                                        <td>{{  slno }}</td>
                                        <td>{{ entity.batchName }}</td>
                                        <td>{{ entity.examName }}</td>
                                        <td>{{ entity.invigilator_code }}</td>
                                        <td>{{ entity.examStartDate|date('d/m/Y h:i A') }}</td>
                                        <td>{{ entity.examStopDate|date('d/m/Y h:i A') }}</td>
                                        <td class="text-center">
                                            <span class="grace_period">{{ entity.grace_period }}</span>
                                            {% if entity.examStartDate <  today and  entity.examStopDate > today %}
                                                <a href="javascript:void(0)">
                                                    <i class="fa fa-edit edit_grace_period" data-id="{{ entity.guid }}"></i>
                                                </a>
                                            {% endif %}
                                        </td>

                                        <td>
                                            <a target="_blank" href="{{ path('timetabel_schedule_excel',{'guid' : entity.guid }) }}">
                                                <i class="fa fa-download "></i>
                                            </a>
                                        </td>
                                        <td>
                                            {% if entity.examStartDate >  today %}
                                                {#                                            {% if examStopDate < date %}#}
                                                <a href="{{ path('schedule_exam_modification',{'schedule' : entity.guid }) }}">
                                                    <i class="fa fa-edit "></i>
                                                </a>
                                            {% endif %}
                                        </td>
                                        <td>
                                            {% if entity.examStopDate <  today %}
                                                {#                                            {% if examStopDate < date %}#}
                                                <a href="{{ path('admin_view_attended_exams_result_download_excel',{'batchExam' : entity.guid }) }}">
                                                    <i class="fa fa-download"></i>
                                                </a>
                                                <a href="{{ path('admin_view_attended_exams_result_show_batch',{'batchExam' : entity.guid }) }}">
                                                    <i class="fa fa-file-code-o"></i>
                                                </a>
                                            {% endif %}
                                        </td>
                                        <td>
                                            <a herf="javascript:void(0);" class="view_details" data-target="#myModal" data-toggle="modal" data-exammaster="{{ entity.guid }}">   
                                                <i class="fa fa-indent "> </i> 
                                            </a>

                                        </td>
                                    </tr>
                                    {% set slno = slno + 1 %}
                                {% endfor %}
                            </tbody>
                        </table>

                        {{ knp_pagination_render(entities, 'AppBundle:Default:slidingAjax.html.twig') }}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div style="display: none;" class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="width: 95%;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel">
                        <div id="modal_title">Exam Schedule</div>
                    </h4>
                </div>
                <div class="modal-body">
                    <div id="modal_content" class="modal_content"></div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
{% endblock %}
{% block userscripts %}
    <script type="text/javascript">
        $(document).ready(function () {
            $("body").on("click", ".view_details", function () {
                var master_exam_schedule = $(this).data("exammaster");
                var path = "{{ path('schedule_exam_view_ajax',{'batch_exam_master':'__batch_exam_'}) }}";
                path = path.replace('__batch_exam_', master_exam_schedule);
                $.ajax({
                    type: "POST",
                    url: path,
                    beforeSend: function () {
                        $("#ajax_loader_div").show();
                        $("#modal_content").html('');
                    },
                    success: function (data) {
                        var html = "";

                        if (data.status === "danger") {
                            html = html + '<div class="alert alert-danger"> ' + data.message + ' </div>';
                        }
                        if (data.details.exam_name) {
                            html = html + '<h4> Exam Name: ' + data.details.exam_name + ' </h4>';
                        }
                        if (data.details.batch_name) {
                            html = html + '<h4> Batch Name: ' + data.details.batch_name + ' </h4>';
                        }
                        if (data.details.batch_count) {
                            html = html + '<h4> Total Candidates in Batch: ' + data.details.batch_count + ' </h4>';
                        }
                        if (data.details.batch__scheduled_count) {
                            html = html + '<h4> Scheduled For : ' + data.details.batch__scheduled_count + ' </h4>';
                        }
                        if (data.details.question_set) {
                            $.each(data.details.question_set, function (key, question_set) {
                                html = html + '<h4> Question Set : ' + question_set.name + ' </h4>';
                                $.each(question_set.candidate_name, function (innerKey, candidate) {
                                    html = html + '<div class="batch_candidates">' + candidate + ' </div>';
                                })
                                html = html + '<div class="clearfix"></div>';
                            });

                        }
                        $("#modal_content").html(html);


                    },
                    complete: function () {
                        $("#ajax_loader_div").hide();
                    }

                }).error(function () {
                    $("#modal_content").html('<div class="alert alert-danger"> Some error found !!! </div>');
                });
            });

            $("body").on("click", ".edit_grace_period", function () {
                var ths = $(this);
                var batch = $(ths).data("id");
                var grace_period = ths.closest("td").find(".grace_period").text();
                alertify.defaults.glossary.title = 'Grace Period';
                alertify.prompt("Enter grace period: ", grace_period,
                        function (evt, value) {
                            __addGracePeriod(ths, batch, value);
                        },
                        function () {

                        })
                        ;

            });

            function __addGracePeriod(ths, batch, grace_period) {
                $.ajax({
                    type: "POST",
                    url: "{{ path('schedule_exam_adding_grace_mark') }}",
                    data: {batch: batch, grace_period: grace_period},
                    beforeSend: function () {
                        ths.closest("td").find(".grace_period").append(" <i class='fa fa-spin fa-spinner fa-3x'></i>");
                        alertify.success("Please wait!!. Adding Grace period!!");
                    },
                    success: function (data) {
                        if (data.status == "success") {
                            ths.closest("td").find(".grace_period").text(grace_period);
                            alertify.success(data.message);
                        } else {
                            alertify.error(data.message);
                        }
                    },
                    complete: function () {
                        ths.closest("td").find(".grace_period .fa").remove();
                    }

                }).error(function () {
                    alertify.error("Some error found!!");
                });
            }

        });
        function __loadPage(path) {
            $.ajax({
                type: "POST",
                url: path,
                beforeSend: function () {
                    $("#ajax_loader_div").show();
                },
                success: function (html) {
                    var data_table = $(html).find(".data_container");
                    $(".data_container").html(data_table);
                },
                complete: function () {
                    $("#ajax_loader_div").hide();
                }

            });
        }
    </script>
{% endblock %}
{# var data_table = $(html).find(".data_container");
       $(".data_container").html(data_table);#}