@extends(backpack_view('blank'))
@section('content')
<div class="row justify-content-center mt-5">
    <div class="col-sm-12 col-lg-12">
       <form id="grn-form">
          <div class="card border-0 card-style">
             <div class="card-body ">
                <section class="container-fluid pl-0">
                   <h2>
                      <span class="text-capitalize">GRN </span>
                      <small>Goods Received Note</small>
                      <small><a href="{{route('grn.index')}}" class="d-print-none font-sm"><i class="la la-angle-double-left"></i> Back to all  <span>GRN </span></a></small>
                   </h2>

                </section>
                <div class="row mt-4">
                   <div class="col-md-4 mb-2" >
                      <label>GRN No.</label>
                      <input type="text" class="form-control" id="grn_no" readonly>
                   </div>
                   <div class="col-md-4 mb-2">
                      <label for="">Request By</label>
                      <input type="text" class="form-control" id="request_by" readonly>
                   </div>
                   <div class="col-md-4 mb-2">
                      <label for="">GRN Date</label>
                      <input id="grn_date" name="grn_date" type="text" class="form-control date_picker ">
                   </div>
                   <div class="col-md-12">
                      <label for="">Remark</label>
                      <textarea name="remark" class="form-control" id="remark" cols="10" rows="2"></textarea>
                   </div>
                   <div class="col-md-12 pt-3">
                      <div class="my-3">

                            <button type="button" class="btn btn-success rounded-pill mb-3" id="search-items">
                            <i class="las la-boxes"></i>
                            Add Items
                            </button>

                      </div>
                      <div id="items"></div>
                      <div class="table-responsive">
                      <table id="item-list" class="bg-white table table-striped table-hover nowrap rounded shadow-xs border-xs mt-2" cellspacing="0" width="100%">
                         <thead>
                            <tr>
                               <th>Action</th>
                               <th>#</th>
                               <th>Item Code</th>
                               <th>Item Name</th>
                               <th>Supplier</th>
                               <th>UoM</th>
                               <th>Location</th>
                               <th>Purchase Price</th>
                               <th>QTY Primary</th>
                               <th>QTY Receive</th>
                            </tr>
                         </thead>
                      </table>
                      </div>
                   </div>
                </div>
             </div>
          </div>
       </form>
    </div>
 </div>
 <div id="saveActions" class="form-group">
    <input type="hidden" name="save_action" value="save_and_back">
    <div class="btn-group" role="group">
          <button  id="create-btn" type="button" class="btn btn-success">Save</button>
    </div>
    <a href="{{route('grn.index')}}" class="btn btn-default"><span class="la la-ban"></span> &nbsp;Cancel</a>
 </div>
 </div>
 @include('app.inventory.GRN.modal')

 <style>
    .card-style {
        overflow: hidden;
        border-radius: 20px;
        border: none;
        box-shadow: 0 4px 24px 0 rgb(0 0 0 / 5%);
    }
</style>
@endsection
@section('after_styles')
<link rel="stylesheet" href="{{ asset('packages/backpack/crud/css/crud.css').'?v='.config('backpack.base.cachebusting_string') }}">
<link rel="stylesheet" href="{{ asset('packages/backpack/crud/css/show.css').'?v='.config('backpack.base.cachebusting_string') }}">
<link rel="stylesheet" href="{{ asset('packages/select2/dist/css/select2.min.css')}}">
<link rel="stylesheet" href="{{ asset('packages/select2-bootstrap-theme/dist/select2-bootstrap.css')}}">
<link rel="stylesheet" href="{{ asset('packages/bootstrap-datepicker/dist/css/bootstrap-datepicker.css')}}">
<link rel="stylesheet" href="{{ asset('packages/datatables.net-bs4/css/dataTables.bootstrap4.min.css')}}">
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.3.3/css/select.dataTables.min.css">
@endsection

@section('after_scripts')
<script src="{{ asset('packages/select2/dist/js/select2.full.js')  }}"></script>
<script src="{{ asset('packages/bootstrap-datepicker/dist/js/bootstrap-datepicker.js')  }}"></script>
<script src="{{ asset('packages/datatables.net/js/jquery.dataTables.js')  }}"></script>
<script src="{{ asset('packages/datatables.net-bs4/js/dataTables.bootstrap4.js')  }}"></script>
<script src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js"></script>
<script >

 @stack('extra-script')
$(document).on('click', '#create-btn', function(e) {
    e.preventDefault();
    $('.text-danger').remove();
    let findForm = $("#grn-form");
    let form = $('#grn-form')[0];
    let formData = new FormData(form);
    if(!isEmpty(dataItems)){
        for (var i = 0; i < dataItems.length; i++) {
            formData.append('items[]', JSON.stringify(dataItems[i]));
        }
    }

    let url = "{{route('grn.store')}}";
    $.ajax({
            url: url,
            data: formData,
            dataType: 'json',
            processData: false,
            contentType: false,
            type: "POST",
        })
        .done(function(res) {
            new Noty({
                text: "Success add data",
                type: "success"
            }).show();
            window.location.replace("{{route('grn.index')}}");
        })
        .fail(function(jqXHR, ajaxOptions, thrownError) {
            if (jqXHR.status = 422) {
                new Noty({
                    text: "failed add data",
                    type: "danger"
                }).show();
                $.each(jqXHR.responseJSON.errors, function(elem, messages) {
                    let el = elem.replace(/\./g, '');
                    findForm.find(`#${el}`).after('<small class="text-danger align-content-center">' + messages.join('') + '</small>');
                });
            }

        });
});
    $(document).ready(function() {
        $('.date_picker').datepicker({
            format: 'yyyy-mm-dd',
        });
        $('.departement').select2({
            theme: "bootstrap",
            placeholder: 'Select Project..',
            allowClear: true,
            ajax: {
                url: "{{ route('ajax.department.index') }}",
                dataType: 'json',
                delay: 200,
                cache: true,
                data: function(params) {
                    return {
                        q: params.term || '',
                        page: params.page || 1
                    }
                },
                processResults: function(data, params) {
                    console.log(data);
                    return {
                        results: $.map(data.data, function(item) {
                            return {
                                data : item,
                                text: item.name,
                                id: item.id
                            }
                        }),
                    }
                }
            }
        });


        $('.projectId').select2({
            theme: "bootstrap",
            placeholder: 'Select Project..',
            allowClear: true,
            ajax: {
                url: "{{ route('ajax.project.index') }}",
                dataType: 'json',
                delay: 200,
                cache: true,
                data: function(params) {
                    return {
                        q: params.term || '',
                        page: params.page || 1
                    }
                },
                processResults: function(data, params) {
                    return {
                        results: $.map(data.data, function(item) {
                            return {
                                data : item,
                                text: item.project_no + ' - ' +item.client_name,
                                id: item.id
                            }
                        }),
                    }
                }
            }
        });
    })



/* on click item search end */
function getDataWithAjax(url_, method_ = 'GET', data_ = []) {
    var ajax_ = $.ajax({
        processData: false,
        dataType: 'json',
        contentType: false,
        url : url_,
        method : method_,
        data : data_,
    });

    return ajax_;
}

function isEmpty(str) {
    return (!str || str.length === 0);
}

</script>
@endsection