<style type="text/css">
  td.details-control {
    background: url('https://datatables.net/examples/resources/details_open.png') no-repeat center center;
    cursor: pointer;
    width: 20px;
    height: 20px;
}
tr.shown td.details-control {
    background: url('https://datatables.net/examples/resources/details_close.png') no-repeat center center;
      width: 20px;
    height: 20px;
}
.table-responsive
{
  overflow-x: scroll;
}
</style>
<script type="text/javascript">
/*$(document).ready(function() {
    $('#editabledatatable').dataTable( {
         "destroy": true,
        "ajax": "<?php echo base_url(); ?>inventory/purchaseinvoice/getpurchaseinvoice",
        "columns": [
            { "data": "id",
              render: function (data, type, row, meta) {
               return meta.row + meta.settings._iDisplayStart + 1;
              } 
            },
            { "data": "REVISION" },
            { "data": "SUPPLIER" },
            { "data": "REFERENCE" },
            { "data": "DELIVERYDATE" },
            { "data": "FREIGHTAMOUNT" },
            { "data": "DISCOUNT" },
            { "data": "ADJUSTMENT" },
              { "data": "TOTALAMOUNT" },
            { "data": "CREATED" },
            { "data": "STATUS" },
            {
              "data": null,
               "mRender": function(data, type, full) {
                 return '<a class="btn btn-info" onclick="return myFunction(this.id)" data-toggle="modal" data-target="#myModal" id=' + data.ID + ' ' + 'href=#' + '>' + '<i class="fa fa-edit"></i>' + '</a>&nbsp;&nbsp;<a class="btn btn-danger" data-toggle="modal" data-target="#confirmmodal" onclick="return confirmFunction(this.id)" id=' + data.ID + ' ' + 'href=#' + '>' + '<i class="fa fa-trash"></i>' + '</a>';
               }
            }
        ]

    } );
} );
*/


/* Formatting function for row details - modify as you need */
/*function format ( d ) {
    // `d` is the original data object for the row

    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;" class="table table-striped table-hover table-bordered">'+
        '<thead>'+
        '<tr>'+
            '<th>Barcode:</th>'+
            '<th>Product:</th>'+
            '<th>Description:</th>'+
             '<th>Quantity:</th>'+
              '<th>UOM:</th>'+
               '<th>Unit Price:</th>'+
                '<th>Discount:</th>'+
                 '<th>Line Total:</th>'+
        '</tr>'+
         '</thead>'+
          '<tbody>'+
        '<tr>'+
           
             '<td>'+d.CODE+'</td>'+
            '<td>'+d.NAME+'</td>'+
             '<td>'+d.DESCRIPTION+'</td>'+
            '<td>'+d.QUANTITY+'</td>'+
             '<td>'+d.UOM+'</td>'+
            '<td>'+d.UNITPRICE+'</td>'+
             '<td>'+d.DISCOUNT+'</td>'+
            '<td>'+d.LINETOTAL+'</td>'+
        '</tr>'+
         '</tbody>'+
    '</table>';
}*/

 function format(callback, id) {
       $.ajax({
           url: "http://webin.sites.posics.com/webin_new/inventory/purchaseinvoice/getpilines/"+ id,
           dataType: "json",
          complete: function (response) {
               var data = JSON.parse(response.responseText);
                console.log(data);
               var thead = '', tbody = '';
               for (var key in data[0]) {
                   //thead += '<th>' + key + '</th>';
               }
                
                thead += '<thead><tr><th>Barcode:</th><th>Product:</th><th>Description:</th><th>Quantity:</th><th>UOM:</th><th>Unit Price:</th><th>Discount:</th><th>Line Total:</th></tr></thead>';
               $.each(data, function (i, d) {
                   for (var x = 0; x < d.length ; x++)
                   {
                       tbody += '<tr><td>' + d[x].CODE + '</td><td>' + d[x].NAME + '</td><td>' + d[x].DESCRIPTION + '</td><td>'+d[x].QUANTITY + '</td><td>'+d[x].UOM + '</td><td>'+d[x].UNITPRICE + '</td><td>'+d[x].DISCOUNT + '</td><td>'+d[x].LINETOTAL + '</td></tr>';
 
                   }
               });
               callback($('<table cellpadding="5" cellspacing="0" border="0" class="table table-striped table-hover table-bordered">' + thead + tbody + '</table>')).show();
           },
           error: function () {
               $('#output').html('Bummer: there was an error!');
           }
       });

     }
 
