<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">

    <t t-name='PickingEditorWidget'>

        <div class="modal fade" id="js_LocationChooseModal" tabindex="-1" role="dialog" aria-labelledby="LocationChooseModal" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                        <h4 class="modal-title" id="myModalLabel">Choose a location</h4>
                    </div>
                    <div class="modal-body">
                        <p>Scan a location or select it in the list below</p>
                        <select id="js_loc_select" class="form-control">
                            <option class="js_loc_option" data-loc-id="false"></option>
                            <t t-foreach="widget.get_location()" t-as="loc">
                                <option class="js_loc_option" t-att-data-loc-id="loc.id"><t t-esc="loc.name"/></option>
                            </t>
                        </select>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary js_validate_location">Change Location</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="js_LotChooseModal" tabindex="-1" role="dialog" aria-labelledby="LotChooseModal" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                        <h4 class="modal-title" id="myModalLabel">Create Lot</h4>
                    </div>
                    <div class="modal-body">
                        <p>Scan a lot or type it below (leave empty to generate one automatically)</p>
                        <input class='col-xs-6 js_lot_scan' type='text'/>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary js_validate_lot">Create Lot</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="js_PackConfModal" tabindex="-1" role="dialog" aria-labelledby="PackConfModal" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                        <h4 class="modal-title" id="myModalLabel">Configure package</h4>
                    </div>
                    <div class="modal-body">
                        <p>Package type</p>
                        <select id="js_packconf_select" class="form-control">
                            <option class="js_packing_option" data-ul-id="false"></option>
                            <t t-foreach="widget.get_logisticunit()" t-as="ul">
                                <option class="js_packing_option" t-att-data-ul-id="ul.id" t-att-value="ul.id"><t t-esc="ul.name"/></option>
                            </t>
                        </select>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary js_validate_pack">Validate package</button>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row">
                <div>
                    <div class="col-sm-4 col-xs-6">
                        <h2 class="oe_pick_app_header" />
                    </div>
                    <div class="col-sm-8 col-xs⁻6 text-right">

                    <button type="button" class='btn btn-default js_pick_done'> Create backorder </button>
                    <button type="button" class='btn btn-default js_pick_print'> Print </button>

                    </div>
                </div>
        </div>

        <div class="row">
            <div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                    <h3><strong>
                        <select id="js_select" class="form-control">
                            <option value="ToDo" id="js_select_todo">Operations ToDo</option>
                            <option value="Processed" id="js_select_processed">Operations Processed</option>
                        </select>
                    </strong>
                    </h3>
                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                    <h2>
                        <div class="input-group">
                            <input type="text" class="form-control oe_searchbox" placeholder="Filter by location..."/>
                            <span class="input-group-btn">
                                <button class="btn btn-danger js_clear_search" type="button">x</button>
                            </span>
                        </div>
                    </h2>
                </div>
                <div class="col-md-6 col-sm-4 col-xs-12 text-right">
                    <h3>
                        <button type="button" class='btn btn-default js_pick_pack js_putinpack'> Put in Pack </button>
                        <button type="button" class='btn btn-danger js_drop_down fa fa-download'> Put in Cart </button>
                    </h3>
                </div>
            </div>
        </div>

        <div>
            <table class='table table-condensed js_op_table_todo'>
                <thead>
                    <tr>
                        <th class="text-left">Product</th>
                        <th class='text-center' width="150">Scanned</th>
                        <th class='text-center'>Todo</th>
                        <th>From</th>
                        <th>To</th>
                    </tr>
                </thead>

                <tbody>
                    <t t-foreach="widget.get_rows()" t-as="row">
                        <tr t-att-class="row.classes + 'js_pack_op_line'" t-att-data-id="row.cols.id" t-att-data-container-id="row.cols.container_id" t-att-data-package-id="row.cols.package_id" t-att-data-ulid="row.cols.ul_id">
                            <td t-att-class="'brctbl-col1 text-left' + row.cols.head_container ? ' js_unfold' : ''">
                                <t t-if="!row.cols.head_container &amp;&amp; row.cols.container"><span class="fa fa-level-up fa-rotate-90" style="margin-left:10px;margin-right:10px;"></span></t>
                                <t t-esc="row.cols.product" />
                            </td>
                            <td class='brctbl-col2 text-center js_row_qty'>
                                <t t-if="row.cols.processed == 'false' &amp;&amp; !row.cols.container">
                                    <div class="input-group">
                                        <span class="input-group-addon js_minus input-sm" t-att-data-product-id='row.cols.product_id'><a href="#"><i class="fa fa-minus"></i></a></span>
                                        <form class="js_submit_value">
                                            <input type="text" class="form-control text-center js_qty" t-att-value="row.cols.rem"></input>
                                            <!-- <input type="submit" class="hidden"></input> -->
                                        </form>
                                        <span class="input-group-addon js_plus input-sm" t-att-data-product-id='row.cols.product_id'><a href="#"><i class="fa fa-plus"></i></a></span>
                                    </div>
                                </t>
                                <t t-if="(row.cols.processed == 'true' || row.cols.container)">
                                    <t t-esc="row.cols.rem" />
                                </t>
                            </td>
                            <td class="brctbl-col3 text-center">
                                <t t-esc="row.cols.qty"/> <t t-esc="row.cols.uom" />
                            </td>
                            <td class="brctbl-col4 js_loc">
                                <t t-esc="row.cols.loc" />
                                <t t-if="row.cols.pack" ><span> : <t t-esc="row.cols.pack" /></span></t>
                                <t t-if="row.cols.lot" ><span> : <t t-esc="row.cols.lot" /></span></t>
                            </td>
                            <td class="brctbl-col5 js_loc"> <t t-esc="row.cols.dest" />
                                <div class="pull-right btn-group">
                                    <button type="button" class="btn btn-default dropdown-toggle fa fa-cog" data-toggle="dropdown">
                                     <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu" role="menu">
                                        <t t-if="row.cols.product_id">
                                            <li><a class="js_create_lot" href="#">Create &#47; Change Lot</a></li>
                                        </t>
                                        <t t-if="!row.cols.head_container &amp;&amp; !row.cols.container">
                                            <li><a class="js_change_src" href="#">Change source location</a></li>
                                            <li><a class="js_change_dst" href="#">Change destination location</a></li>
                                        </t>
                                        <t t-if="row.cols.head_container">
                                            <li><a class="js_pack_change_dst" href="#">Change destination location</a></li>
                                            <li class="divider"></li>
                                            <li><a class="js_pack_configure" href="#">Configure package</a></li>
                                            <li><a class="js_delete_pack" href="#">Remove from package</a></li>
                                            <li><a class="js_print_pack" href="#">Print package label</a></li>
                                        </t>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                    </t>
                </tbody>
            </table>
        </div>
    </t>

    <t t-name="PickingSearchResults">
        <div class="panel-heading">
            <h3 class="panel-title">Search Results</h3>
        </div>
        <div class="panel-body">
            <t t-if="results.length === 0">
                <strong>No picking found.</strong>
            </t>
            <t t-if="results.length > 0">
                <t t-foreach="results" t-as="picking">
                    <div class="col-lg-3 col-md-4">
                        <div class="panel panel-default oe_picking" t-att-data-id="picking.id">
                            <div class="panel-body">
                                <strong class='oe_picking_name'><t t-esc="picking.name" /></strong>
                            </div>
                        </div>
                    </div>
                </t>
            </t>
        </div>
    </t>

    <t t-name="PickingMenuWidget">
        <div class="navbar navbar-inverse navbar-static-top" role="navigation">
            <div class="container">
                <div class="navbar-header navbar-form navbar-left">
                    <input type='text' class="oe_searchbox form-control pull-left" placeholder='Search'/>
                </div>
                <div class="navbar-header navbar-form navbar-right">
                    <button type="button" class="btn btn-danger js_pick_quit pull-right">Quit</button>
                </div>

            </div>
        </div>
        <div class="container">

            <h1 class="js_title_label">Select your operation</h1>
            <div class='js_picking_not_found alert alert-warning hidden'>
                Scanned picking could not be found
            </div>

            <div class='js_picking_search_results panel panel-info hidden'>
            </div>

            <div class="row js_picking_categories">
                <t t-foreach="widget.picking_types" t-as="type">
                    <div class="col-lg-3 col-md-4">
                        <div t-att-class="'oe_kanban oe_picking oe_kanban_color_' + type.color + ' ' + (widget.pickings_by_type[type.id].length === 0 ? 'oe_empty':'js_pick_last') "
                                         t-att-data-id="type.id">
                            <t t-if="type.code == 'incoming'" ><span class="fa fa-sign-in fa-2x"></span></t>
                            <t t-if="type.code == 'outgoing'" ><span class="fa fa-truck fa-2x fa-flip-horizontal"></span></t>
                            <t t-if="type.code == 'internal'" ><span class="fa fa-retweet fa-2x"></span></t>
                            <strong><span><t t-esc="type.complete_name"/></span></strong>
                            <div><t t-if="widget.pickings_by_type[type.id].length > 0">
                                <span class='badge'><t t-esc="widget.pickings_by_type[type.id].length" /> picking(s) </span>
                            </t></div>
                        </div>
                    </div>
                </t>
            </div>
        </div>
    </t>


    <t t-name="PickingMainWidget">
        <div class="navbar navbar-inverse navbar-static-top" role="navigation">
            <div class="container">
                <div class="navbar-left">
                    <button type="button" class="btn btn-primary navbar-btn js_pick_menu">Menu</button>
                </div>
                <div class="navbar-right">
                    <button type="button" class="btn btn-default navbar-btn js_pick_prev">&lt; Previous</button>
                    <button type="button" class="btn btn-default navbar-btn js_pick_next">Next &gt;</button>
                </div>
            </div>
        </div>

        <div class="container">
            <div class='oe_placeholder_picking_editor'/>
            <div class="text-right small oe_reload_op">
                The reserved stock changed. You might want to <button class="btn btn-default js_reload_op"> Recompute </button> the operations.
            </div>
        </div>
    </t>

</templates>
