@extends(backpack_view('blank'))
@section('content')
<div class="row justify-content-center mt-5">
    <div class="col-sm-12 col-lg-12">
       <form id="stockRequistionForm">
          <div class="card border-0 card-style">
             <div class="card-body ">
                <section class="container-fluid pl-0">
                    <h2>
                      <span class="text-capitalize">Stock Requisition</span>
                      <small>Add Stock Requisition.</small>
                      <small><a href="{{route('stock-requisition.index')}}" class="d-print-none font-sm"><i class="la la-angle-double-left"></i> Back to all  <span>Stock Requisition</span></a></small>
                    </h2>
                  </section>
                <div class="row mt-4">
                   <div class="col-md-4" >
                      <label>Project</label>
                      <select name="projectId" class="form-control select2 projectId"  ></select>
                      <div id="projectId"></div>
                   </div>
                   <div class="col-md-4">
                      <label for="">Request Date</label>
                      <input id="requestDate" name="requestDate" type="text" class="form-control date_picker ">
                   </div>
                   <div class="col-md-4">
                    <label for="">Delivery Date</label>
                    <input id="deliveryDate" name="deliveryDate" type="text" class="form-control date_picker">
                    </div>
                   <div class="col-md-4">
                      <label for="">Departement</label>
                      <select name="department" class="form-control select2 departement"></select>
                      <div id="departement"></div>
                   </div>
                   <div class="col-md-4">
                    <label for="">Applied By</label>
                    <input type="text" class="form-control" value="{{ Auth::user()->name }}" readonly>
                   </div>
                   <div class="col-md-12 pt-3">
                    <div class="my-3">
                        <button type="button" class="btn btn-warning rounded-pill mb-3" id="search-items">
                            <i class="las la-boxes"></i>
                            Add Items
                        </button>
                    </div>
                    <div id="items"></div>
                    <table id="itemList" class="bg-white table table-striped table-hover nowrap rounded shadow-xs border-xs mt-2" cellspacing="0" width="100%">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Items Code</th>
                                <th>Name</th>
                                <th>Type</th>
                                <th>Category</th>
                                <th>UOM</th>
                                <th>Selling Price</th>
                                <th>Qty</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                    </table>
                   </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="createBtn" type="button" class="btn btn-success">Save</button>
    </div>
    <a href="{{route('stock-requisition.index')}}" class="btn btn-default"><span class="la la-ban"></span> &nbsp;Cancel</a>
 </div>
 </div>
 @include('app.requisition.modal-items')

 <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 >

var dataItems = [];
var itemList = $('#itemList').DataTable({
    data : dataItems,
    columns: [
        {
            data: "id",
            render: function (data, type, row, meta) {
                return meta.row + meta.settings._iDisplayStart + 1;
            },
            orderable: false,
            searchable: false
        },
        {data: 'item_code', name: 'item_code'},
        {data: 'name', name: 'name'},
        {data: 'type', name: 'type'},
        {
            data: "id",
            render: function (data, type, row, meta) {
                if(!isEmpty(row.category)){
                    return row.category.name;
                }else{ return ''}
            },
        },

        {
            data: "id",  name: 'uom',
            render: function (data, type, row, meta) {
                if(!isEmpty(row.uom)){
                    return row.uom.name;
                }else{ return ''}
            },

        },
        {data: 'selling_price', name: 'selling_price'},
        {data: 'qty', name: 'qty'},
    ],
    columnDefs: [ {
        targets: 8,
        data: null,
        defaultContent: `
        <button type="button" class="btn btn-sm btn-danger btn-delete-item"><i class="las la-trash"></i></button>
        `
    } ]

})

$(document).on('click', '#createBtn', function (e) {
    e.preventDefault();
    $('.text-danger').remove();
    let findForm = $("#stockRequistionForm");
    let form = $('#stockRequistionForm')[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('stock-requisition.store')}}";
    $.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('stock-requisition.index')}}");
    } else {
        new Noty({
            text: "failed add data",
            type: "danger"
        }).show();
        $.each(res.errors, function (elem, messages) {
            let el = elem.replace(/\./g,'');
            console.log(messages);
            findForm.find(`#${el}`).after('<small class="text-danger align-content-center">' + messages.join('') + '</small>');
        });
    }
    })
    .fail(function (jqXHR, ajaxOptions, thrownError) {
        console.log('Server error occured');
    });
});
    $(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
                            }
                        }),
                        pagination: {
                            more : data.next_page_url
                        }
                    }
                }
            }
        });


        $('.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.name + ' - ' +item.client_name,
                                id: item.id
                            }
                        }),
                        pagination: {
                            more : data.next_page_url
                        }
                    }
                }
            }
        });
    })

