@extends('layouts.app')
@section('title')
    PURCHASE PLANNING VIEW
@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')
    <div class="card">
        <div class="card-body">
            <br>
            <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 type="text" name="ref_no" id="ref_no" class="form-control rounded-4"
                                value="{{ $purchase_planning->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" disabled name="date" id="date" class="form-control rounded-4"
                                value="{{ $purchase_planning->date ?? '' }}">
                        </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" disabled onchange="order_change()" id="order_id" class="form-select"
                                style="width: 100% !important;">
                                @if ($purchase_planning->order_id != null)
                                    @php
                                        $order_id = App\Models\Order::select('id', 'order_no')->find(
                                            $purchase_planning->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="{{ $purchase_planning->date }}">
                        </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 months 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>
            <br>
            <div class="row">
                <h5>VERIFICATION DETAILS</h5>
            </div>
            <br>
            <div class="row">
                <div class="table-responsive">
                    <table class="table table-bordered m-0" id="verificationTable">
                        <thead>
                            <tr>
                                <th>Sr No</th>
                                <th>User Name</th>
                                <th>Designation</th>
                                <th>Department</th>
                                <th>Date Time</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($verification_details as $verification_detail)
                                @if ($verification_detail->status != 'prepared')
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td>{{ $verification_detail->user->user_name ?? '' }}</td>
                                        <td>{{ $verification_detail->department->name ?? '' }}</td>
                                        <td>{{ $verification_detail->designation->name ?? '' }}</td>
                                        <td>{{ $verification_detail->date }}</td>
                                        <td>{{ $verification_detail->status }}</td>
                                    </tr>
                                @endif
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </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>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <script>
        var orderViewUrlTemplate = '{{ route('order.view', ':orderId') }}';
        let planningTable;
        let supplierTable;
        let productTable;
        let suppliers = [];
        let orderDetails;
        $(document).ready(function() {
            $('#order_id').select2();
            $('.card-body').find('input, select').prop('disabled', true);
            productTable = $('#productTable').DataTable();
            planningTable = $('#planningTable').DataTable();
            supplierTable = $('#supplierTable').DataTable();
            order_change();
            var supplier_details = @json($supplier_details);
            supplier_details.forEach(element => {
                let data = sessionStorage.getItem(
                    `supplierData${element.product_id}`);
                if (!data) {
                    data = [];
                } else {
                    data = JSON.parse(data);
                }
                let rowData = {};
                rowData['supplier'] = `${element.supplier_id}`;
                rowData['leadtime'] = element.leadtime;
                rowData['qty'] = element.qty;
                rowData['hiddenId'] = element.product_id;
                rowData['parentHiddenId'] = element.parent_id;
                data.push(rowData);
                sessionStorage.setItem(`supplierData${element.product_id}-${element.parent_id}`,
                    JSON.stringify(data));
            });
            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');
        };

        function appendOrderDetails(orderDetails) {
            productTable.clear();
            orderDetails.forEach(detail => {
                $product = (detail.products) ? detail.products : detail.product;
                productTable.row.add([
                    productTable.rows().data().length + 1,
                    $product.part_no,
                    $product.part_name,
                    $product.type_of_products.type ?? '',
                    `${detail.firm_qty ?? detail.product_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]">`,
                    (detail.firm_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) : detail.total_qty
                ]).draw(false);
            });
            appendPlanningDetails();
        }

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

            $.ajax({
                url: '{{ route('purchase_planning.render.planning') }}',
                method: 'GET',
                data: {
                    id: @json($purchase_planning->id)
                },
                success: function(response) {
                    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) => {
                            rows.push([
                                rowIndex,
                                `${part.product.part_no}
                                <input type="hidden" value="${part.product_id}" class="form-control product_id" name="planning[${rowIndex}][product_id]">`,

                                `${part.product.part_name ?? ''}`,

                                `${part.parent_product?.part_no ?? ''}
                                <input type="hidden" value="${part.parent_product_id}" class="form-control parent_product_id" name="planning[${rowIndex}][parent_product_id]">`,

                                `${part.product.type_of_products?.type ?? ''}`,
                                `${part.product.units?.name ?? ''}`,

                                `<select class="form-control forcasting" disabled name="planning[${rowIndex}][forcasting]">
                                    ${[...Array(9).keys()].map(i => 
                                        `<option value="${i + 1}" ${parseInt(part.forcasting) === (i + 1) ? 'selected' : ''}>${i + 1}</option>`
                                    ).join('')}
                                </select>
                                <input type="hidden" class="part_qty" value="${part.part_qty}" name="planning[${rowIndex}][part_qty]">`,

                                `${part.total_qty}
                                <input type="hidden" value="${part.total_qty}" 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="${part.balance}" class="form-control balance" name="planning[${rowIndex}][balance]">`,

                                `<input type="number" readonly value="${part.moq}" class="form-control moq" name="planning[${rowIndex}][moq]" style="width:250px !important;">`,

                                `<input type="number" readonly value="${part.planning_qty ?? 0}" class="form-control planning_qty" name="planning[${rowIndex}][planning_qty]">`,

                                `<button type="button" class="btn btn-info openModal" data-supplier="${part.product?.supplier_name ?? ''}" data-lead="${part.product?.lead_time ?? 0}" 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();
                }
            });
        }

        //SUPPLIER WORK
        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 disabled class="form-control supplier">${optionsHtml}</select>`,
                        `<input disabled type="text" class="form-control leadtime" value="${element.leadtime}">`,
                        `<input disabled type="number" class="form-control qty" value="${element.qty}">`
                    ]).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 disabled class="form-control supplier">${optionsHtml}</select>`,
                    `<input disabled type="text" class="form-control leadtime" value="${lead_time ?? ''}">`,
                    `<input disabled type="number" class="form-control qty">`
                ]).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);
        });
        //END SUPPLIER WORK
    </script>
@endsection