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

{% block stylesheets %}
    <link href="{{ asset('bundles/vgmwo/css/bootstrap.css') }}" type="text/css" rel="stylesheet">
    <!-- Optional Bootstrap Theme -->
    <link href="data:text/css;charset=utf-8," data-href="{{ asset('bundles/vgmwo/css/bootstrap-theme.min.css') }}" rel="stylesheet" id="bs-theme-stylesheet">
    <!-- Documentation extras -->
    <link href="{{ asset('bundles/vgmwo/css/vgm_styles.css') }}" rel="stylesheet">
    <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">
    <link href="{{ asset('bundles/vgmwo/css/clockController.css') }}" rel="stylesheet" media="screen">
    <link href="{{ asset('bundles/vgmwo/css/keyboard.css') }}" rel="stylesheet" media="screen">
{% endblock %}

{% block javascripts %}
    <script type="text/javascript" src="{{ asset('bundles/vgmwo/js/jquery/jquery-1.11.1.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/vgmwo/js/bootstrap.min.js') }}"></script>
    <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/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/bootstrap-datetimepicker.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/vgmwo/js/jquery/jquery.keyboard.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/vgmwo/js/customized/clockController/clockControllerTemp.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() {
            //$('input').val("");

            $('#worker_code_input').inputmask("9999",
                    {placeholder:"-",
                        oncomplete: function(){
                            if(this.selectionStart == this.value.length){
                                viewModel.worker_code(this.value);
                                viewModel.get_worker(this.value);
                            }
                        }
                    });
            $('#workorder_number_input').inputmask("9999",
                    {placeholder:"-",
                        oncomplete: function(){
                            if(this.selectionStart == this.value.replaceAll("-","").length){
                                viewModel.workorder_number(this.value);
                                viewModel.get_workorder(this.value);
                            }
                        }
                    });
            /*$('#worker_code_input').blur(function(){
             if(viewModel.worker() != null && $('#worker_code_input').val().replaceAll("-","").length < 4)
             viewModel.worker(null);

             });*/
            $('#worker_code_input').mlKeyboard({'layout': 'just_numbers',
                'active_shift': false,
                'active_caps': false,
                'is_hidden': false,
                'open_speed': 300,
                'close_speed': 100,
                'enabled': false,
                'holder': 'worker-virtual-Keyboard',
                'neutral_char': '-'});
            $('#workorder_number_input').mlKeyboard({'layout': 'just_numbers',
                'active_shift': false,
                'active_caps': false,
                'is_hidden': false,
                'open_speed': 300,
                'close_speed': 100,
                'enabled': false,
                'holder': 'workorder-virtual-Keyboard',
                'neutral_char': '-'});

            $('div#workorder-virtual-Keyboard div#mlkeyboard ul li').css('font-size',$('div#workorder-virtual-Keyboard div#mlkeyboard ul li').height() - 10);
            $('div#workorder-virtual-Keyboard div#mlkeyboard ul li').css('line-height',$('div#workorder-virtual-Keyboard div#mlkeyboard ul li').height() + 2 + 'px');
            $('div#worker-virtual-Keyboard div#mlkeyboard ul li').css('font-size',$('div#worker-virtual-Keyboard div#mlkeyboard ul li').height() - 10);
            $('div#worker-virtual-Keyboard div#mlkeyboard ul li').css('line-height',$('div#worker-virtual-Keyboard div#mlkeyboard ul li').height() + 2 + 'px');

            window.onresize = function(){
                $('div#workorder-virtual-Keyboard div#mlkeyboard ul li').css('font-size',$('div#workorder-virtual-Keyboard div#mlkeyboard ul li').height() - 10);
                $('div#workorder-virtual-Keyboard div#mlkeyboard ul li').css('line-height',$('div#workorder-virtual-Keyboard div#mlkeyboard ul li').height() + 2 + 'px');
                $('div#worker-virtual-Keyboard div#mlkeyboard ul li').css('font-size',$('div#worker-virtual-Keyboard div#mlkeyboard ul li').height() - 10);
                $('div#worker-virtual-Keyboard div#mlkeyboard ul li').css('line-height',$('div#worker-virtual-Keyboard div#mlkeyboard ul li').height() + 2 + 'px');
            };

            viewModel.prepare_worker_search();
            viewModel.prepare_workorder_search();
        });

        $("#content-body").css("height", "95%");

        function getURLWorkerByCode(){
            return '{{ path("clockmanager_get_worker_by_code") }}';
        }
        function getURLWorkOrderByNo(){
            return '{{ path("clockmanager_get_workorder_by_number") }}';
        }
        function get_areas_by_level_url(){
            return '{{ path("work_areas_get_areas_by_level") }}';
        }
        function saveClockControllerData(){
            return '{{ path("save_clock_controller_data_manager") }}';
        }

        viewModel.LoadData = ko.dependentObservable(function() {
            viewModel.fill_data_support();
        }, viewModel);

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

