{% 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/jquery-ui.css') }}" rel="stylesheet" media="screen">
    <link href="{{ asset('bundles/vgmwo/css/dataTables.jqueryui.css') }}" rel="stylesheet" media="screen">
    <link href="{{ asset('bundles/vgmwo/css/knockout.file.binding.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;"><strong>Update worker</strong></H3>
            </div>
        </div>
    </div>
{% endblock %}
{% block content %}
    <div class="container" style="min-height: 500px;">
    <div class="col-sm-12 text-right">
        <div class="col-sm-2 pull-right">
            <a href="{{ path('workers') }}">
                <span class="glyphicon glyphicon-list"></span>
                Main list
            </a>
        </div>
    </div>
    <div id="chosen_worker"
         data-bind="with: chosen_worker">
    <form>
    <div class="col-md-2">
        <div class="col-md-12"
             style="display: table;">
            <div style="display: table-cell;
                        text-align: center;
                        vertical-align: middle;
                        padding-top: 10px;">
                <div style="position: absolute;
                            right: 0;
                            top: 0;
                            text-align: center;
                            vertical-align: middle;
                            font-size: 5vmin;
                            color: #d9534f;">
                    <span class="glyphicon glyphicon-remove-circle"
                          style="z-index: 9999; cursor: pointer"
                          data-bind="click: clear_picture,
                                     visible: picture() != null
                                            && picture().dataURL() != null
                                            && $root.message_shown() == false"></span>
                </div>
                <div class="well"
                     style="margin: auto;
                                                        width: 100%;
                                                        height: auto;
                                                        padding: 1vmin;
                                                        display: table;"
                     data-bind="fileDrag: picture">
                    <div class="form-group"
                         style="display: table-cell">
                        <div class="col-md-12"
                             style="margin: auto;">
                            <img class="img-rounded  thumb"
                                 style="width: 20vmin;
                                                                height: 20vmin;"
                                 data-bind="attr: { src: picture().dataURL() != null
                                                                    ? picture().dataURL()
                                                                    : '{{ asset('bundles/vgmwo/images/unknown-user.png') }}'}">
                            <div data-bind="ifnot: picture().dataURL">
                                <label class="drag-label">Drag file here</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="margin: auto;
                                                        width: 100%;
                                                        padding-top: 2vmin;">
                    <input type="file"
                           id="picture-update-input"
                           data-bind="fileInput: picture, customFileInput: {
                                                                  buttonClass: 'btn btn-success btn-xs',
                                                                  fileNameClass: 'disabled form-control for-desktop',
                                                                  clearButton: false,
                                                                }" accept="image/jpeg,image/png">
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-5" style="padding: 0px;">
        <!-- Employee Name input -->
        <div class="col-md-12">
            <label id="name_label"
                   style="margin-bottom: 0px; margin-top: 10px; ">*Name: </label>
            <input type="text" class="form-control for-desktop"
                   id="name_input"
                   placeholder="Name"
                   data-bind="value: name"
                   tabindex="1"/>
        </div>
        <!-- Employee Last Name input -->
        <div class="col-md-12">
            <label id="last_name_label"
                   style="margin-bottom: 0px;  margin-top: 10px;">*Last name: </label>
            <input type="text" class="form-control for-desktop"
                   id="last_name_input"
                   placeholder="Last name"
                   data-bind="value: last_name"
                   tabindex="2"/>
        </div>
        <!-- Employee Birth Date select -->
        <div class="col-md-12">
            <label style="margin-bottom: 0px; margin-top: 10px;">Birth date: </label>
            <input id="birth_date_picker"
                   name="birth_date"
                   data-bind="value: date_birth"
                   tabindex="3"
                   data-date = ""
                   data-date-format="mm/dd/yyyy"
                   data-link-field="birth_date_picker"
                   data-link-format="mm/dd/yyyy"
                   class="form-control for-desktop datepicker"/>
        </div>
        <!-- Employee P.Phone Number input -->
        <div class="col-md-12">
            <label style="margin-bottom: 0px;  margin-top: 10px;">Personal phone number: </label>
            <input type="text" class="form-control for-desktop"
                   id="phone-p"
                   placeholder="Personal phone number"
                   data-bind="value: phone_p"
                   tabindex="4"/>
        </div>
        <!-- Employee P.Email input -->
        <div class="col-md-12">
            <label style="margin-bottom: 0px;  margin-top: 10px;">Personal e-mail: </label>
            <input type="text" class="form-control for-desktop"
                   id="email-p"
                   placeholder="Personal e-mail"
                   data-bind="value: email_p"
                   tabindex="5"/>
        </div>
        <!-- Wroker Satreet input -->
        <div class="col-md-12">
            <label style="margin-bottom: 0px;  margin-top: 10px;">Street: </label>
            <input type="text" class="form-control for-desktop"
                   id="street"
                   placeholder="Street"
                   data-bind="value: addrees_street"
                   tabindex="6"/>
        </div>
        <!-- Employee City input -->
        <div class="col-md-4">
            <label style="margin-bottom: 0px;  margin-top: 10px;">City: </label>
            <input type="text" class="form-control for-desktop"
                   id="city"
                   placeholder="City"
                   data-bind="value: addrees_city"
                   tabindex="7"/>
        </div>
        <!-- Employee State input -->
        <div class="col-md-4">
            <label style="margin-bottom: 0px;  margin-top: 10px;">State: </label>
            <input type="text" class="form-control for-desktop"
                   id="state"
                   placeholder="State"
                   data-bind="value: addrees_state"
                   tabindex="8"/>
        </div>
        <!-- Employee Zip Code input -->
        <div class="col-md-4">
            <label style="margin-bottom: 0px;  margin-top: 10px;">Zip code: </label>
            <input type="text" class="form-control for-desktop"
                   id="zip-code"
                   placeholder="Zip code"
                   data-bind="value: addrees_zip"
                   tabindex="9"/>
        </div>
    </div>
    <div class="col-md-5" style="padding: 0px;">
        <!-- Employee Code input -->
        <div class="col-md-12">
            <label id="code_label"
                   style="margin-bottom: 0px; margin-top: 10px; ">*Employee code: </label>
            <input type="text" class="form-control for-desktop"
                   id="code_input"
                   placeholder="Employee code"
                   data-bind="value: code"
                   tabindex="10"/>
        </div>
        <!-- Employee W.Phone Number input -->
        <div class="col-md-12">
            <label style="margin-bottom: 0px;  margin-top: 10px;">Work phone number: </label>
            <input type="text" class="form-control for-desktop"
                   id="phone-w"
                   placeholder="Work phone number"
                   data-bind="value: phone_w"
                   tabindex="11"/>
        </div>
        <!-- Employee W.Email input -->
        <div class="col-md-12">
            <label style="margin-bottom: 0px;  margin-top: 10px;">Work e-mail: </label>
            <input type="text" class="form-control for-desktop"
                   id="email-w"
                   placeholder="Work e-mail"
                   data-bind="value: email_w"
                   tabindex="12"/>
        </div>
        <!-- Wroker Unit input -->
        <div class="col-md-6">
            <label id="unit_label"
                   style="margin-bottom: 0px;  margin-top: 10px;">*Unit: </label>
            <select class="form-control for-desktop"
                    id="unit_input"
                    tabindex="13"
                    data-bind="options: $root.units,
                               optionsText: 'name',
                               value: unit">
            </select>
        </div>
        <!-- Wroker Department input -->
        <div class="col-md-6">
            <label id="department_label"
                   style="margin-bottom: 0px;  margin-top: 10px;">*Department: </label>
            <select class="form-control for-desktop"
                    id="department_input"
                    tabindex="13"
                    data-bind="options: $root.departments,
                                                       optionsCaption: 'Department',
                                                       optionsText: 'name',
                                                       value: department">
            </select>
        </div>
        <!-- Employee Payment Schedule select -->
        <div class="col-md-12">
            <label id="pay_schedule_label"
                   style="margin-bottom: 0px; margin-top: 10px;">*Payment schedule: </label>
            <select class="form-control for-desktop"
                    id="pay_schedule_input"
                    tabindex="14"
                    data-bind="options: $root.pay_schedules,
                                                       optionsCaption: 'Payment schedule',
                                                       optionsText: 'name',
                                                       value: pay_schedule">
            </select>
        </div>
        <!-- Employee Hire Date input -->
        <div class="col-md-6">
            <label style="margin-bottom: 0px; margin-top: 10px;">Hire date: </label>
            <input id="hire_date_picker"
                   name="hire_date"
                   data-bind="value: date_hire"
                   tabindex="15"
                   data-date = ""
                   data-date-format="mm/dd/yyyy"
                   data-link-field="hire_date_picker"
                   data-link-format="mm/dd/yyyy"
                   class="form-control for-desktop datepicker"/>
        </div>
        <!-- Employee Termination Date input -->
        <div class="col-md-6">
            <label style="margin-bottom: 0px; margin-top: 10px;">Termination date: </label>
            <input id="fire_date_picker"
                   name="fire_date"
                   data-bind="value: date_fire"
                   tabindex="16"
                   data-date = ""
                   data-date-format="mm/dd/yyyy"
                   data-link-field="fire_date_picker"
                   data-link-format="mm/dd/yyyy"
                   class="form-control for-desktop datepicker"/>
        </div>
        <!-- Employee Payment Rate input -->
        <div class="col-md-6">
            <label id="pay_rate_label"
                   style="margin-bottom: 0px;  margin-top: 10px;">*Payment rate: </label>
            <div class="input-group">
                <div class="input-group-addon">$</div>
                <input type="text" class="form-control for-desktop"
                       id="pay_rate_input"
                       placeholder="Payment rate"
                       data-bind="value: pay_rate"
                       tabindex="17"/>
            </div>
        </div>
        <!-- Employee Standard Pay input -->
        <div class="col-md-6">
            <label style="margin-bottom: 0px;  margin-top: 10px;">Standard payment: </label>
            <div class="input-group">
                <div class="input-group-addon">$</div>
                <input type="text" class="form-control for-desktop"
                       id="pay-standard"
                       placeholder="Standard payment"
                       data-bind="value: pay_standard"
                       tabindex="18"/>
            </div>
        </div>
        <!-- Employee Full Time ChechkBox -->
        <div class="col-md-3">
            <label style="margin-bottom: 0px;  margin-top: 10px;">Full time: </label>
            <input type="checkbox"
                   data-bind="checked: is_full_time"
                   tabindex="19">
        </div>
        <!-- Employee Supervisor ChechkBox -->
        <div class="col-md-3">
            <label style="margin-bottom: 0px;  margin-top: 10px;">Is supervisor: </label>
            <input type="checkbox"
                   data-bind="checked: is_supervisor"
                   tabindex="20">
        </div>
        <!-- Employee Pay By Hour ChechkBox -->
        <div class="col-md-3">
            <label style="margin-bottom: 0px;  margin-top: 10px;">Payment by hour: </label>
            <input type="checkbox"
                   data-bind="checked: is_pay_by_hour"
                   tabindex="21">
        </div>
        <!-- Employee Active ChechkBox -->
        <div class="col-md-3">
            <label style="margin-bottom: 0px;  margin-top: 10px;">Is active: </label>
            <input type="checkbox"
                   data-bind="checked: is_active"
                   tabindex="22">
        </div>
    </div>
    <div class="col-lg-12 container-fluid text-right"
         style="margin-top: 3vmin;">
        <button class="btn btn-info"
                data-bind="click: saveme">
            Update
        </button>
        <a href="{{ path('workers') }}"
           class="btn btn-warning">
            Cancel
        </a>
    </div>
    </form>
    </div>
    </div>
    <!-- Messages -->
    <div class="modal fade bs-example-modal-lg"
         id="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;"
                       data-bind="text: message_caption"></p>
                </div>
                <div class="modal-body">
                    <div class="container-fluid"
                         style="padding: 0px;">
                        <div style="font-size: 4vmin;">
                            <p data-bind="text: message_text"></p>
                            <p>Thanks!!!</p>
                        </div>
                        <div style="font-size: 4vmin;">
                            <p data-bind="text: message_stext"></p>
                            <p class="text-muted">Gracias!!!</p>
                        </div>
                    </div>
                </div>
                <div class="modal-footer"
                     data-bind="visible: message_footer">
                    <button id="stock-modal-cancel-button"
                            type="button"
                            class="btn btn-primary"
                            data-dismiss="modal">
                        Ok
                    </button>
                </div>
            </div>
        </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-file-bindings.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/vgmwo/js/jquery/jquery.stickytableheaders.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/vgmwo/js/jquery/jquery-ui.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/vgmwo/js/jquery/jquery.dataTables.min.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" src="{{ asset('bundles/vgmwo/js/customized/Workers.js') }}"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            loadPageFeatures();
            viewModel.get_support();
            viewModel.get_worker_data();
        });
        function go_workers_list(){
            var url = "{{ path('workers') }}";
            window.location.href = url;
        }
        function getURLSupport(){
            var url = "{{ path('get_workers_support') }}";
            return url;
        }
        function getURLUpdateWorker(){
            var url = "{{ path('update_worker') }}";
            return url;
        }
        function getURLWorkerData(){
            var url = "{{ path('get_worker_data') }}";
            return url;
        }
        function getURLTryWorkerCode(){
            var url = "{{ path('try_worker_code') }}";
            return url;
        }

        viewModel.LoadData = ko.dependentObservable(function() {
            viewModel.worker_id_to_update("{{ worker_id }}");
            viewModel.onClear = function(picture){
                if(confirm('Are you sure?')){
                    picture.clear && picture.clear();
                }
            };
        }, viewModel);

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