@extends('layoututama')
@section('content')

<div class="row match-height">
    
    
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <div class="card-title-wrap bar-info">
                    <h4 class="card-title" id="basic-layout-round-controls">Detail Pesanan </h4>
                </div>
              
            </div>
            <div class="card-body px-3">
                <div class="row">
                    <div class="col-md-9 col-xs-12">
                    <form class="form" action="{{url('ordersave')}}" method="post" id="frmadmin" name="frmadmin">
                        {{csrf_field()}}
                        <div class="form-group">
                            <label>Item Barang</label>
                            <select name="item" id="item" class="form-control">
                                <option value="">--Pilih Item--</option>
                                @foreach($barang as $bar)
                                    <option value="{{$bar->id}}">{{$bar->nama_barang}} ({{$bar->kode_barang}})</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="col-md-3 col-xs-12">
                        <div class="form-group">
                            <label>Jumlah</label>
                            <input type="text" id="jumlah" class="form-control" name="jumlah">  
                        </div>
                    </div>

                    <!-- <div class="col-md-4 col-xs-12">
                        <div class="form-group">
                            <label>Tipe Harga</label>
                            <select name="tipeharga" id="tipeharga" class="form-control"> 
                                <option value="normal">Harga Normal</option>
                                <option value="grosir1">Harga Grosir 1</option>
                                <option value="grosir2">Harga Grosir 2</option>
                            </select>
                        </div>
                    </div> -->

                    <div class="col-md-6 col-xs-12">
                        <div class="form-group">
                            <label>Produk Banner?</label>
                            <select name="isbanner" id="isbanner" class="form-control">
                                <option value="0">Tidak</option>
                                <option value="1">Ya</option>
                            </select>
                        </div>
                    </div>

                    <div class="col-md-6 col-xs-12">
                        <div class="form-group">
                            <label>Jumlah</label>
                            <div class="row">
                                <div class="col-md-6">
                                    <input type="text" id="panjang" class="form-control" name="panjang" placeholder="Panjang"> 
                                </div>
                                <div class="col-md-6">
                                    <input type="text" id="lebar" class="form-control" name="lebar" placeholder="Lebar"> 
                                </div>
                            </div> 
                        </div>
                    </div>

                    <div class="col-md-12">
                        <button type="button" class="btn btn-info btn-sm btn-block" id="additem">
                            <i class="icon-check"></i> Tambahkan
                        </button>
                    </div>
                </div>
                <div id="tampilitem"></div>
                <hr>
                <div class="row">
                <div class="col-lg-6">
                        <label for="total">SUBTOTAL PESANAN</label>
                        <input type="text" id="subtotal" class="form-control" name="subtotal" readonly style="font-size:22px; color:red;">
                    </div>
                    <div class="col-lg-6">
                        <label for="total">TOTAL PESANAN</label>
                        <input type="text" id="total" class="form-control" name="total" readonly style="font-size:22px; color:red;">
                    </div>

                    
                </div>
                <div class="row mt-2">
                    <div class="col-lg-6">
                    <label for="uangmuka">JML. DISKON</label>
                        <input type="text" id="jmldiskon" class="form-control" name="jmldiskon" style="font-size:22px; color:red;" value="0">
                        
                    </div>

                    <div class="col-lg-6">
                        <label for="uangmuka">UANGMUKA</label>
                        <input type="text" id="uangmuka" class="form-control" name="uangmuka" style="font-size:22px; color:red;" value="0">
                    </div>

                    
                </div>
                
                <div class="row">
                
                    <div class="col-lg-12">
                        <label for="total">KETERANGAN</label>
                        <textarea name="keterangan" id="keterangan" class="form-control"></textarea>
                    </div>
                   
                </div>
            </div>

            <div class="form-actions px-3 mt-1">
                <button type="button" class="btn btn-danger mr-1" id="batal">
                    <i class="icon-trash"></i> Cancel
                </button>
                <button type="button" class="btn btn-success" id="simpan">
                    <i class="icon-note"></i> Simpan Data
                </button>
            </div>

            
        </div>
    </div>    
    
    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <div class="card-title-wrap bar-info">
                    <h4 class="card-title" id="basic-layout-round-controls">Buat Pesanan Baru</h4>
                </div>
              
            </div>
            <div class="card-body">
                <div class="px-3">
                
                    
                        <input type="hidden" name="idtrans" value="">
                        <div class="form-body">

                            <div class="form-group">
                                <label for="alamat">ID. Pesanan<br>
                                <b>{{$idtrans}}</b></label>
                            </div>

                            <div class="form-group">
                                <label for="alamat">Tanggal <br>
                                <b>{{date('d/m/Y')}}</b></label>
                            </div>

                            <div class="form-group">
                                <label for="alamat">Tipe Pelanggan<span class="text-danger">*)</span></label>
                                <select name="tipepel" id="tipepel" class="form-control" required>
                                    <option value="member">Member</option>
                                    <option value="biasa">Biasa</option>
                                </select>
                            </div>

                            <div class="form-group" id="showidpel">
                                <label for="pelanggan">ID. Pelanggan<span class="text-danger">*)</span></label>
                                <input type="text" id="datamember" class="form-control" name="datamember" placeholder="Silahkan Scan Member" autofocus><small class="text-danger">Scan atau Ketikkan kode kemudian tekan <b>"ENTER"</b></small><br>
                                <button type="button" class="btn btn-sm btn-info" id="scanqr">
                            <i class="fa fa-search"></i> Scan
                        </button>&nbsp;

                        <div id="showscan" style="display:none;">
                            <video id="preview" style="width:250px; height:250px;"></video>
                        </div>
                            </div>
                            
                            <div class="form-group">
                                <label for="pelanggan">Nama Pelanggan</label>
                                <input type="text" id="pelanggan" class="form-control" name="pelanggan" required="required" readonly>
                            </div>
                            <div class="form-group">
                                <label for="alamat">Alamat</label>
                                <textarea name="alamat" id="alamat" class="form-control" rows="3" required="required" readonly></textarea>
                            </div>
                            <div class="form-group">
                                <label for="kontak">No. Telp</label>
                                <input type="text" id="kontak" class="form-control" name="kontak" required="required" readonly>
                            </div>
                           

                            <div class="form-group">
                                <label for="email">Sales</label>
                                <input type="text" id="sales" class="form-control" name="sales">
                            </div>

                            
                        </div>

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


