@extends('layouts.app')
@section('title')
    Product Reordering Create
@endsection
@section('button')
    <a type="button" class="btn btn-info" href="{{ route('product_reordering.index') }}">
        <i class="bi bi-arrow-left"></i> Back
    </a>
@endsection
@section('content')
    <div class="card">
        <form method="post" action="{{ route('product_reordering.store') }}" enctype="multipart/form-data">
            @csrf
            <div class="card-body">
                <div class="row">
                    <div class="col-12 d-flex justify-content-end">
                        <button type="button" class="btn btn-primary" id="additem" data-bs-toggle="modal"
                            data-bs-target="#exampleModalCenter">ADD PRODUCTS</button>
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="table-responsive">
                        <table class="table table-bordered m-0" id="mainTable">
                            <thead>
                                <tr>
                                    <th>Sr No</th>
                                    <th>Part No</th>
                                    <th>Part Name</th>
                                    <th>Unit</th>
                                    <th>Type of Product</th>
                                    <th>Model</th>
                                    <th>Variance</th>
                                    <th>Critical Min</th>
                                    <th>Minimum Qty</th>
                                    <th>Maximum Qty</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="card-footer">
                    <div class="row">
                        <div class="d-flex gap-2 justify-content-end col-12">
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    {{-- PRODUCTS 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-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalCenterTitle">
                        PRODUCTS
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" onclick="selectedRowsProducts = {};$('#modalTable input:checked').prop('checked', false);modalTable.ajax.reload();"></button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table class="table table-bordered m-0 w-100" id="modalTable">
                            <thead>
                                <tr>
                                    <th>
                                        <input type="checkbox" id="selectAll" style="width: 22px; height: 22px;">
                                    </th>
                                    <th>Part No</th>
                                    <th>Part Name</th>
                                    <th>Unit</th>
                                    <th>Type of Product</th>
                                    <th>Model</th>
                                    <th>Variance</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondry" data-bs-dismiss="modal" onclick="selectedRowsProducts = {};$('#modalTable input:checked').prop('checked', false);modalTable.ajax.reload();">
                        CANCEL
                    </button>
                    <button type="button" class="btn btn-primary" onclick="add_product()">
                        ADD
                    </button>
                </div>
            </div>
        </div>
    </div>
    <script>
        let mainTable;
        let modalTable;
        var selectedRowsProducts = {};
        const addedProductIds = new Set();
        $(document).ready(function() {
            modalTable = $('#modalTable').DataTable({
                perPageSelect: [5, 10, 15, ["All", -1]],
                processing: true,
                serverSide: true,
                language: {
                    processing: 'Processing'
                },
                ajax: {
                    url: "{{ route('product.reordering') }}",
                    type: 'GET',
                },
                columns: [{
                        data: 'id',
                        name: 'id',
                        orderable: false,
                        searchable: false,
                        render: function(data, type, row, meta) {
                            let checked = selectedRowsProducts[row.id] ? 'checked' : '';
                            return `
                                <input class="form-check-input product_id" type="checkbox" id="inlineCheckbox_${row.id}" value="${row.id}" ${checked}>
                            `;
                        }
                    }, {
                        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: 'model',
                        name: 'model',
                    },
                    {
                        data: 'variance',
                        name: 'variance',
                    },
                ],
                paging: true,
                pagingType: 'input',
            });

            mainTable = $('#mainTable').DataTable();

            $('#selectAll').on('change', function() {
                var $modal = $(this).closest('.modal');
                $modal.find('.product_id').prop('checked', this.checked).trigger('change');
            });

            $(document).on('change', '#modalTable .product_id', function() {
                var $modal = $(this).closest('.modal');
                var allChecked = $modal.find('.product_id').length === $modal.find('.product_id:checked')
                    .length;
                $modal.find('#selectAll').prop('checked', allChecked);
                var row = $(this).closest('tr');

                var rowData = modalTable.row(row).data();
                var productId = $(this).val();

                if ($(this).is(':checked')) {
                    selectedRowsProducts[productId] = rowData;
                } else {
                    delete selectedRowsProducts[productId];
                }
            });
        });

        let bool = 0;

        function add_product() {
            Object.values(selectedRowsProducts).forEach(rowData => {
                var productId = rowData.id;

                if (!addedProductIds.has(productId)) {
                    mainTable.row.add([
                        mainTable.rows().data().length + 1,
                        rowData.part_no ?? '',
                        rowData.part_name ?? '',
                        rowData.units?.name ?? '',
                        rowData.type_of_products?.type ?? '',
                        rowData.model ?? '',
                        rowData.variance ?? '',
                        `<input type="number" class="form-control critical_min" name="products[${mainTable.rows().data().length + 1}][critical_min]"><input type="hidden" name="products[${mainTable.rows().data().length + 1}][product_id]" class="product_id" value="${productId}">`,
                        `<input type="number" class="form-control min_qty" name="products[${mainTable.rows().data().length + 1}][min_qty]">`,
                        `<input type="number" class="form-control max_qty" name="products[${mainTable.rows().data().length + 1}][max_qty]">`,
                        `<button type="button" class="btn btn-danger btn-sm remove-product"><i class="bi bi-trash"></i></button>`
                    ]).draw(false);
                    addedProductIds.add(productId);
                    delete selectedRowsProducts[productId ?? ''];
                }
                bool++;
            });

            $('#modalTable input:checked').prop('checked', false);
            $('#exampleModalCenter').modal('hide');
        }

        $(document).on('click', '.remove-product', function() {
            var row = $(this).closest('tr');
            var productId = row.find('.product_id').val();
            addedProductIds.delete(+productId);
            delete selectedRowsProducts[productId ?? ''];
            mainTable.row(row).remove().draw(false);
            resetSerialNumbers(mainTable);
        });

        function resetSerialNumbers() {
            if ($('#mainTable tbody tr:first').find('td:first').text() != 'No data available in table') {
                $('#mainTable tbody tr').each(function(index) {
                    $(this).find('td:first').text(index + 1);
                });
            }
        }
    </script>
@endsection