{% 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 %}
    <H3 style="margin: 0px;"
        data-bind="visible: chosenworker() == null">
        <strong>Overtime</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>

{% endblock %}
{% block content %}
    <div id="workers_list"
         class="container" style="min-height: 500px;"
         data-bind="visible: chosenworker() == null">
        <div class="col-lg-12" style="padding: 0; margin-top: -20px;">
            <div class="col-lg-3"
                 style="display: inline; padding-bottom: 10px;">
                <div class="panel panel-default">
                    <!-- Default panel contents -->
                    <div class="panel-heading">
                        <strong>Search by date panel</strong>
                        <span class="glyphicon glyphicon-search pull-right"></span>
                    </div>
                    <div class="panel-body">
                        <div class="col-lg-4">
                            <label><input type="radio" value="By Date"
                                          data-bind="checked: chosensearchoption"/> Day</label>
                        </div>
                        <div class="col-lg-4">
                            <label><input type="radio" value="By Week"
                                          data-bind="checked: chosensearchoption" /> Week</label>
                        </div>
                        <div class="col-lg-4">
                            <label><input type="radio" value="By Period"
                                          data-bind="checked: chosensearchoption" /> Period</label>
                        </div>
                        <div class="col-lg-12">
                            <!-- ko with: date_for_search -->
                            <input id="filter_shift_date_sdate"
                                   data-date = ""
                                   data-date-format="mm/dd/yyyy"
                                   data-link-field="filter_shift_date_sdate"
                                   data-link-format="mm/dd/yyyy"
                                   class="form-control for-desktop datepicker"
                                   data-bind="value: date"
                                   placeholder="Date"/>
                            <!-- /ko -->
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3"
                 style="display: inline; padding-bottom: 10px;">
                <div class="panel panel-default">
                    <!-- Default panel contents -->
                    <div class="panel-heading"><strong>Predefined search</strong></div>
                    <div class="panel-body">
                        <div class="col-lg-12">
                            <label>Options</label>
                        </div>
                        <div class="col-lg-12">
                            <!-- ko with: date_for_search -->
                            <input id="filter_shift_date_sdate"
                                   data-date = ""
                                   data-date-format="mm/dd/yyyy"
                                   data-link-field="filter_shift_date_sdate"
                                   data-link-format="mm/dd/yyyy"
                                   class="form-control for-desktop datepicker"
                                   data-bind="value: date"
                                   placeholder="Date"/>
                            <!-- /ko -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="table-responsive col-lg-12"
             style="padding-left: 0px; padding-right: 0px;">
            <table class="table table-striped table-hover">
                <thead>
                    <tr>
                        <!-- Code column -->
                        <th class="col-md-1">
                            <div data-bind="visible: filter_code().editable() == 0">
                                Code
                                <div style="display: inline"
                                     data-bind="with: filter_code">
                                    <a id="filtermenu_code"
                                       style="padding: 0px; cursor: pointer"
                                       title="Apply sort"
                                       data-bind="click: activate_code">
                                        <span class="glyphicon glyphicon-filter"></span>
                                    </a>
                                </div>
                                <div class="dropdown"
                                     style="display: inline"
                                     data-bind="with: sorter_code">
                                    <a id="sortermenu_code"
                                       style="padding: 0px; cursor: pointer"
                                       title="Sort"
                                       data-toggle="dropdown"
                                       aria-expanded="true">
                                                <span data-bind="attr:{class: sort() == '' ? 'glyphicon glyphicon-sort' :
                                                                              sort() == 'ASC' ?
                                                                              'glyphicon glyphicon-sort-by-attributes' :
                                                                              'glyphicon glyphicon-sort-by-attributes-alt'}"></span>
                                    </a>
                                    <ul class="dropdown-menu" role="menu" aria-labelledby="sortermenu_code"
                                        style="min-width: 10px;">
                                        <li role="presentation">
                                            <a role="menuitem"
                                               tabindex="-1"
                                               style="padding: 0 5px; cursor: pointer"
                                               data-bind="click: setASC">
                                                <span class="glyphicon glyphicon-sort-by-attributes"></span> ASC
                                            </a>
                                        </li>
                                        <li role="presentation">
                                            <a role="menuitem"
                                               tabindex="-1"
                                               style="padding: 0 5px; cursor: pointer"
                                               data-bind="click: setDESC">
                                                <span class="glyphicon glyphicon-sort-by-attributes-alt"></span> DESC
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div data-bind="visible: filter_code().editable() == 1">
                                <input id="filter_code_input"
                                       data-bind="value: filter_code().code"
                                       class="form-control for-desktop"/>
                            </div>
                        </th>
                        <!-- Department column -->
                        <th class="col-md-4">
                            <div data-bind="visible: filter_dep().editable() == 0">
                                Department
                                <div style="display: inline"
                                     data-bind="with: filter_dep">
                                    <a id="filtermenu_department"
                                       style="padding: 0px; cursor: pointer"
                                       title="Apply sort"
                                       data-bind="click: activate_department">
                                        <span class="glyphicon glyphicon-filter"></span>
                                    </a>
                                </div>
                                <div class="dropdown"
                                     style="display: inline"
                                     data-bind="with: sorter_dep">
                                    <a id="sortermenu_department"
                                       style="padding: 0px; cursor: pointer"
                                       title="Sort"
                                       data-toggle="dropdown"
                                       aria-expanded="true">
                                                <span data-bind="attr:{class: sort() == '' ? 'glyphicon glyphicon-sort' :
                                                                              sort() == 'ASC' ?
                                                                              'glyphicon glyphicon-sort-by-attributes' :
                                                                              'glyphicon glyphicon-sort-by-attributes-alt'}"></span>
                                    </a>
                                    <ul class="dropdown-menu" role="menu" aria-labelledby="sortermenu_department"
                                        style="min-width: 10px;">
                                        <li role="presentation">
                                            <a role="menuitem"
                                               tabindex="-1"
                                               style="padding: 0 5px; cursor: pointer"
                                               data-bind="click: setASC">
                                                <span class="glyphicon glyphicon-sort-by-attributes"></span> ASC
                                            </a>
                                        </li>
                                        <li role="presentation">
                                            <a role="menuitem"
                                               tabindex="-1"
                                               style="padding: 0 5px; cursor: pointer"
                                               data-bind="click: setDESC">
                                                <span class="glyphicon glyphicon-sort-by-attributes-alt"></span> DESC
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div data-bind="visible: filter_dep().editable() == 1">
                                <select class="form-control for-desktop"
                                        style="font-weight: normal"
                                        tabindex="1"
                                        id="filter_department_select"
                                        data-bind="options: departments,
                                                   optionsCaption: 'Department',
                                                   optionsText: 'name',
                                                   value: filter_dep().department">
                                </select>
                            </div>
                        </th>
                        <!-- Name column -->
                        <th class="col-md-4">
                            <div data-bind="visible: filter_name().editable() == 0">
                                Name
                                <div style="display: inline"
                                     data-bind="with: filter_name">
                                    <a id="filtermenu_name"
                                       style="padding: 0px; cursor: pointer"
                                       title="Apply sort"
                                       data-bind="click: activate_name">
                                        <span class="glyphicon glyphicon-filter"></span>
                                    </a>
                                </div>
                                <div class="dropdown"
                                     style="display: inline"
                                     data-bind="with: sorter_name">
                                    <a id="sortermenu_name"
                                       style="padding: 0px; cursor: pointer"
                                       title="Sort"
                                       data-toggle="dropdown"
                                       aria-expanded="true">
                                                <span data-bind="attr:{class: sort() == '' ? 'glyphicon glyphicon-sort' :
                                                                              sort() == 'ASC' ?
                                                                              'glyphicon glyphicon-sort-by-attributes' :
                                                                              'glyphicon glyphicon-sort-by-attributes-alt'}"></span>
                                    </a>
                                    <ul class="dropdown-menu" role="menu" aria-labelledby="sortermenu_name"
                                        style="min-width: 10px;">
                                        <li role="presentation">
                                            <a role="menuitem"
                                               tabindex="-1"
                                               style="padding: 0 5px; cursor: pointer"
                                               data-bind="click: setASC">
                                                <span class="glyphicon glyphicon-sort-by-attributes"></span> ASC
                                            </a>
                                        </li>
                                        <li role="presentation">
                                            <a role="menuitem"
                                               tabindex="-1"
                                               style="padding: 0 5px; cursor: pointer"
                                               data-bind="click: setDESC">
                                                <span class="glyphicon glyphicon-sort-by-attributes-alt"></span> DESC
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div data-bind="visible: filter_name().editable() == 1">
                                <input id="filter_name_input"
                                       data-bind="value: filter_name().name"
                                       class="form-control for-desktop"/>
                            </div>
                        </th>
                        <!-- Overtime by day -->
                        <th class="col-md-1">O. Day</th>
                        <!-- Overtime by week -->
                        <th class="col-md-1">O. Week</th>
                        <!-- Picture column -->
                        <th class="col-md-1">Picture</th>
                    </tr>
                </thead>
                <tbody data-bind="foreach: workers">
                    <tr data-bind="click: choseme"
                        style="cursor: pointer">
                        <td hidden="hidden" data-bind="text: id"></td>
                        <td>
                            <p data-bind="text: code"></p>
                        </td>
                        <td>
                            <p data-bind="text: department"></p>
                        </td>
                        <td>
                            <p data-bind="text: name"></p>
                        </td>
                        <td>
                            <p data-bind="text: oday"></p>
                        </td>
                        <td>
                            <p data-bind="text: oweek"></p>
                        </td>
                        <td class="text-center">
                            <img data-bind="attr:{src: picture}, click: enlarge_picture" width="32px" height="32px"
                                 style="cursor: zoom-in" class="picture">
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
{% 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/knockout-3.2.0.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/customized/reports/OverTime.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/waitMe.js') }}"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            viewModel.appyFilters();
            loadPageFeatures();
        });
        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") }}';
        }
        viewModel.LoadData = ko.dependentObservable(function() {
            //viewModel.sorter_code().sort('ASC');
            //viewModel.chosensearchoption(viewModel.search_options()[0]);
            {% 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 %}