transaksi/tambah.php

<?php
date_default_timezone_set('Asia/Jakarta');
?>
<script type="text/javascript">
            $(function() {
                $("#datepicker").datepicker({
                    dateFormat: 'yy-mm-dd'
                });

            });
</script>
<div class="col-md-20">
    <div class="panel panel-default">
        <div class="panel-body">
            <form class="form-horizontal" id="form_transaksi" role="form">
            <div class="col-md-8">
            <!-- <div class="panel panel-default">
                              <div class="panel-body"> -->
                            <!-- <div class="form-group">
                              <label class="control-label col-md-4"
                                for="tgl_transaksi">Tgl.Transaksi :</label>
                              <div class="col-md-5">
                                <input type="text" class="form-control"
                                    name="tgl_transaksi" value="<?= date('d-m-Y') ?>"
                                    readonly="readonly">
                              </div>
                            </div> -->
                <div class="input-group">
                    <input type="hidden" class="form-control" name="id_user" id="id_user" value="<?php echo $query; ?>"></input>
                </div>
                <div class="input-group">
                    <label for="tanggal">Tanggal Transaksi</label>
                    <input type="text" class="form-control" id="datepicker" placeholder="Pickup Date" name="datepicker" value="<?php echo $waktu = $this->createDate = date("Y-m-d"); ?>"/>
                </div>
                <div class="input-group">
                    <input type="hidden" class="form-control" name="waktu" id="waktu" value="<?php echo $waktu = $this->createDate = date("H:i:s"); ?>"></input>
                </div>
                <div class="input-group">
                    <label for="id_barang">Kode Barang</label>
                    <input list="list_barang" class="form-control reset"
                                    placeholder="Isi id..." name="id_barang" id="id_barang"
                                    autocomplete="off" onchange="showBarang(this.value)">
                                  <datalist id="list_barang">
                                    <?php foreach ($barang as $barang): ?>
                                        <option value="<?= $barang['kode'] ?>"><?= $barang['nama'] ?></option>
                                    <?php endforeach ?>
                                  </datalist>
                </div>
                <div id="barang">
                <div class="input-group">
                    <label for="nama_barang">Nama Barang</label>
                    <input type="text" class="form-control reset" name="nama_barang" id="nama_barang" readonly="readonly"/>
                </div>
                <div class="input-group">
                    <label for="harga_barang">Harga Barang</label>
                    <input type="text" class="form-control reset" name="harga_barang" id="harga_barang" readonly="readonly"/>
                </div>
                <div class="input-group">
                    <label for="qty">Quantity</label>
                    <input type="number" class="form-control reset"
                                        autocomplete="off" onchange="subTotal(this.value)"
                                        onkeyup="subTotal(this.value)" id="qty" min="0"
                                        name="qty" placeholder="Isi qty...">
                </div>
                </div>
                <div class="input-group">
                    <label for="sub_total">Sub Total</label>
                    <input type="text" class="form-control reset" placeholder="Sub Total" name="sub_total" id="sub_total" readonly="readonly"/>
                </div>
                <p>
                <div class="form-group">
                    <div class="col-md-offset-0 col-md-1">
                        <button type="button" class="btn btn-primary"
                        id="tambah" onclick="addbarang()">
                        <i class="fa fa-cart-plus"></i> Tambah</button>
                    </div>
                    <div class="col-md-offset-1 col-md-3">
                        <button type="button" class="btn btn-primary"
                        id="tambah" onclick="myFunction()">
                        <i class="fa fa-cart-plus"></i> Reset</button>
                    </div>
                </div>
                </div><!-- end col-md-8 -->
                <!-- Menghitung Transaksi -->
                <div class="col-md-4 mb">
                            <div class="col-md-12">
                                <div class="form-group">
                                  <label for="total" class="besar">Total (Rp) :</label>
                                    <input type="text" class="form-control input-lg"
                                    name="total" id="total" placeholder="0"
                                    readonly="readonly"  value="<?= number_format(
                                    $this->cart->total(), 0 , '' , '.' ); ?>">
                                </div>
                                <div class="form-group">
                                  <label for="bayar" class="besar">Bayar (Rp) :</label>
                                    <input type="text" class="form-control input-lg uang"
                                        name="bayar" placeholder="0" autocomplete="off"
                                        id="bayar" onkeyup="showKembali(this.value)">
                                </div>
                                <div class="form-group">
                                  <label for="kembali" class="besar">Kembali (Rp) :</label>
                                    <input type="text" class="form-control input-lg"
                                    name="kembali" id="kembali" placeholder="0"
                                    readonly="readonly">
                                </div>
                            </div>
                        </div>
            </form>
            <!--Table Menggunakan AJAX -->
            <table id="table_transaksi" class="table table-striped table-bordered">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>ID Kasir</th>
                        <th>Tanggal</th>
                        <th>Waktu</th>
                        <th>Kode Barang</th>
                        <th>Nama Barang</th>
                        <th>Harga</th>
                        <th>Jumlah</th>
                        <th>Sub Total</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
            <table>
            <tr>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <td style="padding: 5px;">
                    <form method="post" action="<?= base_url() ?>transaksi/addPenjualan">
                        <input type="submit" class="btn btn-primary btn-lg"
                        id="selesai" value="Selesai" disabled="disabled" >
                        </input>
                    </form>
                </td>
                <td style="padding: 5px;">
                    <form method="post" action="<?= base_url() ?>transaksi/batalPenjualan">
                        <input type="submit" class="btn btn-danger btn-lg"
                        id="batal" value="Batal">
                        </input>
                    </form>
                </td>
            </tr>
        </div>
    </div>
