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

{% block body -%}
    <style>
        .batch_candidates{
            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="row">
                        <div class="col-sm-4">
                            <input type="text" name="search_text" placeholder="Search" id="search_text"  class="form-control"/>
                        </div>
                        <div class="col-lg-4">
                            <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> 
                        </div>
                        <div class="col-lg-4 text-right">
                            <a href="{{ path('batch_candidate',{'guid' : batch.guid}) }}"> <strong> View Candidates in {{ batch.batchname }} </strong> </a>
                            <a href="{{ path('batch') }}"> <button class="btn btn-primary btn-sm"> Go Batch List </button> </a>
                        </div>
                    </div>


                    <h4>Candidates</h4>

                    <div class="data_container">
                        {{ include("AppBundle:BatchCandidate:TableContent/add.html.twig") }}
                    </div>


                </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">
            <button class="btn btn-primary btn-block confirmation" id="add_candidate_btn" data-toggle="confirmation" > Add  Candidates to {{ batch.batchname }} </button>
        </div>
        <!-- /.col-lg-12 -->
    </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 () {

                }
            });
            $("body").on("click", ".batch_candidates", function (e) {
                if (e.target !== this)
                    return;
                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);
                }
            });


            $(".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);
            });

            $("#search_text").on("keyup", function () {
                var pathname = window.location.pathname; // Returns path only
                __loadPage(pathname);
            });
        });


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

            });
        }

        function operation() {
            $("#notification").html("");
            var $users = $("body .data_container").find(".batch_candidates_selector");
            var $user_array_add = [];
            var $user_array_remove = [];
            $.each($users, function (key, val) {
                if ($(val).is(':checked')) {
                    $user_array_add.push($(val).val());
                } else {
                    $user_array_remove.push($(val).val());
                }
            });
            var user_add_json = JSON.stringify($user_array_add);
            var user_remove_json = JSON.stringify($user_array_remove);
            $.ajax({
                type: "POST",
                url: "{{ path('batch_candidate_add_operation',{'guid':batch.guid}) }}",
                data: {users_add: user_add_json, users_remove: user_remove_json},
                dataType: "JSON",
                beforeSend: function () {
                    $("#ajax_loader_div").show();
                },
                success: function (data) {
                    if (data.status == "success") {
                        $("body .data_container").find(".batch_candidates_selector").parent().css('background-color', '#880017');
                        $("body .data_container").find(".batch_candidates_selector:checked").parent().css('background-color', '#03706E');
                    }

                    $("#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 %}