@extends('layouts.app')
@section('title')
    Stock Adjustment
@endsection
@section('content')
    <style>
        .all_column {
            background: transparent;
            color: white;
        }

        .select2-container--default .select2-selection--multiple .select2-search__field::placeholder {
            color: rgb(183, 192, 205) !important;
            font-size: 14px !important;
        }

        .select2-container--default .select2-selection--single .select2-selection__placeholder {
            color: rgb(183, 192, 205) !important;
            font-size: 14px !important;
        }
    </style>
    <div class="card">
        <div class="card-body">
            <div class="row align-items-end mb-3">
                <div class="col-md-4">
                    <label>Type of Product</label>
                    <select id="filterTypeOfProduct" class="form-control" multiple>
                    </select>
                </div>
                <div class="col-md-4 d-flex">
                    <button type="button" id="applyFilter" class="btn btn-primary">Apply</button>
                    <button type="button" id="resetFilter" class="btn btn-secondary ms-2">Reset</button>
                </div>
            </div>
            <div class="table-responsive">
                <table class="table datatable table-bordered m-0">
                    <thead>
                        <tr>
                            <th>No.</th>
                            <th>Part No</th>
                            <th>Part Name</th>
                            <th>UOM</th>
                            <th>Type of Product</th>
                            <th>Available Qty</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <thead>
                        <tr>
                            <th></th>
                            <th>
                                <input type="text" id="search-part_no" class="all_column" placeholder="Search Part No">
                            </th>
                            <th>
                                <input type="text" id="search-part_name" class="all_column"
                                    placeholder="Search Part Name">
                            </th>
                            <th>
                                <input type="text" id="search-uom" class="all_column" placeholder="Search UOM">
                            </th>
                            <th>
                                <input type="text" id="search-type" class="all_column"
                                    placeholder="Search Type of Product">
                            </th>
                            <th>
                                <input type="text" id="search-qty" class="all_column" placeholder="Search Available Qty">
                            </th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    {{-- LOCATIONS MODAL --}}
    <div class="modal fade" id="exampleModalCenter" tabindex="-1" aria-labelledby="exampleModalCenterTitle"
        aria-modal="true" role="dialog" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalCenterTitle">
                        Adjust Quantity
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="" method="POST" id="updateForm">
                    @csrf
                    <div class="modal-body">
                        <input type="hidden" name="product_id" id="product_id">
                        <div class="row">
                            <div class="col-12 d-flex justify-content-between">
                                <h5>Part No: <span class="part_no_text"></span></h5>
                                <h5>Part Name: <span class="part_name_text"></span></h5>
                            </div>
                            <br>
                            <div class="col-12 d-flex">
                                <h5>Total Available Qty: <span class="qty_text"></span></h5>
                            </div>
                        </div>
                        <br>
                        <div class="row flex-row-reverse mb-1">
                            <div class="col-md-4 d-flex justify-content-end">
                                <button id="addRowBtn" type="button" class="btn btn-primary">
                                    <i class="bi bi-plus-circle"></i> Add Row
                                </button>
                            </div>
                        </div>
                        <div class="table-responsive">

                            <table class="table table-bordered m-0 w-100" id="modalTable">
                                <thead>
                                    <tr>
                                        <th>Department</th>
                                        <th>Area</th>
                                        <th>Rack</th>
                                        <th>Level</th>
                                        <th>Available Qty</th>
                                        <th>Add or Remove Qty</th>
                                        <th>Remark</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <input type="hidden" class="deleted_id" name="deleted_ids">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                            CANCEL
                        </button>
                        <button type="button" class="btn btn-primary" id="updateButton">
                            UPDATE
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script>
        var searchTimeout;
        let modalTable;
        var table;

        $(document).ready(function() {
            modalTable = $('#modalTable').DataTable();
            let bool = true;
            const tableKey = 'DataTables_DataTables_Table_0_' + window.location.pathname;
            const savedState = localStorage.getItem(tableKey);

            if (savedState) {
                bool = false;
            }

            const savedFilterType = JSON.parse(localStorage.getItem('productTypeFilter'));

            if (savedFilterType && savedFilterType.length > 0) {
                savedFilterType.forEach(function(type) {
                    const option = new Option(type.text, type.id, true, true);
                    $('#filterTypeOfProduct').append(option);
                });

                $('#filterTypeOfProduct').trigger('change');
            }

            table = $('.datatable').DataTable({
                perPageSelect: [5, 10, 15, ["All", -1]],
                processing: true,
                stateSave: true,
                serverSide: true,
                language: {
                    processing: 'Processing'
                },
                ajax: {
                    url: "{{ route('stock_adjustment.index') }}",
                    type: 'GET',
                    data: function(d) {
                        d.part_no = $('#search-part_no').val();
                        d.part_name = $('#search-part_name').val();
                        d.uom = $('#search-uom').val();
                        d.type = $('#search-type').val();
                        d.qty = $('#search-qty').val();
                        d.savedFilterType = JSON.parse(localStorage.getItem('productTypeIds'))
                        d.bool = bool;
                    }
                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'part_no',
                        name: 'part_no',
                    },
                    {
                        data: 'part_name',
                        name: 'part_name',
                    },
                    {
                        data: 'units.name',
                        name: 'units.name',
                        defaultContent: ''
                    },
                    {
                        data: 'type_of_products.type',
                        name: 'type_of_products.type',
                        defaultContent: ''
                    },
                    {
                        data: 'qty',
                        name: 'qty',
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },
                ],
                paging: true,
                pagingType: 'input',
            });
            bool = false;

            $(document).on('keyup', '#dt-search-0', function() {
                clearTimeout(searchTimeout);
                searchTimeout = setTimeout(function() {
                    table.search($('#dt-search-0').val()).draw(false);
                }, 1000);
            });

            $('.datatable thead tr:eq(1) th').each(function(i) {
                $('input', this).on('keyup change', function() {
                    if (table.column(i).search() !== this.value) {
                        table
                            .column(i)
                            .search(this.value)
                            .draw(false);
                    }
                });
            });

            let state = table.state.loaded();
            if (state) {
                table.columns().eq(0).each(function(colIdx) {
                    var colSearch = state.columns[colIdx].search.search;
                    if (colSearch) {
                        $('input', $('.datatable thead tr:eq(1) th').eq(colIdx)).val(colSearch);
                    }
                });
            }

            $('#applyFilter').on('click', function() {
                const selectedIdTextPairs = [];

                $('#filterTypeOfProduct').find('option:selected').each(function() {
                    const id = $(this).val();
                    const text = $(this).text();

                    selectedIdTextPairs.push({
                        id: id,
                        text: text
                    });
                });

                const selectedOptions = $('#filterTypeOfProduct').val();
                localStorage.setItem('productTypeIds', JSON.stringify(selectedOptions));
                localStorage.setItem('productTypeFilter', JSON.stringify(selectedIdTextPairs));
                table.ajax.reload();
            });

            $('#resetFilter').on('click', function() {
                $('#filterTypeOfProduct').val('').trigger('change');
                localStorage.removeItem('productTypeIds');
                localStorage.removeItem('productTypeFilter');
                table.ajax.reload();
            });

            $('#filterTypeOfProduct').select2({
                placeholder: 'Select Type of Product',
                ajax: {
                    url: '{{ route('type_of_product.search') }}',
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return {
                            q: params.term,
                            page: params.page || 1
                        };
                    },
                    processResults: function(data, params) {
                        params.page = params.page || 1;

                        return {
                            results: $.map(data.items, function(item) {
                                return {
                                    text: item.type,
                                    id: item.id,
                                };
                            }),
                            pagination: {
                                more: (params.page * 10) < data
                                    .total_count
                            }
                        };
                    },
                    cache: true
                }
            });
        });

        function getDropdownOptions(data) {
            let options = "";
            data.forEach((item) => {
                options += `<option value="${item.department}">${item.department}</option>`;
            });
            return options;
        }

        let rowCount = 0;

        var product_id;
        var departmentOptions;
        var area = [];
        var rack = [];
        var level = [];

        function render_locations(productId, partNo, partName, qty) {
            $('.part_no_text').text(partNo);
            $('.part_name_text').text(partName);
            quantity = qty;
            $('.qty_text').text(quantity);
            product_id = productId;
            $('#product_id').val(product_id);
            $('#updateForm').attr('action', '{{ route('stock_adjustment.update', ':id') }}'.replace(':id', productId));
            let url = '{{ url('wms/operations/stock-adjustment/edit') }}/' + productId;

            $.ajax({
                url: url,
                data: {
                    quantity: quantity,
                },
                method: 'GET',
                success: function(response) {
                    let rowsAdded = false;
                    if (quantity == "0") {
                        $('#addRowBtn').removeAttr('disabled');
                        area = response.locations.area;
                        rack = response.locations.area_rack;
                        level = response.locations.area_level;
                        departmentOptions = getDropdownOptions(response.locations.department);
                        modalTable.clear().draw(false);
                        modalTable.row
                            .add([
                                `<input type="hidden" name="locations[${rowCount}][product_id]" class="product_id" value="${product_id}">
                            <select class="form-select department" name="locations[${rowCount}][department]">
                                <option value="" selected disabled>Select Department</option>
                                ${departmentOptions}
                            </select>`,
                                `<select class="form-select area" name="locations[${rowCount}][area]">
                                <option value="" selected disabled>Select Area</option>
                            </select>`,
                                `<select class="form-select rack" name="locations[${rowCount}][rack]">
                                <option value="" selected disabled>Select Rack</option>
                            </select>`,
                                `<select class="form-select level" name="locations[${rowCount}][level]">
                                <option value="" selected disabled>Select Level</option>
                            </select>`,
                                `<input type="number" name="locations[${rowCount}][available_qty]" class="form-control" value="0" readonly>`,
                                `<input type="number" name="locations[${rowCount}][quantity]" class="form-control" value="0">`,
                                `<input type="text" name="locations[${rowCount}][remarks]" class="form-control" value="">`,
                                `<button type="button" class="btn btn-danger btn-sm delete-row"><i
                                            class="bi bi-trash"></i></button>`,
                            ])
                            .draw(false);
                        rowsAdded = true;
                        rowCount++


                    } else {
                        console.log("response");
                        console.log(response);
                        modalTable.clear().draw(false);

                        area = response.locations.area;
                        rack = response.locations.area_rack;
                        level = response.locations.area_level;
                        departmentOptions = getDropdownOptions(response.locations.department);
                        let rowsAdded = false;

                        response.location.forEach(function(location) {

                            modalTable.row.add([
                                location.area.department,
                                location.area.name,
                                location.rack.name,
                                location.level.name,
                                location.used_qty,
                                '<input type="number" name="quantities[' + location.id +
                                ']" class="form-control quantity-input" value="0">',
                                '<input type="text" name="remarks" class="form-control" value=""><input type="hidden" class="location_id" value="' +
                                location.id + '">',
                                `<button type="button"  class="btn btn-danger btn-sm delete-row"><i
                             class="bi bi-trash"></i></button>`,
                            ]).draw(false);
                        });
                        rowsAdded = true;
                    }

                    $('#exampleModalCenter').modal('show');
                },
                error: function(xhr) {
                    console.log(xhr.responseText);
                }
            });
        }

        $(document).on('click', '#addRowBtn', function() {
            addRowToDataTable();
        });

        function addRowToDataTable() {
            const rowCount = modalTable.rows().data().length + 1;

            modalTable.row
                .add([
                    `<input type="hidden" name="locations[${rowCount}][product_id]" class="product_id" value="${product_id}">
                    <select class="form-select department" name="locations[${rowCount}][department]">
                        <option value="" selected disabled>Select Department</option>
                        ${departmentOptions}
                    </select>`,
                    `<select class="form-select area" name="locations[${rowCount}][area]">
                        <option value="" selected disabled>Select Area</option>
                    </select>`,
                    `<select class="form-select rack" name="locations[${rowCount}][rack]">
                        <option value="" selected disabled>Select Rack</option>
                    </select>`,
                    `<select class="form-select level" name="locations[${rowCount}][level]">
                        <option value="" selected disabled>Select Level</option>
                    </select>`,
                    `<input type="number" name="locations[${rowCount}][available_qty]" class="form-control" value="0" readonly>`,
                    `<input type="number" name="locations[${rowCount}][quantity]" class="form-control" value="0">`,
                    `<input type="text" name="locations[${rowCount}][remarks]" class="form-control" value="">`,
                    `<button type="button" class="btn btn-danger btn-sm delete-row">
                        <i class="bi bi-trash"></i>
                    </button>`,
                ])
                .draw(false);
        }


        $(document).on("change", ".department", function() {
            const selectedValue = $(this).val();
            const closestTr = $(this).closest("tr");

            const filteredAreas = area.filter((area) => area.department == selectedValue);

            let areaOptions = '<option value="" selected disabled>Select Area</option>';
            filteredAreas.forEach((area) => {
                areaOptions +=
                    `<option value="${area.id}" data-rack_ids='${JSON.stringify(area.rack_id)}'>${area.name}</option>`;
            });

            closestTr.find(".area").html(areaOptions);
        });

        $(document).on("change", ".area", function() {
            const selectedValue = $(this).val();
            const closestTr = $(this).closest("tr");

            const rackIds = JSON.parse($(this).find(":selected").data("rack_ids"));

            const filteredRacks = rack.filter((rack) => rackIds.includes(rack.id.toString()));

            let rackOptions = '<option value="" selected disabled>Select Rack</option>';
            filteredRacks.forEach((rack) => {
                rackOptions +=
                    `<option value="${rack.id}" data-level_ids='${JSON.stringify(rack.level_id)}'>${rack.name}</option>`;
            });

            closestTr.find(".rack").html(rackOptions);
        });

        $(document).on("change", ".rack", function() {
            const selectedValue = $(this).val();
            const closestTr = $(this).closest("tr");

            const levelIds = JSON.parse($(this).find(":selected").data("level_ids"));

            const filteredLevels = level.filter((level) => levelIds.includes(level.id.toString()));

            let levelOptions = '<option value="" selected disabled>Select Rack</option>';
            filteredLevels.forEach((level) => {
                levelOptions += `<option value="${level.id}" >${level.name}</option>`;
            });

            closestTr.find(".level").html(levelOptions);
        });

        var deletedId = [];

        $(document).on('click', '.delete-row', function() {
            deleted_id = $(this).closest('tr').find('.location_id').val() || null;
            if (deleted_id != null) {
                deletedId.push(deleted_id);
            }
            $('.deleted_id').val(deletedId);
            modalTable.row($(this).closest('tr')).remove().draw(false);
        });


        document.getElementById('updateButton').addEventListener('click', function(e) {
            let invalidInput = false;

            document.querySelectorAll('.quantity-input').forEach(function(input) {
                if (input.value == '' || input.value == null) {
                    invalidInput = true;
                    input.classList.add('is-invalid');
                } else {
                    input.classList.remove('is-invalid');
                }
            });

            if (!invalidInput) {
                $(this).closest('form').submit();
            }
        });
    </script>
@endsection