{% extends 'VGMWOBundle::layout.html.twig' %}

{% block stylesheets %}
    {{ parent() }}
    <link href="{{ asset('bundles/vgmwo/css/bootstrap-datetimepicker.css') }}" rel="stylesheet" media="screen">
    <link href="{{ asset('bundles/vgmwo/css/waitMe.css') }}" rel="stylesheet" media="screen">
{% endblock %}
{% 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;"
                    data-bind="visible: chosenworker() == null">
                    <strong>Employees' Jobs</strong>
                </H3>
                <div class="container-fluid row">
                    <div class="col-lg-12"
                         data-bind="visible: chosenworker() != null,
                        with: chosenworker">
                        <div class="col-md-1 text-center" style="padding: 0px">
                            <img data-bind="attr:{src: picture()}" width="60px" height="60px">
                        </div>
                        <div class="col-md-5 text-left" style="padding-left: 0px">
                            <div><strong>Code: </strong><strong data-bind="text: code()" class="text-muted"></strong></div>
                            <div><strong>Name: </strong><strong data-bind="text: name()" class="text-muted"></strong></div>
                            <div><strong>Department: </strong><strong data-bind="text: department()" class="text-muted"></strong></div>
                        </div>
                        <div class="col-md-4"
                             style="padding-left: 0px; padding-right: 0px;">
                            <div class="text-left">
                                <div><strong>Total hours: </strong><strong data-bind="text: total_hours ? total_hours : 0" class="text-muted"></strong></div>
                                <div><strong>Total cost: </strong><strong data-bind="text: total_cost ? total_cost : 0" class="text-muted"></strong></div>
                            </div>
                        </div>
                        <div class="text-right col-md-2">
                            <div>
                                <input id="code_search"
                                       data-bind="value: $root.filter_code().code"
                                       placeholder="Code"
                                       class="form-control for-desktop"/>
                            </div>
                            <div>
                                <input id="name_search"
                                       data-bind="value: $root.filter_name().name"
                                       placeholder="Name"
                                       class="form-control for-desktop"/>
                            </div>
                            <div>
                                <select class="form-control for-desktop"
                                        tabindex="1"
                                        id="department_search"
                                        data-bind="options: $root.departments(),
                                       optionsCaption: 'Department',
                                       optionsText: 'name',
                                       value: $root.filter_dep().department">
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block content %}
    {% block worker_list %}
        {% include "VGMWOBundle:Reports/Parts:worker_list.html.twig" %}
    {% endblock worker_list %}
    {% block shifts_list %}
        {% include "VGMWOBundle:Reports/Parts:shifts_list.html.twig" %}
    {% endblock shifts_list %}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript" src="{{ asset('bundles/vgmwo/js/bootstrap-datetimepicker.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/vgmwo/js/jquery/jquery.inputmask.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/vgmwo/js/customized/reports/JobsByWorker.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/vgmwo/js/customized/validations/OnChangeValidations.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/vgmwo/js/customized/utils/Utils.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/vgmwo/js/waitMe.js') }}"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            viewModel.appyFilters();
            $("input").keyup(function(event){
                refreshValue(event.keyCode, event.which, this)
            });
        });
        function getURLFilteredWorkers(){
            return '{{ path("reports_get_filtered_workers") }}';
        }
        function getURLWorkerShifts(){
            return '{{ path("reports_get_filtered_worker_loops") }}';
        }
        function getURLSaveSingleLoop(){
            return '{{ path("loops_save_me") }}';
        }
        function getURLDeleteSingleLoop(){
            return '{{ path("loops_delete_me") }}';
        }
        function getURLValidateLoopDateTime(){
            return '{{ path("validate_my_date_time") }}';
        }
        function getURLExportWorkersXLS(){
            return '{{ path("export_filtered_workers_xls") }}';
        }
        function getURLExportWorkersLaborsXLS(){
            return '{{ path("export_filtered_workers_labors_xls") }}';
        }
        viewModel.LoadData = ko.dependentObservable(function() {
            viewModel.sorter_code().sort('ASC');

            {% for dep in departments %}
                viewModel.departments.push(new department("{{ dep.id }}", "{{ dep.name }}"));
            {% endfor %}
        }, viewModel);

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