</div>

    <script type="text/javascript">


    function myFunction()
    {
        document.getElementById("tanggal").reset();
        document.getElementById("id_barang").reset();
        document.getElementById("nama_barang").reset();
        document.getElementById("harga_barang").reset();
        document.getElementById("qty").reset();
        document.getElementById("sub_total").reset();
    }
    function showBarang(str)
    {

        if (str == "") {
            $('#nama_barang').val('');
            $('#harga_barang').val('');
            $('#qty').val('');
            $('#sub_total').val('');
            $('#reset').hide();
            return;
        } else {
          if (window.XMLHttpRequest) {
              // code for IE7+, Firefox, Chrome, Opera, Safari
               xmlhttp = new XMLHttpRequest();
          } else {
              // code for IE6, IE5
              xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
          }
          xmlhttp.onreadystatechange = function() {
               if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                  document.getElementById("barang").innerHTML =
                  xmlhttp.responseText;
              }
          }
          xmlhttp.open("GET", "<?= base_url(
            'Transaksi/getbarang') ?>/"+str,true);
          xmlhttp.send();
        }
    }

    function subTotal(qty)
    {

        var harga = $('#harga_barang').val().replace(".", "").replace(".", "");

        $('#sub_total').val(convertToRupiah(harga*qty));
    }

    function convertToRupiah(angka)
    {

        var rupiah = '';
        var angkarev = angka.toString().split('').reverse().join('');

        for(var i = 0; i < angkarev.length; i++)
          if(i%3 == 0) rupiah += angkarev.substr(i,3)+'.';

        return rupiah.split('',rupiah.length-1).reverse().join('');

    }

    var table;
    $(document).ready(function() {

      showKembali($('#bayar').val());

      table = $('#table_transaksi').DataTable({
        paging: false,
        "info": false,
        "searching": false,
        "processing": true, //Feature control the processing indicator.
        "serverSide": true, //Feature control DataTables'
        // server-side processing mode.

        // Load data for the table's content from an Ajax source
        "ajax": {
            "url": "<?= site_url('Transaksi/ajax_list_transaksi')?>",
            "type": "POST"
        },

        //Set column definition initialisation properties.
        "columnDefs": [
        {
          "targets": [ 0,1,2,3,4,5,6,7,8,9 ], //last column
          "orderable": false, //set not orderable
        },
        ],

      });
    });

    function reload_table()
    {

      table.ajax.reload(null,false); //reload datatable ajax

    }

    function addbarang()
    {
        var id_barang = $('#id_barang').val();
        var qty = $('#qty').val();
        if (id_barang == '') {
          $('#id_barang').focus();
        }else if(qty == ''){
          $('#qty').focus();
        }else{
       // ajax adding data to database
          $.ajax({
            url : "<?= site_url('Transaksi/addbarang')?>",
            type: "POST",
            data: $('#form_transaksi').serialize(),
            dataType: "JSON",
            success: function(data)
            {
               //reload ajax table
               reload_table();
            },
            error: function (jqXHR, textStatus, errorThrown)
            {
                alert('Error adding data');
            }
        });

          showTotal();
          showKembali($('#bayar').val());
          //mereset semua value setelah btn tambah ditekan
          $('.reset').val('');
        };
    }

    function deletebarang(id,sub_total)
    {
        // ajax delete data to database
          $.ajax({
            url : "<?= site_url('Transaksi/deletebarang')?>/"+id,
            type: "POST",
            dataType: "JSON",
            success: function(data)
            {
               reload_table();
            },
            error: function (jqXHR, textStatus, errorThrown)
            {
                alert('Error deleting data');
            }
        });

          var ttl = $('#total').val().replace(".", "");

          $('#total').val(convertToRupiah(ttl-sub_total));

          showKembali($('#bayar').val());
    }

    function showTotal()
    {

        var total = $('#total').val().replace(".", "").replace(".", "");

        var sub_total = $('#sub_total').val().replace(".", "").replace(".", "");

        $('#total').val(convertToRupiah((Number(total)+Number(sub_total))));

    }

    //maskMoney
    $('.uang').maskMoney({
        thousands:'.',
        decimal:',',
        precision:0
    });

    function showKembali(str)
    {
        var total = $('#total').val().replace(".", "").replace(".", "");
        var bayar = str.replace(".", "").replace(".", "");
        var kembali = bayar-total;

        $('#kembali').val(convertToRupiah(kembali));

        if (kembali >= 0) {
          $('#selesai').removeAttr("disabled");
        }else{
          $('#selesai').attr("disabled","disabled");
        };

        if (total == '0') {
          $('#selesai').attr("disabled","disabled");
        };
    }

    </script>