{% block body %}
    <div id="content-body">
        <div class="col-lg-12 full-height-content">
            <table class="table" style="height: 100%; margin-bottom: 0px;">
                <tbody>
                <tr>
                    <td class="col-lg-12 text-center"
                        style="vertical-align: middle; border: none; height: 95%; padding-bottom: 10px;">
                        <!--Employees screen-->
                        {% include "@VGMWO/TimeRecord/TempTimeRecord/TempScreens/screen0temp.html.twig" %}
                        {% include "@VGMWO/TimeRecord/TempTimeRecord/TempScreens/screen1temp.html.twig" %}
                        {% include "@VGMWO/TimeRecord/TempTimeRecord/TempScreens/screen2temp.html.twig" %}
                        {% include "@VGMWO/TimeRecord/TempTimeRecord/TempScreens/screen3temp.html.twig" %}
                        {% include "@VGMWO/TimeRecord/TempTimeRecord/TempScreens/screen4temp.html.twig" %}
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <!-- Message if there's no Work Order entered number -->
        <div class="modal fade bs-example-modal-lg"
             id="no-workorder-message"
             tabindex="-1"
             role="dialog"
             aria-labelledby="myModalLabel"
             aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">
                            <span aria-hidden="true">&times;</span>
                            <span class="sr-only">Cancel</span>
                        </button>
                        <h4 class="modal-title">Question???</h4>
                    </div>
                    <div class="modal-body">
                        <div class="container-fluid"
                             style="padding: 0px;">
                            <div style="font-size: 18px;">
                                <p>There's no Work Order with that number...</p>
                                <p>Do you want to create a new one?</p>
                                <p>Click Create to generate a new Work Order or Cancel to close this wizard.</p>
                                <p class="text-muted">No existe la OT con ese #...</p>
                                <p class="text-muted">Desea crear una OT nueva?</p>
                                <p class="text-muted">Oprima Create si desea crear una OT o en Cancel si no.</p>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button id="stock-modal-cancel-button"
                                type="button"
                                class="btn btn-danger"
                                data-dismiss="modal"
                                data-bind="click: cancel_workorder">
                            Cancel
                        </button>
                        <button id="stock-modal-cancel-button" type="button"
                                class="btn btn-primary" data-dismiss="modal"
                                data-bind="click: create_workorder">
                            Create
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Message -->
        <div class="modal fade bs-example-modal-lg"
             id="end-message"
             tabindex="-1"
             role="dialog"
             aria-labelledby="myModalLabel"
             aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">
                            <span aria-hidden="true">&times;</span>
                            <span class="sr-only">Cancel</span>
                        </button>
                        <p class="modal-title"
                           style="font-size: 5vmin; font-weight: bold;">Success!!!</p>
                    </div>
                    <div class="modal-body">
                        <div class="container-fluid"
                             style="padding: 0px;"
                             data-bind="with: worker">
                            <div style="font-size: 4vmin;"
                                 data-bind="visible: loops2start().length > 0">
                                <p>You have closed your current jobs and scheduled new ones.</p>
                                <p>Thanks!!!</p>
                                <p class="text-muted">Usted ha cerrado sus labores actuales y comenzado otras nuevas.</p>
                                <p class="text-muted">Gracias!!!</p>
                            </div>
                            <div style="font-size: 4vmin;"
                                 data-bind="visible: loops2start().length == 0">
                                <p>You have closed your current jobs.</p>
                                <p>Thanks!!!</p>
                                <p class="text-muted">Usted ha cerrado sus labores actuales.</p>
                                <p class="text-muted">Gracias!!!</p>
                            </div>
                        </div>
                    </div>
                    {#<div class="modal-footer">
                        <button id="stock-modal-cancel-button"
                                type="button"
                                class="btn btn-danger"
                                data-dismiss="modal">
                            Cancel
                        </button>
                        <button id="stock-modal-cancel-button" type="button"
                                class="btn btn-primary" data-dismiss="modal"
                                data-bind="click: create_workorder">
                            Create
                        </button>
                    </div>#}
                </div>
            </div>
        </div>
    </div>
{% endblock %}