{% extends 'VGMWOBundle::layout.html.twig' %}
{% block jumbotron_content %}
    <div class="jumbotron" style="padding-top: 10px; padding-bottom: 5px;"  id="jumbotron">
        <div class="container-fluid">
            <div class="col-md-12 text-center" style="padding-left: 0px;">
                <H3 style="margin: 0px;"><strong>Show and update departments</strong></H3>
            </div>
        </div>
    </div>
{% endblock %}
{% block content %}
    <div class="container" style="min-height: 500px;">
        <div class="col-md-12 text-right">
            <div class="col-ms-2 pull-right">
                <a href="{{ path('vgm_departments') }}">
                    <span class="glyphicon glyphicon-list"></span>
                    Main list
                </a>
            </div>
        </div>
        <div class="form-group container-fluid">
            <div class="row">
                <div>
                    <label style="margin-bottom: 0px;">Department name: </label>
                    <input type="text" class="form-control for-desktop"
                           id="name"
                           name="name"
                           placeholder="Department Name"
                           data-bind="value: name,
                                      event:{blur: check_dep_exist}"
                           tabindex="1"/>
                </div>
                <div>
                    <label style="margin-bottom: 0px; margin-top: 10px;">Supervisors: </label>
                    <div data-bind="foreach: supervisors">
                        <div>
                            <input type="checkbox"
                                   data-bind="checked: selected,
                                              attr: {id: 'supervisor-' + id}">
                            <span data-bind="text: fullname"></span>
                        </div>
                    </div>
                    {#<label style="margin-bottom: 0px; margin-top: 10px;">Supervisor: </label>
                    <select class="form-control for-desktop"
                            tabindex="2"
                            data-bind="options: supervisors,
                                       optionsCaption: 'Select supervisor',
                                       optionsText: 'fullname',
                                       value: chosensup">
                    </select>
                    <input id="supervisor" name="supervisor" hidden="hidden"/>#}
                </div>
                <div>
                    <label style="margin-bottom: 0px; margin-top: 10px;">Decription: </label>
                    <textarea class="form-control" rows="3"
                              id="description"
                              name="description"
                              placeholder="Department Description"
                              data-bind="value: description"
                              tabindex="3"></textarea>
                </div>
            </div>
        </div>
        <div class="col-lg-12 container-fluid text-right">
            <a class="btn btn-primary btn-sm" href="#" data-bind="click: update">
                Update
            </a>
            <a class="btn btn-warning btn-sm" href="{{ path('vgm_departments') }}">
                Cancel
            </a>
        </div>
    </div>
{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript" src="{{ asset('bundles/vgmwo/js/customized/validations/OnChangeValidations.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/vgmwo/js/customized/Departments.js') }}"></script>
    <script type="text/javascript">
        function go_departments_list(){
            var url = "{{ path('vgm_departments') }}";
            window.location.href = url;
        }
        function depExist(){
            var dep_name = viewModel.name();
            var exist = false;
            if(dep_name != ""){
                $.ajax({
                    type: 'post',
                    async: false,
                    dataType: 'json',
                    url: '{{ path("check_updating_exist") }}',
                    data: {name: dep_name},
                    success: function(response) {
                        exist = response.exist;
                    },
                    error:function() {
                        alert("Checking dep's name error");
                    }

                });
            }
            return exist;
        }

        function depUpdate(){
            $.ajax({
                type: 'post',
                async: true,
                dataType: 'json',
                url: '{{ path("update_department") }}',
                data: {id: viewModel.id(),
                       name: viewModel.name(),
                       sup_id: viewModel.chosensup() ? viewModel.chosensup().id : null,
                       description: viewModel.description()},
                success: function(response) {
                    go_departments_list();
                },
                error:function() {
                    alert("Updating department error");
                }
            });
        }

        viewModel.LoadData = ko.dependentObservable(function() {
            viewModel.id("{{ dep.id }}");
            viewModel.description("{{ dep.description }}");
            viewModel.name("{{ dep.name }}");

            var dsups = Array();
            {% for sup in dep.supervisors %}
                dsups.push(sup.id);
            {% endfor %}

            //Filling the lists
            {% for sup in sups %}
                var dsup = $.grep(dsups, function(su){ return su.id == "{{ sup.id }}"; }).length == 1 ?
                        $.grep(dsups, function(su){ return su.id == "{{ sup.id }}"; })[0] : null;

                if(dsup != null)
                    viewModel.supervisors.push(new supervisor("{{ sup.id }}",
                        "{{ sup.picture.getFinalWebPath }}", "{{ sup.workercode }}",
                        "{{ sup.name }} {{ sup.lastname }}", true));
                else
                    viewModel.supervisors.push(new supervisor("{{ sup.id }}",
                            "{{ sup.picture.getFinalWebPath }}", "{{ sup.workercode }}",
                            "{{ sup.name }} {{ sup.lastname }}", false));
            {% endfor %}
        }, viewModel);

        // Activates knockout.js
        ko.applyBindings(viewModel, document.getElementById("content-body"));
    </script>
{% endblock %}