@extends(backpack_view('blank'))
@section('content')
@php
    $data = \App\Models\StockRequisition::with('project','department')->find(request()->route('id'));
    $items = \App\Models\StockRequisitionItemList::with('item','item.uom','item.category')->where('stock_requisition_id', $data->id)->get();
@endphp
<div class="row justify-content-center mt-5">
    <div class="col-sm-12 col-lg-12">
       <form id="stockRequistionForm">
        <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">Stock Requisition</span>
                      <small>Edit 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="">Department</label>
                      <select name="department" class="form-control select2 department"></select>
                      <div id="department"></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">
                    <button type="button" class="btn btn-warning rounded-pill mb-3" id="search-items">
                        <i class="las la-boxes"></i>
                        Add Items
                    </button>
                    <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">

    @if ($data->is_approved == "pending approval")
    <button  id="updateBtn"  data-id="{{$data->id}}"  type="button" class="btn btn-success">Update</button>
    <button  id="approveBtn" data-id="{{$data->id}}" type="button" class="btn btn-primary">
        <i class="la la-check-circle"></i>
        Approve</button>
    <button  id="rejectBtn" data-id="{{$data->id}}" type="button" class="btn btn-danger">
        <i class="la la-exclamation-triangle"></i>
        Reject</button>
    @endif

    <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 data = {!!json_encode($data)!!};
    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).ready(function() {

        $(".projectId").select2({
            data: [{
                id: data.project_id,
                text: data.project.project_no
            }]
        });
        $('.projectId').select2().trigger('change');
        $('#requestDate').val(data.request_date);
        $('#deliveryDate').val(data.delivery_date);
        $(".department").select2({
            data: [{
                id: data.department_id,
                text: data.department.name
            }]
        });
        $('.department').select2().trigger('change');

        //REINZIL DATATABLES
        dataItemsServer = {!!json_encode($items) !!};
        convertObject(dataItemsServer, dataItems);
        itemList.clear().rows.add(dataItems).draw();

    });
    $(document).ready(function() {
        $('.date_picker').datepicker({
            format: 'yyyy-mm-dd',
        });
        $('.department').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
                            }
                        }),
                        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
                        }
                    }
                }
            }
        });
    })

$(document).on('click', '#updateBtn', 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.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('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 (res) {
        new Noty({
            text: "Server error occured'",
            type: "danger"
        }).show();
    });
});
    $(document).on('click', '#approveBtn', function(e) {
        console.log('approve');
        let url = `{{route('requsition.approve', ':id')}}`
        url = url.replace(':id', $(this).data('id'));
        let setData = getDataWithAjax(url, "POST", data);

        setData.done(function(res) {
            new Noty({
                text: "Success Approve Requistion",
                type: "success"
            }).show();
            window.location.replace("{{route('stock-requisition.index')}}");
        })

        setData.fail(function(res) {
            new Noty({
                text: res.responseJSON.errors,
                type: "danger"
            }).show();
        })

    });

    $(document).on('click', '#rejectBtn', function(e) {
        console.log('reject');
        let url = `{{route('requsition.reject', ':id')}}`
        url = url.replace(':id', $(this).data('id'));
        let setData = getDataWithAjax(url, "POST", data);
        setData.done(function(res) {
            new Noty({
                text: "Success Reject Requistion",
                type: "success"
            }).show();
            window.location.replace("{{route('stock-requisition.index')}}");
        })

        setData.fail(function(res) {
            new Noty({
                text: res.responseJSON.errors,
                type: "danger"
            }).show();
        })

    });
    /* on click item search */

    /* 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
                });
                console.log(item_list);
                let data = {
                    "items": item_list,
                    "qty": cleanArray
                }

                var setData = getDataWithAjax(url, "GET", data);
                setData.done(function(res) {
                    res.map((item) => {
                        dataItems.push(item)
                    })
                    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();
                })
                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}\ntype : ${data.type}\nSupplier : ${data.supplier}\nStock : ${data.stock}\nMinimum Order Qty : ${data.moc}\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);
    }

    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.qty = source[k].qty;
                target.push(newObject);
            }
        });
    }
</script>
@endsection