$(document).ready(function() {
    var table = $('#editabledatatable').DataTable( {
        "destroy": true,
        "ajax": "<?php echo base_url(); ?>inventory/purchaseinvoice/getpurchaseinvoice",
        "columns": [
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": '',
                "mRender": function(data, type, full) {
                 return '<input type="hidden" id=' + data.ID + '' + '>';
               }
            },
             { "data": "id",
              render: function (data, type, row, meta) {
               return meta.row + meta.settings._iDisplayStart + 1;
              } 
            },
            { "data": "REVISION" },
            { "data": "SUPPLIER" },
            { "data": "REFERENCE" },
            { "data": "DELIVERYDATE" },
            { "data": "FREIGHTAMOUNT" },
            { "data": "DISCOUNT" },
            { "data": "ADJUSTMENT" },
            { "data": "TOTALAMOUNT" },
            { "data": "CREATED" },
            { "data": "STATUS" },
             {
              "data": null,
               "mRender": function(data, type, full) {
                 return '<a class="btn btn-warning" onclick="return addproduct(this.id)" data-toggle="modal" data-target="#addproduct" id=' + data.ID + ' ' + 'href=#' + '>' + '<i class="fa fa-plus-circle"></i>' + '</a>';
               }
            },
            {
              "data": null,
               "mRender": function(data, type, full) {
                 return '<a class="btn btn-info" onclick="return myFunction(this.id)" data-toggle="modal" data-target="#myModal" id=' + data.ID + ' ' + 'href=#' + '>' + '<i class="fa fa-edit"></i>' + '</a>&nbsp;&nbsp;<a class="btn btn-danger" data-toggle="modal" data-target="#confirmmodal" onclick="return confirmFunction(this.id)" id=' + data.ID + ' ' + 'href=#' + '>' + '<i class="fa fa-trash"></i>' + '</a>';
               }
            }
        ]
       
    } );
     
    // Add event listener for opening and closing details
    $('#editabledatatable tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );
        var rowid = $(this).closest('tr').find('input').attr('id');
      
        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
             format(row.child,rowid);
            tr.addClass('shown');
        }
    } );

} );

</script>

<script type="text/javascript">
  function myFunction(id) {
   // id = $(this).attr('id');
    $.ajax({
        url: base_url + 'inventory/purchaseinvoice/editpurchaseinvoice/'+ id,
        success:function(data){
            var json = $.parseJSON(data);
            
        for (var i=0;i<json.length;++i)
        {
            $("#id").val(json[i].ID);
            $("#SUPPLIER").val(json[i].SUPPLIERID);
            $("#REFERENCE").val(json[i].REFERENCE);
              $("#DELIVERYDATE").val(json[i].DELIVERYDATE);
            $("#TERMS").val(json[i].TERMS);
              $("#FREIGHTAMOUNT").val(json[i].FREIGHTAMOUNT);
            $("#DISCOUNT").val(json[i].DISCOUNT);
              $("#ADJUSTMENT").val(json[i].ADJUSTMENT);
            $("#STATUS").val(json[i].STATUS);
        
        }

        }
    });
}

function confirmFunction(id) {
    $("#okid").val(id);
}

 function addproduct(id) {
    $("#addproductid").val(id);
}

  function deleteFunction() {
     id = $("#okid").val();
    $.ajax({
        url: base_url + 'inventory/purchaseinvoice/deletepurchaseinvoice/'+ id,
        success:function(data){
         location.reload(true);
          $("#confirmmodal").hide();
         $("#modal-success").show();

        }
    });
}

