{% extends '::base.html.twig' %}
{% block usercss %}
    {{ parent() }}

    <style>
        .batch_candidates{
            background-color: #4A9CAE;
            border-radius: 5px;
            color: white;
            float: left;
            padding: 3px;
            width: 150px;
            margin-left: 5px;
            margin-top: 5px;
            font-family: Arial;
            font-size: 11px;
        }
        .candidate_container{
            background-color: #ededed;
            border: 1px solid #becdd9;
            border-radius: 8px;
            padding: 10px;
            margin-top: 10px;
            margin-bottom: 10px;
        }
        .stat_details_container {
            font-weight: bold;
            margin: 0;
            padding-bottom: 5px;
            padding-top: 5px;
            text-align: left;
        }
        .stat_label_container {
            font-weight: bold;
            margin: 0;
            padding-bottom: 5px;
            padding-top: 5px;
            text-align: right;
        }
        .already_scheduled{
            background-color: #e6e2e2;
            border-radius: 4px;
            font-weight: bold;
            margin-bottom: 3px;
            margin-top: 3px;
            padding-bottom: 3px;
            padding-left: 2%;
            padding-top: 3px;
            text-shadow: 0 0 #151313;
        }
        .already_scheduled_candidates {
            background-color: #e6e2e2;
            margin-top: 3px;
            padding: 2px;
            text-shadow: 0 0 #151313;
        }
        
    </style>
    <link rel="stylesheet" href="{{ asset('bundles/app/js/select2/select2.min.css') }}">
{% endblock %}
{% block body -%}

 <div class="row">
     <div class="col-lg-12 text-right">
         <strong><a href="{{ path('schedule_exam_view') }}"> <i class="fa fa-bars"></i> View Schedule List </a></strong>
         <strong><a href="{{ path('schedule_exam_process') }}"> <i class="fa fa-plus"></i> Add New Schedule </a></strong>
     </div>
            <div class="col-lg-12">
                <div class="candidate_container">
                    <h4>Schedule Exam Modification</h4>
                    <div class="already_scheduled"  style="color:black">
                        Scheduled Date and Time : <span id="modifying_time_continer"> {{ scheduled_at|date('d/m/Y h:i A') }} </span> 
                            
                        </div>
                </div>
            </div>
        </div>
    {% if show_data %}
        <div class="row">
            <div class="col-lg-12">
                <div class="candidate_container" id="already_scheduled_container" >
                    <h4>Other Exam Schedules</h4>
                    {% for sceduled in scheduledExams %}
                        <div class="already_scheduled" style="color:black">{#{{ sceduled['color'] }}#}
                            Scheduled Date and Time : {{ sceduled['examStartDate'] }} 
                            <a target="_blank" href="{{ path('timetabel_schedule_excel',{'guid' : sceduled['guid'] }) }}">
                                <i class="fa fa-download"></i>
                            </a>
                            <a href="{{ path('schedule_exam_modification',{'schedule' : sceduled['guid'] }) }}">
                                <i class="fa fa-edit"></i>
                            </a>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="candidate_container" >
                    <button class="btn btn-sm btn-default select_all_candidates"> Select All </button>
                    <button class="btn btn-sm btn-default unselect_all_candidates"> Unselect All </button>
                    {% for examset in examsets %}
                        <button class="btn btn-sm btn-info move" data-container="set_{{ examset.id }}"> Move to {{ examset }} </button>
                    {% endfor %}

                    <h4> Candidates</h4>
                    <div id="candidates_unassigned">
                         {{ include("AppBundle:ScheduleExam:TableContent/edit_schedule.html.twig") }}
                    </div>
                    <div  class="clearfix"></div>
                </div>

            </div>
        </div>
        {% for examset in examsets %}
            <div class="row">
                <div class="col-lg-12">
                    <div class="candidate_container" >
                        <button class="btn btn-sm btn-default select_all_candidates"> Select All </button>
                        <button class="btn btn-sm btn-default unselect_all_candidates"> Unselect All </button>
                        <button class="btn btn-sm btn-danger remove_candidates"> Remove </button>
                        {% for exSets in examsets %}
                            {% if exSets.id != examset.id %}
                            <button class="btn btn-sm btn-info move"  data-container="set_{{ exSets.id }}"> {{ exSets }}</button>
                            {% endif%}
                        {% endfor %}
                        <h4> {{ examset }}</h4>

                        <div class="exam_sets" data-set="{{ examset.id  }}" data-setname="{{ examset }}" id="set_{{ examset.id }}">
                            {% if currentScheduledExamsExamsetArray[examset.id] is defined %}
                                {% for candidate in currentScheduledExamsExamsetArray[examset.id] %}
                                        <div class="batch_candidates">
                                            <input type="checkbox" class="batch_candidates_selector"  value="{{ candidate['id'] }}" />
                                            {{ candidate['username'] }}-{{ candidate['name'] }} <br />
                                            {{ candidate['surname'] }} <br />

                                            {% if   scheduledExamsCandidates[candidate['id']] is defined %}
                                                {% set scheduledExamsCandidates_candidate = scheduledExamsCandidates[candidate['id']] %}
                                                {% for schCand in  scheduledExamsCandidates_candidate  %}
                                                    <div class="already_scheduled_candidates" style='color:#{{ scheduledExams[schCand['scheduled_id']]['color'] }};'>
                                                        {{ schCand['question_set'] }} <br />
                                                        {{ scheduledExams[schCand['scheduled_id']]['examStartDate'] }}
                                                    </div>
                                                {% endfor %}
                                            {% endif %}
                                        </div>
                                {% endfor %}
                                {% endif %}

                        </div>
                        <div  class="clearfix"></div>
                    </div>
                </div>
            </div>

        {%endfor%}

        <div class="row">
            <div class="col-lg-12" id="notification">

            </div>
            <!-- /.col-lg-12 -->
        </div>
        <div class="row">
            <div class="col-lg-12">

                <div class="candidate_container" >
                    <div class='stat'>
                        {% for exSets in examsets %}
                            <div class="row">
                                <div class='col-lg-6  stat_label_container'>
                                    <span class='stat_label'> Total Candidates {{ exSets }}: </span>
                                </div>
                                <div class='col-lg-6  stat_details_container'>
                                    <span class='count_stat' id='stat_total_{{ exSets.id }}'> </span>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                    <form class="form-horizontal">
                        <div class="bootstrap-timepicker">
                            <div class="bootstrap-timepicker-widget dropdown-menu"><table><tbody><tr><td><a data-action="incrementHour" href="#"><i class="glyphicon glyphicon-chevron-up"></i></a></td><td class="separator">&nbsp;</td><td><a data-action="incrementMinute" href="#"><i class="glyphicon glyphicon-chevron-up"></i></a></td><td class="separator">&nbsp;</td><td class="meridian-column"><a data-action="toggleMeridian" href="#"><i class="glyphicon glyphicon-chevron-up"></i></a></td></tr><tr><td><span class="bootstrap-timepicker-hour">10</span></td> <td class="separator">:</td><td><span class="bootstrap-timepicker-minute">00</span></td> <td class="separator">&nbsp;</td><td><span class="bootstrap-timepicker-meridian">AM</span></td></tr><tr><td><a data-action="decrementHour" href="#"><i class="glyphicon glyphicon-chevron-down"></i></a></td><td class="separator"></td><td><a data-action="decrementMinute" href="#"><i class="glyphicon glyphicon-chevron-down"></i></a></td><td class="separator">&nbsp;</td><td><a data-action="toggleMeridian" href="#"><i class="glyphicon glyphicon-chevron-down"></i></a></td></tr></tbody></table></div>
                            <div class="form-group">
                                <label for="scheduled_time" class="col-sm-2 control-label">Starting Time :</label>
                                <div class="col-sm-10">
                                    <input type="text" readonly="true" value="{{ scheduled_at|date('h:i A') }}" class="form-control timepicker" id="scheduled_time" />
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="scheduled_date" class="col-sm-2 control-label">Date :</label>
                            <div class="col-sm-10">
                                <input type="text" readonly="true" class="form-control datetimepicker" value="{{ scheduled_at|date('d/m/Y') }}" id="scheduled_date" />
                            </div>
                        </div>
                        
                    </form>
                    <button class="btn btn-primary btn-block" id="confirm_schedule" data-schedule="{{ schedule_guid }}"  data-toggle="confirmation" data-href="javascript:void(0)">Modify Schedule</button>
                </div>
            </div>
        </div>

    {% endif %}
{% endblock %}
{% block userscripts %}
    <script type="text/javascript" src="{{ asset('bundles/app/js/bootstrap-tooltip.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/app/js/bootstrap-confirmation.js') }}"></script>
    <script src="{{ asset('bundles/app/js/select2/select2.full.min.js') }}"></script>
    <script type="text/javascript" >

        $(document).ready(function () {
            statistics();
            $('#confirm_schedule').confirmation({
                onConfirm: function () {
                    operation();
                },
                onCancel: function () {

                }
            });


            $('body').on('focus', ".datetimepicker", function () {
                $(this).inputmask("99/99/9999", {placeholder: 'DD/MM/YYYY'});
                $(this).datepicker({
                    format: "dd/mm/yyyy"
                });
            });
            $('body').on('focus', ".timepicker", function () {
                $(this).inputmask("99:99 AA", {placeholder: 'DD/MM/YYYY'});
                //Timepicker
                $($(this)).timepicker({
                    showInputs: false,
                    minuteStep:1
                });
            });
            $("body").on("click", ".batch_candidates", function(){
                if(false === $(this).find(".batch_candidates_selector").prop("checked")){
                     $(this).find(".batch_candidates_selector").prop("checked",true);
                }else{
                    $(this).find(".batch_candidates_selector").prop("checked",false);
                }
            });
            $("body").on("click",".batch_candidates .batch_candidates_selector",function(e) {
                e.stopPropagation();
            });

            $(".select_all_candidates").click(function () {
                $(this).closest(".candidate_container").find(".batch_candidates_selector").prop('checked', true);
            });
            $(".unselect_all_candidates").click(function () {
                $(this).closest(".candidate_container").find(".batch_candidates_selector").prop('checked', false);
            });
            $(".remove_candidates").click(function () {
                var candidates = $(this).closest(".candidate_container").find(".batch_candidates_selector:checked").parent();
                var candidates_selector = $(this).closest(".candidate_container").find(".batch_candidates_selector:checked");
                candidates_selector.prop('checked', false);
                candidates.appendTo("#candidates_unassigned");
                statistics();
            });

            $(".move").click(function () {
                var moving_container = $(this).data('container');
                var candidates = $(this).closest(".candidate_container").find(".batch_candidates_selector:checked").parent();
                var candidates_selector = $(this).closest(".candidate_container").find(".batch_candidates_selector:checked");
                candidates_selector.prop('checked', false);
                candidates.appendTo("#" + moving_container);
                statistics();
            });


        });
        

        function operation() {
            $("#notification").html("");
            var sch_date = $("#scheduled_date").val();
            var sch_time = $("#scheduled_time").val();
            
            var schedule = $("#confirm_schedule").data("schedule");

            if (sch_date == "") {
                $("#notification").html('<div class="alert alert-danger"> Enter Exam Date !!! </div>');
                $('#confirm_schedule').confirmation("hide");
                return false;
            }

            if (sch_time == "") {
                $("#notification").html('<div class="alert alert-danger"> Enter Exam Starting Time !!! </div>');
                $('#confirm_schedule').confirmation("hide");
                return false;
            }

            var candidate_array = [];
            var candidates_assigned = false;
            var exam_set_containers = $(".exam_sets");
            $.each(exam_set_containers, function (key, value) {
                var $exam_set_id = $(value).data("set");
                var candidates = $(value).find(".batch_candidates_selector");
                var candArray = [];
                $.each(candidates, function (innerkey, candidateInSet) {
                    candidates_assigned = true;
                    var $candId = $(candidateInSet).val();
                    candArray.push($candId);
                });
                candidate_array.push({
                    'exam': $exam_set_id,
                    'candidates': candArray
                });


            });
            var candidate_json = JSON.stringify(candidate_array);


            if (false === candidates_assigned) {
                $("#notification").html('<div class="alert alert-danger"> Assign Question Set for candidates!!! </div>');
                $('#confirm_schedule').confirmation("hide");
                return false;
            }
            var path = "{{ path('schedule_exam_modify_schedule_ajax',{'schedule':'__schedule_'}) }}";
            path = path.replace('__schedule_',schedule);
        $.ajax({
            type: "POST",
            url: path,
            data: {exam_date: sch_date,exam_time:sch_time, user_set: candidate_json},
            dataType: "JSON",
            beforeSend: function () {
                $("#ajax_loader_div").show();
            },
            success: function (data) {
                if(data.status === "success"){
                   // var guid = data.guid;
                  //  rearrange(sch_date, sch_time, guid);
                  $("#modifying_time_continer").html(sch_date + ' ' + sch_time);
                }
                    $("#notification").html('<div class="alert alert-'+data.status+'"> '+ data.message +' !!! </div>');
            },
            complete: function () {
                   
                $("#ajax_loader_div").hide();
            }
        }).error(function () {
            $("#notification").html('<div class="alert alert-danger"> Some error found !!! </div>');
        });

                $('#confirm_schedule').confirmation("hide");
            }

            function statistics() {
                var exam_set_containers = $(".exam_sets");
                $.each(exam_set_containers, function (key, value) {
                    var $exam_set_id = $(value).data("set");
                    var candidates = $(value).find(".batch_candidates_selector");
                    $("#stat_total_" + $exam_set_id).html(candidates.length);
                });
            }

    </script>
{% endblock %}