{% 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">
            <h4>Schedule Exam</h4>
        </div>
        <!-- /.col-lg-12 -->
    </div>

    <div class="row">
        <div class="col-lg-12">
            {{ form_errors(form) }}
            <form class="form-horizontal">
                <div class="form-group">
                    <label for="load_batches" class="col-sm-2 control-label">Batch :</label>
                    <div class="col-sm-10">
                        <select class="form-control load_batches" id="load_batches">
                            {% if preselect.batch is defined %}
                                <option value="{{ preselect['batch']['id'] }}"> {{ preselect['batch']['name'] }} </option>
                            {% endif %}
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="load_exams" class="col-sm-2 control-label">Exam :</label>
                    <div class="col-sm-10">
                        <select class="form-control load_exams" id="load_exams">
                            {% if preselect.exam is defined %}
                                <option value="{{ preselect['exam']['id'] }}"> {{ preselect['exam']['name'] }} </option>
                            {% endif %}
                        </select>
                    </div>
                </div>
            </form>
            {{ form_start(form) }}
            {{ form_widget(form.batch) }}
            {{ form_widget(form.exam) }}
            {{ form_end(form) }}
        </div>
        <!-- /.col-lg-12 -->
    </div>

    {% if show_data %}
        <div class="row">
            <div class="col-lg-12">
                <div class="candidate_container" id="already_scheduled_container" >
                    <h4>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 %}
                    <div class="row">
                        <div class="col-md-12" style="padding-top:5px;">
                            <div class="form-group">
                                <label>Search:</label>
                                <input type="text" name="search_text" placeholder="Search" id="search_text" data-exam="{{ preselect['exam']['id'] }}" data-batch="{{ preselect['batch']['id'] }}" class="form-control"/>
                            </div>
                       </div>
                    </div>
                    <h4> Candidates</h4>
                    <div id="candidates_unassigned">
                         {{ include("AppBundle:ScheduleExam:TableContent/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 }}">

                        </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'>
                        {#<div class="row">
                            <div class='col-lg-6 stat_label_container'>
                                <span class='stat_label'> Un-Assigned Candidates: </span>
                            </div>
                            <div class='col-lg-6 stat_details_container'>
                                <span class='count_stat' id='stat_total'>  </span>
                            </div>
                        </div>#}
                        {% 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" 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" id="scheduled_date" />
                            </div>
                        </div>
                        
                    </form>
                    <button class="btn btn-primary btn-block" id="confirm_schedule" data-exam="{{ preselect['exam']['id'] }}" data-batch="{{ preselect['batch']['id'] }}"  data-toggle="confirmation" data-href="javascript:void(0)">Confirm 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();
            $("#search_text").val("");
             $("#search_text").on("keyup", function () {
                var pathname = window.location.pathname; // Returns path only
                var batch = $(this).data("batch");
                var exam = $(this).data("exam");
                __loadPage(pathname,batch,exam);
            });
            
            $("form[name='{{ form.vars.id }}']").submit(function (e) {
                //e.preventDefault();
                var batch = $(".load_batches").val();
                var exam = $(".load_exams").val();
                $("#{{ form.batch.vars.id }}").val(batch);
                $("#{{ form.exam.vars.id }}").val(exam);
            });
            
             $("p").click(function(){
        $(this).hide();
    });

            $('#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();
            });


        });
        $(".load_batches").select2({
            ajax: {
                url: "{{ path('schedule_exam_getbatches_ajax') }}",
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return {
                        q: params.term, // search term
                        page: params.page
                    };
                },
                processResults: function (data, params) {
                    // parse the results into the format expected by Select2
                    // since we are using custom formatting functions we do not need to
                    // alter the remote JSON data, except to indicate that infinite
                    // scrolling can be used
                    params.page = params.page || 1;

                    return {
                        results: data.items,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        }
                    };
                },
                cache: true
            },
            id: function (data) {
                return data.id
            },
            escapeMarkup: function (markup) {
                return markup;
            }, // let our custom formatter work
            minimumInputLength: 1,
            templateResult: formatBatch, // omitted for brevity, see the source of this page
            templateSelection: formatBatchSelection // omitted for brevity, see the source of this page
        });
        $(".load_exams").select2({
            ajax: {
                url: "{{ path('schedule_exam_getexams_ajax') }}",
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return {
                        q: params.term, // search term
                        page: params.page
                    };
                },
                processResults: function (data, params) {
                    // parse the results into the format expected by Select2
                    // since we are using custom formatting functions we do not need to
                    // alter the remote JSON data, except to indicate that infinite
                    // scrolling can be used
                    params.page = params.page || 1;

                    return {
                        results: data.items,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        }
                    };
                },
                cache: true
            },
            id: function (data) {
                return data.id
            },
            escapeMarkup: function (markup) {
                return markup;
            }, // let our custom formatter work
            minimumInputLength: 1,
            templateResult: formatExam, // omitted for brevity, see the source of this page
            templateSelection: forExamSelection // omitted for brevity, see the source of this page
        });


        function formatBatch(repo) {
            if (repo.loading)
                return repo.text;

            var markup = "<div class='select2-result-repository clearfix'>" +{#                    "<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" +#}
                    "<div class='select2-result-repository__meta'>" +
                    "<div class='select2-result-repository__title'>" + repo.batchName + "</div>";
            markup += "<div class='select2-result-repository__statistics'>";
            if (repo.validFrom) {
                markup += "<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> Valid From :" + repo.validFrom + " </div>";
            }
            if (repo.validTo) {
                markup += "<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> Valid To :" + repo.validTo + " </div>";
            }
            markup += "</div>" +
                    "</div></div>";

            return markup;
        }

        function formatBatchSelection(repo) {
            return repo.batchName || repo.text;
        }


        function formatExam(repo) {
            if (repo.loading)
                return repo.text;

            var markup = "<div class='select2-result-repository clearfix'>" +{#                    "<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" +#}
                    "<div class='select2-result-repository__meta'>" +
                    "<div class='select2-result-repository__title'>" + repo.examName + "</div>";

            markup += "</div></div>";

            return markup;
        }

        function forExamSelection(repo) {
            return repo.examName || repo.text;
        }

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

            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_schedule_ajax',{'batch':'__batch_','exam':'__exam_'}) }}";
            path = path.replace('__batch_',batch);
            path = path.replace('__exam_',exam);
        $.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);
                }
                    $("#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 $un_assigned = $("#candidates_unassigned").find(".batch_candidates");
                $("#stat_total").html($un_assigned.length);
#}
                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);
                });
            }
            
            function rearrange(sch_date, sch_time,guid){
                var path = "{{ path('timetabel_schedule_excel',{'guid' : '__guid_' }) }}";
                var edit_path = "{{ path('schedule_exam_modification',{'schedule' : '__schedule_' }) }}";
                path = path.replace("__guid_",guid);
                edit_path = edit_path.replace("__schedule_",guid);
                var timetable_link = "<a target='_blank' href='" + path + "'><i class='fa fa-download'></i></a>";
                var edit_link = "<a target='_blank' href='" + edit_path + "'><i class='fa fa-edit'></i></a>";
                var html_head = "<div class='already_scheduled' style='color:black;'> Scheduled Date and Time : "+ sch_date +" "+ sch_time +"  " + timetable_link + ' ' +edit_link + " </div>";
                $("#already_scheduled_container").append(html_head); 
                var exam_sets = $(".exam_sets");
                $.each(exam_sets,function(key, value){
                    var exam_sets_name =    $(value).data("setname"); 
                   
                    var html = "<div style='color:black;' class='already_scheduled_candidates'>Question Set: "+  exam_sets_name +" <br> Scheduled: "+ sch_date +" "+ sch_time +" </div>";
                    $(value).find('.batch_candidates').append(html);
                    $(value).find('.batch_candidates').find(".batch_candidates_selector").prop("checked", false);
                    $(value).find('.batch_candidates').appendTo("#candidates_unassigned");
                });
            }
            
            function __loadPage(path,batch,exam) {
            var search_text = $("#search_text").val();
            
            $.ajax({
                type: "POST",
                url: path,
                data: {search_text: search_text,exam:exam, batch:batch},
                beforeSend: function () {
                    $("#ajax_loader_div").show();
                },
                success: function (html) {
                    $(".exam_sets").find(".batch_candidates").remove();
                    statistics();
                    $(".data_container").html(html);
                },
                complete: function () {
                    $("#ajax_loader_div").hide();
                }

            });
        }

    </script>
{% endblock %}