<link rel="stylesheet" href="<?= base_url('assets/admin/chosen_js/chosen.css'); ?>">
<style type="text/css">
    .chosen-container, .chosen-container-single{
        width: 100% !important;
    }

    .table>tbody>tr>td>.chosen-container{
        width: 100% !important;
    }

@media only screen and (min-width: 768px) {
    .dataTables_filter {
        text-align: right;
    }
    .dataTables_paginate {
        text-align: right;
    }
    .dataTables_info {
        padding-top: 25px;
    }
}
</style>

<div class="row">
    <div class="col-sm-12">
        <p>
            <a href="<?= base_url('admin/pembelian'); ?>">
                <i class="fa fa-arrow-left" aria-hidden="true"></i> Kembali ..
            </a>
        </p><br>
        <h2>Daftar Penerimaan</h2>
        <?= $this->session->flashdata('success'); //to display success message ?> 
        <?= $this->session->flashdata('result'); //to display result message ?> 
    </div><!-- end class="col-sm-12" -->
</div> <!-- end row -->

<form method="post" action="javascript:void(0);" id="filterData">
<div class="row">
    <div class="col-md-12 col-xs-12" style="border:1px solid #ccc; padding: 10px 0;">
        <div class="col-md-12 col-xs-12">
            <h3>Cari Penerimaan</h3>
            <div class="form-group row">
                <div class="col-md-12 col-xs-12">
                    <label for="NoPemesanan" class="col-sm-2 col-form-label">No. TTB</label>
                    <div class="col-sm-10">
                        <input class="form-control" type="text" id="noTtb" placeholder="Enter TTB Number">
                    </div>
                </div>
            </div>
            <div class="form-group row">
                <div class="col-md-12 col-xs-12">
                    <label for="NoPemesanan" class="col-sm-2 col-form-label">Status</label>
                    <div class="col-sm-10">
                        <select name="status" class="form-control" id="statusPemesanan">
                            <option value="">Status Filter</option>
                            <option value="1">Draf</option>
                            <option value="2">Buka (sebagian dikirim)</option>
                            <option value="3">Buka (sepenuhnya dikirim)</option>
                            <option value="4">Tutup (sebagian dikirim)</option>
                            <option value="5">Tutup (sepenuhnya dikirim)</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="form-group row">
                <div class="col-md-12 col-xs-12">
                    <label for="NoPemesanan" class="col-sm-2 col-form-label">No. Pemesanan</label>
                    <div class="col-sm-10">
                        <input class="form-control" type="text" id="noPemesanan" placeholder="Isi Nomor Transaksi">
                    </div>
                </div>
            </div>
            <div class="form-group row">
                <div class="col-md-12 col-xs-12">
                    <label for="Product" class="col-sm-2 col-form-label">Produk</label>
                    <div class="col-sm-10">
                        <select class="chosen-select select_product" id="idproduct" required>
                            <option value="0" selected> Pilih Produk ...  </option>
                            <?php foreach($product as $result){ ?>
                                <option value="<?php echo $result->id_products; ?>"><?php echo $result->product_code; ?> - <?php echo $result->title; ?></option>
                            <?php } ?>
                        </select>
                    </div>
                </div>
            </div>
            <div class="form-group row">
                <div class="col-md-12 col-xs-12">
                    <label for="Supplier" class="col-sm-2 col-form-label">Nama Supplier</label>
                    <div class="col-sm-10">
                        <select class="chosen-select select_supplier" id="idSupplier">
                            <option value="0" selected> Pilih Supplier ...  </option>
                            <?php foreach($supplier as $result){ ?>
                                <option value="<?php echo $result->id; ?>"><?php echo $result->supplier_name; ?></option>
                            <?php } ?>
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-md-12 col-xs-12" style="margin: 5px 0;">
                <input  class="btn btn-primary form-control" type="submit" name="submit" value="Filter">
            </div>
            <div class="col-md-12 col-xs-12" style="margin: 5px 0; text-align: right;">
                <a href="<?php echo base_url('admin/pembelian/penerimaan'); ?>" style="color:#f00">Reset Form Pencarian</a>
            </div>
        </div><!-- end class="col-sm-12" -->
    </div>
</div> <!-- end row -->   
</form>

<div class="row">
    <div class="col-md-12 col-xs-12">
        <div class="col-md-6 col-xs-12 col-md-offset-right-6">
            <a href="#" id="btn-add" class="btn btn-success col-md-6 col-xs-12 col-md-offset-right-6"><i class="fa fa-plus" aria-hidden="true"></i> Tambah Data Penerimaan</a>
        </div>
    </div>
