{% block workorder_creation_data %}{% include "VGMWOBundle:WorkOrder/Show_parts:workorder_creation_data.html.twig" %}{% endblock workorder_creation_data %}
<div class="row"><div class="col-xs-12 col-md-5" style="padding: 0px;">
        <div class="col-xs-6">
            <label for="wo-number" style="margin-bottom: 0px;"
                   data-bind="style:{marginTop: chosenwo().id != null ? '10px' : '0px'}">WO number: </label>
            <input tabindex="1" id="wo-number" autofocus="autofocus" required="required" type="tel" maxlength="9"
                   placeholder="WO Number" class="form-control for-desktop" data-bind="textInput: chosenwo().wo_number"
                   {% if not(is_granted('ROLE_ADMIN') or is_granted('ROLE_SUPER_SUPERVISOR') or is_granted('ROLE_OTS_CORDINATOR')) %}disabled{% endif %}/>
        </div>
        <div class="col-xs-6">
            <label form="wo-status" style="margin-bottom: 0px;"
                   data-bind="style:{marginTop: chosenwo().id != null ? '10px' : '0px'}">Status: </label>
            <select tabindex="2" id="wo-status" required="required" class="form-control for-desktop"
                    data-bind="options: wo_status,optionsCaption: '',value: chosenwo().status"
                    {% if not(is_granted('ROLE_ADMIN') or is_granted('ROLE_SUPER_SUPERVISOR') or is_granted('ROLE_OTS_CORDINATOR')) %}disabled{% endif %}></select>
        </div>
        <div class="col-xs-6">
            <label for="from" style="margin-bottom: 0px; margin-top: 10px;">From: </label>
            <input tabindex="3" id="from" type="text" class="form-control for-desktop" placeholder="From"
                   data-bind="textInput: chosenwo().origin"
                   {% if not(is_granted('ROLE_ADMIN') or is_granted('ROLE_SUPER_SUPERVISOR') or is_granted('ROLE_OTS_CORDINATOR')) %}disabled{% endif %}/>
        </div>
        <div class="col-xs-6">
            <label form="wo-equipment" style="margin-bottom: 0px; margin-top: 10px;">Equipment: </label>
            <select tabindex="4" id="wo-equipment" required="required"  class="form-control for-desktop"
                    data-bind="options: equipments,optionsCaption: '',optionsText: 'name',value: chosenwo().equipment"
                    {% if not(is_granted('ROLE_ADMIN') or is_granted('ROLE_SUPER_SUPERVISOR') or is_granted('ROLE_OTS_CORDINATOR')) %}disabled{% endif %}></select>
        </div>
        <div class="col-xs-6">
            <label for="wo-destination" style="margin-bottom: 0px; margin-top: 10px;">Destination:</label>
            <select tabindex="5" id="wo-destination" required="required" class="form-control for-desktop"
                    data-bind="options: t_sales,optionsCaption: '',optionsText: 'name',value: chosenwo().t_sale"
                    {% if not(is_granted('ROLE_ADMIN') or is_granted('ROLE_SUPER_SUPERVISOR') or is_granted('ROLE_OTS_CORDINATOR')) %}disabled{% endif %}></select>
        </div>
        <div class="col-xs-6">
            <label for="wo-condition" style="margin-bottom: 0px; margin-top: 10px;">Condition:</label>
            <select tabindex="6" id="wo-condition" required="required" class="form-control for-desktop"
                    data-bind="options: t_works,optionsCaption: '',optionsText: 'name',value: chosenwo().t_work"
                    {% if not(is_granted('ROLE_ADMIN') or is_granted('ROLE_SUPER_SUPERVISOR') or is_granted('ROLE_OTS_CORDINATOR')) %}disabled{% endif %}></select>
        </div>
        <div class="col-xs-6">
            <label for="wo-client" style="margin-bottom: 0px; margin-top: 10px;">Client: </label>
            <select tabindex="7" id="wo-client" required="required" class="form-control for-desktop"
                    data-bind="options: clients,optionsCaption: '',optionsText: 'name',value: chosenwo().client"
                    {% if not(is_granted('ROLE_ADMIN') or is_granted('ROLE_SUPER_SUPERVISOR') or is_granted('ROLE_OTS_CORDINATOR')) %}disabled{% endif %}></select>
        </div>
        <div class="col-xs-6">
            <label for="delivery_date_picker" style="margin-bottom: 0px; margin-top: 10px;">Due date: </label>
            <input tabindex="8" id="delivery_date_picker"
                   name="delivery_date"
                   data-bind="value: chosenwo().deliverydt"
                   data-date =""
                   data-date-format="mm/dd/yyyy"
                   data-link-field="delivery_date_picker"
                   data-link-format="mm/dd/yyyy"
                   class="form-control for-desktop datepicker"
                   {% if not(is_granted('ROLE_ADMIN') or is_granted('ROLE_SUPER_SUPERVISOR') or is_granted('ROLE_OTS_CORDINATOR')) %}disabled{% endif %}>
        </div>
        <div class="col-xs-6">
            <label for="wo-supervisor" style="margin-bottom: 0px; margin-top: 10px;">Supervisor: </label>
            <select tabindex="9" id="wo-supervisor" class="form-control for-desktop"
                    data-bind="options: supervisors,optionsCaption: '',optionsText: 'name',value: chosenwo().supervisor"
                    {% if not(is_granted('ROLE_ADMIN') or is_granted('ROLE_SUPER_SUPERVISOR') or is_granted('ROLE_OTS_CORDINATOR')) %}disabled{% endif %}></select>
        </div>
        <div class="col-xs-6">
            <label for="ready_at_date_picker" style="margin-bottom: 0px; margin-top: 10px;">Delivered: </label>
            <input tabindex="8" id="ready_at_date_picker"
                   name="ready_at_date"
                   data-bind="value: chosenwo().due_date"
                   data-date =""
                   data-date-format="mm/dd/yyyy"
                   data-link-field="ready_at_date_picker"
                   data-link-format="mm/dd/yyyy"
                   class="form-control datepicker"
                   {% if not(is_granted('ROLE_ADMIN') or is_granted('ROLE_SUPER_SUPERVISOR') or is_granted('ROLE_OTS_CORDINATOR')) %}disabled{% endif %}>
        </div>
        {#{% if is_granted('ROLE_SUPER_SUPERVISOR') %}{% block workorder_cost_price %}{% include "VGMWOBundle:WorkOrder/Show_parts:workorder_cost_price.html.twig" %}{% endblock workorder_cost_price %}{% endif %}#}
        {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_SUPER_SUPERVISOR') or is_granted('ROLE_ACCOUNTING') %}
            <div class="col-xs-12">
                <div id="wo-invoice-toggle"
                     class="collapsable-area-header link-color"
                     style="margin-top: 10px;"
                     data-toggle="collapse" data-target="#wo-invoices"
                     aria-expanded="true" aria-controls="wo-invoices"
                     onclick="$('#wo-invoice-toggle span').toggleClass('glyphicon-menu-down glyphicon-menu-right')">
                    <span class="glyphicon glyphicon-menu-down"></span>
                    Invoicing
                    <small class="pull-right"
                           data-bind="text: chosenwo().invoices().length + ' invoices'"></small>
                </div>
                <div class="collapse in" id="wo-invoices">
                    <div class="table-responsive col-lg-12" style="padding-left: 0px; padding-right: 0px;">
                        <!-- ko if: chosenwo().invoices().length > 0 -->
                            <table class="table table-striped table-hover table-int-grid">
                                <thead>
                                    <tr>
                                        <th class="col-xs-1 col-sm-1">Destination</th>
                                        <th class="col-xs-1 col-sm-1">Status</th>
                                        <th class="col-xs-2 col-sm-2">$ T. Amount</th>
                                        <th>Items</th>
                                        <th class="col-xs-2 col-sm-2" style="white-space: nowrap"># Invoice</th>
                                        <th class="col-xs-2 col-sm-2">Date</th>
                                        <th class="col-xs-3 col-sm-3" style="white-space: nowrap">Invoiced to</th>
                                        <th>Del</th>
                                    </tr>
                                </thead>
                                <tbody data-bind="foreach: chosenwo().invoices"><tr style="cursor: pointer" class="locked">
                                    <td>
                                        <select class="form-control"
                                                data-bind="options: $root.t_sales, optionsText: 'name',
                                                           optionsCaption: '', value: destination"></select>
                                    </td>
                                    <td>
                                        <select class="form-control"
                                                data-bind="options: $root.invoice_status,
                                                           optionsCaption: '', value: status"></select>
                                    </td>
                                    <td>
                                        <input class="form-control wo-invoice-amount" placeholder="$ Amount"
                                               data-bind="textInput: amount"
                                               onkeyup="validate_R3(this)"/>
                                    </td>
                                    <td>
                                        <input class="form-control wo-invoice-items" placeholder="Items"
                                               data-bind="value: items"
                                               onkeyup="validate_N(this)"/>
                                    </td>
                                    <td>
                                        <input class="form-control wo-invoice-invoice" placeholder="# Invoice"
                                               data-bind="value: invoice"
                                               onkeyup="validate_N(this)"/>
                                    </td>
                                    <td>
                                        <input name="stock_due_date"
                                               data-date =""
                                               data-bind="value: date, attr:{id: 'wo-invoice-datepicker-' + $index()}"
                                               data-date-format="mm/dd/yy"
                                               data-link-field="stock_due_date"
                                               data-link-format="mm/dd/yy"
                                               class="form-control wo-invoice-datepicker">
                                    </td>
                                    <td><select class="form-control for-desktop" data-bind="options: $root.clients(),optionsCaption: 'Client',optionsText: 'name', value: client"></select></td>
                                    <td class="text-center" style="vertical-align: middle;">
                                        <span class="glyphicon glyphicon-trash" style="color: #d43f3a; cursor: pointer; width: 100%; height: 100%;" title="Delete stock from this Wrok Order"
                                              data-bind="click: remove"></span></td>
                                </tr></tbody>
                                <tfoot><tr style="border-bottom: 1px solid #ddd;">
                                    <td colspan="8" class="text-right" style="vertical-align: middle;">
                                        <span class="glyphicon glyphicon-plus"
                                              style="cursor: pointer; color: #337ab7; width: 100%; height: 100%;"
                                              title="Add new invoice"
                                              data-bind="click: chosenwo().add_invoice"></span></td>
                                </tr></tfoot>
                            </table>
                        <!-- /ko -->
                        <!-- ko if: chosenwo().invoices().length == 0 -->
                            <div class="col-xs-12 col-sm-12">
                                <strong>No Invoice references</strong>
                                <a class="pull-right"
                                   style="cursor: pointer"
                                   data-bind="click: chosenwo().add_invoice"><strong>Add invoice reference</strong>
                                    <span class="glyphicon glyphicon-plus"></span></a>
                            </div>
                        <!-- /ko -->
                    </div>
                </div>
            </div>
        {% endif %}
        <div class="col-xs-12">
            <div id="wo-obs-toggle"
                 class="collapsable-area-header link-color"
                 style="margin-top: 10px;"
                 data-toggle="collapse" data-target="#wo-obs"
                 aria-expanded="true" aria-controls="wo-obs"
                 onclick="$('#wo-obs-toggle span').toggleClass('glyphicon-menu-down glyphicon-menu-right')">
                <span class="glyphicon glyphicon-menu-down"></span>
                Observations
                <small class="pull-right"
                       data-bind="text: chosenwo().obs().length + ' obs'"></small>
            </div>
            <div class="collapse in" id="wo-obs">
                <!-- ko if: chosenwo().id() && chosenwo().obs().length > 0 -->
                <div class="col-xs-12">
                    <table class="table table-responsive">
                        <tbody>
                        <!-- ko foreach: chosenwo().obs -->
                        {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_SUPER_SUPERVISOR') %}
                            <tr>
                                <td style="width: 95%; border-top: none; border-bottom: 1px dashed #ddd;">
                                    <div>
                                        <div data-bind="text: id != null ? obs.split(':')[0] : '', visible: id != null"
                                             style="font-weight: bold;"></div>
                                    </div>
                                    <div>
                                        <div data-bind="text: id != null ? obs.substr(obs.indexOf(':') + 1) : obs"
                                             style="display: inline-block;"></div>
                                    </div>
                                </td>
                                <td style="width: 5%; border-top: none; border-bottom: 1px dashed #ddd;">
                                    <a class="pull-right" href="#" data-bind="click: remove" style="color: red;">
                                        <span class="glyphicon glyphicon-remove"></span></a>
                                </td>
                            </tr>
                        {% else %}
                            <tr>
                                <td style="border-top: none; border-bottom: 1px dashed #ddd;"
                                    data-bind="style:{width: id == null ? '95%' : ''},
                                               attr:{colspan: id != null ? 2 : ''}">
                                    <div>
                                        <div data-bind="text: id != null ? obs.split(':')[0] : '', visible: id != null"
                                             style="font-weight: bold;"></div>
                                    </div>
                                    <div>
                                        <span class="glyphicon glyphicon-copy" data-bind="visible: id == null"></span>
                                        <p data-bind="text: id != null ? obs.substr(obs.indexOf(':') + 1) : obs"
                                           style="display: inline; text-align: justify; text-justify: inter-word;"></p>
                                    </div>
                                </td>
                                <td style="width: 5%; border-top: none; border-bottom: 1px dashed #ddd;"
                                    data-bind="visible: id == null">
                                    <a class="pull-right" href="#" data-bind="visible: id == null,click: remove" style="color: red;">
                                        <span class="glyphicon glyphicon-remove"></span></a>
                                </td>
                            </tr>
                            {#<div>
                                <span class="glyphicon glyphicon-pushpin"></span>
                                <div data-bind="text: id != null ? obs.split(':')[0] : '', visible: id != null"
                                     style="display: inline; font-weight: bold;"></div>
                                <div data-bind="text: id != null ? obs.substr(obs.indexOf(':')) : obs,
                                                style:{display: id == null ? 'inline' : 'inline-block'}"></div>
                                <div data-bind="visible: id == null" style="display: inline-block;"><a href="#" data-bind="click: remove" style="color: red;">
                                    <span class="glyphicon glyphicon-remove"></span></a>
                                </div>
                            </div>#}
                        {% endif %}
                        <!-- /ko -->
                        </tbody>
                    </table>
                </div>
                <!-- /ko -->
                <div class="col-xs-12" style="padding: 0px;">
                    <div class="input-group">
                        <div class="input-group-addon" style="cursor: pointer" data-bind="click: chosenwo().add_obs"><a href="#"><span class="glyphicon glyphicon-plus"></span></a></div>
                        <textarea class="form-control" rows="4" data-bind="textInput: chosenwo().obs_plus, enterkeypress: chosenwo().add_obs" tabindex="15"></textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-md-7">
        <div class="col-lg-12" style="padding: 20px 0px;" data-bind="with: chosenwo">
            <div id="image_holder" class="col-lg-12 text-center" style="padding-bottom: 10px;">
                <img class="img" width="100px" height="100px" data-bind="attr:{src: picture() != null ? picture : '{{ asset('bundles/vgmwo/images/unknown-wo.png') }}'}"/></div></div>
    </div>
</div>
{#
<div class="row horizaontal-divider"></div>#}
