@extends(backpack_view('blank'))
@section('content')
@php
    $data = \App\Models\GRN::with('requestBy')->find(request()->route('id'));
    $items = \App\Models\GRNItem::with('item','item.sets','item.sets.item','item.uom','item.category','supplier','location')->where('grn_id', $data->id)->get();
@endphp
<div class="row justify-content-center mt-5">
    <div class="col-sm-12 col-lg-12">
       <form id="grn-form">
          <input type="hidden" value="PUT" name="_method">
          <div class="card border-0 card-style">
             <div class="card-body ">
                <section class="container-fluid pl-0">
                   <h2>
                      <span class="text-capitalize">   <div id="btn-grn-status" class="btn rounded-pill"><i class="la la-info-circle"></i> {{ $data->status }}</div> 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">
                        @if($entry->status == "Waiting Approval" || $entry->status ==  "On Hold" || $entry->status ==  "Pending"   )
                            <button type="button" class="btn btn-success rounded-pill mb-3" id="search-items">
                            <i class="las la-boxes"></i>
                            Add Items
                            </button>
                        @endif
                      </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">
    </div>
    @if($entry->status == "Waiting Approval" || $entry->status ==  "On Hold" || $entry->status ==  "Pending"   )
    <button id="update-btn"  data-id="{{$data->id}}" type="button" class="btn btn-success">Update</button>
    <button id="approve-btn" name="btn-status"  data-id="{{$data->id}}" data-type="approve" type="button" class="btn btn-primary">
        <i class="la la-check-circle"></i> Approve
    </button>
    <button  id="reject-btn" name="btn-status"  data-id="{{$data->id}}" data-type="reject" type="button" class="btn btn-danger">
    <i class="la la-exclamation-triangle"></i>
    Reject</button>
    <button id="hold-btn" name="btn-status"  data-id="{{$data->id}}" data-type="hold" type="button" class="btn btn-warning">
    <i class="la la-exclamation-triangle"></i>
    Hold</button>
    @endif
    <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="//rawgit.com/rubaxa/Sortable/master/Sortable.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).ready(function() {
    //REINZIL DATATABLES
    dataItemsServer = {!!json_encode($items) !!};
    convertObject(dataItemsServer, dataItems);
    console.log(dataItemsServer);
    itemList.clear().rows.add(dataItems).draw();
    let data =  {!!json_encode($data) !!};
    $('#grn_no').val(data.grn_no)
    $('#remark').val(data.remark)
    $('#request_by').val(data.request_by.name)
    $('#grn_date').val(data.grn_date)
    //COLORING BUTTON STATUS OF GRN
    if(data.status == "Approved"){
        $('#btn-grn-status').addClass( "btn-success" );
    }else if(data.status == "Rejected"){
        $('#btn-grn-status').addClass( "btn-danger" );
    }else if(data.status = "On Hold"){
        $('#btn-grn-status').addClass( "btn-warning" );
    }else{
        $('#btn-grn-status').addClass( "btn-warning" );
    }

});

$(document).on('click', '#update-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.update', ':id')}}";
    url = url.replace(':id', $(this).data('id'));
    $.ajax({
        url: url,
        data: formData,
        dataType    : 'json',
        processData: false ,
        contentType: false,
        type: "POST",
    })
    .done(function (res) {
        if ($.isEmptyObject(res.errors)) {
            new Noty({
                text: "Success add data",
                type: "success"
            }).show();
            window.location.replace("{{route('grn.index')}}");
        }
    })
    .fail(function (jqXHR, ajaxOptions, thrownError) {
        new Noty({
            text: "failed add data",
            type: "danger"
        }).show();
        if(jqXHR.status = 422){
            $.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) {
                    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
                            }
                        }),
                    }
                }
            }
        });
    })

 /* delete item */