</div>

<div class="modal fade in" id="modal" >
    <div class="modal-dialog moda-md" style="width:900px">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">x</button>
                <div class="modal-title"><h3>Pilih Data PO</h3></div>
            </div>
            <div class="modal-body">
                <?= form_open_multipart("admin/pembelian/getpemesanan"); ?>       
                    <div class="form-group">
                        <div class="row-md-12 row">
                            <div class="col-md-2 col-xs-2" style="text-align: right;"><label for="Supplier" class="col-form-label">Supplier : </label></div>
                            <div class="col-md-4 col-xs-4">
                                <select class="chosen-select select_supplier_find  col-xs-4" id="idSupplier" required>
                                    <option value="0" selected> Pilih Supplier ...  </option>
                                    <?php foreach($supplier as $result){ ?>
                                        <option value="<?php echo $result->id; ?>"><?php echo $result->supplier_name; ?></option>
                                    <?php } ?>
                                </select>
                            </div>
                        </div>

                        <div class="row-md-12 row" id="findProd">
                            <!-- <div class="col-md-2" style="text-align: right;">Search Product</div>
                            <br> -->
                            <div class="col-md-2 col-xs-2" style="text-align: right;"><label for="product" class="col-form-label">Products : </label></div>
                            <div class="col-md-8 col-xs-8">
                                <select class="chosen-select select_product_find  col-xs-8" id="idProductFind">
                                    <option value="0" selected> Pilih Produk ...  </option>
                                    <?php foreach($product as $result){ ?>
                                        <option value="<?php echo $result->id_products; ?>"><?php echo $result->product_code; ?> - <?php echo $result->title; ?></option>
                                    <?php } ?>
                                </select>
                                <div class="col-xs-8 col-md-12 ">
                                    <a  style="float:right;color:blue;" id="resetfind" href="#">reset..</a>
                                </div>
                            </div>  
                        </div>                        

                        <div class="row">
                        <div class="col-md-12">
                        
                        <input type="submit" class="btn btn-success col-md-4" style="float:right;" value="Buat Penerimaan"> 
                            <table class=" table table-striped table-supp" id="table-supp" style="width:100%;table-layout: auto;">
                                <thead>
                                    <tr>
                                        <th style="width:20px"></th>
                                        <th style="width:200px">No. Pemesanan</th>
                                        <th style="width:200px">Tanggal Pemesanan</th>
                                        <th>Supplier</th>
                                        <th>Status</th>
                                        <th>Total</th>
                                        <th>Gudang</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                        </div>

                    </div>
                <?= form_close(); ?>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12" id="table-ttb">
        <table class="table table-striped table-desa" style="width:100%">
            <thead>
                <tr>
                    <th style="width:50px">No</th>
                    <th>No. TTB</th>
                    <th>No. Pemesanan</th>
                    <th>Tgl. Penerimaan</th>
                    <th>Supplier</th>
                    <th>Status Penerimaan</th>
                    <th>Gudang</th>
                    <th>Dibuat Oleh</th>
                </tr>
            </thead>
        </table>

    </div>
</div>

<div id="result"></div>