</script>
            <!-- Page Content -->
            <div class="page-content">
        
                <!-- Page Header -->
                <div class="page-header position-relative">
                     <div class="header-title">
                        <h1>
                          Purchase Invoice
                        </h1>
                    </div>
                    <!--Header Buttons-->
                    <div class="header-buttons">
                        <a class="sidebar-toggler" href="#">
                            <i class="fa fa-arrows-h"></i>
                        </a>
                        <a class="refresh" id="refresh-toggler" href="">
                            <i class="glyphicon glyphicon-refresh"></i>
                        </a>
                        <a class="fullscreen" id="fullscreen-toggler" href="#">
                            <i class="glyphicon glyphicon-fullscreen"></i>
                        </a>
                    </div>
                    <!--Header Buttons End-->
                </div>
                <!-- /Page Header -->
                <!-- Page Body -->
                <div class="page-body">
                    <div class="row">
                        <div class="col-xs-12 col-md-12">
                            <div class="widget">
                              
                                 <?php
                            if ($this->session->flashdata('success_msg')) {

                                ?>


    <div class="alert alert-success">

        <a href="#" class="close" data-dismiss="alert">&times;</a>

       <?php echo $this->session->flashdata('success_msg'); $this->session->unset_userdata('success_msg');?>
    </div>

                        <?php
                            }
                            ?>
                                  
                    <div id="modal-success" class="modal modal-message modal-success" style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <i class="glyphicon glyphicon-check"></i>
                </div>
                <div class="modal-title">Deleted successfuly</div>

                
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" data-dismiss="modal">OK</button>
                </div>
            </div> <!-- / .modal-content -->
        </div> <!-- / .modal-dialog -->
    </div>


 <div id="confirmmodal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Are you sure?</h4>
      </div>
      <div class="modal-footer">
        <input type="hidden" id="okid" value="">
        <button type="button" class="btn btn-success" onclick="return deleteFunction()">Ok</button>
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>
    </div>
</div>

</div>
                              
                                <div class="widget-body">
                                    <div class="table-toolbar">
                                       <div class="form-group"> <a type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal" href="javascript:void(0);">
                                            Add New
                                        </a>  <a type="button" href="javascript:void(0);" class="btn btn-danger">
                                            Print PI
                                        </a>  <a type="button" href="javascript:void(0);" class="btn btn-warning">
                                            Print PO
                                        </a></div>
                                       
                                        <div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
    <form action="<?php echo base_url();?>inventory/purchaseinvoice/addpurchaseinvoice" method="post">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Add New</h4>
      </div>
      <div class="modal-body">
       <div class="row">
            <div class="col-md-12">
                <input type="hidden" id="id" name="id">
                <div class="form-group">
                      <select role="select"  class="form-control" name="SUPPLIER" id="SUPPLIER">
                       <option value="">Select Suppliers</option>
                    <?php foreach($suppliers as $suppliers_list) { ?>
                         <option value="<?php echo $suppliers_list->ID;?>"><?php echo $suppliers_list->NAME;?></option>
                         <?php } ?>
                   </select>
                </div>
                 <div class="form-group">
                    <input type="text" class="form-control" name="REFERENCE" id="REFERENCE" placeholder="REFERENCE">
                </div>
                 <div class="form-group">
                    <input type="text" class="form-control date-picker" name="DELIVERYDATE" id="DELIVERYDATE" placeholder="DELIVERYDATE" data-date-format="yyyy-mm-dd">
                </div>
                <div class="form-group">
                    <textarea class="form-control" name="TERMS" id="TERMS" placeholder="TERMS" rows="5"></textarea>
                </div>
                   <div class="form-group">
                    <input type="text" class="form-control" name="FREIGHTAMOUNT" id="FREIGHTAMOUNT" placeholder="FREIGHTAMOUNT">
                </div>
                   <div class="form-group">
                    <input type="text" class="form-control" name="DISCOUNT" id="DISCOUNT" placeholder="DISCOUNT">
                </div>
                   <div class="form-group">
                    <input type="text" class="form-control" name="ADJUSTMENT" id="ADJUSTMENT" placeholder="ADJUSTMENT">
                </div>
                   <div class="form-group">
                  
                    <select name="STATUS" class="form-control">
                         <option value="1">Created</option>
                          <option value="2">Submitted</option>
                    </select>
                </div>

            </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-success">Submit</button>
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>
  </form>
    </div>