$('#item-list').on('click', '.btn-delete-item', function (){
    let $row = $(this).closest('tr');
    let data =  $('#item-list').DataTable().row($row).data();
    dataItems =  dataItems.filter(item => item.id !== data.id);
    itemList.clear().rows.add(dataItems).draw();
 })



$('#item-list tbody').on( 'click', '.btn-edit-item', function () {
    let item = itemList.row( $(this).parents('tr') ).data();
    console.log(item);
    //HIDDEN
    $('#grn_id').val(item.grn_id)
    $('#master_item_id').val(item.item_id)

    $('#modal-item-info').modal('show')
    $('#type').val(item.type).trigger("change");
    $('#name').val(item.name)
    $('#purchase_price').val(item.purchase_price)
    $('#selling_price').val(item.selling_price)
    $('#moc').val(item.moc)
    $('#stock').val(item.stock)
    $('#lead_time').val(item.lead_time)
    $('#qty_primary').val(item.qty_primary)
    $('#qty_receive').val(item.qty_receive)
    let $optionCategory = $("<option selected></option>").val(item.category.id).text(item.category.name);
    let $optionUom = $("<option selected></option>").val(item.uom.id).text(item.uom.name);
    $('[name="category"]').append($optionCategory).trigger('change');
    $('[name="uom"]').append($optionUom).trigger('change');


    $(document).on('click', '#btn-qty-update', function (e) {
        $('.text-danger').remove();
        let url = `{{route('grn.qty-receive', ':id')}}`;
        url = url.replace(':id', $(this).data('id'));
        console.log(url)
        let findForm = $("#qty-recevied-form");
        let form = $('#qty-recevied-form')[0];

        let formData = new FormData(form);
        let ajaxPost = getDataWithAjax(url, 'POST', formData);
        ajaxPost.done(function(res){
            console.log(res);
            $('#modal-item-info').modal('hide');
            location.reload();
            new Noty({
                text: "Success saved data",
                type: "success"
            }).show();

        })

        ajaxPost.fail(function(e){
            console.log(e);
            new Noty({
                text: "failed saved data",
                type: "danger"
            }).show();
            $.each(e.responseJSON.errors, function (elem, messages) {
                console.log(elem)
                findForm.find('#'+elem).after('<p class="text-danger">'+messages.join('')+'</p>');
            });
        })
    });
} );



$("button[name='btn-status']").click(function() {

    let status =  $(this).data('type')
    let url = '';
    if(status == 'approve'){
        url = `{{route('grn.approve', ':id')}}`
        url = url.replace(':id', $(this).data('id'));
    }else if(status == 'reject'){
        url = `{{route('grn.reject', ':id')}}`
        url = url.replace(':id', $(this).data('id'));
    }else if(status == 'hold'){
        url = `{{route('grn.hold', ':id')}}`
        url = url.replace(':id', $(this).data('id'));
    }

    let ajaxPost = getDataWithAjax(url, 'POST', []).done(function(res){
        new Noty({
            text: res,
            type: "success"
        }).show();
        window.location.replace("{{route('grn.index')}}");
    })

    ajaxPost.fail(function(e){
        console.log(e);
        new Noty({
            text: "failed to change status GRN",
            type: "danger"
        }).show();
    })


});

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);
}

function convertObject(source, target) {
    Object.keys(source).forEach(k => {
        if (source[k] !== null && typeof source[k] === 'object') {
            let newObject = {};
            let item = Object.assign(newObject, source[k].item);
            item.purchase_price = source[k].purchase_price;
            item.qty_primary = source[k].qty_primary;
            item.qty_receive = source[k].qty_receive;
            item.item_id = source[k].master_item_id
            item.supplier = source[k].supplier;
            item.location = source[k].location;
            item.supplier_id = source[k].supplier_id ? source[k].supplier_id  : '';
            item.location_id = source[k].location_id ? source[k].location_id  : '';
            item.grn_id = source[k].grn_id;
            target.push(newObject);
        }
    });
}

</script>
@endsection