<style>
    /* enable absolute positioning */
    .inner-addon { 
        position: relative; 
    }

    /* style icon */
    .inner-addon .glyphicon {
        position: absolute;
        padding: 10px;
        pointer-events: none;
    }

    /* align icon */
    .left-addon .glyphicon  { left:  0px;}
    .right-addon .glyphicon { right: 0px;}

    /* add padding  */
    .left-addon input  { padding-left:  30px; }
    .right-addon input { padding-right: 30px; }

    .loader {
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        z-index: 9999;
        background: url('<?php echo base_url(); ?>assets/images/page-loader-1.gif') 50% 50% no-repeat ;
        display: none;
    }
    tr.strikethrough > td {text-decoration:line-through !important; color:red;} 
</style>
<div class="wrapper">
    <div class="container">
        <!-- Page-Title -->
        <div class="row">
            <div class="col-sm-12">
                <div class="btn-group pull-right m-t-15">
                    <button type="button" data-toggle="modal" data-target="#addworkorderitem" class="btn btn-custom waves-effect waves-light" >Add Item <span class="m-l-5"><i class="fa fa-plus"></i></span></button>
                </div>
                <h4 class="page-title">Work Order Number : <?php echo $idworkorder;?> </h4>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="card-box ">                   
                    <div class="row">
                        <div class="col-lg-12">
                            <table class="table table-responsive">
                                <thead>
                                    <tr>
                                        <th>Item No.</th>
                                        <th>Description.</th>
                                        <th>Price</th>
                                        <th>Qty</th>
                                        <th>Unit Type</th>
                                        <th>Discount</th>
                                        <th>Tax%</th>
                                        <th>Final Price</th>

                                    </tr>
                                </thead>
                                <tbody>
                                    <?php foreach($workorder_items as $item){?>                                        
                                        <tr>
                                            <td><?php echo $item['item_no'];?></td>
                                            <td><?php echo $item['item_desc'];?></td>
                                            <td><?php echo $item['item_price'];?></td>
                                            <td><?php echo $item['item_qty'];?></td>
                                            <td><?php echo $item['item_measure_unit'];?></td>
                                            <td><?php echo $item['item_discount'];?></td>
                                            <td><?php echo $item['item_tax'];?></td>
                                            <td><?php echo $item['item_final_price'];?></td>
                                            <td>                                              
                                                <button onclick="open_rawmaterialmodal(<?php echo $item['id_workorder_items'];?>)" class="btn btn-success">Raw Material</button>
                                                <button onclick="remove_item(<?php echo $item['id_workorder_items'];?>)" class="btn btn-danger"><i class="fa fa-trash"></i></button>
                                            </td>
                                        </tr>                                        
                                    <?php } ?>
                                </tbody>
                                <tfoot></tfoot>
                            </table>
                        </div>
                </div>
            </div>
        </div>


    </div>

     <!--add item modal-->
     <div id="addworkorderitem" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="addworkorderitem" aria-hidden="true" style="display: none;">
            <div class="modal-dialog modal-md">
                <div class="modal-content">
                    <form action="<?php echo base_url();?>workorder_controller/add_workorder_item" method="post">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                            <h4 class="modal-title" id="custom-width-modalLabel">Add Workorder Item: <span id="addworkorder"></span></h4>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-md-12 form-group">
                                    <label class="form-label">Item</label>
                                    <input type="hidden" id="workorder_id" name="workorder_id" class="form-control" value="<?php echo $idworkorder;?>"> 
                                   <input id="itemdescription" name="item_desc" class="form-control">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12 form-group">
                                    <label class="form-label">Price</label>
                                   <input id="itemprice" name="item_price" onkeyup="if(this.value<0){this.value='0';}" class="form-control" type="number" value="0">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12 form-group">
                                    <label class="form-label">Qty</label>
                                   <input id="itemqty" name="item_qty" onkeyup="if(this.value<0){this.value='0';}" class="form-control" type="number" value="0">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12 form-group">
                                    <label class="form-label">Discount</label>
                                   <input id="itemdiscount" name="item_discount"  onkeyup="if(this.value<0){this.value='0';}" class="form-control" type="number" value="0">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12 form-group">
                                    <label class="form-label">Measure</label>
                                   <select id="itemmeasure" name="item_measure_unit" class="form-control">
                                   <option value="Piece">Piece</option>
                                        <?php foreach($measure_units as $mu){?> 

                                            <option value="<?php echo $mu['m_unit'];?>"><?php echo $mu['m_unit'];?></option>
                                            
                                        <?php } ?>
                                   </select>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12 form-group">
                                    <label class="form-label">Tax %</label>
                                   <input id="itemtax" name="item_tax" onkeyup="if(this.value>100){this.value='100';} if(this.value<0){this.value='0';}" class="form-control" type="number" min="0" max="100" value="0">
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-custom waves-effect waves-light">Save</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!--product search modal-->
        <div id="rawmaterialmodal" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="rawmaterialmodal" aria-hidden="true" style="display: none;">
            <div class="modal-dialog modal-md">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title" id="custom-width-modalLabel">Dispatch Raw Material: <span id="addworkorder"></span></h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">                        
                            <div class="col-md-12">
                                <div class="form-group">
                                    <input id="item_id" name="item_id" type="hidden">
                                    <label for="product" class="control-label">Raw Material Product</label>
                                    <input id="product" name="product" class="form-control" >                                       
                                </div> 
                            </div>                         
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <button style="float:right" onclick="addOrderRows();" type="button" class="btn btn-sm btn-purple waves-effect ">Add Product <i class="ti ti-arrow-circle-down"></i></button>
                            </div>
                        </div>
                        <div class='row' style="min-height: 150px;">
                            <div id='dispatch-product-list' class='col-md-12'>
                                <div class="table-responsive">
                                    <table class="table" id="ordertbl">
                                        <thead>
                                            <tr>
                                                <th style="display:none;">Customer ID</th>
                                                <th>#</th>
                                                <th>Brand</th>
                                                <th>Product</th>
                                                <th class="text-custom">Unit Price</th>
                                                <th class="text-custom">Qty</th>
                                                <th>Remove</th>
                                            </tr>
                                        </thead>
                                        <tbody>

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                         <div class="row">
                            <div class="col-md-12">
                            <button style="float:right" onclick="savedispatch();" type="button" class="btn btn-md btn-warning waves-effect ">Add Dispatch</button>
                            </div>
                         </div>                   
                    </div>
                </div>
            </div>
        </div>


