{% if is_granted('ROLE_ADMIN') or is_granted('ROLE_SUPER_SUPERVISOR') or is_granted('ROLE_OTS_CORDINATOR')
    or is_granted('ROLE_SUPERVISOR') or is_granted('ROLE_ACCOUNTING') %}

<div class="row">
    <div class="col-lg-12" data-bind="with: chosenwo">
        {#<div class="col-lg-12">
            <strong style="text-decoration: underline; font-size: 2vmin;">Stocks</strong>
            {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_SUPER_SUPERVISOR') or is_granted('ROLE_OTS_CORDINATOR') %}
                <a data-toggle="modal" href="#" data-target="#search-add-stock" style="padding: 0px; font-size: 2.5vmin; margin-left: 1vmin;" data-bind="click: blanck_new_found_stocks"><span class="glyphicon glyphicon-plus"></span></a>
            {% endif %}
        </div>#}
        <div id="wo-stocks-toggle"
             class="collapsable-area-header link-color"
             style="margin-top: 10px;"
             data-toggle="collapse" data-target="#wo-stocks"
             aria-expanded="true" aria-controls="wo-stocks"
             onclick="$('#wo-stocks-toggle span').toggleClass('glyphicon-menu-down glyphicon-menu-right')">
            <span class="glyphicon glyphicon-menu-down"></span>
            Stocks
            <small class="pull-right"
                   data-bind="text: stocks().length + ' stocks'"></small>
        </div>
        <div class="table-responsive col-lg-12 collapse in" id="wo-stocks" style="padding-left: 0px; padding-right: 0px;">
            <!-- ko if: stocks().length > 0 -->
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active">
                        <a href="#current" aria-controls="current" role="tab" data-toggle="tab"><strong>Current</strong></a></li>
                    <li role="presentation">
                        <a href="#archived" aria-controls="archived" role="tab" data-toggle="tab"><strong>Archived</strong></a></li>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="current">
                        <table id="current-stocks-list" class="table table-striped table-hover table-int-grid">
                            <thead>
                            <tr>
                                {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_SUPER_SUPERVISOR') %}
                                    <th class="col-xs-05">No.S</th>
                                    <th class="col-xs-05">Stock</th>
                                    <th class="col-xs-1 col-sm-1">From</th>
                                    <th class="col-xs-1 col-sm-1">Make</th>
                                    <th class="col-xs-1 col-sm-1">Model</th>
                                    <th class="col-xs-1 col-sm-1">Dest.</th>
                                    <th class="col-xs-1 col-sm-1">Condition</th>
                                    <th class="col-xs-2 col-sm-2">Client</th>
                                    <th class="col-xs-1 col-sm-1">Status</th>
                                    <th class="col-xs-1 col-sm-1" style="white-space: nowrap">Due date</th>
                                    <th class="col-xs-1 col-sm-1">Delivered</th>
                                    <th >Invoicing</th>
                                    <th colspan="3">Actions</th>
                                {% elseif is_granted('ROLE_ACCOUNTING') %}
                                    <th class="col-xs-05">No</th>
                                    <th class="col-xs-05">Stock</th>
                                    <th class="col-xs-2 col-sm-2">Make</th>
                                    <th class="col-xs-2 col-sm-2">Model</th>
                                    <th class="col-xs-1 col-sm-1">Dest.</th>
                                    <th class="col-xs-3 col-sm-3">Client</th>
                                    <th class="col-xs-05">Status</th>
                                    <th class="col-xs-1 col-sm-1">Delivered</th>
                                    <th class="col-xs-05">IS</th>
                                    <th class="col-xs-1 col-sm-1">Invoicing</th>
                                    <th>View</th>
                                {% elseif is_granted('ROLE_SUPERVISOR') or is_granted('ROLE_OTS_CORDINATOR') %}
                                    <th class="col-xs-05">No</th>
                                    <th class="col-xs-1">Stock</th>
                                    <th class="col-xs-1 col-sm-1">Make</th>
                                    <th class="col-xs-2 col-sm-2">Model</th>
                                    <th class="col-xs-1 col-sm-1">Dest.</th>
                                    <th class="col-xs-1 col-sm-1">Condition</th>
                                    <th class="col-xs-2 col-sm-2">Client</th>
                                    <th class="col-xs-1 col-sm-1">Status</th>
                                    <th class="col-xs-1 col-sm-1" style="white-space: nowrap">Due date</th>
                                    <th class="col-xs-1 col-sm-1">Delivered</th>
                                    <th colspan="3">Actions</th>
                                {% endif %}
                            </tr>
                            </thead>
                            <tbody data-bind="foreach: stocks">
                            <!-- ko if: status() == 'Current' || status() == null -->
                            <tr style="cursor: pointer" class="locked">
                                <td>
                                    {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_SUPER_SUPERVISOR') or is_granted('ROLE_OTS_CORDINATOR') %}
                                        <input class="form-control stock-number" placeholder="No" data-bind="value: number,attr:{id: 'stock-number-' + $index()}"/>
                                    {% else %}
                                        <div data-bind="text: number ? number : '-'"/>
                                    {% endif %}
                                </td>
                                <td><div data-bind="text: stock ? stock : 'Pending'"/></td>
                                {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_SUPER_SUPERVISOR') %}
                                    <td><input class="form-control" placeholder="From" data-bind="value: from"/></td>
                                {% endif %}
                                <td><div data-bind="text: brand ? brand : '- - -'"/></td>
                                <td><div data-bind="text: model ? model : '- - -'"/></td>
                                {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_SUPER_SUPERVISOR') or is_granted('ROLE_OTS_CORDINATOR') %}
                                    <td><select class="form-control for-desktop" data-bind="options: $root.t_sales,optionsCaption: '',optionsText: 'name', value: t_sale"></select></td>
                                    <td><select class="form-control for-desktop" data-bind="options: $root.t_works,optionsCaption: '',optionsText: 'name', value: t_work"></select></td>
                                    <td><select class="form-control for-desktop" data-bind="options: $root.clients(),optionsCaption: 'Client',optionsText: 'name',value: client"></select></td>
                                    <td><select class="form-control for-desktop" data-bind="options: $root.stocks_status(),optionsCaption: 'Status',value: status"></select></td>
                                    <td>
                                        <input name="stock_due_date"
                                               data-bind="value: due_date, attr:{id: 'stock-due-date-' + $index()}"
                                               data-date =""
                                               data-date-format="mm/dd/yy"
                                               data-link-field="stock_due_date"
                                               data-link-format="mm/dd/yy"
                                               class="form-control stock-due-date stock-datepicker">
                                    </td>
                                    <td>
                                        <input name="stock_delivery_date"
                                               data-bind="value: delivery_date, attr:{id: 'stock-delivery-date-' + $index()}"
                                               data-date =""
                                               data-date-format="mm/dd/yy"
                                               data-link-field="stock_delivery"
                                               data-link-format="mm/dd/yy"
                                               class="form-control stock-delivery-date stock-datepicker">
                                    </td>
                                {% elseif is_granted('ROLE_SUPERVISOR') %}
                                    <td><div data-bind="text: t_sale() ? t_sale().name : '-'"/></td>
                                    <td><div data-bind="text: t_work() ? t_work().name : '-'"/></td>
                                    <td><div data-bind="text: client() ? client().name : '-'"/></td>
                                    <td><div data-bind="text: status() ? status() : '-'"/></td>
                                    <td><div data-bind="text: due_date() ? due_date() : '-'"/></td>
                                    <td><div data-bind="text: delivery_date() ? due_date() : '-'"/></td>
                                {% elseif is_granted('ROLE_ACCOUNTING') %}
                                    <td><div data-bind="text: t_sale() ? t_sale().name : '-'"/></td>
                                    <td><div data-bind="text: client() ? client().name : '-'"/></td>
                                    <td><div data-bind="text: status() ? status() : '-'"/></td>
                                    <td><div data-bind="text: delivery_date() ? due_date() : '-'"/></td>
                                    <td><div data-bind="text: status_2_show"/></td>
                                {% endif %}
                                {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_SUPER_SUPERVISOR') or is_granted('ROLE_ACCOUNTING') %}
                                    <td class="text-center" style="vertical-align: middle; color: #337ab7; cursor: pointer;"
                                        title="Click to show invoices">
                                        <span class="glyphicon glyphicon-modal-window" data-bind="click: manage_invoices"></span>
                                    </td>
                                {% endif %}
                                <td class="text-center" style="vertical-align: middle;"><span class="glyphicon glyphicon-eye-open" style="color: #428bca; cursor: pointer;" title="Show stock data" data-bind="click: show_me"></span></td>
                                <!--<td><span class="glyphicon glyphicon-pencil" style="color: #eea236; cursor: pointer; width: 100%; height: 100%;" title="Edit stock data" data-bind="click: edit_me"></span></td>-->
                                {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_SUPER_SUPERVISOR') or is_granted('ROLE_OTS_CORDINATOR') %}
                                    <td class="text-center" style="vertical-align: middle; cursor: pointer;" data-bind="click: show_stickers">
                                        <span class="glyphicon glyphicon-tag" style="color: #428bca;"></span>
                                    </td>
                                {% endif %}
                                {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_SUPER_SUPERVISOR') or is_granted('ROLE_OTS_CORDINATOR') %}
                                    <td class="text-center" style="vertical-align: middle;">
                                        <!-- ko if: invoices().length == 0-->
                                            <span class="glyphicon glyphicon-trash" style="color: #d43f3a; cursor: pointer;"
                                                  title="Delete stock from this Wrok Order" data-bind="click: delete_me"></span>
                                        <!-- /ko -->
                                        <!-- ko if: invoices().length > 0-->
                                            <span class="glyphicon glyphicon-trash"
                                                  style="color: #9E9395; cursor: not-allowed;"
                                                  title="This stock has invoices"></span>
                                        <!-- /ko -->
                                    </td>
                                {% endif %}
                            </tr>
                            <!-- /ko -->
                            </tbody>
                        </table>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="archived">
                        <table id="uncurrent-stocks-list" class="table table-striped table-hover table-int-grid">
                            <thead>
                            <tr>
                                {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_SUPER_SUPERVISOR') %}
                                    <th class="col-xs-05">No.S</th>
                                    <th class="col-xs-05">Stock</th>
                                    <th class="col-xs-1 col-sm-1">From</th>
                                    <th class="col-xs-1 col-sm-1">Make</th>
                                    <th class="col-xs-1 col-sm-1">Model</th>
                                    <th class="col-xs-1 col-sm-1">Dest.</th>
                                    <th class="col-xs-1 col-sm-1">Condition</th>
                                    <th class="col-xs-2 col-sm-2">Client</th>
                                    <th class="col-xs-1 col-sm-1">Status</th>
                                    <th class="col-xs-1 col-sm-1" style="white-space: nowrap">Due date</th>
                                    <th class="col-xs-1 col-sm-1">Delivered</th>
                                    <th >Invoicing</th>
                                    <th colspan="2">Actions</th>
                                {% elseif is_granted('ROLE_ACCOUNTING') %}
                                    <th class="col-xs-05">No</th>
                                    <th class="col-xs-05">Stock</th>
                                    <th class="col-xs-2 col-sm-2">Make</th>
                                    <th class="col-xs-2 col-sm-2">Model</th>
                                    <th class="col-xs-1 col-sm-1">Dest.</th>
                                    <th class="col-xs-3 col-sm-3">Client</th>
                                    <th class="col-xs-05">Status</th>
                                    <th class="col-xs-1 col-sm-1">Delivered</th>
                                    <th class="col-xs-05">IS</th>
                                    <th class="col-xs-1 col-sm-1">Invoicing</th>
                                    <th>View</th>
                                {% elseif is_granted('ROLE_SUPERVISOR') or is_granted('ROLE_OTS_CORDINATOR') %}
                                    <th class="col-xs-05">No</th>
                                    <th class="col-xs-1">Stock</th>
                                    <th class="col-xs-1 col-sm-1">Make</th>
                                    <th class="col-xs-2 col-sm-2">Model</th>
                                    <th class="col-xs-1 col-sm-1">Dest.</th>
                                    <th class="col-xs-1 col-sm-1">Condition</th>
                                    <th class="col-xs-2 col-sm-2">Client</th>
                                    <th class="col-xs-1 col-sm-1">Status</th>
                                    <th class="col-xs-1 col-sm-1" style="white-space: nowrap">Due date</th>
                                    <th class="col-xs-1 col-sm-1">Delivered</th>
                                    <th>Actions</th>
                                {% endif %}
                            </tr>
                            </thead>
                            <tbody data-bind="foreach: stocks">
                            <!-- ko if: status() != 'Current' && status() != null -->
                            <tr style="cursor: pointer" class="locked">
                                <td>
                                    {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_SUPER_SUPERVISOR') or is_granted('ROLE_OTS_CORDINATOR') %}
                                        <input class="form-control stock-number" placeholder="No" data-bind="value: number,attr:{id: 'stock-number-' + $index()}"/>
                                    {% else %}
                                        <div data-bind="text: number ? number : '-'"/>
                                    {% endif %}
                                </td>
                                <td><div data-bind="text: stock ? stock : 'Pending'"/></td>
                                {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_SUPER_SUPERVISOR') %}
                                    <td><input class="form-control" placeholder="From" data-bind="value: from"/></td>
                                {% endif %}
                                <td><div data-bind="text: brand ? brand : '- - -'"/></td>
                                <td><div data-bind="text: model ? model : '- - -'"/></td>
                                {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_SUPER_SUPERVISOR') or is_granted('ROLE_OTS_CORDINATOR') %}
                                    <td><select class="form-control for-desktop" data-bind="options: $root.t_sales,optionsCaption: '',optionsText: 'name', value: t_sale"></select></td>
                                    <td><select class="form-control for-desktop" data-bind="options: $root.t_works,optionsCaption: '',optionsText: 'name', value: t_work"></select></td>
                                    <td><select class="form-control for-desktop" data-bind="options: $root.clients(),optionsCaption: 'Client',optionsText: 'name',value: client"></select></td>
                                    <td><select class="form-control for-desktop" data-bind="options: $root.stocks_status(),optionsCaption: 'Status',value: status"></select></td>
                                    <td>
                                        <input name="stock_due_date"
                                               data-bind="value: due_date, attr:{id: 'stock-due-date-' + $index()}"
                                               data-date =""
                                               data-date-format="mm/dd/yy"
                                               data-link-field="stock_due_date"
                                               data-link-format="mm/dd/yy"
                                               class="form-control stock-due-date stock-datepicker">
                                    </td>
                                    <td>
                                        <input name="stock_delivery_date"
                                               data-bind="value: delivery_date, attr:{id: 'stock-delivery-date-' + $index()}"
                                               data-date =""
                                               data-date-format="mm/dd/yy"
                                               data-link-field="stock_delivery"
                                               data-link-format="mm/dd/yy"
                                               class="form-control stock-delivery-date stock-datepicker">
                                    </td>
                                {% elseif is_granted('ROLE_SUPERVISOR') %}
                                    <td><div data-bind="text: t_sale() ? t_sale().name : '-'"/></td>
                                    <td><div data-bind="text: t_work() ? t_work().name : '-'"/></td>
                                    <td><div data-bind="text: client() ? client().name : '-'"/></td>
                                    <td><div data-bind="text: status() ? status() : '-'"/></td>
                                    <td><div data-bind="text: due_date() ? due_date() : '-'"/></td>
                                    <td><div data-bind="text: delivery_date() ? delivery_date() : '-'"/></td>
                                {% elseif is_granted('ROLE_ACCOUNTING') %}
                                    <td><div data-bind="text: t_sale() ? t_sale().name : '-'"/></td>
                                    <td><div data-bind="text: client() ? client().name : '-'"/></td>
                                    <td><div data-bind="text: status() ? status() : '-'"/></td>
                                    <td><div data-bind="text: delivery_date() ? delivery_date() : '-'"/></td>
                                    <td><div data-bind="text: status_2_show"/></td>
                                {% endif %}
                                {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_SUPER_SUPERVISOR') or is_granted('ROLE_ACCOUNTING') %}
                                    <td class="text-center" style="vertical-align: middle; color: #337ab7; cursor: pointer;"
                                        title="Click to show invoices">
                                        <span class="glyphicon glyphicon-modal-window" data-bind="click: manage_invoices"></span>
                                    </td>
                                {% endif %}
                                <td class="text-center" style="vertical-align: middle;"><span class="glyphicon glyphicon-eye-open" style="color: #428bca; cursor: pointer; width: 100%; height: 100%;" title="Show stock data" data-bind="click: show_me"></span></td>
                                <!--<td><span class="glyphicon glyphicon-pencil" style="color: #eea236; cursor: pointer; width: 100%; height: 100%;" title="Edit stock data" data-bind="click: edit_me"></span></td>-->
                                {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_SUPER_SUPERVISOR') or is_granted('ROLE_OTS_CORDINATOR') %}
                                    <td class="text-center" style="vertical-align: middle;">
                                        <!-- ko if: invoices().length == 0-->
                                            <span class="glyphicon glyphicon-trash" style="color: #d43f3a;
                                                  cursor: pointer; width: 100%; height: 100%;"
                                                  title="Delete stock from this Wrok Order"
                                                  data-bind="click: delete_me"></span>
                                        <!-- /ko -->
                                        <!-- ko if: invoices().length > 0-->
                                            <span class="glyphicon glyphicon-trash"
                                                  style="color: #9E9395; cursor: not-allowed; width: 100%; height: 100%;"
                                                  title="This stock has invoices"></span>
                                        <!-- /ko -->
                                    </td>
                                {% endif %}
                            </tr>
                            <!-- /ko -->
                            </tbody>
                        </table>
                    </div>
                </div>

                <div>
                    <div  class="col-xs-1" style="padding-left: 0px;"><label style="margin-bottom: 0px; margin-top: 0px;">Quantity:</label></div>
                    <div  class="col-xs-1" style="padding-left: 0px;">
                        {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_SUPER_SUPERVISOR') or is_granted('ROLE_OTS_CORDINATOR') %}
                            <input id="stocks-qty" class="form-control for-desktop s-qty" data-bind="value: stocks_qty"/>
                        {% else %}
                            <input id="stocks-qty" class="form-control for-desktop s-qty" data-bind="value: stocks_qty" disabled/>
                        {% endif %}
                    </div><div class="col-lg-10" style="padding-right: 0px;">
                        {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_SUPER_SUPERVISOR') or is_granted('ROLE_OTS_CORDINATOR') %}
                            <a class="pull-right btn btn-sm btn-primary" data-toggle="modal" data-target="#search-add-stock" data-bind="click: blanck_new_found_stocks">Add stock <span class="glyphicon glyphicon-plus-sign"></span></a>
                        {% endif %}
                    </div></div>
            <!-- /ko -->
            <!-- ko if: stocks().length == 0 -->
                <div class="col-xs-12 col-sm-12">
                    {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_SUPER_SUPERVISOR') or is_granted('ROLE_OTS_CORDINATOR') %}
                        <strong>No Stocks</strong>
                        <a class="pull-right"
                           style="cursor: pointer"
                           data-toggle="modal" data-target="#search-add-stock"
                           data-bind="click: blanck_new_found_stocks"><strong>Add stock</strong>
                            <span class="glyphicon glyphicon-plus"></span></a>
                    {% else %}
                        <strong>No stocks</strong>
                    {% endif %}
                </div>
            <!-- /ko -->
        </div>
    </div>
</div>
{% else %}
    <div class="row text-center text-uppercase">
        <h3>You don't have the level access needed to see this section!!!</h3>
        <h4>Usted no cuenta con los permisos necesarios para ver estos datos!!!</h4>
    </div>
{% endif %}
<script>
    function go_print_stock_stickers(astock_id){var url = '{{ path("show_stock_stickers", {'id': 'id_val'}) }}';url = url.replace("id_val", astock_id);window.open(url,'_blank');}
</script>