/* on click item search */
$(document).on('click', '#search-items', function (e) {
    $('#tableItems').DataTable().clear();
    $('#tableItems').DataTable().destroy();
    let url = `{{route('item.list.requistion')}}`;
    $('#tableItems').DataTable({
        processing: true,
        serverSide: true,
        ajax: url,
        columns: [
            {
                data: "id",
                render: function (data, type, row, meta) {
                    return `<input type="checkbox" name="selected_items[]" value="${row.id}">`;
                },
                orderable: false,
                searchable: false
            },
            {data: 'item_code', name: 'item_code'},
            {data: 'name', name: 'name'},
            {data: 'type', name: 'type'},
            {
                data: "id",
                render: function (data, type, row, meta) {
                    if(!isEmpty(row.category)){
                        return row.category.name;
                    }else{
                        return '';
                    }
                },
            },

            {
                data: "id",  name: 'uom',
                render: function (data, type, row, meta) {
                    if(!isEmpty(row.uom)){
                        return row.uom.name;
                    }else{
                        return '';
                    }
                },

            },

            {data: 'selling_price', name :'selling_price'},
            {
                data: "id",
                render: function (data, type, row, meta) {
                    if(!isEmpty(row.sets)){
                        let list =`<small><ul class="pl-0">`
                            $.each(row.sets, function( index, value ) {
                                let li = `<li>${value.item.name} - ${value.qty}</li>`;
                                list += li;
                            })
                        list += `</li><small>`;
                        return list;
                    }else{
                        return '';
                    }
                },

            },

            {
                data: "id",
                render: function (data, type, row, meta) {
                    return `<input style="width:50%" type="number" name="item_order_qty_${row.id}" value="0">`;
                },
                orderable: false,
                searchable: false
            },


        ],


    });
    $('#modalItems').appendTo("body").modal('show');
$(document).on('click', '#selected_add_btn', function (e) {
    e.stopImmediatePropagation();
    e.preventDefault();
        var items = $("input[name='selected_items[]']:checked");

        if(items.is(":checked")){
            let item_list = new Array();
            let qty_list = new Array();
            let url = `{{route('item.list.check')}}`;
            items.map(function(_, el) {
                var strQtypEl= "item_order_qty_".concat($(el).val());
                qty_list[$(el).val()] = $("input[name='"+strQtypEl+"']").val();
                item_list.push($(el).val());
            }).get();


            cleanArray = qty_list.filter(function () { return true });

            let data = {
                "items" : item_list,
                "qty" : cleanArray
            }
            console.log(data);
             var setData = getDataWithAjax(url, "GET", data);
             setData.done(function(res){
                res.map((item)=>{
                    dataItems.push(item)
                })
                 //CHECK if items any same id, and summed qty
                 result = dataItems.reduce((a, c) => {
                    let found = a.find(el => el.id === c.id);
                    if (found) {
                      found.qty += c.qty;
                    } else {
                      a.push(c);
                    }
                    return a;
                  }, []);

                dataItems = [...result];
                itemList.clear().rows.add(dataItems).draw();
                new Noty({
                    text: "Success add ittem",
                    type: "success"
                }).show();
             })
             setData.fail(function(e){
                if(parseInt(e.status) == 500 ||parseInt(e.status) == 404  ){
                    let data = e.responseJSON.data[0];
                    alert(`Item Code : ${data.item_code}\n type : ${data.type}\n Supplier : ${data.supplier.name}\n Stock : ${data.stock}\n MOC : ${data.moc}\n msg : ${e.responseJSON.message}\n`);
                }else if(parseInt(e.status) == 500){
                    alert(e.statusText);
                }
            })
        }else{
            alert("Please select the stock first.");
        }
        e.stopPropagation();
    });
});
 /* delete item */
$('#itemList').on('click', '.btn-delete-item', function (){
    let $row = $(this).closest('tr');
    let data =  $('#itemList').DataTable().row($row).data();
    dataItems =  dataItems.filter(item => item.id !== data.id);
    itemList.clear().rows.add(dataItems).draw();
 })
/* on click item search end */
function getDataWithAjax(url_, method_= 'GET', data_ = [])
{
	var ajax_ = $.ajax({
		url : url_,
		method : method_,
		data : data_,
	});

	return ajax_;
}

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

</script>
@endsection