<script type="text/javascript" src="<?php echo base_url('assets/admin/js/jquery.dataTables.js') ?>"></script>
<script type="text/javascript" src="<?php echo base_url('assets/admin/js/dataTables.bootstrap.js') ?>"></script>
<script src="<?= base_url('assets/admin/chosen_js/chosen.jquery.js'); ?>" type="text/javascript"></script>
<script src="<?= base_url('assets/admin/chosen_js/prism.js'); ?>" type="text/javascript" charset="utf-8"></script>
<script src="<?= base_url('assets/admin/chosen_js/init.js'); ?>" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
$(document).ready(function(){
    $('#findProd').hide();
    $( "#filterData" ).submit(function() {
        var noTransaksi = $('#noPemesanan').val();
        var statusPemesanan = $('#statusPemesanan').val();
        var noTtb = $('#noTtb').val();
        var idproduct = $('#idproduct').val();
        var idSupplier = $('#idSupplier').val();

        $('#table-ttb').html('<table class="table table-striped table-desa" style="width:100%"><thead><tr><th style="width:50px">No</th><th>No. TTB</th><th>No. Pemesanan</th><th>Tgl. Penerimaan</th><th>Supplier</th><th>Status Penerimaan</th><th>Warehouse</th><th>Created By</th></tr></thead></table>');

        $(".table-desa").DataTable({
            ordering: false,
            responsive: {
                Warehouse: false
            },
            pageLength: 100,
            processing: true,
            serverSide: true,
            ajax: {
              url: "<?php echo base_url('admin/pembelian/alldataterima') ?>",
              data: {
                '<?= $this->security->get_csrf_token_name(); ?>' : '<?= $this->security->get_csrf_hash(); ?>',
                'noTransaksi' : noTransaksi,
                'statusPemesanan' : statusPemesanan,
                'noTtb' : noTtb,
                'idproduct' : idproduct,
                'idSupplier' : idSupplier
              },
              type:'POST',
            }
        });
    });

    $(".table-desa").DataTable({
        ordering: false,
        responsive: {
            Warehouse: false
        },
        pageLength: 100,
        processing: true,
        serverSide: true,
        ajax: {
          url: "<?php echo base_url('admin/pembelian/alldataterima') ?>",
          data: {'<?= $this->security->get_csrf_token_name(); ?>' : '<?= $this->security->get_csrf_hash(); ?>'},
          type:'POST',
        }
    });
 
});      

    $(function () {
        $('#btn-add').click(function (e) {
            e.preventDefault();
            
            $('.popoverButton').popover("destroy"); 
            $('.table-supp').DataTable().destroy();
            $('.table-supp').find('tbody').html('');
            $(".select_supplier_find").val(0);
            $(".select_supplier_find").val(0).trigger("chosen:updated");
            $('#findProd').hide();
            $(".select_product_find").val(0);
            $(".select_product_find").val(0).trigger("chosen:updated");
            
            $('#modal').modal({
                backdrop: 'true',
                show: true
            });
        });
    });


    $(document).ready(function(){
        $('.select_supplier_find').change(function(){ 
            var id_supplier = $(this).val();        
            ajax_penerimaan_get_pemesanan(id_supplier,'');    
            $('#findProd').show();
        });

        $('.select_product_find').change(function(){ 
            var id_product = $(this).val();        
            var id_supplier = $('.select_supplier_find').val();       
            ajax_penerimaan_get_pemesanan(id_supplier,id_product);  
        });

        $('#resetfind').click(function(){
            $(".select_product_find").val(0);
            $(".select_product_find").val(0).trigger("chosen:updated");  
            
            var id_product =  $('.select_product_find').val();        
            var id_supplier = $('.select_supplier_find').val();       
            ajax_penerimaan_get_pemesanan(id_supplier,id_product);  

        });
    });



    function ajax_penerimaan_get_pemesanan(id,idprod){
        var table = $(".table-supp").DataTable({
            ordering: false,
            searching : false,
            destroy: true,
            pageLength: 10,
            processing: true,
            serverSide: true,
            ajax: {
                url: "<?php echo base_url('admin/pembelian/getdata') ?>",
                data: {
                        '<?= $this->security->get_csrf_token_name(); ?>' : '<?= $this->security->get_csrf_hash(); ?>',
                        'idSupplier' : id,
                        'idProduct' : idprod
                    },
                type:'POST',  
            }  
        });        
    };

    function details_in_popup($id,$popover){
        $.ajax({
                'url'       : "<?php echo base_url('admin/pembelian/ajax_penerimaan_get_detail_pemesanan') ?>",
                'type'      : 'POST',
                'data'      : {
                                'no_pemesanan' : $id,
                                '<?= $this->security->get_csrf_token_name(); ?>' : '<?= $this->security->get_csrf_hash(); ?>'
                                }, 
                'success'   : function(result) {   
                    $('#'+$popover).attr('data-content',result);  
                },
                'complete'  : function(){                    
                    $('.popoverButton').popover("destroy"); 
                    $('.popoverButton').each(function() {
                            var options = {
                                html: true,
                                placement: 'bottom',
                                trigger: 'click',
                                title: 'LIST PRODUK PO'
                            };
                            $('#'+$popover).popover(options);
                    });

                    if ($('#'+$popover).next('div.popover:visible').length){
                            $('#'+$popover).popover("hide");
                    }else{
                        $('#'+$popover).popover("show");  
                    }
                     
                }
            });
            
            
    }



</script>

<style type="text/css">
    .popover{
        !important;
        max-width:100%;
    }
</style>