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

{% block stylesheets %}
    {{ parent() }}
    <link href="{{ asset('bundles/vgmwo/css/bootstrap-datetimepicker.css') }}" rel="stylesheet" media="screen">
    <link href="https://cdn.datatables.net/buttons/1.0.3/css/buttons.dataTables.min.css" rel="stylesheet" media="screen">
{% endblock %}
{% block content %}
    <div class="container">
    <div class="form-group container-fluid">
        <div class="row">
            {% block workorder_data %}
                {% include "VGMWOBundle:WorkOrder/Show_parts:workorder_data.html.twig" %}
            {% endblock workorder_data %}
            {% block workorder_tasks %}
                {% include "VGMWOBundle:WorkOrder/Show_parts:workorder_planning.html.twig" %}
            {% endblock workorder_tasks %}
            {% block workorder_stocks %}
                {% include "VGMWOBundle:WorkOrder/Show_parts:workorder_stocks.html.twig" %}
            {% endblock workorder_stocks %}
        </div>
    </div>
    <div class="row container-fluid text-right" style="margin-bottom: 3vmin;">
        {#<a class="btn btn-primary" href="#"
           data-bind="click: chosenwo().update_myself">
            Update
        </a>#}
        {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_SUPER_SUPERVISOR') or is_granted('ROLE_OTS_CORDINATOR')
        or is_granted('ROLE_SUPERVISOR') %}
        <a class="btn btn-primary" href="#"
           data-bind="click: chosenwo().update_myself_back">
            Update{# & <span class="glyphicon glyphicon-list"></span>#}
        </a>
        {% endif %}
        <a class="btn btn-warning" href="{{ path('workorders') }}">
            Cancel
        </a>
    </div>
        {#{% block stickers %}{% include "VGMWOBundle:WorkOrder/ModalPanels:modal_print_preview_sticker.html.twig" %}{% endblock stickers %}#}
    </div>
    <!-- Modals -->
    <!-- Stock Wizard-->
    <!-- Stock Searching Wizard-->
    {% block stock_searching %}
        {% include "VGMWOBundle:WorkOrder/ModalPanels:modal_search_add_stock.html.twig" %}
    {% endblock stock_searching %}
    <!-- Stock Showing Wizard-->
    {% block stock_showing %}
        {% include "VGMWOBundle:WorkOrder/ModalPanels:modal_show_stock.html.twig" %}
    {% endblock stock_showing %}
    <!-- Stock Editing Wizard-->
    <div class="modal fade bs-example-modal-lg"
         id="editing-stock"
         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 id="stock-data-header" class="modal-title">Edit stock</h4>
                </div>
                <div id="stockModalPreView" class="modal-body">
                    <div class="container-fluid"
                         style="padding: 0px;">
                        <div data-bind="attr:{class: chosenwo().editing_stock() == null ?
                                                    'col-xs-12 text-center' : 'col-xs-7 text-center'}">
                            <img class="img"
                                 data-bind="attr:{src: chosenwo().editing_stock() != null ?
                                        chosenwo().editing_stock().picture() != null ?
                                         chosenwo().editing_stock().picture() :
                                        '{{ asset('bundles/vgmwo/images/unknown-wo.png') }}' :
                                        '{{ asset('bundles/vgmwo/images/unknown-wo.png') }}'}"/>
                        </div>

                        <div class="col-xs-5" data-bind="visible: chosenwo().editing_stock() != null">
                            <div id="stock_data" class="table-responsive" style="padding-left: 0px;"
                                 data-bind="with: chosenwo().editing_stock">

                                <table class="table table-striped table-hover">
                                    <tbody class="stocks_list">
                                    <tr>
                                        <td class="col-md-5" style="text-align: right; padding: 0 2px;">
                                            <strong>Stock No:</strong>
                                        </td>
                                        <td id="data-stock" class="col-md-7"
                                            style="padding: 0 2px;">
                                            <input class="form-control for-desktop" data-bind="value: stock"/>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="col-md-5" style="text-align: right; padding: 0 2px;">
                                            <strong>Serial No:</strong>
                                        </td>
                                        <td id="data-serial" class="col-md-7"
                                            style="padding: 0 2px;">
                                            <input class="form-control for-desktop" data-bind="value: serial"/>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="col-md-5" style="text-align: right; padding: 0 2px;">
                                            <strong>Equipment:</strong>
                                        </td>
                                        <td id="data-serial" class="col-md-7"
                                            style="padding: 0 2px;">
                                            <select class="form-control for-desktop"
                                                    tabindex="1"
                                                    data-bind="options: $root.equipments(),
                                                                               optionsCaption: 'Equipment',
                                                                               optionsText: 'name',
                                                                               value: equipment">
                                            </select>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="col-md-5" style="text-align: right; padding: 0 2px;">
                                            <strong>Hours/Miles:</strong>
                                        </td>
                                        <td id="data-hour-time" class="col-md-7"
                                            style="padding: 0 2px;">
                                            <input class="form-control for-desktop" data-bind="value: hours_miles"/>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="col-md-5" style="text-align: right; padding: 0 2px;">
                                            <strong>Make:</strong>
                                        </td>
                                        <td id="data-make" class="col-md-7"
                                            style="padding: 0 2px;">
                                            <input class="form-control for-desktop" data-bind="value: brand"/>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="col-md-5" style="text-align: right; padding: 0 2px;">
                                            <strong>Model:</strong>
                                        </td>
                                        <td id="data-model" class="col-md-7"
                                            style="padding: 0 2px;">
                                            <input class="form-control for-desktop" data-bind="value: model"/>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="col-md-5" style="text-align: right; padding: 0 2px;">
                                            <strong>Cap:</strong>
                                        </td>
                                        <td id="data-cap" class="col-md-7"
                                            style="padding: 0 2px;">
                                            <input class="form-control for-desktop" data-bind="value: cap"/>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="col-md-5" style="text-align: right; padding: 0 2px;">
                                            <strong>Tran/Gen/Com:</strong>
                                        </td>
                                        <td id="data-tgc" class="col-md-7"
                                            style="padding: 0 2px;">
                                            <input class="form-control for-desktop" data-bind="value: tgc"/>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="col-md-5" style="text-align: right; padding: 0 2px;">
                                            <strong>Engine:</strong>
                                        </td>
                                        <td id="data-engine" class="col-md-7"
                                            style="padding: 0 2px;">
                                            <input class="form-control for-desktop" data-bind="value: engine"/>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="col-md-5" style="text-align: right; padding: 0 2px;">
                                            <strong>Year:</strong>
                                        </td>
                                        <td id="data-year" class="col-md-7"
                                            style="padding: 0 2px;">
                                            <input class="form-control for-desktop" data-bind="value: year"/>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="col-md-5" style="text-align: right; padding: 0 2px;">
                                            <strong>Localization:</strong>
                                        </td>
                                        <td id="data-loc" class="col-md-7"
                                            style="padding: 0 2px;">
                                            <input class="form-control for-desktop" data-bind="value: loc"/>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="col-md-5" style="text-align: right; padding: 0 2px;">
                                            <strong>Actual Condition:</strong>
                                        </td>
                                        <td id="data-acond" class="col-md-7"
                                            style="padding: 0 2px;">
                                            <input class="form-control for-desktop" data-bind="value: acond"/>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="col-md-5" style="text-align: right; padding: 0 2px;">
                                            <strong>Work Order:</strong>
                                        </td>
                                        <td id="data-wo" class="col-md-7"
                                            style="padding: 0 2px;">
                                            <input class="form-control for-desktop" data-bind="value: actual_workorder"/>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="2">
                                            <strong>Condition: </strong>
                                            <textarea class="form-control" data-bind="value: cond"></textarea>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer" data-bind="with: chosenwo().editing_stock">
                    <button id="stock-modal-cancel-button" type="button" class="btn btn-default" data-dismiss="modal">
                        Cancel
                    </button>
                    <button id="stock-modal-cancel-button" type="button"
                            class="btn btn-primary" data-dismiss="modal"
                            data-bind="click: save_me">
                        Save
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!-- Message if there's no stock for this number -->
    <div class="modal fade bs-example-modal-lg"
         id="alternative-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 stock uploaded with that number...</p>
                            <p>Do you want to create a new one. This new stock will be\\n updated as soon as it's
                                uploded to "http://www.aeroservicios.com".</p>
                            <p>Click Create to generate a new stock or Cancel to close this wizard.</p>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="stock-modal-cancel-button" type="button" class="btn btn-default" data-dismiss="modal">
                        Cancel
                    </button>
                    <button id="stock-modal-cancel-button" type="button"
                            class="btn btn-primary" data-dismiss="modal"
                            data-bind="click: chosenwo().create_stock">
                        Create
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!-- Saved Message-->
    <div class="modal fade bs-example-modal-lg"
         id="saved-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">Success!!!</h4>
                </div>
                <div class="modal-body">
                    <div class="container-fluid"
                         style="padding: 0px;">
                        <div style="font-size: 18px;">
                            <p>All data have been saved successfully!</p>
                            <p class="text-muted">Todos los datos fueron guardados correctamente!</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% block message %}{% include "VGMWOBundle:Menssage:message.html.twig" %}{% endblock message %}
    {% block stock_invoices_manager %}{% include "VGMWOBundle:WorkOrder/ModalPanels:modal_invoice_references.html.twig" %}{% endblock stock_invoices_manager %}
{% 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/utils/knockout.plugins.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/vgmwo/js/customized/utils/message.modal.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/vgmwo/js/customized/utils/util.lists.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/WorkOrders/workorder.showing.js') }}"></script>
    <script type="text/javascript" HIDDEN="hidden">
        $(document).ready(function(){
            loadPageFeatures();
            $('#wo-number').on('change keyup', function() {var regex = /^([1-9][0-9]{0,3})$/gm;
                var sanitized = regex.test($(this).val()) ? $(this).val() : $(this).val().substr(0,$(this).val().length-1);
                $(this).val(sanitized);});
        });
        function go_home_list(){window.location.href="{{path('workorders')}}";}
        function get_workorder_support_id_url(){return "{{ path('get_wo_support_by_id') }}";}
        function get_search_4_stock_url(){return "{{ path('find_stocks4workorder') }}";}
        function get_workorder_check_existence_url(){return "{{ path('check_creating_exist') }}";}
        function get_workorder_update_url(){return "{{ path('update_workorder') }}";}
        function get_save_stock_url(){return "{{ path('save_stock') }}";}
        function get_workorder_obs_url(){return "{{ path('workorder_get_my_obs') }}";}
        function get_workorder_tasks_url(){return "{{ path('workorder_get_my_tasks') }}";}
        function get_workorder_stocks_url(){return "{{ path('workorder_get_my_stocks') }}";}
        function get_workorder_invoices_url(){return "{{ path('workorder_get_my_invoices') }}";}

        function open_mail(mail){window.location = mail;}

        viewModel.LoadData = ko.dependentObservable(function() {
            {% if next_wo_number %}viewModel.current_wo_number_to_creation("{{next_wo_number}}");{% endif %}
            //Getting support data
            if(viewModel.chosenwo() == null){
                {% if supervisors %}var tsups=[];{% for sup in supervisors %}tsups.push({id:"{{ sup.id }}",name:"{{ sup }}",code:"{{ sup.workercode }}"});{% endfor %}viewModel.supervisors(tsups);{% endif %}
                {% if units %}var tunis=[];{% for unit in units %}tunis.push({id:"{{ unit.id }}",name: "{{ unit.name }}",fullname:"{{ unit }}"});{% endfor %}viewModel.units(tunis);{% endif %}
                {% if equipments %}var teqts=[];{% for eqt in equipments %}teqts.push({id:"{{ eqt.id }}",name:"{{ eqt }}",code:"{{ eqt.code }}",multiple_wos:{% if eqt.multiplewos %}true{% else %}false{% endif %}});{% endfor %}viewModel.equipments(teqts);{% endif %}
                {% if departments %}var tdeps=[];{% for dep in departments %}tdeps.push({id:"{{ dep.id }}",name:"{{ dep }}"});{% endfor %}viewModel.departments(tdeps);{% endif %}
                {% if clients %}var tclients=[];{% for client in clients %}tclients.push({id:"{{ client.id }}",name:"{{ client }}",internal:"{{ client.internal ? true : false }}"});{% endfor %}viewModel.clients(tclients);{% endif %}
                {% if salest %}var ttsales=[];{% for tsale in salest %}ttsales.push({id:"{{ tsale.id }}",name:"{{ tsale.saletype }}"});{% endfor %}viewModel.t_sales(ttsales);{% endif %}
                {% if workst %}var ttworks=[];{% for twork in workst %}ttworks.push({id:"{{ twork.id }}",name:"{{ twork.worktype }}"});{% endfor %}viewModel.t_works(ttworks);{% endif %}
                viewModel.stocks_status(["Current","Rented","Sold","Hold","Closed"]);
                viewModel.wo_status(["Current","Rented","Sold","Hold","Out","Closed"]);
                viewModel.task_status(["Canceled","Completed","Current","Hold"]);
                viewModel.chosenwo(new workorder("{{ entity.id }}", "{{ entity.getImageUrl() }}", "{{ entity.number }}",
                        "{{ entity.origin }}", "{{ entity.getEquipment() ? entity.getEquipment().id : null }}", "{{ entity.stockquantity }}",
                        "{{ entity.createdat ? entity.createdat|date("m/d/Y") : null }}",
                        "{{ entity.startedat ? entity.startedat|date("m/d/Y") : null }}",
                        "{{ entity.price ? entity.price : null }}",
                        "{{ entity.deliverydate ? entity.deliverydate|date("m/d/Y") : null }}",
                        "{{ entity.readyat ? entity.readyat|date("m/d/Y") : null }}",
                        "{{ entity.getSupervisor() ? entity.getSupervisor().id : null }}",
                        "{{ entity.getClient() ? entity.getClient().id : null }}",
                        "{{ entity.getSaletype() ? entity.getSaletype().id : null }}",
                        "{{ entity.getWorktype() ? entity.getWorktype().id : null }}", "{{ entity.status }}",
                        null,
                        "{{ cost ? cost : null }}",
                        "{{ entity.xprice ? entity.xprice : null }}"));
                {% if entity.createdby %}viewModel.chosenwo().creator_id("{{ entity.createdby.id }}");viewModel.chosenwo().creator_name("{{ entity.createdby }}");{% endif %}
                {% if entity.obs|length > 0 %}viewModel.chosenwo().get_my_obs();{% endif %}{% if entity.stocksfull|length > 0 %}viewModel.chosenwo().get_my_stocks();{% endif %}
                {% if entity.invoicerefs|length > 0 %}viewModel.chosenwo().get_my_invoices();{% endif %}{% if entity.tasks|length > 0 %}viewModel.chosenwo().get_my_tasks();{% endif %}
            }}, viewModel);ko.applyBindings(viewModel, document.getElementById("content-body"));
    </script>{% endblock %}