@extends('layouts.admin')

@section('title', env('APP_NAME') . ' | เพิ่ม')

@section('styles')
<style>
.my-custom-scrollbar {
position: relative;
height: 300px;
overflow: auto;
}
.table-wrapper-scroll-y {
display: block;
}
</style>
@endsection

@section('content')

        <div class="row">
            <div class="col">
                <div class="card">
                    <div class="card-header text-white bg-dark">
                        Scan เพื่อจัดส่ง
                    </div><!--card-header-->
                    <div class="card-body">
                        <div class="row d-flex " >
                            <div class="form-group col-6" >
                                <div class="form-group col" >
                                    <label for="XVCarCode">ทะเบียนรถ</label>
                                    <input type="text" class="form-control" id="XVCarCode" name="XVCarCode" placeholder="ระบุทะเบียนรถ">
                                </div>
                                <div class="form-group col">
                                    <label for="XVCarCode">บาร์โค้ดกล่อง</label>
                                    <input type="text" style="margin-top:10px;" name="XVOrderBCode" id="XVOrderBCode" class="form-control" placeholder="แสกนบาร์โค้ด(กล่อง)">
                                </div>
                            </div>
                        </div>
                        <div class="table-wrapper-scroll-y my-custom-scrollbar">
                        <table class="table table-bordered table-striped mb-0" cellspacing="0"  width="100%" id="myTable">
                            <thead class="thead-dark">
                                <tr>
                                {{-- <th scope="col">#</th> --}}
                                <th scope="col">เลขที่กล่อง</th>
                                <th scope="col">เลขที่ Order</th>
                                <th scope="col">เลขที่อ้างอิง Order</th>
                                <th scope="col">จัดการ</th>
                                </tr>
                            </thead>
                            <tbody>


                            </tbody>
                        </table>
                        </div>

                    </div>
                    <div class="card-footer">
                    <div class="row">
                        <div class="col">
                            <a href="{{route('admin.scantransport.index')}}" class="btn btn-dark col-lg-2 active" role="button" aria-pressed="true">กลับ</a>
                        </div>

                    </div>
                    </div>
                </div><!--card-->
            </div><!--col-->
        </div><!--row-->
<form action="" method="POST" id="frm"  ><input type="hidden" name="_method" value="DELETE"><input type="hidden" name="_token" value="{{ csrf_token() }}"></form>


@endsection

    @section('scripts')
    <script>
          $(function () {
            $(document).ajaxSend(function() {
                $("#overlay").fadeIn(300);
            });

            if($('#XVCarCode').val() !=""){
                $('#XVOrderBCode').focus();
            }else{
                $('#XVCarCode').focus();
            }

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            const Toast = Swal.mixin({
            toast: true,
            position: 'bottom-end',
            showConfirmButton: false,
            timer: 1000,
            timerProgressBar: true,
            onOpen: (toast) => {
                toast.addEventListener('mouseenter', Swal.stopTimer)
                toast.addEventListener('mouseleave', Swal.resumeTimer)
            }
            })



            $('.dataTables_length').addClass('bs-select');


            var count_scan = 0;
            $('#XVOrderBCode').keyup(function(e){
                if(e.keyCode == 13)
                {
                    $this = $(this);
                    // if ($this.val().length != 18){

                    //     Swal.fire({
                    //     title: 'Oops....',
                    //     text: "เลขบาร์โค้ดไม่ถูกต้องกรุณาตรวจสอบ!",
                    //     icon: 'warning',
                    //     confirmButtonColor: '#3085d6',
                    //     confirmButtonText: 'OK'
                    //     }).then((result) => {
                    //         if (result.value) {
                    //             return false;
                    //         }
                    //     })
                    // }else
                    if ($('#XVCarCode').val().length == 0){
                        Swal.fire({
                        title: 'Oops....',
                        text: "กรุณณาระบุทะเบียนรถ!",
                        icon: 'warning',
                        confirmButtonColor: '#3085d6',
                        confirmButtonText: 'OK'
                        }).then((result) => {
                            if (result.value) {
                                return false;
                            }
                        })
                    }else{

                        $.ajax({
                            type:'POST',
                            url:'{{url('')}}/admin/scantransportUpdate',
                            data:{barcode: $this.val(),carCode:$('#XVCarCode').val(),location:10},
                            dataType: 'JSON',
                            success:function(data){
                                console.log(data)
                                if(data.success =="0"){
                                    Swal.fire({
                                    title: 'Oops....',
                                    text: "ไม่พบข้อมูลในระบบกรุณาตรวจสอบ !",
                                    icon: 'warning',
                                    confirmButtonColor: '#3085d6',
                                    confirmButtonText: 'OK'
                                    }).then((result) => {
                                    if (result.value) {
                                        $('#order_no').html("")
                                        $('#size').html("")

                                    }
                                    })
                                }else if(data.success == "2"){

                                    Swal.fire({
                                    title: 'Oops....',
                                    text: "Scan ซ้ำมีข้อมูลแล้ว",
                                    icon: 'warning',
                                    confirmButtonColor: '#3085d6',
                                    confirmButtonText: 'OK'
                                    }).then((result) => {
                                        $('#order_no').html("")
                                        $('#size').html("")
                                        $this.val('')
                                            return false;
                                    })
                                }
                                else{
                                    Toast.fire({
                                    icon: 'success',
                                    title: 'Scan สำเร็จ'

                                    })

                                    $('#myTable tbody').append($("<tr id=r"+$('#myTable tr').length+">")
                                        // .append($('<td>', { text: $('#myTable tr').length}))
                                        .append($('<td>', { text: data.XVBoxCode }))
                                        .append($('<td>', { text: data.XVOrderDocNo }))
                                        .append($('<td>', { text: data.XVOrderMItemNo }))
                                        .append($('<td>', { html: "<a href='#' onclick=del('"+data.XVBoxCode+"','"+$('#myTable tr').length+"')"+' class="btn btn-danger btn_del" data-toggle="tooltip" data-placement="top" title="ลบรายการ"><i class="fas fa-trash"></i></a>' }))
                                    )
                                    $this.val('')
                                }
                                setTimeout(function(){$("#overlay").fadeOut(300);},500);
                            }
                            }).done(function() {
                                setTimeout(function(){
                                    $("#overlay").fadeOut(300);
                                },500);
                            });
                    }
                }
            });

            $('#XVCarCode').keyup(function(e){
                if(e.keyCode == 13)
                {
                    var row=1;

                     $.ajax({
                        type:'POST',
                        url:'{{url('')}}/admin/scantransportGetByCar',
                        data:{carCode:$('#XVCarCode').val(),location:10},
                        dataType: 'JSON',
                        success:function(result){

                            if(result.success =="0"){
                                Swal.fire({
                                title: 'Oops....',
                                text: "ไม่พบข้อมูลในระบบกรุณาตรวจสอบ !",
                                icon: 'warning',
                                confirmButtonColor: '#3085d6',
                                confirmButtonText: 'OK'
                                }).then((result) => {
                                if (result.value) {
                                    $('#order_no').html("")
                                    $('#size').html("")
                                }
                                })
                            }else{
                                Toast.fire({
                                icon: 'success',
                                title: 'Scan สำเร็จ'
                                })


                                $('#myTable tbody tr').empty();
                                // console.log(result.datas[0].XVOrderBCode)
                                // for (var data in result.datas) {
                                for (i = 0; i < result.datas.length; i++) {
                                    $('#myTable tbody').append($("<tr id=r"+row+">")
                                        // .append($('<td>', { text: row }))
                                        .append($('<td>', { text: result.datas[i].XVBoxCode }))
                                        .append($('<td>', { text: result.datas[i].XVOrderDocNo }))
                                        .append($('<td>', { text: result.datas[i].XVOrderMItemNo }))
                                        .append($('<td>', { html: "<a href='#'  onclick=del('"+result.datas[i].XVBoxCode+"','"+row+"')"+' class="btn btn-danger btn_del" data-toggle="tooltip" data-placement="top" title="ลบรายการ"><i class="fas fa-trash"></i></a>' }))
                                    )
                                    row++;
                                }
                            }
                            setTimeout(function(){$("#overlay").fadeOut(300);},500);
                        }
                        }).done(function() {
                            setTimeout(function(){
                                $("#overlay").fadeOut(300);
                            },500);
                        });
                }
            })
          })

          function  del(boxcode,row) {

                Swal.fire({
                title: 'ยืนยันการยกเลิก ?',
                text: "คุณต้องการยกเลิกรายการเลขที่ "+ boxcode +" ใช่หรือไม่ !",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'ยืนยัน !',
                cancelButtonText: 'ยกเลิก'
                }).then((result) => {
                if (result.value) {
                    $.ajax({
                        type:'POST',
                        url:'{{url('')}}/admin/scantransportDel',
                        data:{barcode:boxcode,location:10},
                        dataType: 'JSON',
                        success:function(result){
                            if (result.success ==1)
                            $('#r'+row).remove();
                        }
                        }).done(function() {
                            setTimeout(function(){
                                $("#overlay").fadeOut(300);
                            },500);
                        });
                }
                })
          }

    </script>
    @endsection