@extends('layouts.app')
@section('title')
        PRODUCTION PLANNING EDIT
@endsection
@section('button')
    <a type="button" class="btn btn-info" href="{{ route('daily-production-planning') }}">
        <i class="bi bi-arrow-left"></i> Back
    </a>
@endsection
@section('content')
    <style>
        #mainTable input {
            width: 100px;
        }

        .custom-table-class {
            width: -webkit-fill-available !important;
        }

        .custom-select {
            width: auto !important;
        }

        .planned_date {
            width: 150px;
        }
    </style>
    <div class="card">
        <div class="card-body">
            <div class="row">
                <div class="col-lg-12">
                    <div class="col-lg-3 col-sm-4 col-12">
                        <h5 class="@if ($dpp->is_scheduling == '0') display-none @endif">Daily Production Planning Detail
                        </h5>
                    </div>
                </div>
            </div>
            <div class="row mb-5">
                <div class="col-lg-6 col-sm-6 col-12 mt-3">
                    <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" readonly name="ref_no" id="ref_no" value="{{ $dpp->ref_no }}"
                                class="form-control rounded-4" value="">
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-6 col-12 mt-3">
                    <div class="row align-items-center">
                        <label for="planning_date" class="form-label col-4">Date</label>
                        <div class="col-6">
                            <input type="text" value="{{ $dpp->planning_date }}" name="planning_date" id="planning_date"
                                class="form-control rounded-4">
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-6 col-12 mt-3">
                    <div class="row align-items-center">
                        <label for="rev_no" class="form-label col-4">Order No.</label>
                        <div class="col-6">
                            <select class="form-select" disabled style="width: 100% !important;">
                                <option selected>{{ $fetch_orders->order_no }}</option>
                            </select>
                        </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 id="created_by" class="form-control rounded-4"
                                value="{{ $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 id="customer_name" class="form-control rounded-4"
                                value="{{ $fetch_orders->customers->name }}">
                            <input type="hidden" id="dpp_id" value="{{ $dpp->id }}" class="form-control">
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-6 col-12 mt-3">
                    <div class="row align-items-center">
                        <label for="product_id" class="form-label col-4">Order Month</label>
                        <div class="col-6">
                            <input type="month" readonly id="order_month" class="form-control rounded-4"
                                value="{{ \Carbon\Carbon::parse($fetch_orders->order_month)->format('Y-m') }}">
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-6 col-12 mt-3">
                    <div class="row align-items-center">
                        <label for="status" class="form-label col-4">Status</label>
                        <div class="col-6">
                            <select name="status" id="status" class="form-select" style="width: 100% !important;">
                                <option value="">Please Select</option>
                                <option value="In Progress" @if ($dpp->status == 'In Progress') selected @endif>In Progress
                                </option>
                                <option value="Completed" @if ($dpp->status == 'Completed') selected @endif>Completed
                                </option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-6 col-12 mt-3">
                    <div class="row align-items-center">
                        <label for="created_date" class="form-label col-4">Delivery Date</label>
                        <div class="col-6">
                            <input type="text" name="created_date" id="created_date" class="form-control rounded-4"
                                value="{{ $dpp->created_date }}">
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mb-5 display-none">
                <div class="col-md-12">
                    <h5>Product Detail</h5>
                    <div class="table-responsive mb-5">
                        <table class="table table-bordered m-0" id="p_table">
                            <thead>
                                <tr>
                                    <th>Sr No.</th>
                                    <th>Part No.</th>
                                    <th>Part Name</th>
                                    <th>Type of Product</th>
                                    <th>Model</th>
                                    <th>Variance</th>
                                    <th>Unit</th>
                                    <th>DI QTY</th>
                                    <th>Current Inventory QTY</th>
                                    <th>Estimated Total Required</th>
                                    <th>Estimated Planning QTY</th>
                                </tr>
                            </thead>
                            <tbody>
                                @php
                                    $product_ids = [];
                                @endphp
                                @foreach ($dppps as $dppp)
                                    @php
                                        $product_ids[] = [
                                            'id' => $dppp->product_id,
                                            'di_qty' => $dppp->di_qty,
                                            'qty' => $dppp->est_plan_qty,
                                        ];
                                    @endphp
                                    <tr>
                                        <td>
                                            {{ $loop->iteration }}
                                            <input type="hidden" value="{{ $dppp->product_id }}" class="main_product_id">
                                        </td>
                                        <td>{{ $dppp->products->part_no ?? '' }}</td>
                                        <td>{{ $dppp->products->part_name ?? '' }}</td>
                                        <td>{{ $dppp->products->type_of_products->type ?? '' }}</td>
                                        <td>{{ $dppp->products->model ?? '' }}</td>
                                        <td>{{ $dppp->products->variance ?? '' }}</td>
                                        <td>{{ $dppp->products->units->name ?? '' }}</td>
                                        <td>{{ $dppp->di_qty }}</td>
                                        <td>{{ $dppp->inventory_qty }}</td>
                                        <td>{{ $dppp->total_required_qty }}</td>
                                        <td>
                                            {{ $dppp->est_plan_qty }}
                                            <input type="hidden" class="form-control est_plan_qty"
                                                value="{{ $dppp->est_plan_qty }}">
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="row mb-5 display-none">
                <div class="col-lg-12 col-sm-12 col-12" id="child_partdiv">
                    <h5>Circuit/Kanban</h5>
                    <div class="table-responsive mb-5">
                        <table class="table table-bordered m-0" id="sp_table">
                            <thead>
                                <tr>
                                    <th>Sr No.</th>
                                    @if ($dpp->is_scheduling != '1')
                                        <th>Proceed</th>
                                    @endif
                                    <th>Part No.</th>
                                    <th>Part Name</th>
                                    <th>Model</th>
                                    <th>Variance</th>
                                    <th>Type of Product</th>
                                    <th>Unit</th>
                                    <th>Unit QTY</th>
                                    <th>Total Required QTY</th>
                                    <th>Current Inventory QTY</th>
                                    <th>Estimated Planning QTY</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($dpcps as $dpcp)
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        @if ($dpp->is_scheduling != '1')
                                            <td><input type="checkbox" class="form-check-input proceed-scheduling"
                                                    @checked($dpcp->scheduling_procees == 'true') /><input type="hidden" value="{{$dpcp->product_id}}" class="child_part_id"></td>
                                        @endif
                                        <td>
                                            {{ $dpcp->products->part_no }}
                                            <input type="hidden" value="{{ $dpcp->id }}" class="dpcp_id">
                                        </td>
                                        <td>{{ $dpcp->products->part_name ?? '' }}</td>
                                        <td>{{ $dpcp->products->model ?? '' }}</td>
                                        <td>{{ $dpcp->products->variance ?? '' }}</td>
                                        <td>{{ $dpcp->products->type_of_products->type ?? '' }}</td>
                                        <td>{{ $dpcp->products->units->name ?? '' }}</td>
                                        <td>{{ $dpcp->subpart_qty }}</td>
                                        <td>{{ $dpcp->total_required_qty }}</td>
                                        <td>{{ $dpcp->inventory_qty }}</td>
                                        <td>
                                            <input type="number" class="form-control est_plan_qty"
                                                value="{{ $dpcp->est_plan_qty }}" @readonly($dpp->is_scheduling == '1')>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                @if ($dpp->is_scheduling != '1')
                    <div class="col-lg-12 col-sm-12 col-12 display-none">
                        <div class="mb-3 text-end">
                            <button class="btn btn-primary" type="button" onclick="scheduling()">Next >
                                Scheduling</button>
                        </div>
                    </div>
                @endif
            </div>
            <div id="loading-message2" style="margin-bottom: 10px; display: none; font-weight: bold;">
                Loading data, please wait...
            </div>
            <div class="row mb-5 display-show @if ($dpp->is_scheduling != '1') d-none @endif">
                <div class="col-lg-12 col-sm-12 col-12">
                    <div class="table-responsive mb-5">
                        <h5 class="display-show">PRODUCTION SCHEDULING</h5>
                        <table class="table table-bordered m-0" id="scheduling_table">
                            <thead>
                                <tr>
                                    <th>Sr No.</th>
                                    <th><input type="checkbox" class="form-check-input" id="planCheckAll" /></th>
                                    <th>PO No.</th>
                                    <th>Part No.</th>
                                    <th>Part Name</th>
                                    <th>Model</th>
                                    <th>Variance</th>
                                    <th>Type of Product</th>
                                    <th>Process</th>
                                    <th>Process No.</th>
                                    <th>CT (s)</th>
                                    <th>Planned Date</th>
                                    <th>Operator</th>
                                    <th>Machine</th>
                                    <th>Total Planned QTY</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="col-lg-12 col-sm-12 col-12">
                    <div class="mb-3 text-end">
                        <button class="btn btn-primary savePlanningBtn" type="button" onclick="save_planning()">Planning</button>
                    </div>
                </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 p_table;
        var sp_table;
        var scheduling_table;
        $(document).ready(function() {
            $('#planning_date').datepicker({
                format: 'dd/mm/yyyy',
                autoclose: true,
                todayHighlight: true,
                orientation: 'bottom'
            });
            $('#created_date').datepicker({
                format: 'dd/mm/yyyy',
                autoclose: true,
                todayHighlight: true,
                orientation: 'bottom'
            });

            $("#order_id").trigger('change');
            p_table = $('#p_table').DataTable();
            sp_table = $('#sp_table').DataTable();
            scheduling_table = $('#scheduling_table').DataTable({
                columnDefs: [{
                    targets: 1,
                    orderable: false
                }]
            });
            $('#sp_table').addClass('custom-table-class');
            $('#scheduling_table').addClass('custom-table-class');

            if (@json($dpp->is_scheduling == '1')) {
                scheduling();
            }

            function initSelect2WithAjaxOrder(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
                    }
                });
            }

            initSelect2WithAjaxOrder('#order_id', 'Select Order', '{{ route('order.search.outgoing') }}');

            scheduling_table.on('draw', function() {
                let machineDropdown = $('#scheduling_table').find('.machine');
                initSelect2WithAjax(machineDropdown, 'Select Machine', '{{ route('machine.search') }}', $(
                    "#scheduling_table"));

                let userDropdown = $('#scheduling_table').find('.op_name');
                initSelect2WithAjax(userDropdown, 'Select Users', '{{ route('users.search') }}', $(
                    "#scheduling_table"));
            });
        });

        function initSelect2WithAjax(selector, placeholder, route, parent = $('body')) {
            $(selector).select2({
                placeholder: placeholder,
                dropdownParent: parent,
                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 || item.name || item.user_name,
                                    id: item.id,
                                };
                            }),
                            pagination: {
                                more: (params.page * 10) < data.total_count
                            }
                        };
                    },
                    cache: true
                }
            });
        }

        $is_scheduling = 0;

        function scheduling() {
            $('#loading-message2').html('Loading... <span id="loading-progress2">0%</span>').show();
            if (@json($dpp->is_scheduling) != 1) {
                save_wo_planning(false);
            } else {
                $is_scheduling = 1;
                getScheduling();
            }
            $('.display-none').addClass('d-none');
            $('.display-show').removeClass('d-none');
        }

        function save_wo_planning(flag) {
            let formData = {
                id: @json($dpp->id),
                is_scheduling: 1,
                planning_date: $('#planning_date').val(),
                created_date: $('#created_date').val(),
                status: $('#status').val(),
                proceed: 0
            };

            var childParts = [];
            sp_table.rows().every(function(rowIdx, tableLoop, rowLoop) {
                var row = this.node();
                $checkedbox = $(row).find('.proceed-scheduling').is(':checked');
                childParts.push({
                    dpcp_id: $(row).find('.dpcp_id').val(),
                    est_plan_qty: $(row).find('.est_plan_qty').val(),
                    scheduling_procees: $checkedbox,
                });
            });

            formData.childpart_table = childParts;

            // AJAX request to save data
            $.ajax({
                url: `{{ route('daily-production-planning.store') }}`, // Change to your actual URL
                method: 'POST',
                data: formData,
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}' // Include CSRF token for security
                },
                success: function(response) {
                    if (flag) {
                        window.location.href = `{{ route('daily-production-planning') }}`;
                    } else {
                        $('#dpp_id').val(response);
                        $('#success_div').html('Data Saved Successfully').removeClass('d-none');
                        $is_scheduling = 0;
                        getScheduling();
                    }
                },
                error: function(xhr) {
                    $('#error_div2').html('An error occurred while saving data').removeClass('d-none');
                }
            });
        }

        function getScheduling() {
            schedulingProductIds = [];
            if ($is_scheduling == 0) {
                p_table.rows().every(function(rowIdx, tableLoop, rowLoop) {
                    var row = this.node();

                    var productId = $(row).find('.main_product_id').val();
                    var est_plan_qty = $(row).find('.est_plan_qty').val();

                    if (productId) {
                        schedulingProductIds.push({
                            id: productId,
                            qty: est_plan_qty,
                        });
                    }
                });
                sp_table.rows().every(function(rowIdx, tableLoop, rowLoop) {
                    var row = this.node();

                    var productId = $(row).find('.child_part_id').val();
                    var est_plan_qty = $(row).find('.est_plan_qty').val();
                    var proceed_scheduling = $(row).find('.proceed-scheduling').is(
                        ':checked');

                    if (productId && proceed_scheduling) {
                        schedulingProductIds.push({
                            id: productId,
                            qty: est_plan_qty,
                        });
                    }

                    $(row).find('.proceed-scheduling').prop('disabled', true);
                    $(row).find('.est_plan_qty').prop('readonly', true);
                });
            }

            $.ajax({
                url: `{{ route('daily-production-planning.get_bom_process') }}`,
                method: 'POST',
                data: {
                    id: $('#dpp_id').val(),
                    data: schedulingProductIds,
                    is_scheduling: $is_scheduling,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    scheduling_table.clear();
                    const item1 = Object.values(response);
                    const total1 = item1.length;
                    let rowIndex1 = 1;
                    let chunkSize1 = 50;
                    let start1 = 0;

                    function renderChunk1() {
                        const chunk1 = item1.slice(start1, start1 + chunkSize1);
                        const rows1 = [];

                        chunk1.forEach((item1) => {
                            if (item1.planned_qty > 0) {
                                const rawPartNames = String(item1
                                    .raw_part_names || '').split(',');
                                const childPartNames = String(item1
                                    .child_part_names || '').split(',');
                                let opHtml = '';
                                if (Array.isArray(item1.op_name)) {
                                    item1.op_name.forEach(op => {
                                        opHtml +=
                                            `<option value="${op.id}" selected>${op.name}</option>`;
                                    });
                                }
                                const today = new Date().toISOString()
                                    .split('T')[0];

                                const plannedDate = item1.planned_date ??
                                    today;
                                rows1.push([
                                    rowIndex1 +
                                    `<input type="hidden" value="${item1.id}" class="id">`,
                                    `<input ${(item1.is_plan == 1) ? 'checked disabled' : ''} type="checkbox" class="form-check-input plan_check" id="plan_check"/>`,
                                    item1.pro_order_no,
                                    item1.products?.part_no ?? '',
                                    item1.products?.part_name ?? '',
                                    item1.products?.model ?? '',
                                    item1.products?.variance ?? '',
                                    item1.products?.type_of_products
                                    ?.type ?? '',
                                    item1.process?.name ?? '',
                                    item1.process_no,
                                  
                                    item1.cavity,
                                    `<input type="date" ${(item1.is_plan == 1) ? 'disabled' : ''} class="form-control planned_date" value='${plannedDate}'>`,
                                    `<select ${(item1.is_plan == 1) ? 'disabled' : ''} class="form-select custom-select op_name w-100" multiple>
                                                        ${opHtml}
                                                    </select>`,
                                    `<select ${(item1.is_plan == 1) ? 'disabled' : ''} class="form-select machine custom-select" required>
                                                    ${(item1.machine != null) ?
                                                        `<option value="${item1.machine}" selected style="color: black;">
                                                                                                                                                            ${item1.machines?.name ?? ''}
                                                                                                                                                         </option>` : ''
                                                    }
                                                    </select>`,
                                    `<input type="number" value="${item1.planned_qty}" class="planned_qty form-control" ${(item1.is_plan == 1) ? 'disabled' : ''}>`
                                ]);
                                rowIndex1++;
                            }
                        });

                        scheduling_table.rows.add(rows1).draw();
                        start1 += chunkSize1;

                        // Update percentage
                        let percent1 = Math.min(100, Math.floor((start1 / total1) *
                            100));
                        $(
                            '#loading-progress2').text(`${percent1}%`);

                        if (start1 < total1) {
                            setTimeout(renderChunk1, 5); // Next chunk
                        } else {
                            $('#loading-message2').html('Completed ✅').fadeOut(
                                1000);
                        }
                    }

                    renderChunk1();
                }
            });
        }

        $('#planCheckAll').on('change', function() {
            const isChecked = $(this).is(':checked');

            scheduling_table.rows().every(function() {
                const $row = $(this.node());
                const $checkbox = $row.find('.plan_check');

                if (!$checkbox.prop('disabled')) {
                    $checkbox.prop('checked', isChecked);
                }
            });
        });

        function save_planning() {
            $('.savePlanningBtn').prop('disabled', true);
            let formData = {};
            let scheduling = [];
            scheduling_table.rows().every(function() {
                const $row2 = $(this.node());
                const $checkbox2 = $row2.find('.plan_check');
                if (!$checkbox2.prop('disabled')) {
                    if ($checkbox2.is(':checked')) {
                        scheduling.push({
                            id: $row2.find('.id').val(),
                            planned_date: $row2.find('.planned_date').val(),
                            op_name: $row2.find('.op_name').val(),
                            machine: $row2.find('.machine').val(),
                            planned_qty: $row2.find('.planned_qty').val()
                        });
                    }
                }
            });

            formData.scheduling = scheduling;

            $.ajax({
                url: '{{ route('daily-production-planning.planning.store') }}',
                method: 'POST',
                data: formData,
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response == 'success') {
                        window.location.href = `{{ route('daily-production-planning') }}`;
                    }
                },
                error: function(xhr) {
                    let errorMessage = 'An error occurred while saving data';

                    if (xhr.status === 422) {
                        const errors = xhr.responseJSON.errors;
                        errorMessage =
                            '<button type="button" class="btn-close" aria-label="Close" onclick="hideErrorDiv()"></button><ul>';
                        for (let field in errors) {
                            if (errors.hasOwnProperty(field)) {
                                errors[field].forEach(error => {
                                    const fieldName = error.split('.')[2];
                                    errorMessage += `<li>${fieldName} field is required.</li>`;
                                });
                            }
                        }
                        errorMessage += '</ul>';
                    }

                    $('#error_div2').html(errorMessage).removeClass('d-none');
                }
            });
        }
    </script>
@endsection