{% extends '::base.html.twig' %}

{% block body -%}
    <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: 9px;
        }
    </style>
    <div class="row">
        <div class="col-lg-12">
            <h4>{{ batch.batchname }}</h4>
        </div>
        <!-- /.col-lg-12 -->
    </div>

    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-body candidate_container"> 
                    <div class="text-right">
                        <a href="{{ path('batch_candidate_add',{'guid' : batch.guid}) }}"> <strong> Add Candidates to {{ batch.batchname }} </strong> </a>
                        <a href="{{ path('batch') }}"> <button class="btn btn-primary btn-sm"> Go Batch List </button> </a>
                    </div>
                    <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>
                    <h4>Candidates</h4>
                    {% if batchCandidate is empty %}
                        <div class="alert alert-danger">
                            No candidates available.
                        </div>
                    {% else %}
                        {% for candidate in batchCandidate  %}
                            <div class="batch_candidates">
                                <input type="checkbox" class="batch_candidates_selector"  value="{{ candidate['id'] }}" />
                                {{ candidate['username'] }} - {{ candidate['name'] }} <br />
                                {{ candidate['surname'] }} <br />
                                {#DOB: {{ candidate['dob']|date('d/m/Y') }} <br />
                                Institution: {{ candidate['institution'] }} <br />#}
                            </div>
                        {% endfor %}
                        <div  class="clearfix"></div>

                    {% endif%}
                </div>
            </div>
        </div>
        <!-- /.col-lg-12 -->
    </div>
    <div class="row">
        <div class="col-lg-12" id="notification">

        </div>
        <!-- /.col-lg-12 -->
    </div>
    <div class="row">
        <div class="col-lg-12">  
            <div style="padding-top:10px;">
                <button class="btn btn-danger btn-block confirmation" id="rm_candidate_btn" data-toggle="confirmation"> Remove Checked </button>
            </div>
        </div>
    </div>
{% 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 type="text/javascript">
        $(document).ready(function () {
            $('.confirmation').confirmation({
                onConfirm: function () {
                    operation();
                },
                onCancel: function () {

                }
            });
            
             $(".select_all_candidates").on("click", function () {
                $(this).closest(".candidate_container").find(".batch_candidates_selector").prop('checked', true);
            });
            $(".unselect_all_candidates").on("click", function () {
                $(this).closest(".candidate_container").find(".batch_candidates_selector").prop('checked', false);
            });
            
            $(".batch_candidates").click(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);
                }
            });
            $(".batch_candidates .batch_candidates_selector").click(function (e) {
                e.stopPropagation();
            });
            
            
        });

        function operation() {
            $("#notification").html("");
            var $users = $("body").find(".batch_candidates_selector:checked");
            var $user_array_remove = [];
            $.each($users, function (key, val) {
                $user_array_remove.push($(val).val());
            });
            if (0 === $user_array_remove.length) {
                $("#notification").html('<div class="alert alert-danger"> Select atleast one candidate to remove!!! </div>');
                $('.confirmation').confirmation('hide');
                return false;
            }
            var user_remove_json = JSON.stringify($user_array_remove);

            $.ajax({
                type: "POST",
                url: "{{ path('batch_candidate_remove_operation',{'guid':batch.guid}) }}",
                data: {users_remove: user_remove_json},
                dataType: "JSON",
                beforeSend: function () {
                    $("#ajax_loader_div").show();
                },
                success: function (data) {
                    $.each($users, function (key, val) {
                        $(val).parent().hide();
                    });
                    $("#notification").html('<div class="alert alert-' + data.status + '">' + data.message + ' </div>');
                },
                complete: function () {
                    $('.confirmation').confirmation('hide');
                    $("#ajax_loader_div").hide();
                }

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