@extends('layouts.app')
@section('title')
    PURCHASE PLANNING CREATE
@endsection
@section('button')
    <a type="button" class="btn btn-info" href="{{ route('purchase_planning.index') }}">
        <i class="bi bi-arrow-left"></i> Back
    </a>
@endsection
@section('content')
    <style>
        table thead th,
        table tbody td {
            width: 350px !important;
        }
    </style>
    <div class="card">
        <form method="post" action="{{ route('purchase_planning.store') }}" enctype="multipart/form-data">
            @csrf
            <div class="card-body">
                <div class="row">
                    <h5>PURCHASE PLANNING DETAILS</h5>
                </div>
                <br>
                <div class="row">
                    <div class="col-lg-6 col-sm-6 col-12">
                        <div class="row align-items-center">
                            <label for="ref_no" class="form-label col-4">Ref No :</label>
                            <div class="col-6">
                                <input readonly type="text" name="ref_no" id="ref_no" class="form-control rounded-4"
                                    value="{{ $ref_no }}">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12">
                        <div class="row align-items-center">
                            <label for="date" class="form-label col-4">Date :</label>
                            <div class="col-6">
                                <input type="text" name="date" id="date"
                                    class="form-control datepicker-current-date rounded-4" value="{{ date('d/m/Y') }}">
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="order_no" class="form-label col-4">Order No :</label>
                            <div class="col-6">
                                <select name="order_id" onchange="order_change()" id="order_id" class="form-select"
                                    style="width: 100% !important;">
                                    @if (old('order_id') != null)
                                        @php
                                            $order_id = App\Models\Order::select('id', 'order_no')->find(
                                                old('order_id'),
                                            );
                                        @endphp
                                        @if ($order_id)
                                            <option value="{{ $order_id->id }}" selected style="color: black;">
                                                {{ $order_id->order_no }}
                                            </option>
                                        @else
                                            <option value="" selected disabled>Invalid Order No Selected
                                            </option>
                                        @endif
                                    @else
                                        <option value="" selected disabled>Select Order No</option>
                                    @endif
                                </select>
                            </div>
                            <div class="col-2 p-0">
                                <a href="#" target="_blank" id="so_view">
                                    <i class="bi bi-eye me-1"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="created_by" class="form-label col-4">Created By</label>
                            <div class="col-6">
                                <input type="text" readonly name="created_by" id="created_by"
                                    class="form-control rounded-4" value="{{ Auth::user()->user_name }}">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="customer" class="form-label col-4">Customer :</label>
                            <div class="col-6">
                                <input type="text" readonly name="customer_name" id="customer_name"
                                    class="form-control rounded-4" value="{{ old('customer') }}">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-12 mt-3">
                        <div class="row align-items-center">
                            <label for="order_month" class="form-label col-4">Order Month :</label>
                            <div class="col-6">
                                <input type="month" readonly name="order_month" id="order_month"
                                    class="form-control rounded-4" value="{{ old('order_month') }}">
                            </div>
                        </div>
                    </div>
                </div>
                <br>
                <div class="row">
                    <h5>PRODUCT DETAILS</h5>
                </div>
                <br>
                <div class="row">
                    <div class="table-responsive">
                        <table class="table table-bordered m-0" id="productTable">
                            <thead>
                                <tr>
                                    <th>Sr No</th>
                                    <th>Part No</th>
                                    <th>Part Name</th>
                                    <th>Type of Product</th>
                                    <th>Firm Qty</th>
                                    <th>Total Qty (1 Month Firm + 5 Month Forecast)</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
                <br>
                <div class="row">
                    <h5>PLANNING DETAILS</h5>
                </div>
                <br>
                <div class="row">
                    <div id="loading-message" style="margin-bottom: 10px; display: none; font-weight: bold;">
                        Loading data, please wait...
                    </div>
                    <div class="table-responsive">
                        <table class="table table-bordered m-0" id="planningTable">
                            <thead>
                                <tr>
                                    <th>Sr No</th>
                                    <th>Part No</th>
                                    <th>Part Name</th>
                                    <th>Parent Product</th>
                                    <th>Type of Product</th>
                                    <th>UOM</th>
                                    <th>Forecast Month</th>
                                    <th>Total Qty</th>
                                    <th>Inventory Qty</th>
                                    <th>Outstanding Qty</th>
                                    <th>Balance</th>
                                    <th>MOQ</th>
                                    <th>Qty Planning</th>
                                    <th>Supplier</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="card-footer">
                <div class="row">
                    <div class="d-flex gap-2 justify-content-end col-12">
                        <input type="hidden" id="storedData" name="details">
                        <button type="button" class="btn btn-primary" id="saveForm">Save</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
    {{-- SUPPLIER MODAL --}}
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalTitle" aria-modal="true"
        role="dialog">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <input type="hidden" id="product_ids">
                    <input type="hidden" id="parent_product_ids">
                    <h5 class="modal-title" id="exampleModalTitle">
                        ADD SUPPLIERS
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12 d-flex justify-content-between">
                            <div>Part No: <span class="part_no_text"></span></div>
                            <div>Qty Planning: <span class="qty_planning_text"></span></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 d-flex justify-content-between">
                            <div>Part Name: <span class="part_name_text"></span></div>
                            <div>Qty Supplier: <span class="qty_supplier_text"></span></div>
                        </div>
                    </div>
                    <br>
                    <div class="table-responsive" id="popUp">
                        <table class="table table-bordered m-0 w-100" id="supplierTable">
                            <thead>
                                <tr>
                                    <th>Sr No</th>
                                    <th>Supplier Name</th>
                                    <th>Lead Time (Week)</th>
                                    <th>Quantity</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="saveModal">Add</button>
                </div>
            </div>
        </div>
    </div>
    <link rel="stylesheet" href="{{ asset('assets/css/bootstrap-datepicker.min.css') }}">
    <script src="{{ asset('assets/js/bootstrap-datepicker.min.js') }}"></script>
    <script>
        var orderViewUrlTemplate = '{{ route('order.view', ':orderId') }}';
        let planningTable;
        let supplierTable;
        let productTable;
        let suppliers = [];
        let orderDetails;
        $(document).ready(function() {
            $('#date').datepicker({
                format: 'dd/mm/yyyy',
                autoclose: true,
                todayHighlight: true,
                orientation: 'bottom'
            });

            function initSelect2WithAjax(selector, placeholder, route) {
                $(selector).select2({
                    placeholder: placeholder,
                    ajax: {
                        url: route,
                        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.order_no,
                                        id: item.id,
                                    };
                                }),
                                pagination: {
                                    more: (params.page * 10) < data.total_count
                                }
                            };
                        },
                        cache: true
                    }
                });
            }
            initSelect2WithAjax('#order_id', 'Select Order No', '{{ route('order.search.pp') }}');

            productTable = $('#productTable').DataTable();
            planningTable = $('#planningTable').DataTable();
            supplierTable = $('#supplierTable').DataTable();
            order_change();
            sessionStorage.clear();
            suppliers = @json($suppliers);
        });

        function order_change() {
            var orderId = $("#order_id").val();
            if (orderId) {
                $.ajax({
                    url: "{{ route('order.search.detail') }}",
                    type: 'GET',
                    data: {
                        id: orderId
                    },
                    success: function(order) {
                        $('#pic_email').val(order.customers.pic_email);
                        $('#customer_name').val(order.customers.name);
                        $('#pic_name').val(order.customers.pic_name);
                        $('#pic_phone').val(order.customers.phone);
                        let date2 = new Date(order.order_month);
                        let formattedDate2 = date2.getFullYear() + '-' + ('0' + (date2.getMonth() + 1)).slice(-
                            2);
                        $('#order_month').val(formattedDate2);
                        $('#order_date').val(order.date);

                        appendOrderDetails(order.order_detail);
                        orderDetails = order.order_detail;

                        var orderViewUrl = orderViewUrlTemplate.replace(':orderId', orderId);
                        $('#so_view').attr('href', orderViewUrl);
                        if (order.attachment != null) {
                            $('#attachment').attr('href',
                                `{{ asset('/order-attachments/') }}/${order.attachment}`);
                        } else {
                            $('#attachment').attr('href', '#');
                        }
                    }
                });
            } else {
                $('#pic_email').val('');
                $('#customer_name').val('');
                $('#pic_name').val('');
                $('#pic_phone').val('');
                $('#order_month').val('');
                $('#order_date').val('');

                productTable.clear().draw(false);
                planningTable.clear().draw(false);

                $('#so_view').attr('href', '#');
                $('#attachment').attr('href', '#');
            }
            sessionStorage.clear('suppliers');
        };

        let selectedIds = [];

        function appendOrderDetails(orderDetails) {
            productTable.clear();
            orderDetails.forEach(detail => {
                productTable.row.add([
                    productTable.rows().data().length + 1,
                    detail.products.part_no,
                    detail.products.part_name,
                    detail.products.type_of_products.type ?? '',
                    `${detail.firm_qty}<input type="hidden" value="${detail.product_id}" name="products[${detail.product_id}][product_id]"><input type="hidden" value="${detail.firm_qty}" name="products[${detail.product_id}][product_qty]"><input type="hidden" value="${Number(detail.firm_qty) + Number(detail.n1_qty) + Number(detail.n2_qty) + Number(detail.n3_qty) + Number(detail.n4_qty) + Number(detail.n5_qty)}" name="products[${detail.product_id}][total_qty]">`,
                    Number(detail.firm_qty) + Number(detail.n1_qty) + Number(detail.n2_qty) + Number(detail
                        .n3_qty) + Number(detail.n4_qty) + Number(detail.n5_qty)
                ]).draw(false);
                selectedIds.push({
                    id: detail.product_id,
                    qty: Number(detail.firm_qty) + Number(detail.n1_qty) + Number(detail.n2_qty) + Number(
                        detail.n3_qty) + Number(detail.n4_qty) + Number(detail.n5_qty),
                });
            });
            appendPlanningDetails(selectedIds);
        }

        function appendPlanningDetails(selectedIds) {
            $('#loading-message').html('Loading... <span id="loading-progress">0%</span>').show();

            $.ajax({
                url: '{{ route('purchase_planning.bom.get') }}',
                method: 'GET',
                data: {
                    data: selectedIds
                },
                success: function(response) {
                    planningTable.clear();

                    const parts = Object.values(response);
                    const total = parts.length;
                    let rowIndex = 1;
                    let chunkSize = 50;
                    let start = 0;

                    function renderChunk() {
                        const chunk = parts.slice(start, start + chunkSize);
                        const rows = [];

                        chunk.forEach((part) => {
                            const balance = Math.max(part.qty - part.inventory_qty - part
                                .outstanding_qty, 0);
                            rows.push([
                                rowIndex,
                                `${part.part_no}<input type="hidden" value="${part.product_id}" class="form-control product_id" name="planning[${rowIndex}][product_id]"><input type="hidden" value="${part.parent_id}" class="form-control parent_product_id" name="planning[${rowIndex}][parent_product_id]"><input type="hidden" value='${JSON.stringify(part.sub_part_ids)}' class="form-control sub_part_ids" name="planning[${rowIndex}][sub_part_ids]"><input type="hidden" value="${part.own_qty}" class="form-control part_qty" name="planning[${rowIndex}][part_qty]">`,
                                part.part_name,
                                part.parent_part_no,
                                part.type,
                                part.unit,
                                `<select class="form-select forcasting" name="planning[${rowIndex}][forcasting]">
                                    ${[...Array(9).keys()].map(i =>
                                        `<option value="${i + 1}" ${i + 1 === 6 ? 'selected' : ''}>${i + 1}</option>`
                                    ).join('')}
                                </select>`,
                                `${parseFloat(part.qty).toFixed(4)}<input type="hidden" value="${parseFloat(part.qty).toFixed(4)}" class="form-control total_qty" name="planning[${rowIndex}][total_qty]">`,
                                `<input type="number" readonly value="${part.inventory_qty}" class="form-control inventory_qty" name="planning[${rowIndex}][inventory_qty]">`,
                                `<input type="number" readonly value="${+part.outstanding_qty < 0 ? 0 : Math.max(part.outstanding_qty)}" class="form-control outstanding_qty" name="planning[${rowIndex}][outstanding_qty]">`,
                                `<input type="number" readonly value="${parseFloat(balance).toFixed(4)}" class="form-control balance" name="planning[${rowIndex}][balance]">`,
                                `<input type="number" readonly value="${part.moq}" style="width:250px !important;" class="form-control moq" name="planning[${rowIndex}][moq]">`,
                                `<input type="number" readonly value="0" class="form-control planning_qty" name="planning[${rowIndex}][planning_qty]">`,
                                `<button type="button" class="btn btn-info openModal" data-supplier="${part.supplier_name}" data-lead="${part.lead_time}" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="bi bi-plus-square me-2"></i>Add</button>`
                            ]);
                            rowIndex++;
                        });

                        planningTable.rows.add(rows).draw(false);

                        start += chunkSize;

                        // Update percentage
                        let percent = Math.min(100, Math.floor((start / total) * 100));
                        $('#loading-progress').text(`${percent}%`);

                        if (start < total) {
                            setTimeout(renderChunk, 5); // Next chunk
                        } else {
                            $('#loading-message').html('Completed ✅').fadeOut(1000);
                        }
                    }

                    renderChunk();
                }
            });
        }

        var partQty = 0;

        $('#planningTable').on('change', '.forcasting', function() {
            const $row = $(this).closest('tr');
            const parentId = $row.find('.parent_product_id').val();
            const input = $row.find('input[name^="planning["]');

            const inputName = input.attr('name');
            const rowIndex = inputName.match(/\[(\d+)\]/);
            const forecastMonths = parseInt($(this).val());
            const productId = $row.find('input.product_id').val();
            partQty = parseFloat($row.find('input.part_qty').val());

            const forecastResult = findForecast(parentId);
            if (forecastResult) {
                let forecastTotal = 0;
                if (forecastMonths >= 1) forecastTotal += Number(forecastResult.firm_qty);
                if (forecastMonths >= 2) forecastTotal += Number(forecastResult.n1_qty);
                if (forecastMonths >= 3) forecastTotal += Number(forecastResult.n2_qty);
                if (forecastMonths >= 4) forecastTotal += Number(forecastResult.n3_qty);
                if (forecastMonths >= 5) forecastTotal += Number(forecastResult.n4_qty);
                if (forecastMonths >= 6) forecastTotal += Number(forecastResult.n5_qty);

                if (forecastMonths > 6) {
                    const extraMonths = forecastMonths - 6;
                    forecastTotal += extraMonths * Number(forecastResult.n5_qty);
                }

                const totalQty = forecastTotal * partQty;

                const usedQty = parseFloat($row.find('input.inventory_qty').val()) || 0;
                const outQty = parseFloat($row.find('input.outstanding_qty').val()) || 0;

                const balance = Math.max(totalQty - usedQty - outQty, 0);

                $row.find('td:eq(7)').html(
                    `${totalQty.toFixed(4)}<input type="hidden" value="${totalQty.toFixed(4)}" class="form-control total_qty" name="planning[${rowIndex[1]}][total_qty]">`
                );
                $row.find('input.total_qty').val(totalQty.toFixed(4));
                $row.find('input.balance').val(balance.toFixed(4));
                $row.find('td:eq(10)').find('.balance').val(balance.toFixed(4));
            } else {
                console.log('Forecast not found');
            }
        });

        function findInOrderDetails(productId) {
            return orderDetails.find(o => o.product_id == productId) || null;
        }

        function findForecast(parentId) {
            const orderRow = findInOrderDetails(parentId);
            if (orderRow) {
                return orderRow;
            } else {
                let foundResult = null;
                planningTable.rows().every(function() {
                    const $planRow = $(this.node());
                    const rawSubParts = $($planRow).find('.sub_part_ids').val() || '[]';
                    newPartQty = parseFloat($planRow.find('.part_qty').val());
                    let subParts = [];

                    try {
                        subParts = JSON.parse(rawSubParts);
                        if (typeof subParts !== 'object') subParts = [];

                        subParts = Object.keys(subParts).map(key => ({
                            product_id: key,
                            qty: subParts[key]
                        }));
                    } catch (e) {
                        console.error('Invalid JSON in sub_part_ids:', rawSubParts);
                    }

                    const matchedSubPart = subParts.find(p => p.product_id == parentId);
                    if (matchedSubPart) {
                        const subQty = parseFloat(matchedSubPart.qty) || 1;
                        partQty = partQty * subQty;
                        partQty = partQty * newPartQty;
                        foundResult = findForecast($($planRow).find('.parent_product_id').val());
                        if (foundResult) {
                            return false;
                        }
                    }
                    return true;
                });
                return foundResult;
            }
        }

        //SUPPLIER WORK
        function addRow(button) {
            var row = button.parentNode.parentNode.cloneNode(true);
            var rowData = $(row).find('td').map(function() {
                return $(this).html();
            }).get();

            supplierTable.row.add(rowData).draw(false);
            resetSerialNumbers();

            $('.qty').trigger('keyup');
        }

        function removeRow(button) {
            if ($('#supplierTable tr').length > 2) {
                supplierTable.row($(button).closest('tr')).remove().draw(false);
                resetSerialNumbers();
            } else {
                $('#popUp').prepend(`
                    <div class="alert border-warning alert-dismissible fade show text-warning" role="alert">
                    <b>Warning!</b> Can't remove Row!.
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                `);
            }

            $('.qty').trigger('keyup');
        }

        function resetSerialNumbers() {
            if ($('#supplierTable tbody tr:first').find('td:first').text() != 'No data available in table') {
                $('#supplierTable tbody tr').each(function(index) {
                    $(this).find('td:first').text(index + 1);
                });
            }
        }

        var lead_time = 0;

        $(document).on('click', '.openModal', function() {
            lead_time = $(this).data('lead');
            let hiddenId = $(this).closest('tr').find('.product_id').val();
            let parentHiddenId = $(this).closest('tr').find('.parent_product_id').val();
            $('#product_ids').val(hiddenId);
            $('#parent_product_ids').val(parentHiddenId);
            let storedData = sessionStorage.getItem(`supplierData${hiddenId}-${parentHiddenId}`);

            supplierTable.clear().draw(false);

            if (storedData) {
                storedData = JSON.parse(storedData);
                storedData.forEach(element => {
                    let optionsHtml = '';
                    suppliers.forEach(supplier => {
                        let selected = '';
                        if (element.supplier === `${supplier.id}`) {
                            selected = 'selected';
                        }
                        optionsHtml +=
                            `<option value="${supplier.id}" ${selected}>${supplier.name}</option>`;
                    });

                    supplierTable.row.add([
                        supplierTable.rows().data().length + 1,
                        `<select class="form-control supplier">${optionsHtml}</select>`,
                        `<input type="text" class="form-control leadtime" value="${element.leadtime}">`,
                        `<input type="number" class="form-control qty" value="${element.qty}">`,
                        `<button type="button" class="btn btn-success btn-sm me-2" onclick="addRow(this)"><i class="bi bi-plus"></i></button><button type="button" class="btn btn-danger btn-sm" onclick="removeRow(this)"><i class="bi bi-dash"></i></button>`
                    ]).draw(false);
                });
            } else {
                let selectedSupplier = $(this).data('supplier');
                let optionsHtml = '';
                suppliers.forEach(supplier => {
                    optionsHtml +=
                        `<option value="${supplier.id}" ${selectedSupplier == supplier.id ? 'selected' : ''}>${supplier.name}</option>`;
                });

                supplierTable.row.add([
                    supplierTable.rows().data().length + 1,
                    `<select class="form-control supplier">${optionsHtml}</select>`,
                    `<input type="text" class="form-control leadtime" value="${lead_time ?? ''}">`,
                    `<input type="number" class="form-control qty">`,
                    `<button type="button" class="btn btn-success btn-sm me-2" onclick="addRow(this)"><i class="bi bi-plus"></i></button><button type="button" class="btn btn-danger btn-sm" onclick="removeRow(this)"><i class="bi bi-dash"></i></button>`
                ]).draw(false);
            }

            let part_no = $(this).closest('tr').find('td:eq(1)').text();
            let part_name = $(this).closest('tr').find('td:eq(2)').text();
            let planning_qty = $(this).closest('tr').find('.planning_qty').val();
            $('.part_no_text').text(part_no);
            $('.part_name_text').text(part_name);
            $('.qty_planning_text').text(planning_qty);
            $('.qty').trigger('keyup');
        });

        $(document).on('keyup change', '.qty', function() {
            let total = 0;
            $('#supplierTable .qty').each(function() {
                total += +$(this).val();
            });
            $('.qty_supplier_text').text(total);
        });

        $('#saveModal').on('click', function() {
            $('#exampleModal').modal('hide');
            let hiddenId = $('#product_ids').val();
            let parentHiddenId = $('#parent_product_ids').val();
            let data = [];
            $('#supplierTable tbody tr').each(function() {
                let rowData = {};
                rowData['supplier'] = $(this).find('.supplier').val();
                rowData['leadtime'] = $(this).find('.leadtime').val();
                rowData['qty'] = $(this).find('.qty').val();
                rowData['hiddenId'] = hiddenId;
                rowData['parentHiddenId'] = parentHiddenId;
                data.push(rowData);
            });
            sessionStorage.setItem(`supplierData${hiddenId}-${parentHiddenId}`, JSON.stringify(data));
            $('#planningTable tbody tr').each(function() {
                if ($(this).find('.product_id').val() == hiddenId && $(this).find('.parent_product_id').val() == parentHiddenId) {
                    let total_qty = $('.qty_supplier_text').text();
                    $(this).find('.planning_qty').val(total_qty);
                }
            });
        });
        //END SUPPLIER WORK

        $('#saveForm').on('click', function() {
            $(this).prop('disabled', true);
            $('#productTable').DataTable().page.len(-1).draw(false);
            $('#planningTable').DataTable().page.len(-1).draw(false);
            let array = [];
            $('#planningTable tbody tr').each(function() {
                let hiddenId = $(this).find('.product_id').val();
                let parentHiddenId = $(this).find('.parent_product_id').val();
                let storedData = sessionStorage.getItem(`supplierData${hiddenId}-${parentHiddenId}`);
                if (storedData == null) {
                    storedData = `{"hiddenId":"${hiddenId}", "parentHiddenId":"${parentHiddenId}"}`;
                }
                array.push(JSON.parse(storedData));
            });
            $('#storedData').val(JSON.stringify(array));
            $(this).closest('form').submit();
        });
    </script>
@endsection