<div id="work_orders_details"
     class="container"
     data-bind="visible: chosenwo() != null">
    <div class="col-lg-12"
         style="padding: 0; margin-top: -20px;">
        <div class="col-lg-12 container-fluid text-right">
            <a class="btn btn-lg"
               style="cursor: pointer;"
               title="Back to the list"
               data-bind="click: unchoseworkorder">
                <span class="glyphicon glyphicon-circle-arrow-left"></span>
            </a>
            <div class="dropdown pull-right">
                <a data-toggle="dropdown" href="#"
                   class="btn btn-lg"
                   style="cursor: pointer;"
                   title="Export Work Order">
                    <span class="glyphicon glyphicon-share"></span>
                </a>
                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                    <li>
                        <a data-bind="click: export_chosen_workorder2xls"
                           title="Export labors to xls" href="#">
                            To xls
                        </a>
                    </li>
                    {#<li>
                        <a style="cursor: pointer;">
                            To pdf
                        </a>
                    </li>#}
                </ul>
            </div>
        </div>
    </div>
    <div class="form-group container-fluid col-lg-12"
         data-bind="with: chosenwo"
         style="padding-left: 0px; padding-right: 0px;">
        <div>
            <div class="col-md-5" style="padding: 0px;">
                <div class="col-md-3">
                    <strong>Supervisor: </strong>
                </div>
                <div class="col-md-9">
                    <p data-bind="text: supervisor ? supervisor.name : '- - -'" class="text-muted"></p>
                </div>
                <div class="col-md-3">
                    <strong>Equipment: </strong>
                </div>
                <div class="col-md-9">
                    <p data-bind="text: equipment ? equipment.equipment : '- - -'" class="text-muted"></p>
                </div>
                <div class="col-md-3">
                    <strong>Created: </strong>
                </div>
                <div class="col-md-9">
                    <p data-bind="text: created" class="text-muted"></p>
                </div>
                <div class="col-md-3">
                    <strong>Started: </strong>
                </div>
                <div class="col-md-9">
                    <p data-bind="text: started != null && started != '' ? started : '- / - / -'"
                       class="text-muted"></p>
                </div>
                <div class="col-md-3">
                    <strong>Delivery date: </strong>
                </div>
                <div class="col-md-9">
                    <p data-bind="text: delivery_date ? delivery_date : '- / - / -'" class="text-muted"></p>
                </div>
                <div class="col-md-3">
                    <strong>Sale type: </strong>
                </div>
                <div class="col-md-9">
                    <p data-bind="text: sale_type ? sale_type : '- - -'" class="text-muted"></p>
                </div>
                <div class="col-md-3">
                    <strong>Work type: </strong>
                </div>
                <div class="col-md-9">
                    <p data-bind="text: work_type ? work_type : '- - -'" class="text-muted"></p>
                </div>
                <div class="col-md-3">
                    <strong>Client: </strong>
                </div>
                <div class="col-md-9">
                    <p data-bind="text: client ? client.name : '- - -'" class="text-muted"></p>
                </div>
                <div class="col-md-3">
                    <strong>Obs: </strong>
                </div>
                <div class="col-md-9">
                    <p data-bind="text: obs ? obs : '- - -'" class="text-muted"></p>
                </div>
                <div class="col-md-3">
                    <strong>Time cost: </strong>
                </div>
                <div class="col-md-9">
                    <p data-bind="text: totalTime"></p>
                </div>
                <div class="col-md-3">
                    <strong>Work cost: </strong>
                </div>
                <div class="col-md-9">
                    <p data-bind="text: totalCost"></p>
                </div>
            </div>
            <div class="col-md-2"  style="padding: 0px;">
                <div class="col-md-12">
                    <strong>Stocks (</strong>
                    <p style="display: inline;" data-bind="text: stock_qty" class="text-muted"></p>
                    <strong>)</strong>
                </div>
                <div class="col-md-12" data-bind="foreach: stocks">
                    <div style="padding-left: 20px;">
                        <a style="cursor:pointer;" data-bind="click: showme">
                            <strong data-bind="text: stock ? stock : 'N/S'"></strong>
                            <span class="glyphicon glyphicon-zoom-in"></span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-md-5 text-center"  style="padding: 0px;">
                <img class="img-responsive"
                     data-bind="attr:{src: picture}"
                     height="300px;" width="300px;"
                     style="margin:0 auto;">
            </div>
        </div>
        <div id="shifts">
            <div class="col-lg-12"
                 style="padding: 0;">
                <div data-bind="with: filter_shift_asn(),
                                                    visible: filter_shift_asn().asn()"
                     style="display: inline">
                    WO-No:
                    <strong class="text-muted"
                            data-bind="text: asn"></strong>
                                        <span class="glyphicon glyphicon-remove-circle"
                                              style="cursor: pointer"
                                              data-bind="click: setBLANK"></span>
                </div>
                <div data-bind="with: filter_shift_dep(),
                                                    visible: filter_shift_dep().department() != null"
                     style="display: inline">
                    Department:
                    <strong class="text-muted"
                            data-bind="text: name()"></strong>
                                        <span class="glyphicon glyphicon-remove-circle"
                                              style="cursor: pointer"
                                              data-bind="click: setBLANK"></span>
                </div>
                <div data-bind="with: filter_shift_worker(),
                                                visible: filter_shift_worker().worker()"
                     style="display: inline">
                    Employee:
                    <strong class="text-muted"
                            data-bind="text: worker()"></strong>
                                        <span class="glyphicon glyphicon-remove-circle"
                                              style="cursor: pointer"
                                              data-bind="click: setBLANK"></span>
                </div>
                <div data-bind="with: filter_shift_area(),
                                                visible: filter_shift_area().area()"
                     style="display: inline">
                    Area:
                    <strong class="text-muted"
                            data-bind="text: area()"></strong>
                                        <span class="glyphicon glyphicon-remove-circle"
                                              style="cursor: pointer"
                                              data-bind="click: setBLANK"></span>
                </div>
                <div data-bind="with: filter_shift_description(),
                                                visible: filter_shift_description().description()"
                     style="display: inline">
                    Work:
                    <strong class="text-muted"
                            data-bind="text: description()"></strong>
                                        <span class="glyphicon glyphicon-remove-circle"
                                              style="cursor: pointer"
                                              data-bind="click: setBLANK"></span>
                </div>
                <div data-bind="with: filter_shift_date(),
                                            visible: filter_shift_date().sdate()"
                     style="display: inline; width: auto;">
                    Date:
                    <strong class="text-muted"
                            data-bind="text: sdate"></strong>
                    <strong class="text-muted"
                            data-bind="visible: edate() != null,
                                                   text: ' - '"></strong>
                    <strong class="text-muted"
                            data-bind="visible: edate() != null,
                                                   text: edate"></strong>
                                <span class="glyphicon glyphicon-remove-circle"
                                      style="cursor: pointer"
                                      data-bind="click: setBLANK"></span>
                </div>
            </div>
            <div class="table-responsive col-lg-12">
                <table class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <!--Work Order - No column -->
                            <th class="col-lg-1 text-center">
                                <div data-bind="visible: filter_shift_asn().editable() == 0">
                                    WO - No
                                    <div style="display: inline"
                                         data-bind="with: filter_shift_asn">
                                        <a id="filtermenu_shift_asn"
                                           style="padding: 0px; cursor: pointer"
                                           title="Apply sort"
                                           data-bind="click: activate_asn">
                                            <span class="glyphicon glyphicon-filter"></span>
                                        </a>
                                    </div>
                                    <div class="dropdown"
                                         style="display: inline"
                                         data-bind="with: sorter_shift_asn">
                                        <a id="sortermenu_shift_asn"
                                           style="padding: 0px; cursor: pointer"
                                           title="Sort"
                                           data-toggle="dropdown"
                                           aria-expanded="true">
                                                                                <span
                                                                                        data-bind="attr:{class: sort() == '' ?
                                                                                    'glyphicon glyphicon-sort' :
                                                                                    sort() == 'ASC' ?
                                                                                    'glyphicon glyphicon-sort-by-attributes' :
                                                                                    'glyphicon glyphicon-sort-by-attributes-alt'}"></span>
                                        </a>
                                        <ul class="dropdown-menu" role="menu"
                                            aria-labelledby="sortermenu_shift_asn" style="min-width: 10px;">
                                            <li role="presentation">
                                                <a role="menuitem"
                                                   tabindex="-1"
                                                   style="padding: 0 5px; cursor: pointer"
                                                   data-bind="click: setASC">
                                                    <span class="glyphicon glyphicon-sort-by-attributes"></span> ASC
                                                </a>
                                            </li>
                                            <li role="presentation">
                                                <a role="menuitem"
                                                   tabindex="-1"
                                                   style="padding: 0 5px; cursor: pointer"
                                                   data-bind="click: setDESC">
                                                    <span class="glyphicon glyphicon-sort-by-attributes-alt"></span> DESC
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div data-bind="visible: filter_shift_asn().editable() == 1">
                                    <input data-bind="value: filter_shift_asn().asn"
                                           class="form-control for-desktop"/>
                                </div>
                            </th>
                            <!-- Department column -->
                            <th class="col-lg-2">
                                <div data-bind="visible: filter_shift_dep().editable() == 0">
                                    Department
                                    <div style="display: inline"
                                         data-bind="with: filter_shift_dep">
                                        <a id="filtermenu_department"
                                           style="padding: 0px; cursor: pointer"
                                           title="Apply sort"
                                           data-bind="click: activate_department">
                                            <span class="glyphicon glyphicon-filter"></span>
                                        </a>
                                    </div>
                                    <div class="dropdown"
                                         style="display: inline"
                                         data-bind="with: sorter_shift_dep">
                                        <a id="sortermenu_department"
                                           style="padding: 0px; cursor: pointer"
                                           title="Sort"
                                           data-toggle="dropdown"
                                           aria-expanded="true">
                                                                                                            <span data-bind="attr:{class: sort() == '' ?
                                                                                                                'glyphicon glyphicon-sort' :
                                                                                                                sort() == 'ASC' ?
                                                                                                                'glyphicon glyphicon-sort-by-attributes' :
                                                                                                                'glyphicon glyphicon-sort-by-attributes-alt'}"></span>
                                        </a>
                                        <ul class="dropdown-menu" role="menu"
                                            aria-labelledby="sortermenu_department"
                                            style="min-width: 10px;">
                                            <li role="presentation">
                                                <a role="menuitem"
                                                   tabindex="-1"
                                                   style="padding: 0 5px; cursor: pointer"
                                                   data-bind="click: setASC">
                                                    <span class="glyphicon glyphicon-sort-by-attributes"></span> ASC
                                                </a>
                                            </li>
                                            <li role="presentation">
                                                <a role="menuitem"
                                                   tabindex="-1"
                                                   style="padding: 0 5px; cursor: pointer"
                                                   data-bind="click: setDESC">
                                                    <span class="glyphicon glyphicon-sort-by-attributes-alt"></span> DESC
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div data-bind="visible: filter_shift_dep().editable() == 1">
                                    <select class="form-control for-desktop"
                                            style="font-weight: normal"
                                            tabindex="1"
                                            id="department_select"
                                            data-bind="options: $root.departments,
                                                       optionsCaption: 'Department',
                                                       optionsText: 'name',
                                                       value: filter_shift_dep().department">
                                    </select>
                                </div>
                            </th>
                            <!-- Employee column -->
                            <th class="col-lg-3">
                                <div data-bind="visible: filter_shift_worker().editable() == 0">
                                    Employee
                                    <div style="display: inline"
                                         data-bind="with: filter_shift_worker">
                                        <a id="filtermenu_wo"
                                           style="padding: 0px; cursor: pointer"
                                           title="Apply sort"
                                           data-bind="click: activate_worker">
                                            <span class="glyphicon glyphicon-filter"></span>
                                        </a>
                                    </div>
                                    <div class="dropdown"
                                         style="display: inline"
                                         data-bind="with: sorter_shift_worker">
                                        <a id="sortermenu_wo"
                                           style="padding: 0px; cursor: pointer"
                                           title="Sort"
                                           data-toggle="dropdown"
                                           aria-expanded="true">
                                                                                                                            <span data-bind="attr:{class: sort() == '' ? 'glyphicon glyphicon-sort' :
                                                                                                                                                          sort() == 'ASC' ?
                                                                                                                                                          'glyphicon glyphicon-sort-by-attributes' :
                                                                                                                                                          'glyphicon glyphicon-sort-by-attributes-alt'}"></span>
                                        </a>
                                        <ul class="dropdown-menu" role="menu" aria-labelledby="sortermenu_shift_description" style="min-width: 10px;">
                                            <li role="presentation">
                                                <a role="menuitem"
                                                   tabindex="-1"
                                                   style="padding: 0 5px; cursor: pointer"
                                                   data-bind="click: setASC">
                                                    <span class="glyphicon glyphicon-sort-by-attributes"></span> ASC
                                                </a>
                                            </li>
                                            <li role="presentation">
                                                <a role="menuitem"
                                                   tabindex="-1"
                                                   style="padding: 0 5px; cursor: pointer"
                                                   data-bind="click: setDESC">
                                                    <span class="glyphicon glyphicon-sort-by-attributes-alt"></span> DESC
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div data-bind="visible: filter_shift_worker().editable() == 1">
                                    <input data-bind="value: filter_shift_worker().worker"
                                           class="form-control for-desktop"/>
                                </div>
                            </th>
                            <!-- Area column -->
                            <th class="col-lg-2">
                                <div data-bind="visible: filter_shift_asn().editable() == 0">
                                    Area
                                    <div style="display: inline"
                                         data-bind="with: filter_shift_area">
                                        <a id="filtermenu_shift_area"
                                           style="padding: 0px; cursor: pointer"
                                           title="Apply sort"
                                           data-bind="click: activate_area">
                                            <span class="glyphicon glyphicon-filter"></span>
                                        </a>
                                    </div>
                                    <div class="dropdown"
                                         style="display: inline"
                                         data-bind="with: sorter_shift_area">
                                        <a id="sortermenu_shift_area"
                                           style="padding: 0px; cursor: pointer"
                                           title="Sort"
                                           data-toggle="dropdown"
                                           aria-expanded="true">
                                                                                <span
                                                                                        data-bind="attr:{class: sort() == '' ?
                                                                                    'glyphicon glyphicon-sort' :
                                                                                    sort() == 'ASC' ?
                                                                                    'glyphicon glyphicon-sort-by-attributes' :
                                                                                    'glyphicon glyphicon-sort-by-attributes-alt'}"></span>
                                        </a>
                                        <ul class="dropdown-menu" role="menu"
                                            aria-labelledby="sortermenu_shift_area" style="min-width: 10px;">
                                            <li role="presentation">
                                                <a role="menuitem"
                                                   tabindex="-1"
                                                   style="padding: 0 5px; cursor: pointer"
                                                   data-bind="click: setASC">
                                                    <span class="glyphicon glyphicon-sort-by-attributes"></span> ASC
                                                </a>
                                            </li>
                                            <li role="presentation">
                                                <a role="menuitem"
                                                   tabindex="-1"
                                                   style="padding: 0 5px; cursor: pointer"
                                                   data-bind="click: setDESC">
                                                    <span class="glyphicon glyphicon-sort-by-attributes-alt"></span> DESC
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div data-bind="visible: filter_shift_area().editable() == 1">
                                    <input data-bind="value: filter_shift_area().area"
                                           class="form-control for-desktop"/>
                                </div>
                            </th>
                            <!-- Work column -->
                            <th class="col-md-3">
                                <div data-bind="visible: filter_shift_description().editable() == 0">
                                    Work
                                    <div style="display: inline"
                                         data-bind="with: filter_shift_description">
                                        <a id="filtermenu_shift_description"
                                           style="padding: 0px; cursor: pointer"
                                           title="Apply sort"
                                           data-bind="click: activate_description">
                                            <span class="glyphicon glyphicon-filter"></span>
                                        </a>
                                    </div>
                                    <div class="dropdown"
                                         style="display: inline"
                                         data-bind="with: sorter_shift_description">
                                        <a id="sortermenu_shift_description"
                                           style="padding: 0px; cursor: pointer"
                                           title="Sort"
                                           data-toggle="dropdown"
                                           aria-expanded="true">
                                                                                                                            <span data-bind="attr:{class: sort() == '' ? 'glyphicon glyphicon-sort' :
                                                                                                                                                          sort() == 'ASC' ?
                                                                                                                                                          'glyphicon glyphicon-sort-by-attributes' :
                                                                                                                                                          'glyphicon glyphicon-sort-by-attributes-alt'}"></span>
                                        </a>
                                        <ul class="dropdown-menu" role="menu" aria-labelledby="sortermenu_shift_description" style="min-width: 10px;">
                                            <li role="presentation">
                                                <a role="menuitem"
                                                   tabindex="-1"
                                                   style="padding: 0 5px; cursor: pointer"
                                                   data-bind="click: setASC">
                                                    <span class="glyphicon glyphicon-sort-by-attributes"></span> ASC
                                                </a>
                                            </li>
                                            <li role="presentation">
                                                <a role="menuitem"
                                                   tabindex="-1"
                                                   style="padding: 0 5px; cursor: pointer"
                                                   data-bind="click: setDESC">
                                                    <span class="glyphicon glyphicon-sort-by-attributes-alt"></span> DESC
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div data-bind="visible: filter_shift_description().editable() == 1">
                                    <input data-bind="value: filter_shift_description().description"
                                           class="form-control for-desktop"/>
                                </div>
                            </th>
                            <!-- Date column -->
                            <th class="col-lg-1">
                                <div data-bind="visible: filter_shift_date().editable() == 0">
                                    Date
                                    <div class="dropdown"
                                         style="display: inline"
                                         data-bind="with: filter_shift_date">
                                        <a id="filtermenu_shift_date"
                                           style="padding: 0px; cursor: pointer"
                                           title="Apply sort"
                                           data-toggle="dropdown"
                                           aria-expanded="true">
                                            <span class="glyphicon glyphicon-filter"></span>
                                        </a>
                                        <ul class="dropdown-menu" role="menu" aria-labelledby="filtermenu_shift_date" style="min-width: 10px;">
                                            <li role="presentation">
                                                <a role="menuitem"
                                                   tabindex="-1"
                                                   style="padding: 0 5px; cursor: pointer"
                                                   data-bind="click: activate_date">
                                                    <span class="glyphicon glyphicon-calendar"></span> Date
                                                </a>
                                            </li>
                                            <li role="presentation">
                                                <a role="menuitem"
                                                   tabindex="-1"
                                                   style="padding: 0 5px; cursor: pointer"
                                                   data-bind="click: activate_range">
                                                    <span class="glyphicon glyphicon-link"></span> Date range
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="dropdown"
                                         style="display: inline"
                                         data-bind="with: sorter_shift_date">
                                        <a id="sortermenu_shift_date"
                                           style="padding: 0px; cursor: pointer"
                                           title="Sort"
                                           data-toggle="dropdown"
                                           aria-expanded="true">
                                                                                                                            <span data-bind="attr:{class: sort() == '' ? 'glyphicon glyphicon-sort' :
                                                                                                                                                          sort() == 'ASC' ?
                                                                                                                                                          'glyphicon glyphicon-sort-by-attributes' :
                                                                                                                                                          'glyphicon glyphicon-sort-by-attributes-alt'}"></span>
                                        </a>
                                        <ul class="dropdown-menu" role="menu"
                                            aria-labelledby="sortermenu_shift_date" style="min-width: 10px;">
                                            <li role="presentation">
                                                <a role="menuitem"
                                                   tabindex="-1"
                                                   style="padding: 0 5px; cursor: pointer"
                                                   data-bind="click: setASC">
                                                    <span class="glyphicon glyphicon-sort-by-attributes"></span> ASC
                                                </a>
                                            </li>
                                            <li role="presentation">
                                                <a role="menuitem"
                                                   tabindex="-1"
                                                   style="padding: 0 5px; cursor: pointer"
                                                   data-bind="click: setDESC">
                                                    <span class="glyphicon glyphicon-sort-by-attributes-alt"></span> DES
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div data-bind="visible: filter_shift_date().editable() == 1">
                                    <input id="filter_shift_date_sdate"
                                           data-bind="value: filter_shift_date().sdate"
                                           data-date = ""
                                           data-date-format="mm/dd/yyyy"
                                           data-link-field="filter_shift_date_sdate"
                                           data-link-format="mm/dd/yyyy"
                                           class="form-control for-desktop datepicker"/>
                                </div>
                                <div data-bind="visible: filter_shift_date().editable() == 2">
                                    <input id="filter_shift_created_sdate1"
                                           data-bind="value: filter_shift_date().sdate"
                                           data-date = ""
                                           data-date-format="mm/dd/yyyy"
                                           data-link-field="filter_shift_date_sdate1"
                                           data-link-format="mm/dd/yyyy"
                                           class="form-control for-desktop datepicker"/>
                                    <input id="filter_shift_created_edate1"
                                           data-bind="value: filter_shift_date().edate"
                                           data-date = ""
                                           data-date-format="mm/dd/yyyy"
                                           data-link-field="filter_shift_date_edate1"
                                           data-link-format="mm/dd/yyyy"
                                           class="form-control for-desktop datepicker"/>
                                </div>
                            </th>
                            <!-- Satrts column -->
                            <th>Starts</th>
                            <!-- Ends column -->
                            <th>Ends</th>
                            <!-- Time Quantity column -->
                            <th>Time</th>
                            <!-- Cost column -->
                            <th>Cost</th>
                        </tr>
                    </thead>
                    <tbody data-bind="foreach: shifts">
                        <tr>
                            <td class="text-center" data-bind="text: assigned_stock_no ?
                                                                             $parent.wo_number + ' - ' + assigned_stock_no :
                                                                             $parent.wo_number"/>
                            <td class="inter-td" data-bind="text: department"/>
                            <td class="inter-td" data-bind="text: worker"/>
                            <td class="inter-td" data-bind="text: area"/>
                            <td class="inter-td" data-bind="text: description"/>
                            <td class="inter-td" data-bind="text: date"/>
                            <td class="inter-td text-center" data-bind="text: starts"/>
                            <td class="inter-td text-center" data-bind="text: ends"/>
                            <td class="inter-td text-center" data-bind="text: formatedTime"/>
                            <td class="inter-td text-center" data-bind="text: formatedCost"/>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>