</div>

                                        <div class="btn-group pull-right">
                                          
                                        </div>
                                    </div>


                                    <!--******************add product*********************-->

                                        <div id="addproduct" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
    <form action="<?php echo base_url();?>inventory/purchaseinvoice/addpurchaseinvoicelines" method="post">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Add New</h4>
      </div>
      <div class="modal-body">
       <div class="row">
            <div class="col-md-12">
                <input type="hidden" id="addproductid" name="addproductid">
                <div class="form-group">
                      <select role="select"  class="form-control" name="PRODUCTID" id="PRODUCTID">
                       <option value="">Select Products</option>
                    <?php foreach($products as $products_list) { ?>
                         <option value="<?php echo $products_list->ID;?>"><?php echo $products_list->NAME;?></option>
                         <?php } ?>
                   </select>
                </div>
                 <div class="form-group">
                    <input type="text" class="form-control" name="CODE" id="CODE" placeholder="BARCODE">
                </div>
                 <div class="form-group">
                    <textarea class="form-control" name="DESCRIPTION" id="DESCRIPTION" placeholder="DESCRIPTION"></textarea>
                </div>
                <div class="form-group">
                     <input type="text" class="form-control" name="QUANTITY" id="QUANTITY" placeholder="QUANTITY">
                </div>
                   <div class="form-group">
                     <select role="select"  class="form-control" name="UOM" id="UOM">
                       <option value="">Select units</option>
                    <?php foreach($units as $units_list) { ?>
                         <option value="<?php echo $units_list->ID;?>"><?php echo $units_list->NAME;?></option>
                         <?php } ?>
                   </select>
                </div>
                   <div class="form-group">
                    <input type="text" class="form-control" name="DISCOUNT" id="DISCOUNT" placeholder="DISCOUNT">
                </div>
                   <div class="form-group">
                    <input type="text" class="form-control" name="UNITPRICE" id="UNITPRICE" placeholder="UNITPRICE">
                </div>
                  

            </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-success">Submit</button>
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>
  </form>
    </div>
</div>

                                        <div class="btn-group pull-right">
                                          
                                        </div>
                                    </div>



                                 <div class="table-responsive">
                                    <table class="table table-striped table-hover table-bordered editable" id="editabledatatable">
                                        <thead>
                                            <tr role="row">
                                                <th width="50px">
                                                    
                                                </th>
                                                <th>
                                                    ID
                                                </th>
                                                <th>
                                                    REVISION
                                                </th>
                                                <th>
                                                    SUPPLIER
                                                </th>
                                                 <th>REFERENCE</th>
                                                <th>DELIVERYDATE</th>
                                                 <th>FREIGHTAMOUNT</th>
                                                <th>DISCOUNT</th>
                                                <th>ADJUSTMENT</th>
                                                  <th>TOTALAMOUNT</th>
                                                <th>CREATED</th>
                                                
                                                 <th>STATUS</th>
                                                  <th>ADD</th>
                                                   <th>
                                                 Action
                                                </th>
                                            </tr>
                                        </thead>
                                    </table>
                                 </div>
                                </div>
                            </div>
                        </div>
                    </div>
                   
                </div>
                <!-- /Page Body -->
            </div>
            <!-- /Page Content -->
        </div>
        <!-- /Page Container -->
        <!-- Main Container -->

    </div>