<div class="modal fade" tabindex="-1" role="dialog" id="scanmodal">
    <div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
        <h5 class="modal-title">Scan Kartu Member</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
        </div>
        <div class="modal-body">
        <p>Modal body text goes here.</p>
        </div>
        <div class="modal-footer bg-whitesmoke br">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
        </div>
        </div>
    </div>
    </div>
</div>



</form>

<script>
    $(function(){

        $('#item').select2();
        $('#scanqr').on('click',function(){
            $('#showscan').show(500);
        });


        $('#datamember').on('keypress',function(e){
            var tombol = e.which;
            var idmember= $('#datamember').val();
            var idtrans = '{{$idtrans}}';
            var token = '{{csrf_token()}}';

            if(tombol == 13){
                if(idmember != ""){
                    $.ajax({
                        url : '{{url("ordercetakscan")}}',
                        data : 'qrcode='+idmember+'&idtrans='+idtrans+'&_token='+token,
                        type : 'POST',
                        success : function(result){                    
                            
                            $('#showscan').html('<div class="alert alert-warning" style="font-size:12px;"><b>KODE : '+result.memberreg+'<br>'+result.namapel+'</b><br>'+result.alamatpel+'<br><i>Diskon : '+result.diskon+' %</div>');                  
                            $('#jmldiskon').val(result.diskonpersen);
                            $('#total').val(result.total);
                            $('#datamember').val(result.memberreg);
                            $('#pelanggan').val(result.namapel);
                            $('#alamat').val(result.alamatpel);
                            $('#kontak').val(result.memberreg);
                        }

                    });
                }else{
                    alert('isi ID Member dahulu');
                }
            }
        });


        $('#simpan').on('click',function(){
            var tipe = $('#tipepel').val();
            var nama = $('#pelanggan').val();
            var alamat = $('#alamat').val();
            var kontak = $('#kontak').val();

            
            if(nama == "" || alamat == "" || kontak == "") {
                alert('Silahkan lengkapi Pelanggan / Member');
            } else{
                var tanya = confirm('Data akan tersimpan dalam database. Periksa kembali sebelum menyimpan. Apakah anda sudah yakin?');
                if(tanya){
                    $('#frmadmin').submit();
                }
            }
        });

        $('#tipepel').on('change',function(){
            var tipepel = $('#tipepel').val();
            if(tipepel == "biasa"){
                $('#showidpel').hide();
                $('#pelanggan').prop('readonly','');
                $('#alamat').prop('readonly','');
                $('#kontak').prop('readonly','');
            } else{
                $('#showidpel').show();
                $('#pelanggan').prop('readonly','readonly');
                $('#alamat').prop('readonly','readonly');
                $('#kontak').prop('readonly','readonly');
            }
        });


        var idtrans = '{{$idtrans}}';
        $('#tampilitem').load('{{url("/ordergriditem")}}/'+idtrans);
        $.get('{{url("/ordertotalharga")}}/'+idtrans,function(result){
            $('#subtotal').val(result.total);
            $('#total').val(result.total);
        });
       
        $('#additem').on('click',function(){
            var item = $('#item').val();
            var jumlah = $('#jumlah').val();
            var isbanner = $('#isbanner').val();
            var panjang = $('#panjang').val();
            var lebar = $('#lebar').val();
            var tipe = $('#tipeharga').val();
            var token = '{{csrf_token()}}'

            if(item == "") {
                alert('Pilih Item dahulu');
            } else if(jumlah == "") {
                alert('Masukkan Jumlah dahulu')
            } else {
                $.ajax({
                    url : '{{url("/orderitemsave")}}',
                    type : 'POST',
                    data : 'idtrans='+idtrans+'&item='+item+'&jumlah='+jumlah+'&isbanner='+isbanner+'&panjang='+panjang+'&lebar='+lebar+'&tipe='+tipe+'&_token='+token,
                    success : function(result) {
                        $('#tampilitem').load('{{url("/ordergriditem")}}/'+idtrans);
                        $.get('{{url("/ordertotalharga")}}/'+idtrans,function(result){
                            $('#subtotal').val(result.total);
                            $('#total').val(result.total);
                        });
                    }
                });
            }
        });
        $('#batal').on('click', function(){
            window.location.href="{{url('/orderdaftar')}}";
        });
    });

    function hapus(id) {
        $(function(){
            var idtrans = '{{$idtrans}}';
            var tanya = confirm('Apakah yakin akan menghapus data ini?');
            if(tanya) {
                $.ajax({
                    url : '{{url("ordergriddelete")}}/'+id,
                    success : function(result) {
                        $('#tampilitem').load('{{url("/ordergriditem")}}/'+idtrans);
                        $.get('{{url("/ordertotalharga")}}/'+idtrans,function(result){
                            $('#subtotal').val(result.total);
                            $('#total').val(result.total);
                        });
                    }
                });
            }
        });
    }
