@extends('layouts.admin.master')
@section('title', 'Stock Issue')

@section('content')
    <section class="home-section">
        <div class="home-title">
            <i class='bx bx-menu'></i>
            <span class="text">Stock Issue</span>
        </div>
        <div class="home-content">
            <div class="row pb-3 align-items-center" style="color:#512DA8; font-weight:bold">
                <div class="col">
                    <label>Update Stock Issue</label>
                </div>
                <div class="col" style="text-align: right">
                    <a href="{{ route('stockControl#stock_issue#issueListPage') }}"><button class="btn btn-success"
                            id="btn_Exit"><i class="fa-solid fa-circle-left"
                                style="padding-right: 5px"></i>Exit</button></a>
                    <button class="btn btn-primary" id="btn_Save"><i class="fa-regular fa-floppy-disk"
                            style="padding-right: 5px"></i>Update</button>
                </div>
            </div>
            <div id="issue_info_label" class="row align-items-center bg-white">
                <div class="col-6">
                    <label><i class="fa-regular fa-newspaper" style="padding-left:5px; padding-right: 12px"></i>Voucher
                        Info</label>
                </div>
                <div class="col-6" style="text-align: right">
                    <i class="bx bxs-chevron-down arrow"></i>
                </div>
            </div>
            <div class="voucher_info_container shadow-sm show_container">
                <div class="row">
                    <div class="col-5">
                        <div class="row">
                            <div class="col-4 mb-3">
                                <label class="form-label">Voucher No</label>
                            </div>
                            <div class="col-8">
                                <input type="text" id="issueID" name="issueID"
                                    value="{{ $selectedStockIssue[0]['stock_issue_id'] }}" hidden>
                                <input type="text" id="loginUserID" name="loginUserID" value="{{ Auth::User()->id }}"
                                    hidden>
                                <input class="form-control" type="text" id="voucher_no" name="voucher_no"
                                    value="{{ $selectedStockIssue[0]['issue_voucher_number'] }}" readonly>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-4 mb-3">
                                <label class="form-label">Date</label>
                            </div>
                            <div class="col-8">
                                <input class="form-control" id="issue_date" name="issue_date" type="date"
                                    value="{{ date('Y-m-d', strtotime($selectedStockIssue[0]['issue_date'])) }}">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-4 mb-3">
                                <label class="col-form-label">Issue Type</label>
                            </div>
                            <div class="col-8">
                                <select class="form-select" id="issue_type">
                                    <option>--Select--</option>
                                    @if ($stockIssueTypeList->count() > 0)
                                        @foreach ($stockIssueTypeList as $type)
                                            <option value="{{ $type->issue_type_id }}"
                                                {{ $selectedStockIssue[0]['issue_type_id'] == $type->issue_type_id ? 'selected="selected"' : '' }}>
                                                {{ $type->issue_type_name_1 }}</option>
                                        @endForeach
                                    @endif
                                </select>
                                <span class="text-danger">
                                    <span id="issue_type_error"></span>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="col-7">
                        <div class="row">
                            <div class="col-2">
                            </div>
                            <div class="col-10">
                                <textarea class="form-control" id="remark" name="remark" rows="3" placeholder="Remarks"
                                    value="{{ $selectedStockIssue[0]['remark'] }}">{{ $selectedStockIssue[0]['remark'] }}</textarea>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div id="issue_details_list_label" class="row align-items-center bg-white">
                <div class="col-6">
                    <label><i class="fa-solid fa-cookie-bite" style="padding-left:5px; padding-right: 13px"></i>Item
                        Details
                        Info</label>
                </div>
                <div class="col-6" style="text-align: right">
                    <i class="bx bxs-chevron-down arrow"></i>
                </div>
            </div>
            <div class="item_details_info_container shadow-sm show_container">
                <div class="row">
                    <div class="col-4">
                        <div class="row mb-3">
                            <div class="col-5">
                                <label class="form-label">Item Name</label>
                            </div>
                            <div class="col-7">
                                <select class="form-select select-option" id="item_name" name="item_name">
                                    @if (count($itemList) != 0)
                                        <option value="0">--Select One--</option>
                                        @foreach ($itemList as $item)
                                            <option value="{{ $item->item_id }}">{{ $item->item_name }}</option>
                                        @endforeach
                                    @endif
                                </select>
                                <span class="text-danger">
                                    <span id="item_name_error"></span>
                                </span>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-5">
                                <label class="form-label">Item Code</label>
                            </div>
                            <div class="col-7">
                                <select class="form-select" id="item_code" name="item_code">
                                    @if (count($itemList) != 0)
                                        <option value="0">--Select One--</option>
                                        @foreach ($itemList as $item)
                                            <option value="{{ $item->item_id }}">{{ $item->item_code }}</option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-5">
                                <label class="form-label">Bar Code</label>
                            </div>
                            <div class="col-7">
                                <input class="form-control" id="barcode" name="barcode" type="text" readonly>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-5">
                                <label class="form-label">Unit</label>
                            </div>
                            <div class="col-7">
                                <select class="form-select" id="unit_name" name="unit_name" readonly>
                                </select>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-5">
                                <label class="form-label">Store Quantity</label>
                            </div>
                            <div class="col-7">
                                <input class="form-control" id="store_Qty" name="store_Qty" type="text"
                                    value="0" readonly>
                                <span class="text-danger">
                                    <span id="store_Qty_error"></span>
                                </span>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-5">
                                <label class="form-label">Quantity</label>
                            </div>
                            <div class="col-7">
                                <input class="form-control" id="quantity" name="quantity" type="number"
                                    onkeypress="return /[0-9]/i.test(event.key)" value="1">
                                <input class="form-control" id="unit_cost" name="unit_cost" type="number" hidden>
                                <span class="text-danger">
                                    <span id="quantity_error"></span>
                                </span>
                            </div>
                        </div>
                        <div>
                            <button class="btn btn-primary mt-2" id="btn_Add"><i class="fa-solid fa-plus"
                                    style="padding-right: 5px"></i>Add</button>
                            <button class="btn btn-warning text-white mt-2" id="btn_Remove"><i class="fa-solid fa-minus"
                                    style="padding-right: 5px"></i>Remove</button>
                            <button class="btn btn-danger mt-2" id="btn_ClearDetail"><i class="fa-solid fa-eraser"
                                    style="padding-right: 5px"></i>Clear</button>
                        </div>
                    </div>
                    <div class="col-8">
                        <div class=".table-responsive border border-2"
                            style="height:480px; overflow-x:auto; white-space:nowrap; padding-left:10px; padding-right:10px; border-radius:10px;">
                            <table class="table table-hover stockissueTable" id="dataTable">
                                <thead class="sticky-top">
                                    <tr>
                                        <th scope="col">No</th>
                                        <th scope="col">Item Name</th>
                                        <th scope="col">Item Code</th>
                                        <th scope="col">Bar Code</th>
                                        <th scope="col">Batch No</th>
                                        <th scope="col">Unit</th>
                                        <th scope="col">Quantity</th>
                                        <th scope="col">Type</th>
                                        <th scope="col">Expire Date</th>
                                    </tr>
                                </thead>
                                <tbody id="issue_detail">

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

        {{-- Item Deletail Validation Modal --}}
        <div class="modal fade modal-sm" id="checkErrorModal" tabindex="-1" role="dialog" aria-hidden="true"
            data-bs-keyboard="false" data-bs-backdrop="static">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header" style="background-color: #512DA8">
                        <h5 class="modal-title fs-5 w-100" style="color: white">Warning</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <p class="text-danger"><i class="fa-solid fa-triangle-exclamation text-danger me-2"></i><span
                                id="error_text"></span></p>
                    </div>
                    <div class="modal-footer bg-secondary-subtle">
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal"
                            id="btn_CheckOk">OK</button>
                    </div>
                </div>
            </div>
        </div>

        {{-- Success Modal --}}
        <div class="modal fade modal-sm" id="successModal" tabindex="-1" aria-labelledby="successModalLabel"
            data-bs-backdrop="static" data-bs-keyboard="false" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header" style="background-color: #512DA8">
                        <h5 class="modal-title fs-5 w-100" id="successModalLabel" style="color: white">Success</h5>
                    </div>
                    <div class="modal-body">
                        <h6 id="success_text"><i class="fa-solid fa-circle-exclamation text-primary"></i> Update
                            successful!</h6>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn custom_btn" data-bs-dismiss="modal"
                            id="btn_successOK">OK</button>
                    </div>
                </div>
            </div>
        </div>

    </section>
    <script src="{{ asset('script/links_js/jquery.3.6.4.min.js') }}"></script>
    <script src="{{ asset('script/links_js/jquery.validate.1.19.5.js') }}"></script>
    <script src="{{ asset('script/links_js/jquery.dataTables.1.13.7.min.js') }}"></script>
    <script src="{{ asset('script/links_js/dataTables.bootstrap5_1.13.7.min.js') }}"></script>
    <script src="{{ asset('script/issue_script.js') }}"></script>
    <script>
        $(document).ready(function() {
            var selectedIssueDetailList = {!! json_encode($selectedStockIssuesDetailList->toArray()) !!};
            if (selectedIssueDetailList.length > 0) {
                $.each(selectedIssueDetailList, function(key, value) {
                    var expire_date = new Date(value.expire_date);
                    $('#issue_detail').append(
                        `<tr>
                            <td>${value.no}</td>
                            <td style="word-wrap:break-world; white-space:normal;">${value.item_name}</td>
                            <td>${value.item_code}</td><td>${value.barcode}</td><td>${value.batch_number}</td>
                            <td>${value.unit_name}</td>
                            <td>${parseFloat(value.quantity)}</td>
                            <td>${value.issue_type}</td>
                            <td>${('0' + expire_date.getDate()).slice(-2)+ '/' + ('0' + (expire_date.getMonth() + 1)).slice(-2) + '/' + expire_date.getFullYear()}</td>
                        </tr>`
                    );
                })
                setRowNumber_changed();
            };
            //-------Date------//
            var today = new Date();
            var now = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + today
                    .getDate())
                .slice(-2);
            $('#issue_date').val(now);
            $('#expire_date').val(now);

            var itemDetailList = {
                set: function(issue_detail_entry) {
                    if (selectedIssueDetailList == null) selectedIssueDetailList = [];
                    selectedIssueDetailList.push(issue_detail_entry);
                    var expire_date = new Date(issue_detail_entry.expire_date);
                    $('#issue_detail').append(
                        `<tr>
                            <td>${issue_detail_entry.no}</td>
                            <td style="word-wrap:break-world; white-space:normal;">${issue_detail_entry.item_name}</td>
                            <td>${issue_detail_entry.item_code}</td>
                            <td>${issue_detail_entry.barcode}</td>
                            <td>${issue_detail_entry.batch_number}</td>
                            <td>${issue_detail_entry.unit_name}</td>
                            <td>${issue_detail_entry.quantity}</td>
                            <td>${issue_detail_entry.issue_type}</td>
                            <td>${('0' + expire_date.getDate()).slice(-2)+ '/' + ('0' + (expire_date.getMonth() + 1)).slice(-2) + '/' + expire_date.getFullYear()}</td></tr>`
                    );

                    setRowNumber_changed();
                    return issue_detail_entry;
                },
            };

            //----------Double Click Table-------//
            $('#issue_detail').on('dblclick', 'tr', function() {
                var $rowClicked = $(this);
                var itemcode = $rowClicked.find('td:eq(2)').text();
                var batch_number = $rowClicked.find('td:eq(4)').text();
                var selecteddetail = selectedIssueDetailList.filter(x => x.item_code == itemcode && x
                    .batch_number ==
                    batch_number);
                if (selecteddetail[0] != undefined) {
                    selecteddetail = selecteddetail[0];
                    oldIssueDetailList = {!! json_encode($selectedStockIssuesDetailList->toArray()) !!};
                    $_StoreQty = oldIssueDetailList.filter(x => x.item_code == itemcode && x.is_update ==
                        selecteddetail
                        .is_update).reduce((accumulator, x) => {
                        return accumulator + parseFloat(x.quantity);
                    }, 0) ?? 0;

                    $('#item_name').val(selecteddetail.itemID);
                    $('#item_code').val(selecteddetail.itemID);
                    $('#barcode').val(selecteddetail.barcode);

                    $('#unit_name').append('<option value="' + selecteddetail.unitID + '">' + selecteddetail
                        .unit_name +
                        '</option>');
                    $('#unit_name').val(selecteddetail.unitID);
                    $('#unit_cost').val(selecteddetail.unit_cost);

                    $('#quantity').val(parseFloat(selecteddetail.quantity));
                    $('#expire_date').val(selecteddetail.expire_date);

                    $('#item_name').prop('disabled', true);
                    $('#item_code').prop('disabled', true);
                    $('#unit_name').prop('disabled', true);
                    $('#btn_Add').prop('disabled', true);

                    let dbl_url = '{{ route('stockControl#stock_issue#checkStoreQty') }}';
                    $.ajax({
                        url: dbl_url,
                        type: "get",
                        data: {
                            itemID: selecteddetail.itemID,
                            unitID: selecteddetail.unitID
                        },
                        contentType: 'application/json; charset=utf-8',
                        success: function(response) {
                            let Store_Qty = parseFloat(response.success);
                            Store_Qty += $_StoreQty;
                            // Store_Qty += (selecteddetail.is_update==1)?$_StoreQty:0;
                            $('#store_Qty').val(Store_Qty);
                        }
                    });
                }
            });
            //**************item selected change****************
            $(document).on("change", "#item_name, #item_code", ItemSelectedChange);

            function ItemSelectedChange() {
                let itemID = $(this).val();
                let items = {!! json_encode($itemList->toArray()) !!};
                const selected_item = items.filter(x => x.item_id == itemID);
                if (itemID > 0) {
                    $('#item_name').val(selected_item[0].item_id);
                    $('#item_code').val(selected_item[0].item_id);
                    $('#barcode').val(selected_item[0].bar_code);

                    $('#unit_name').empty();
                    $('#unit_name').append('<option value="' + selected_item[0].unit_id + '">' + selected_item[0]
                        .unit_name +
                        '</option>');
                    $('#unit_name').val(selected_item[0].unit_id);

                    let check_url = '{{ route('stockControl#stock_issue#checkStoreQty') }}';
                    $.ajax({
                        url: check_url,
                        type: "get",
                        data: {
                            itemID: selected_item[0].item_id,
                            unitID: selected_item[0].unit_id
                        },
                        contentType: 'application/json; charset=utf-8',
                        success: function(response) {
                            let Store_Qty = response.success;
                            $('#store_Qty').val(Store_Qty);
                        }
                    });

                } else {
                    $('#item_name').val(0);
                    $('#item_code').val(0);
                    $('#barcode').val(null);

                    $('#unit_name').empty();
                    $('#store_Qty').val(0);
                }
            };

            //*************Add Button****************************
            $('#btn_Add').click(function(e) {
                var issue_detail_entry = {
                    itemID: $('#item_name :selected').val(),
                    item_name: $('#item_name :selected').text(),
                    item_code: $('#item_code :selected').text(),
                    batch_number: 0,
                    barcode: $('#barcode').val(),
                    unitID: $('#unit_name :selected').val(),
                    unit_name: $('#unit_name :selected').text(),
                    quantity: $('#quantity').val(),
                    is_update: 0,
                    issue_type: ''
                };
                let add_url = '{{ route('stockControl#stock_issue#checkIssueDetailValidation') }}';
                $.ajax({
                    url: add_url,
                    type: "get",
                    data: issue_detail_entry,
                    // contentType: 'application/json; charset=utf-8',
                    success: function(response) {
                        clearError();
                        if (response.errors) {
                            $.each(response.errors, function(key, value) {
                                if (key == "itemID") {
                                    $('#item_name_error').html(value);
                                    $('#item_name').addClass('is-invalid');
                                }
                                if (key == "quantity") {
                                    $('#quantity_error').html(value);
                                    $('#quantity').addClass('is-invalid');
                                }
                            });
                        } else if (response.success) {
                            let resultList = response.success;

                            let storeQty = resultList[0];
                            let selectedItemList = resultList[1];

                            oldIssueDetailList = {!! json_encode($selectedStockIssuesDetailList->toArray()) !!};
                            $_StoreQty = oldIssueDetailList.filter(x => x.itemID ==
                                issue_detail_entry
                                .itemID).reduce((accumulator, x) => {
                                return accumulator + parseFloat(x.quantity);
                            }, 0) ?? 0;
                            storeQty += $_StoreQty;

                            if (storeQty == 0 || issue_detail_entry.quantity > storeQty) {
                                $('#store_Qty_error').html("Not enough quantity!");
                                $('#store_Qty').addClass('is-invalid');
                            } else {
                                var issue_Qty = parseFloat($('#quantity').val());
                                var selecteddetail = selectedIssueDetailList.filter(x => x
                                    .itemID ==
                                    issue_detail_entry.itemID && x.unitID ==
                                    issue_detail_entry.unitID);
                                if (selecteddetail[0] != undefined) {
                                    $('#item_name_error').html("Duplicate Item!");
                                    $('#item_name').addClass('is-invalid');
                                    return;
                                } else if (selecteddetail[0] == undefined) {
                                    for (var item of selectedItemList) {
                                        var balanceQty = item.receiveQty + item.purchaseQty;
                                        if (parseFloat(balanceQty) >= issue_Qty) {
                                            issue_detail_entry.batch_number = item.batch_number;
                                            issue_detail_entry.quantity = issue_Qty;
                                            issue_detail_entry.expire_date = item.expire_date;
                                            issue_detail_entry.issue_type = item.type;
                                            issue_Qty = 0;
                                            itemDetailList.set(issue_detail_entry);
                                            break;
                                        } else if (parseFloat(balanceQty) < issue_Qty) {
                                            issue_detail_entry.batch_number = item.batch_number;
                                            issue_detail_entry.quantity = parseFloat(item
                                                .BalanceQty);
                                            issue_Qty = issue_Qty - parseFloat(balanceQty);
                                            issue_detail_entry.expire_date = item.expire_date;
                                            issue_detail_entry.issue_type = item.type;
                                            itemDetailList.set(issue_detail_entry);
                                        }
                                    };
                                }
                            }
                            clearDetail();
                        }
                    },
                });
            });

            //----------Remove Button Click -------------//
            $('#btn_Remove').click(function() {
                var selecteddetail = selectedIssueDetailList.filter(x => x.itemID == $(
                        '#item_name :selected').val() &&
                    x.unitID == $('#unit_name :selected').val());
                if (selecteddetail != undefined) {
                    for (let i = 0; i < selecteddetail.length; i++) {
                        index = selectedIssueDetailList.findIndex(x => x == selecteddetail[i]);
                        selectedIssueDetailList.splice(index, 1);

                        var tbody = document.getElementById("issue_detail");
                        if (tbody.rows.length) {
                            tbody.deleteRow(index);
                        }
                    }
                    clearDetail();
                    setRowNumber_changed();
                }
            });

            //-----------Save Button Click --//
            $('#btn_Save').click(function() {

                if (selectedIssueDetailList.length == 0) {
                    $('#error_text').empty();
                    $('#error_text').text('You need to set item detail !');
                    $('#checkErrorModal').modal('show');
                    return;
                }
                let total_qty = selectedIssueDetailList.reduce((accumulator, x) => {
                    return accumulator + parseFloat(x.quantity);
                }, 0);

                var issue_master_entry = {
                    issueID: $('#issueID').val(),
                    loginUserID: $('#loginUserID').val(),
                    voucher_no: $('#voucher_no').val(),
                    issue_date: $('#issue_date').val(),
                    issue_type: $('#issue_type :selected').val(),
                    remark: $('#remark').val(),
                    totalQty: total_qty,
                    issue_detailList: selectedIssueDetailList
                };

                var url = '{{ route('stockControl#stock_issue#updateStockIssue') }}';
                $.ajax({
                    url: url,
                    type: "get",
                    data: issue_master_entry,
                    contentType: 'application/json; charset=utf-8',
                    success: function(response) {
                        clearError();
                        if (response.errors) {
                            // console.log(response.errors);
                            if (typeof(response.errors) === 'object') {
                                $.each(response.errors, function(key, value) {
                                    if (key == "issue_type") {
                                        $('#issue_type_error').html(value);
                                        $('#issue_type').addClass('is-invalid');
                                    }
                                    if (key == "storeQty") {
                                        $('#error_text').empty();
                                        $('#error_text').text(value);
                                        $('#checkErrorModal').modal('show');
                                        return;
                                    }
                                });
                            }
                        } else if (response.success) {
                            console.log(response.success);
                            $('#success_text').html(response.success);
                            $('#successModal').modal('show');
                        }
                    }
                });
            });

            function clearDetail() {
                $('#item_name').val(0);
                $('#item_code').val(0);
                $('#barcode').val(null);
                $('#unit_name').empty();
                $('#quantity').val(1);
                $('#store_Qty').val(0);
                $('#unit_cost').val(0);
                $('#item_name').prop('disabled', false);
                $('#item_code').prop('disabled', false);
                $('#unit_name').prop('disabled', false);
                $('#btn_Add').prop('disabled', false);

                clearError();
            }

            function clearError() {
                $('#item_name').removeClass('is-invalid');
                $('#item_name_error').html("");

                $('#quantity').removeClass('is-invalid');
                $('#quantity_error').html("");

                $('#store_Qty').removeClass('is-invalid');
                $('#store_Qty_error').html("");

                $('#issue_type').removeClass('is-invalid');
                $('#issue_type_error').html("");

                $('#issue_detaillist_error').html("");
            }

            $('#btn_Exit').click(function() {

            });

            $('#btn_ClearDetail').click(function() {
                clearDetail();
                clearError();
            });

            $('#btn_successOK').click(function() {
                window.close();
                var url = "{{ route('stockControl#stock_issue#issueListPage') }}";
                $(location).attr('href', url);
            });

            function setRowNumber_changed() {
                var j = 0;
                $('#issue_detail tr').each(function(key, value) {
                    ++j;
                    $('td:first-child', this).text(j);
                });
            }
        });
    </script>
@endsection