{% 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: chosenwo() == null">
                    <strong>Work Orders Reports</strong>
                </H3>
                <H3 style="margin: 0px;"
                    data-bind="visible: chosenwo() != null, with: chosenwo">
                    <strong>Work Order: </strong>
                    <strong class="text-muted" data-bind="text: wo_number"></strong>
                </H3>
            </div>
        </div>
    </div>
{% endblock %}
{% block content%}
    {% block workorders_list %}
        {% include "VGMWOBundle:Reports/Parts:workorders_list.html.twig" %}
    {% endblock workorders_list %}
    {% block workorder_details %}
        {% include "VGMWOBundle:Reports/Parts:workorder_details.html.twig" %}
    {% endblock workorder_details %}
    <div class="modal fade bs-example-modal-lg"
         id="show_stock"
         tabindex="-1"
         role="dialog"
         aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-lg"
             data-bind="with: stock2show">
            <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">Stock data</h4>
                </div>
                <div class="modal-body">
                    <div class="container-fluid">
                        <div class="col-lg-7">
                            <img class="img-responsive"
                                 data-bind="attr:{src: picture}"
                                 style="margin:0 auto;">
                        </div>
                        <div class="col-lg-5 table-responsive">
                            <table class="table table-striped table-hover">
                                <tbody>
                                    <tr>
                                        <td class="col-lg-6">
                                            <strong>Number</strong>
                                        </td>
                                        <td data-bind="text: stock"></td>
                                    </tr>
                                    <tr>
                                        <td class="col-lg-6">
                                            <strong>Serial No</strong>
                                        </td>
                                        <td data-bind="text: serial"></td>
                                    </tr>
                                    <tr>
                                        <td class="col-lg-6">
                                            <strong>Hours/Miles</strong>
                                        </td>
                                        <td data-bind="text: hours_miles"></td>
                                    </tr>
                                    <tr>
                                        <td class="col-lg-6">
                                            <strong>Make</strong>
                                        </td>
                                        <td data-bind="text: make"></td>
                                    </tr>
                                    <tr>
                                        <td class="col-lg-6">
                                            <strong>Model</strong>
                                        </td>
                                        <td data-bind="text: model"></td>
                                    </tr>
                                    <tr>
                                        <td class="col-lg-6">
                                            <strong>Cap</strong>
                                        </td>
                                        <td data-bind="text: capacity"></td>
                                    </tr>
                                    <tr>
                                        <td class="col-lg-6">
                                            <strong>Tran/Gen/Com</strong>
                                        </td>
                                        <td data-bind="text: tgc"></td>
                                    </tr>
                                    <tr>
                                        <td class="col-lg-6">
                                            <strong>Engine</strong>
                                        </td>
                                        <td data-bind="text: engine"></td>
                                    </tr>
                                    <tr>
                                        <td class="col-lg-6">
                                            <strong>Year</strong>
                                        </td>
                                        <td data-bind="text: year"></td>
                                    </tr>
                                    <tr>
                                        <td class="col-lg-6">
                                            <strong>Localization</strong>
                                        </td>
                                        <td data-bind="text: localization"></td>
                                    </tr>
                                    <tr>
                                        <td class="col-lg-6">
                                            <strong>Actual Condition</strong>
                                        </td>
                                        <td data-bind="text: a_condition"></td>
                                    </tr>
                                    <tr>
                                        <td class="col-lg-6" colspan="2">
                                            <strong>Description:</strong>
                                            <p style="display: inline;" data-bind="text: description"></p>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </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/customized/utils/Utils.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/reports/WorkOrdersReports.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/vgmwo/js/waitMe.js') }}"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            loadPageFeatures();
            viewModel.appyFilters();
            viewModel.getDepartments();
            $('#show_stock').on('hidden.bs.modal', function (e) {
                viewModel.clear_stock2show();
            });
            $('#large-picture').on('hidden.bs.modal', function (e) {
                viewModel.clear_large_image();
            });
        });
        function getURLFilteredWorkOrders(){
            return '{{ path("reports_get_filtered_workorders") }}';
        }
        function getURLExport2ExcelFilteredWorkOrders(){
            return '{{ path("export_filtered_workorders_xls") }}';
        }
        function getURLExport2ExcelConsolidatedFilteredWorkOrders(){
            return '{{ path("export_filtered_workorders_consolidated_xls") }}';
        }
        function getURLExport2ExcelFilteredWorkOrdersLabors(){
            return '{{ path("export_filtered_workorders_labors_xls") }}';
        }
        function getURLWorkOrderLoops(){
            return '{{ path("reports_get_filtered_workorder_loops") }}';
        }
        function getURLDepartments(){
            return '{{ path("get_departments") }}';
        }

        viewModel.LoadData = ko.dependentObservable(function() {
            //Filling the lists
            viewModel.sorter_wo().sort("ASC");

            {% for sup in supervisors %}
                {% if sup.picture %}
                    viewModel.supervisors.push(new supervisor("{{ sup.id }}",
                        "{{ sup.picture.getFinalWebPath }}", "{{ sup.workercode }}",
                        "{{ sup.name }} {{ sup.lastname }}", "{{ sup.department }}"));
                {% else %}
                    viewModel.supervisors.push(new supervisor("{{ sup.id }}",
                    null, "{{ sup.workercode }}",
                    "{{ sup.name }} {{ sup.lastname }}", "{{ sup.department }}"));
                {% endif %}
            {% endfor %}
        }, viewModel);

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

{% endblock %}