</script>


<!-- <script src="https://rawgit.com/schmich/instascan-builds/master/instascan.min.js"></script> -->
<script type="text/javascript" src="{{url('assets/webcam/js/instacam.min.js')}}"></script>

        <script type="text/javascript">
    

        var token = '{{csrf_token()}}';
        var idtrans = '{{$idtrans}}';
        let scanner = new Instascan.Scanner({ video: document.getElementById('preview') });
        scanner.addListener('scan', function (content) {
            $.ajax({
                url : '{{url("ordercetakscan")}}',
                data : 'qrcode='+content+'&idtrans='+idtrans+'&_token='+token,
                type : 'POST',
                success : function(result){                    
                    
                    $('#showscan').html('<div class="alert alert-warning" style="font-size:12px;"><b>KODE : '+result.memberreg+'<br>'+result.namapel+'</b><br>'+result.alamatpel+'<br><i>Diskon : '+result.diskon+' %</div>');                  
                    $('#jmldiskon').val(result.diskonpersen);
                    $('#total').val(result.total);
                    $('#datamember').val(result.memberreg);
                    $('#pelanggan').val(result.namapel);
                    $('#alamat').val(result.alamatpel);
                    $('#kontak').val(result.memberreg);
                }

            });
        });
        Instascan.Camera.getCameras().then(function (cameras) {
          if (cameras.length > 0) {
            scanner.start(cameras[0]);
          } else {
            console.error('No cameras found.');
          }
        }).catch(function (e) {
          console.error(e);
        });
      </script>

@endsection