<script>

    $("document").ready(function(){

        $("#product").select2({
            dropdownAutoWidth:true,
                ajax: {
                url: '<?php echo base_url().'dispatch_controller/searchproduct'; ?>',
                dataType: 'json',
                quietMillis: 1000,
                data: function (term, page) {
                    
                    return {
                        productname: term, // search term
                        page_limit: 30, // page size
                        page: page
                    };
                },
                results: function (data, page) {
                    // console.log(data);
                        var more = (page * 30) < data.length;
                        return {results: data, more: more};
                    }
                },
                escapeMarkup: function (m) { return m; }, // let our custom formatter work
                minimumInputLength: 4,
                formatResult: function (option) {
                    var type='Retail';
                    if (option.professional=="y"){type = 'Pro';}
                    return option.business_brand_name + ' - ' + option.product+ ' - ' + option.qty_per_unit + ' ' + option.measure_unit + ' - ' + option.mcategory + ' - Barcode: ' + option.barcode_products;
                },
                formatSelection: function (option) {
                    var type='Retail';
                    if (option.professional=="y"){type = 'Pro';}
                    return option.business_brand_name + ' - ' + option.product+ ' - ' + option.qty_per_unit + ' ' + option.measure_unit + ' - ' + option.mcategory + ' - Barcode: ' + option.barcode_products;
                }
        });

    });

    function open_rawmaterialmodal($id){

        $("#item_id").val($id);

        $("#rawmaterialmodal").modal("show");

    }

    function addOrderRows() {

        var mhtml = "";
        var exists;
        var count = 1;

        var my_product =  $("#product").select2('data');
        //console.log(my_product);
        $('#dispatch-product-list').find("td.id").each(function(index) {
            if ($(this).html() ==  my_product.id_business_products) {
                exists = 1;
                swal({
                    title: "Product already added!",
                    text: 'If you want to change this product, please remove and add again.',
                    type: "info",
                    confirmButtonText: 'OK!'
                });
                return false;
            }
        });
        
        mhtml += '<tr>';
        mhtml += '<td style="display:none;">' + my_product.brand_id + '</td>';
        mhtml += "<td class='id'>" + my_product.id_business_products + "</td>";
        mhtml += "<td>" + my_product.business_brand_name + "</td>";
        mhtml += "<td>" + my_product.product + "</td>";
        mhtml += "<td class='text-primary'><abbr title='Edit'><input type='number' style='border:none; width:60px' id = 'product_price' name = 'product_price' value = " + my_product.purchase_price + " /></abbr></td>";
        mhtml += "<td class='text-primary'><abbr title='Edit'><input type='number' style='border:none; width:50px' value = '1'  id='product_qty' name='product_qty' ></abbr></td>";
        mhtml += "<td style='display:none;'>" + $("#supplier option:selected").val() + "</td>";
        mhtml += "<td style='display:none;'>" + $("#supplier option:selected").text() + "</td>";
        mhtml += "<td style='display:none;'>" + $("#orderdate").val() + "</td>";
        mhtml += '<td style="display:none;">' + $("#businessid option:selected").val() + '</td>';
        mhtml += '<td><span class="label label-danger" onclick="removeproduct(' + my_product.id_business_products+ ')" style="cursor:pointer">x</span></td>';
        
        mhtml += "</tr>";
        //}
        if (exists != 1) {
            $("#dispatch-product-list tbody").append(mhtml);
        } 
    }

    function removeproduct(val) {
        $('#dispatch-product-list').find("td.id").each(function(index) {
            if ($(this).html() == val) {
                $(this).closest('tr').remove();
            }
        });
    }
</script>