@extends('layouts.structure')

@section('content')
    <style>
        .section-title {
            background-color: #f8f9fa;
            padding: 10px;
            margin-top: 20px;
            border-left: 5px solid #0d6efd;
        }

        .coil-details {
            background-color: #e9ecef;
            padding: 15px;
            border-radius: 5px;
        }

        .process-section {
            border: 1px solid #dee2e6;
            border-radius: 5px;
            padding: 15px;
            margin-bottom: 20px;
        }

        .balance-weight {
            font-weight: bold;
            color: #0d6efd;
        }

        .table th {
            background-color: #f8f9fa;
        }

        .dimension-select {
            background-color: #e9f7ef;
        }

        .process-buttons {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }

        .error-message {
            color: red;
            font-size: 0.9em;
            display: none;
        }

        .select2-container--default .select2-selection--single {
            height: calc(1.5em + 0.75rem + 2px);
            padding: 0.375rem 0.75rem;
            font-size: 1rem;
            line-height: 1.5;
            border: 1px solid #ced4da;
            border-radius: 0.25rem;
            background-color: #fff;
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 1.5;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: calc(1.5em + 0.75rem);
        }

        input[readonly] {
            background-color: #f8f9fa;
            border: 1px solid #ced4da;
            cursor: not-allowed;
        }

        @media print {
            button,
            .btn,
            .btn-close,
            .modal,
            .modal-backdrop,
            .process-buttons,
            .select2-container {
                display: none !important;
            }

            input.form-control,
            select.form-select {
                border: none !important;
                background: transparent !important;
                padding: 0 !important;
                font-size: 1rem !important;
                line-height: normal !important;
                -webkit-appearance: none !important;
                -moz-appearance: none !important;
                appearance: none !important;
            }

            .progress-bar {
                color: black !important;
                font-size: 12px !important;
                border: 1px solid #000 !important;
            }

            body {
                margin: 0 !important;
            }

            .container {
                padding: 10px !important;
            }

            .error-message,
            .section-title,
            .coil-details,
            .dimension-select {
                display: none !important;
                background-color: transparent !important;
                border: none !important;
            }

            .table {
                page-break-inside: auto !important;
            }

            tr {
                page-break-inside: avoid !important;
                page-break-after: auto !important;
            }
        }
    </style>

    <div class="container mt-4 mb-5">
        <h2 class="text-center mb-4">Plan Recreation</h2>
        <div class="section-title">
            <h4>Coil Details</h4>
        </div>
        <div class="row mb-4 coil-details">
            <div class="col-md-4">
                <div class="mb-3">
                    <label for="client_id" class="form-label">Client Name</label>
                    <select class="form-control select2-client" id="client_id" name="client_id" required>
                        @foreach ($clients as $clientall)
                            <option value="{{ $clientall->client_id }}"
                                {{ $plan->client_id == $clientall->client_id ? 'selected' : '' }}>
                                {{ $clientall->client_name }}
                            </option>
                        @endforeach
                    </select>
                    <div id="clientNameError" class="error-message">Please select a client</div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="mb-3">
                    <label for="crr_no" class="form-label">CRR No.</label>
                    <select class="form-control select2-crr" id="crr_no" name="coil_id" required>
                        <option value="{{ $plan->coil_id }}" selected>{{ $plan->coil->crr_no }}</option>
                    </select>
                    <div id="crrNoError" class="error-message">Please select a CRR No.</div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="mb-3">
                    <label for="grade_id" class="form-label">Grade</label>
                    <select class="form-control" name="grade_id" id="grade_id" style="background-color: white;">
                        <option value="">N/A</option>
                        @foreach ($grades as $grade)
                            <option value="{{ $grade->id }}"
                                {{ $plan->grade_id == $grade->id ? 'selected' : '' }}>
                                {{ $grade->grade_name }}
                            </option>
                        @endforeach
                    </select>
                    <div id="gradeError" class="error-message">Grade is required</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="mb-3">
                    <label for="width" class="form-label">Width (mm)</label>
                    <input type="number" class="form-control reCreateWidth" id="width"
                        value="{{ number_format($crr_info['width'], 3) }}" readonly>
                        <input type="hidden" name="cut_id" id="cut_id" value="{{$crr_info['cut_id']}}">
                    <div id="widthError" class="error-message">Width must be a positive number</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="mb-3">
                    <label for="thickness" class="form-label">Thickness (mm)</label>
                    <input type="number" class="form-control" id="thickness"
                        value="{{ number_format($crr_info['thickness'], 3) }}" readonly>
                    <div id="thicknessError" class="error-message">Thickness must be a positive number</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="mb-3">
                    <label for="density" class="form-label">Density</label>
                    <input type="number" class="form-control" id="density"
                        value="{{ number_format($crr_info['material_type_density'], 3) }}" readonly>
                    <input type="hidden" class="form-control" name="inward_id"
                        value="{{ $crr_info['inward_id'] }}" id="inward_id" hidden>
                    <div id="densityError" class="error-message">Density must be a positive number</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="mb-3">
                    <label for="netWeight" class="form-label">Net Weight (TON)</label>
                    <input type="number" class="form-control" id="netWeight"
                        value="{{ number_format($crr_info['net_weight'], 3) }}" readonly>
                    <div id="netWeightError" class="error-message">Net Weight must be a positive number</div>
                </div>
            </div>
        </div>
        <div class="row mb-4">
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Current Balance</h5>
                        <p class="card-text">Balance Weight: <span class="balance-weight" id="currentBalance">
                            {{ number_format($crr_info['net_weight'], 3) }}</span> TON</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Total Used Weight</h5>
                        <p class="card-text"><span id="totalUsedWeight">0.000</span> TON</p>
                    </div>
                </div>
            </div>
        </div>
        <div id="process-sections">
            <div class="process-buttons">
                <button class="btn btn-success" id="initial-add-process">Add Process</button>
                <button class="btn btn-danger" id="deleteProcess">Delete Process</button>
            </div>
        </div>
        <div class="section-title mt-5">
            <h4>Plan Summary</h4>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Material Utilization</h5>
                        <div class="progress mb-3">
                            <div class="progress-bar bg-success" role="progressbar" id="usedBar" style="width: 0%"
                                aria-label="Used Weight">0%</div>
                        </div>
                        <p class="card-text">Used: <span id="summaryUsed">0.000</span> TON</p>
                        <p class="card-text">Remaining: <span id="summaryRemaining">0.000</span> TON</p>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Plan Actions</h5>
                        <button class="btn btn-success w-100 mb-2" id="savePlan">Save Plan</button>
                        <a href="{{ route('plans.index') }}" class="btn btn-primary w-100 mb-2">View Plans</a>
                        <button class="btn btn-secondary w-100" id="printPlan">Print Plan</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="addProcessModal" tabindex="-1" aria-labelledby="addProcessModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addProcessModalLabel">Add New Process</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="newProcessType" class="form-label">Select Process Type</label>
                        <select class="form-select" id="newProcessType">
                            <option value="crs">CRS – Cut to Width</option>
                            <option value="ctl">CTL – Cut to Length</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="confirmAddProcess">Add Process</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="deleteProcessModal" tabindex="-1" aria-labelledby="deleteProcessModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteProcessModalLabel">Delete a Process</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="deleteProcessId" class="form-label">Select Process to Delete</label>
                        <select class="form-select" id="deleteProcessId">
                            <option value="">Select a process</option>
                        </select>
                        <div id="noProcessesMessage" class="text-danger mt-2" style="display: none;">
                            No processes available to delete.
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger" id="confirmDeleteProcess">Delete Process</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Include jQuery, Bootstrap, and Select2 JS -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        function formatWeight(value) {
            return Number(value || 0).toFixed(3);
        }

        let netWeight = {{ $crr_info['net_weight'] ?? 0 }},
            width = {{ $crr_info['width'] ?? 0 }},
            thickness = {{ $crr_info['thickness'] ?? 0 }},
            density = {{ $crr_info['material_type_density'] ?? 0 }},
            clientName = @json($plan->coil->inward->client->client_name ?? ''),
            crrNo = @json($crr_info['crr_no'] ?? ''),
            grade = @json($plan->coil->grade->grade_name ?? ''),
            balanceWeight = {{ $crr_info['net_weight'] ?? 0 }},
            totalUsedWeight = 0,
            processes = [],
            processCounter = 0,
            coilLength = 0,
            hasCrsCuts = {{ $plan->processes->flatMap(fn($p) => $p->crsCuts)->isNotEmpty() ? 'true' : 'false' }};

        function getCoilLengthFromWeight(weightTon, coilWidth, coilThickness, density) {
            if (coilWidth <= 0 || coilThickness <= 0 || density <= 0) return 0;
            const weightKg = Number(formatWeight(weightTon * 1000));
            const volume_mm3 = Number(formatWeight((weightKg / density) * 1000));
            return Number(formatWeight(volume_mm3 / (coilWidth * coilThickness)));
        }

        function calculateWeight(cutWidth, cutThickness, cutDensity, cutLength) {
            const volume = Number(formatWeight(cutWidth * cutThickness * cutLength));
            const weightKg = Number(formatWeight((volume * cutDensity) / 1000));
            return Number(formatWeight(weightKg / 1000));
        }

        function addCrsCut(processId) {
            const cutWidth = parseFloat($(`#crsWidth-${processId}`).val());
            const quantity = parseInt($(`#crsQuantity-${processId}`).val());
            if (isNaN(cutWidth) || cutWidth <= 0 || isNaN(quantity) || quantity <= 0) {
                alert('Enter valid positive width and quantity');
                return;
            }
            const usedWidth = processes
                .filter(p => p.type === 'crs')
                .flatMap(p => p.cuts)
                .reduce((sum, cut) => sum + cut.width * cut.quantity, 0);
            const availableWidth = width - usedWidth;
            if (cutWidth * quantity > availableWidth) {
                alert(
                    `Total cut width (${(cutWidth * quantity).toFixed(1)}mm) cannot exceed available width (${availableWidth.toFixed(1)}mm)`
                );
                return;
            }
            const cutWeight = Number(formatWeight(calculateWeight(cutWidth, thickness, density, coilLength) * quantity));
            if (cutWeight > balanceWeight) {
                alert(
                    `Insufficient balance weight (${balanceWeight.toFixed(3)} TON). Adding this cut (${cutWeight.toFixed(3)} TON) would result in a negative balance.`
                );
                return;
            }
            const process = processes.find(p => p.id === processId);
            process.cuts.push({
                width: cutWidth,
                quantity,
                weight: formatWeight(cutWeight),
                remainingWeight: formatWeight(cutWeight)
            });
            totalUsedWeight = Number(formatWeight(totalUsedWeight + cutWeight));
            balanceWeight = Number(formatWeight(netWeight - totalUsedWeight));
            console.log(
                `addCrsCut: processId=${processId}, cutWidth=${cutWidth}, quantity=${quantity}, cutWeight=${cutWeight}, totalUsedWeight=${totalUsedWeight}, balanceWeight=${balanceWeight}, cuts=`,
                process.cuts
            );
            updateUsedWeight();
            refreshCrsCutsTable(processId);
            refreshCrsDependentOptions();
            $(`#crsWidth-${processId}, #crsQuantity-${processId}`).val('');
        }

        function addCtlCut(processId) {
            console.log(`addCtlCut called for processId=${processId}`);
            const dependentIndex = $(`#ctlDependentCut-${processId}`).val();
            const length = parseFloat($(`#ctlLength-${processId}`).val());
            const productionWeight = parseFloat($(`#ctlProductionWeight-${processId}`).val());
            console.log(`Inputs: dependentIndex=${dependentIndex}, length=${length}, productionWeight=${productionWeight}`);

            if (dependentIndex === '' || isNaN(length) || length <= 0 || isNaN(productionWeight) || productionWeight <= 0) {
                alert('Enter valid positive length and production weight');
                console.warn(
                    `addCtlCut: Invalid inputs - dependentIndex=${dependentIndex}, length=${length}, productionWeight=${productionWeight}`
                );
                return;
            }
            if (thickness <= 0 || density <= 0) {
                alert('Invalid coil details: Thickness or density is zero or negative. Please check coil selection.');
                console.warn(`addCtlCut: Invalid coil details - thickness=${thickness}, density=${density}`);
                return;
            }
            let cutWidth, availableWeight;
            if (dependentIndex === "-1") {
                cutWidth = width;
                const usedWeight = processes
                    .filter(p => p.type === 'ctl')
                    .flatMap(p => p.cuts)
                    .filter(cut => cut.dependentIndex === "-1")
                    .reduce((sum, cut) => sum + Number(cut.weight), 0);
                availableWeight = Number(formatWeight(netWeight - usedWeight));
            } else {
                const [crsProcessId, cutIndex] = dependentIndex.split('-').map(Number);
                const crsProcess = processes.find(p => p.id === crsProcessId);
                if (!crsProcess || !crsProcess.cuts[cutIndex]) {
                    alert('Selected CRS cut is invalid. Please select a valid CRS cut.');
                    console.warn(`addCtlCut: Invalid CRS cut - crsProcessId=${crsProcessId}, cutIndex=${cutIndex}`);
                    return;
                }
                const selectedCut = crsProcess.cuts[cutIndex];
                cutWidth = selectedCut.width;
                availableWeight = Number(formatWeight(selectedCut.remainingWeight));
            }
            console.log(`addCtlCut: cutWidth=${cutWidth}, availableWeight=${availableWeight}`);
            if (cutWidth <= 0) {
                alert('Cut width must be positive');
                console.warn(`addCtlCut: Invalid cutWidth=${cutWidth}`);
                return;
            }
            if (productionWeight > availableWeight) {
                alert(`Exceeds available weight: ${availableWeight.toFixed(3)} TON`);
                console.warn(`addCtlCut: productionWeight=${productionWeight} exceeds availableWeight=${availableWeight}`);
                return;
            }
            const pieceVol = cutWidth * thickness * length;
            const pieceWeight_grams = pieceVol * density / 1000;
            const pieceWeight_TON = pieceWeight_grams / 1_000_000;
            console.log(
                `addCtlCut: pieceVol=${pieceVol}, pieceWeight_grams=${pieceWeight_grams}, pieceWeight_TON=${pieceWeight_TON}`
            );
            const quantity = Math.floor(productionWeight / pieceWeight_TON);
            const actualWeight = Number(formatWeight(quantity * pieceWeight_TON));
            console.log(`addCtlCut: quantity=${quantity}, actualWeight=${actualWeight}`);

            if (!isFinite(quantity) || quantity <= 0) {
                alert('Production weight too low for one piece or invalid quantity');
                console.warn(`addCtlCut: Invalid quantity=${quantity}`);
                return;
            }
            if (dependentIndex === "-1" && actualWeight > balanceWeight) {
                alert(
                    `Insufficient balance weight (${balanceWeight.toFixed(3)} TON). Adding this cut (${actualWeight.toFixed(3)} TON) would result in a negative balance.`
                );
                console.warn(`addCtlCut: actualWeight=${actualWeight} exceeds balanceWeight=${balanceWeight}`);
                return;
            }
            const process = processes.find(p => p.id === processId);
            process.cuts.push({
                dependentIndex,
                width: cutWidth,
                length,
                quantity,
                weight: formatWeight(actualWeight),
                remainingWeight: formatWeight(actualWeight)
            });
            if (dependentIndex !== "-1") {
                const [crsProcessId, cutIndex] = dependentIndex.split('-').map(Number);
                const crsProcess = processes.find(p => p.id === crsProcessId);
                crsProcess.cuts[cutIndex].remainingWeight = formatWeight(
                    Number(crsProcess.cuts[cutIndex].remainingWeight) - actualWeight
                );
                console.log(
                    `addCtlCut: dependentIndex=${dependentIndex}, crsProcessId=${crsProcessId}, cutIndex=${cutIndex}, crs_remainingWeight=${crsProcess.cuts[cutIndex].remainingWeight}`
                );
                refreshCrsCutsTable(crsProcessId);
            } else {
                totalUsedWeight = Number(formatWeight(totalUsedWeight + actualWeight));
                balanceWeight = Number(formatWeight(netWeight - totalUsedWeight));
                console.log(
                    `addCtlCut: independent cut, totalUsedWeight=${totalUsedWeight}, balanceWeight=${balanceWeight}`
                );
            }
            updateUsedWeight();
            refreshCtlCutsTable(processId);
            $(`#ctlLength-${processId}, #ctlProductionWeight-${processId}`).val('');
            updateCtlDependentFields(processId);
            updateCtlPreview(processId);
        }

        function validateCoilDetails() {
            let isValid = true;
            const clientId = $('#client_id').val();
            const crrNoVal = $('#crr_no').val();
            const widthVal = parseFloat($('#width').val());
            const thicknessVal = parseFloat($('#thickness').val());
            const densityVal = parseFloat($('#density').val());
            const netWeightVal = parseFloat($('#netWeight').val());
            const gradeVal = $('#grade_id').val();

            $('#clientNameError').toggle(!clientId);
            $('#crrNoError').toggle(!crrNoVal);
            $('#widthError').toggle(isNaN(widthVal) || widthVal <= 0);
            $('#thicknessError').toggle(isNaN(thicknessVal) || thicknessVal <= 0);
            $('#densityError').toggle(isNaN(densityVal) || densityVal <= 0);
            $('#netWeightError').toggle(isNaN(netWeightVal) || netWeightVal <= 0);
            $('#gradeError').toggle(!gradeVal);

            isValid = clientId && crrNoVal && !isNaN(widthVal) && !isNaN(thicknessVal) && thicknessVal > 0 &&
                !isNaN(densityVal) && densityVal > 0 && !isNaN(netWeightVal) && gradeVal;

            if (!isValid && (widthVal <= 0 || netWeightVal <= 0)) {
                console.warn('Validation failed: Possible missing CRS cuts', {
                    widthVal, netWeightVal, hasCrsCuts
                });
                alert('No valid CRS cuts found for this plan. Please ensure the plan has valid CRS cut details or select a different coil.');
            }

            console.log('validateCoilDetails:', {
                clientId, crrNoVal, widthVal, thicknessVal, densityVal, netWeightVal, gradeVal, isValid
            });
            return isValid;
        }

        function setCoilDetails() {
            if (!validateCoilDetails()) return false;
            clientName = $('#client_id option:selected').text();
            crrNo = $('#crr_no option:selected').text();
            grade = $('#grade_id option:selected').text();
            netWeight = Number(formatWeight(parseFloat($('#netWeight').val())));
            width = parseFloat($('#width').val());
            thickness = parseFloat($('#thickness').val());
            density = parseFloat($('#density').val());
            coilLength = getCoilLengthFromWeight(netWeight, width, thickness, density);
            balanceWeight = netWeight;
            totalUsedWeight = 0;
            resetPlan();
            updateBalance();
            console.log(
                `setCoilDetails: netWeight=${netWeight}, width=${width}, thickness=${thickness}, density=${density}, coilLength=${coilLength}`
            );
            return true;
        }

        function updateSelectedClientValues() {
            const clientId = $('#client_id').val();
            const crrNoDropdown = $('#crr_no');
            crrNoDropdown.empty().append('<option value="">Select CRR No.</option>');
            $('#thickness, #width, #grade_id, #netWeight, #inward_id, #density').val('');
            $('#currentBalance, #totalUsedWeight').text('0.000');
            $('#gradeError, #widthError, #thicknessError, #densityError, #netWeightError').hide();
            if (!clientId) {
                console.log('No client selected');
                return;
            }
            console.log('Client selected:', clientId);
            const url = '{{ route('getClientinfoInward', [':clientId']) }}'.replace(':clientId', clientId);
            $.ajax({
                url: url,
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    console.log('Coils fetched:', data);
                    if (!data || data.length === 0) {
                        alert('No coils found for the selected client.');
                        return;
                    }
                    data.forEach(function(coil) {
                        crrNoDropdown.append(`<option value="${coil.id}">${coil.crr_no}</option>`);
                    });
                    // Set the selected CRR No. from the plan
                    crrNoDropdown.val('{{ $plan->coil_id }}').trigger('change');
                    crrNoDropdown.select2({
                        placeholder: "Select CRR No.",
                        allowClear: true
                    });
                },
                error: function(xhr) {
                    console.error('Error fetching coils:', xhr.status, xhr.responseText);
                    alert('Failed to load coil information: ' + (xhr.responseJSON?.message || 'Unknown error'));
                }
            });
        }

        function getInfo(coilId) {
            if (!coilId) {
                console.log('No CRR No. selected');
                $('#grade_id, #thickness, #width, #density, #netWeight, #inward_id').val('');
                $('#gradeError').text('Please select a CRR No.').show();
                return;
            }
            console.log('CRR No. change event triggered for coilId:', coilId);
            const url = '{{ route('getCrrinfoInward', [':coilId']) }}'.replace(':coilId', coilId);
            $.ajax({
                url: url,
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    console.log('Full AJAX response:', data);
                    if (!data || !data.crr_info) {
                        console.error('Invalid response: crr_info missing');
                        alert('Invalid coil data received.');
                        $('#grade_id, #thickness, #width, #density, #netWeight, #inward_id').val('');
                        $('#gradeError').text('Invalid coil data').show();
                        return;
                    }
                    const crrInfo = data.crr_info;
                    const initialCrrInfo = {
                        width: {{ $crr_info['width'] ?? 0 }},
                        net_weight: {{ $crr_info['net_weight'] ?? 0 }},
                        hasCrsCuts: hasCrsCuts
                    };
                    console.log('Initial crr_info from controller:', initialCrrInfo);
                    const gradeId = crrInfo.grade_id || '';
                    const thicknessVal = parseFloat(crrInfo.thickness);
                    const densityVal = parseFloat(crrInfo.material_type_density);
                    // Use initial CRS cut values if plan has CRS cuts
                    const widthVal = hasCrsCuts ? initialCrrInfo.width : parseFloat(crrInfo.width);
                    const netWeightVal = hasCrsCuts ? initialCrrInfo.net_weight : parseFloat(crrInfo.net_weight);
                    console.log(
                        `Coil Details: gradeId=${gradeId}, thickness=${thicknessVal}, density=${densityVal}, width=${widthVal}, netWeight=${netWeightVal}`
                    );
                    const gradeSelect = $('#grade_id');
                    gradeSelect.val(gradeId);
                    gradeSelect.prop('disabled', true);
                    if (!gradeId) {
                        console.warn('Grade ID missing:', { grade_id: gradeId });
                        $('#gradeError').text('Grade data missing for this coil').show();
                    } else {
                        $('#gradeError').hide();
                    }
                    $('#inward_id').val(crrInfo.inward_id || '');
                    $('#thickness').val(formatWeight(crrInfo.thickness || 0));
                    $('#width').val(formatWeight(widthVal || 0));
                    $('#density').val(formatWeight(crrInfo.material_type_density || 0));
                    $('#netWeight').val(formatWeight(netWeightVal || 0));
                    $('#currentBalance').text(formatWeight(netWeightVal || 0));
                    localStorage.setItem('cdetail', JSON.stringify({
                        ...crrInfo,
                        width: widthVal,
                        net_weight: netWeightVal
                    }));
                    if (!setCoilDetails()) {
                        console.error('Failed to validate coil details');
                        alert('Invalid coil details. Please check the selected coil.');
                    }
                    if (isNaN(thicknessVal) || thicknessVal <= 0 || isNaN(densityVal) || densityVal <= 0) {
                        console.warn(`Invalid coil details: thickness=${thicknessVal}, density=${densityVal}`);
                        alert('Invalid coil details: Thickness or density is zero or negative.');
                        $('#thickness, #density').val('');
                    }
                },
                error: function(xhr) {
                    console.error('AJAX error fetching CRR info:', xhr.status, xhr.responseText);
                    alert('Failed to load CRR information: ' + (xhr.responseJSON?.message || 'Unknown error'));
                    $('#grade_id, #thickness, #width, #density, #netWeight, #inward_id').val('');
                    $('#gradeError').text('Failed to load coil data').show();
                }
            });
        }

        function updateBalance() {
            $('#currentBalance').text(formatWeight(balanceWeight));
            $('#summaryRemaining').text(formatWeight(balanceWeight));
            const usedPercent = netWeight > 0 ? (totalUsedWeight / netWeight) * 100 : 0;
            $('#usedBar').css('width', usedPercent + '%').text(`Used: ${usedPercent.toFixed(1)}%`);
            console.log(`updateBalance: balanceWeight=${balanceWeight}, totalUsedWeight=${totalUsedWeight}`);
        }

        function updateUsedWeight() {
            totalUsedWeight = Number(formatWeight(
                processes
                    .filter(p => p.type === 'crs')
                    .flatMap(p => p.cuts)
                    .reduce((sum, cut) => sum + Number(cut.weight), 0) +
                processes
                    .filter(p => p.type === 'ctl')
                    .flatMap(p => p.cuts)
                    .filter(cut => cut.dependentIndex === "-1")
                    .reduce((sum, cut) => sum + Number(cut.weight), 0)
            ));
            balanceWeight = Number(formatWeight(netWeight - totalUsedWeight));
            $('#totalUsedWeight').text(formatWeight(totalUsedWeight));
            $('#summaryUsed').text(formatWeight(totalUsedWeight));
            updateBalance();
            console.log(`updateUsedWeight: totalUsedWeight=${totalUsedWeight}, balanceWeight=${balanceWeight}`);
        }

        function refreshCrsDependentOptions() {
            console.log('refreshCrsDependentOptions called');
            processes.forEach(p => {
                if (p.type === 'ctl') {
                    const select = $(`#ctlDependentCut-${p.id}`);
                    const previousValue = select.val();
                    select.empty().append('<option value="">Select a CRS cut</option>');
                    const hasCrsCuts = processes.some(pr => pr.type === 'crs' && pr.cuts.length > 0);
                    console.log(`ProcessId=${p.id}, hasCrsCuts=${hasCrsCuts}`);
                    if (!hasCrsCuts) {
                        const independentCtlWeight = processes
                            .filter(pr => pr.type === 'ctl')
                            .flatMap(pr => pr.cuts)
                            .filter(cut => cut.dependentIndex === "-1")
                            .reduce((sum, cut) => sum + Number(cut.weight), 0);
                        const availableWeight = Number(formatWeight(netWeight - independentCtlWeight));
                        select.append(
                            `<option value="-1">${width.toFixed(1)}mm (${availableWeight.toFixed(3)} TON)</option>`
                        );
                        select.val('-1');
                    } else {
                        processes.forEach(pr => {
                            if (pr.type === 'crs') {
                                pr.cuts.forEach((cut, index) => {
                                    if (cut.width > 0) {
                                        select.append(
                                            `<option value="${pr.id}-${index}">${cut.width.toFixed(1)}mm (${cut.remainingWeight} TON)</option>`
                                        );
                                    }
                                });
                            }
                        });
                        select.val(previousValue && $(`option[value="${previousValue}"]`, select).length ?
                            previousValue : '');
                    }
                    select.prop('disabled', !hasCrsCuts && processes.filter(pr => pr.type === 'ctl').length > 0);
                    console.log(`ctlDependentCut-${p.id} updated, value=${select.val()}, options=`,
                        select.find('option').map((i, opt) => $(opt).val()).get());
                    updateCtlDependentFields(p.id);
                }
            });
        }

        function refreshCrsCutsTable(processId) {
            const tableBody = $(`#crsCutsTable-${processId}`);
            tableBody.empty();
            const process = processes.find(p => p.id === processId);
            let crsTotalWeight = 0;
            process.cuts.forEach((cut, index) => {
                crsTotalWeight = Number(formatWeight(crsTotalWeight + Number(cut.weight)));
                tableBody.append(`
                    <tr>
                        <td>${cut.width.toFixed(1)}</td>
                        <td>${cut.quantity}</td>
                        <td>${cut.weight}</td>
                        <td>${cut.remainingWeight}</td>
                        <td><button class="btn btn-sm btn-danger remove-cut" data-process-id="${processId}" data-index="${index}">Remove</button></td>
                    </tr>
                `);
            });
            $(`#crsTotalWeight-${processId}`).text(formatWeight(crsTotalWeight));
            console.log(`refreshCrsCutsTable: processId=${processId}, crsTotalWeight=${crsTotalWeight}`);
        }

        function removeCrsCut(processId, index) {
            const process = processes.find(p => p.id === processId);
            const cut = process.cuts[index];
            const dependentCtlCuts = processes
                .filter(p => p.type === 'ctl')
                .flatMap(p => p.cuts.filter(cut => cut.dependentIndex === `${processId}-${index}`));
            if (dependentCtlCuts.length && !confirm(
                `This will also remove ${dependentCtlCuts.length} dependent CTL cuts. Proceed?`)) return;
            processes.forEach(p => {
                if (p.type === 'ctl') {
                    p.cuts = p.cuts.filter(cut => cut.dependentIndex !== `${processId}-${index}`);
                    refreshCtlCutsTable(p.id);
                }
            });
            totalUsedWeight = Number(formatWeight(totalUsedWeight - Number(cut.weight)));
            process.cuts.splice(index, 1);
            balanceWeight = Number(formatWeight(netWeight - totalUsedWeight));
            console.log(
                `removeCrsCut: processId=${processId}, index=${index}, cutWeight=${cut.weight}, totalUsedWeight=${totalUsedWeight}, balanceWeight=${balanceWeight}`
            );
            updateUsedWeight();
            refreshCrsCutsTable(processId);
            refreshCrsDependentOptions();
        }

        function updateCtlDependentFields(processId) {
            const selectedIndex = $(`#ctlDependentCut-${processId}`).val();
            if (!selectedIndex) {
                $(`#ctlWidth-${processId}, #ctlAvailableWeight-${processId}`).val('');
                updateCtlPreview(processId);
                return;
            }
            let cutWidth, availableWeight;
            if (selectedIndex === "-1") {
                cutWidth = width;
                const usedWeight = processes
                    .filter(p => p.type === 'ctl')
                    .flatMap(p => p.cuts)
                    .filter(cut => cut.dependentIndex === "-1")
                    .reduce((sum, cut) => sum + Number(cut.weight), 0);
                availableWeight = Number(formatWeight(netWeight - usedWeight));
            } else {
                const [crsProcessId, cutIndex] = selectedIndex.split('-').map(Number);
                const crsProcess = processes.find(p => p.id === crsProcessId);
                const selectedCut = crsProcess.cuts[cutIndex];
                cutWidth = selectedCut.width;
                availableWeight = Number(formatWeight(selectedCut.remainingWeight));
            }
            $(`#ctlWidth-${processId}`).val(cutWidth.toFixed(1));
            $(`#ctlAvailableWeight-${processId}`).val(formatWeight(availableWeight));
            updateCtlPreview(processId);
            console.log(
                `updateCtlDependentFields: processId=${processId}, selectedIndex=${selectedIndex}, cutWidth=${cutWidth}, availableWeight=${availableWeight}`
            );
        }

        function refreshCtlCutsTable(processId) {
            const tableBody = $(`#ctlCutsTable-${processId}`);
            tableBody.empty();
            const process = processes.find(p => p.id === processId);
            let ctlTotalWeight = 0;
            process.cuts.forEach((cut, index) => {
                ctlTotalWeight = Number(formatWeight(ctlTotalWeight + Number(cut.weight)));
                const depWidth = cut.dependentIndex === "-1" ? width : (function() {
                    const [crsProcessId, cutIndex] = cut.dependentIndex.split('-').map(Number);
                    const crsProcess = processes.find(p => p.id === crsProcessId);
                    return crsProcess.cuts[cutIndex].width;
                })();
                const formattedQuantity = cut.quantity.toLocaleString('en-US');
                tableBody.append(`
                    <tr>
                        <td>${depWidth.toFixed(1)}mm</td>
                        <td>${cut.length.toFixed(1)}</td>
                        <td>${formattedQuantity}</td>
                        <td>${cut.weight}</td>
                        <td><button class="btn btn-sm btn-danger remove-ctl-cut" data-process-id="${processId}" data-index="${index}">Remove</button></td>
                    </tr>
                `);
            });
            $(`#ctlTotalWeight-${processId}`).text(formatWeight(ctlTotalWeight));
            console.log(`refreshCtlCutsTable: processId=${processId}, ctlTotalWeight=${ctlTotalWeight}`);
        }

        function removeCtlCut(processId, index) {
            const process = processes.find(p => p.id === processId);
            const cut = process.cuts[index];
            let crsProcessId = null;
            if (cut.dependentIndex !== "-1") {
                const [depCrsProcessId, cutIndex] = cut.dependentIndex.split('-').map(Number);
                crsProcessId = depCrsProcessId;
                const crsProcess = processes.find(p => p.id === depCrsProcessId);
                const previousRemainingWeight = Number(crsProcess.cuts[cutIndex].remainingWeight);
                crsProcess.cuts[cutIndex].remainingWeight = formatWeight(previousRemainingWeight + Number(cut.weight));
                console.log(
                    `removeCtlCut: dependentIndex=${cut.dependentIndex}, crsProcessId=${crsProcessId}, cutIndex=${cutIndex}, restoredWeight=${cut.weight}, newRemainingWeight=${crsProcess.cuts[cutIndex].remainingWeight}`
                );
                refreshCrsCutsTable(crsProcessId);
            } else {
                totalUsedWeight = Number(formatWeight(totalUsedWeight - Number(cut.weight)));
                balanceWeight = Number(formatWeight(netWeight - totalUsedWeight));
                console.log(
                    `removeCtlCut: independent cut, cutWeight=${cut.weight}, totalUsedWeight=${totalUsedWeight}, balanceWeight=${balanceWeight}`
                );
            }
            process.cuts.splice(index, 1);
            updateUsedWeight();
            refreshCtlCutsTable(processId);
            if (crsProcessId !== null) {
                refreshCrsCutsTable(crsProcessId);
            }
            updateCtlDependentFields(processId);
            updateCtlPreview(processId);
            refreshCrsDependentOptions();
        }

        function resetPlan() {
            processes.forEach(p => {
                if (p.type === 'crs') {
                    p.cuts.forEach(cut => cut.remainingWeight = formatWeight(cut.weight));
                    $(`#crsCutsTable-${p.id}`).empty();
                    $(`#crsTotalWeight-${p.id}`).text('0.000');
                    $(`#crsWidth-${p.id}, #crsQuantity-${p.id}`).val('');
                } else {
                    p.cuts = [];
                    $(`#ctlCutsTable-${p.id}`).empty();
                    $(`#ctlTotalWeight-${p.id}`).text('0.000');
                    $(`#ctlLength-${p.id}, #ctlProductionWeight-${p.id}, #ctlDependentCut-${p.id}, #ctlWidth-${p.id}, #ctlAvailableWeight-${p.id}`)
                        .val('');
                    $(`#previewCtlQuantity-${p.id}`).val('0');
                    $(`#previewActualWeight-${p.id}`).val('0.000');
                }
                $(`#${p.type}-title-${p.id}, #${p.type}-section-${p.id}`).remove();
            });
            processes = [];
            processCounter = 0;
            totalUsedWeight = 0;
            balanceWeight = Number(formatWeight(netWeight));
            updateUsedWeight();
            refreshCrsDependentOptions();
            $('#process-sections').append($('.process-buttons'));
            console.log('resetPlan: processes cleared, totalUsedWeight=0, balanceWeight=', balanceWeight);
        }

        function updateCtlPreview(processId) {
            console.log(`updateCtlPreview called for processId=${processId}`);
            const length = parseFloat($(`#ctlLength-${processId}`).val());
            const productionWeight = parseFloat($(`#ctlProductionWeight-${processId}`).val());
            const selectedIndex = $(`#ctlDependentCut-${processId}`).val();
            console.log(
                `Inputs: length=${length}, productionWeight=${productionWeight}, selectedIndex=${selectedIndex}, thickness=${thickness}, density=${density}`
            );

            if (!selectedIndex || isNaN(length) || length <= 0 || isNaN(productionWeight) || productionWeight <= 0) {
                $(`#previewCtlQuantity-${processId}`).val('0');
                $(`#previewActualWeight-${processId}`).val('0.000');
                console.warn(
                    `updateCtlPreview: Invalid inputs - selectedIndex=${selectedIndex}, length=${length}, productionWeight=${productionWeight}`
                );
                return;
            }

            if (thickness <= 0 || density <= 0) {
                $(`#previewCtlQuantity-${processId}`).val('0');
                $(`#previewActualWeight-${processId}`).val('0.000');
                console.warn(`updateCtlPreview: Invalid coil details - thickness=${thickness}, density=${density}`);
                alert('Invalid coil details: Thickness or density is zero or negative. Please check coil selection.');
                return;
            }

            let cutWidth;
            if (selectedIndex === "-1") {
                cutWidth = width;
            } else {
                const [crsProcessId, cutIndex] = selectedIndex.split('-').map(Number);
                const crsProcess = processes.find(p => p.id === crsProcessId);
                if (!crsProcess || !crsProcess.cuts[cutIndex]) {
                    $(`#previewCtlQuantity-${processId}`).val('0');
                    $(`#previewActualWeight-${processId}`).val('0.000');
                    console.warn(`updateCtlPreview: Invalid CRS cut - crsProcessId=${crsProcessId}, cutIndex=${cutIndex}`);
                    alert('Selected CRS cut is invalid. Please select a valid CRS cut.');
                    return;
                }
                cutWidth = crsProcess.cuts[cutIndex].width;
            }

            if (cutWidth <= 0) {
                $(`#previewCtlQuantity-${processId}`).val('0');
                $(`#previewActualWeight-${processId}`).val('0.000');
                console.warn(`updateCtlPreview: Invalid cutWidth=${cutWidth}`);
                return;
            }

            const pieceVol = cutWidth * thickness * length;
            const pieceWeight_grams = pieceVol * density / 1000;
            const pieceWeight_TON = pieceWeight_grams / 1_000_000;
            console.log(
                `Calculations: pieceVol=${pieceVol}, pieceWeight_grams=${pieceWeight_grams}, pieceWeight_TON=${pieceWeight_TON}`
            );

            const quantity = Math.floor(productionWeight / pieceWeight_TON);
            const actualWeight = Number(formatWeight(quantity * pieceWeight_TON));
            if (!isFinite(quantity) || quantity < 0) {
                $(`#previewCtlQuantity-${processId}`).val('0');
                $(`#previewActualWeight-${processId}`).val('0.000');
                console.warn(`updateCtlPreview: Invalid quantity=${quantity}`);
                return;
            }

            console.log(`Results: quantity=${quantity}, actualWeight=${actualWeight}`);
            const formattedQuantity = quantity.toLocaleString('en-US');
            $(`#previewCtlQuantity-${processId}`).val(formattedQuantity);
            $(`#previewActualWeight-${processId}`).val(formatWeight(actualWeight));
            console.log(
                `DOM Update: previewCtlQuantity=${$(`#previewCtlQuantity-${processId}`).val()}, previewActualWeight=${$(`#previewActualWeight-${processId}`).val()}`
            );
        }

        function addProcess(processType) {
            if (netWeight === 0 || !validateCoilDetails()) {
                alert('Please select valid coil details before adding a process.');
                return;
            }
            if (processType === 'crs' && processes.some(p => p.type === 'crs')) {
                alert('Only one CRS process is allowed per plan.');
                $('#newProcessType option[value="crs"]').prop('disabled', true);
                return;
            }
            const newProcessId = processCounter++;
            processes.push({
                id: newProcessId,
                type: processType,
                cuts: []
            });
            const sectionHtml = processType === 'crs' ? `
                <div class="section-title" id="crs-title-${newProcessId}"><h4>CRS – Cut to Width</h4></div>
                <div class="process-section" id="crs-section-${newProcessId}" data-process-id="${newProcessId}" data-process-type="crs">
                    <div class="row mb-3">
                        <div class="col-md-4">
                            <label for="crsWidth-${newProcessId}" class="form-label">Cut Width (mm)</label>
                            <input type="number" class="form-control" id="crsWidth-${newProcessId}" placeholder="Enter width" min="0.001" step="0.001">
                            <div id="crsWidthError-${newProcessId}" class="error-message">Width must be positive</div>
                        </div>
                        <div class="col-md-4">
                            <label for="crsQuantity-${newProcessId}" class="form-label">Quantity</label>
                            <input type="number" class="form-control" id="crsQuantity-${newProcessId}" placeholder="Enter quantity" min="1">
                            <div id="crsQuantityError-${newProcessId}" class="error-message">Quantity must be at least 1</div>
                        </div>
                        <div class="col-md-4 d-flex align-items-end">
                            <button class="btn btn-primary w-100" onclick="addCrsCut(${newProcessId})">Add Cut</button>
                        </div>
                    </div>
                    <table class="table table-bordered">
                        <thead><tr><th>Width (mm)</th><th>Quantity</th><th>Weight (TON)</th><th>Balance Weight (TON)</th><th>Action</th></tr></thead>
                        <tbody id="crsCutsTable-${newProcessId}"></tbody>
                        <tfoot><tr><th colspan="2">Total Weight</th><th id="crsTotalWeight-${newProcessId}">0.000</th><th></th></tr></tfoot>
                    </table>
                </div>
            ` : `
                <div class="section-title" id="ctl-title-${newProcessId}"><h4>CTL – Cut to Length</h4></div>
                <div class="process-section" id="ctl-section-${newProcessId}" data-process-id="${newProcessId}" data-process-type="ctl">
                    <div class="alert alert-secondary mb-3"><strong>CTL Process Rules:</strong><br>- Independent when no CRS cuts (uses net coil width)<br>- Dependent on CRS cuts when available<br>- User inputs length and production weight; quantity calculated</div>
                    <div class="row mb-3 dimension-select">
                        <div class="col-md-4"><label for="ctlDependentCut-${newProcessId}" class="form-label">Select Dependent CRS Cut</label><select class="form-control" id="ctlDependentCut-${newProcessId}"></select></div>
                        <div class="col-md-4"><label for="ctlWidth-${newProcessId}" class="form-label">Width (mm)</label><input type="number" class="form-control" id="ctlWidth-${newProcessId}" readonly></div>
                        <div class="col-md-4"><label for="ctlAvailableWeight-${newProcessId}" class="form-label">Available Weight (TON)</label><input type="number" class="form-control" id="ctlAvailableWeight-${newProcessId}" readonly></div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-4">
                            <label for="ctlLength-${newProcessId}" class="form-label">Length (mm)</label>
                            <input type="number" class="form-control" id="ctlLength-${newProcessId}" placeholder="Enter length" min="0.001" step="0.001" oninput="updateCtlPreview(${newProcessId})">
                            <div id="ctlLengthError-${newProcessId}" class="error-message">Length must be positive</div>
                        </div>
                        <div class="col-md-4">
                            <label for="ctlProductionWeight-${newProcessId}" class="form-label">Production Weight (TON)</label>
                            <input type="number" class="form-control" id="ctlProductionWeight-${newProcessId}" placeholder="Enter weight" min="0.001" step="0.001" oninput="updateCtlPreview(${newProcessId})">
                            <div id="ctlProductionWeightError-${newProcessId}" class="error-message">Production weight must be positive</div>
                        </div>
                        <div class="col-md-4 d-flex align-items-end">
                            <button class="btn btn-primary w-100" onclick="addCtlCut(${newProcessId})">Add Cut</button>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="previewCtlQuantity-${newProcessId}" class="form-label"><strong>Estimated Quantity:</strong></label>
                            <input type="text" class="form-control bg-light" id="previewCtlQuantity-${newProcessId}" value="0" readonly>
                        </div>
                        <div class="col-md-6">
                            <label for="previewActualWeight-${newProcessId}" class="form-label"><strong>Estimated Used Weight (TON):</strong></label>
                            <input type="text" class="form-control bg-light" id="previewActualWeight-${newProcessId}" value="0.000" readonly>
                        </div>
                    </div>
                    <table class="table table-bordered">
                        <thead><tr><th>Width (mm)</th><th>Length (mm)</th><th>Quantity</th><th>Weight (TON)</th><th>Action</th></tr></thead>
                        <tbody id="ctlCutsTable-${newProcessId}"></tbody>
                        <tfoot><tr><th colspan="3">Total Weight</th><th id="ctlTotalWeight-${newProcessId}">0.000</th><th></th></tr></tfoot>
                    </table>
                </div>
            `;
            $('.process-buttons').before(sectionHtml);
            $('#process-sections').append($('.process-buttons'));
            if (processType === 'ctl') {
                $(`#ctlDependentCut-${newProcessId}`).on('change', () => {
                    console.log(`ctlDependentCut-${newProcessId} changed, value: ${$(`#ctlDependentCut-${newProcessId}`).val()}`);
                    updateCtlDependentFields(newProcessId);
                });
                $(`#ctlLength-${newProcessId}`).on('input change', () => {
                    console.log(`ctlLength-${newProcessId} input, value: ${$(`#ctlLength-${newProcessId}`).val()}`);
                    updateCtlPreview(newProcessId);
                });
                $(`#ctlProductionWeight-${newProcessId}`).on('input change', () => {
                    console.log(`ctlProductionWeight-${newProcessId} input, value: ${$(`#ctlProductionWeight-${newProcessId}`).val()}`);
                    updateCtlPreview(newProcessId);
                });
                $(`#crsWidth-${newProcessId}`).on('input', function() {
                    const value = parseFloat($(this).val());
                    $(`#crsWidthError-${newProcessId}`).toggle(isNaN(value) || value <= 0);
                });
                $(`#crsQuantity-${newProcessId}`).on('input', function() {
                    const value = parseInt($(this).val());
                    $(`#crsQuantityError-${newProcessId}`).toggle(isNaN(value) || value < 1);
                });
                $(`#ctlLength-${newProcessId}`).on('input', function() {
                    const value = parseFloat($(this).val());
                    $(`#ctlLengthError-${newProcessId}`).toggle(isNaN(value) || value <= 0);
                });
                $(`#ctlProductionWeight-${newProcessId}`).on('input', function() {
                    const value = parseFloat($(this).val());
                    $(`#ctlProductionWeightError-${newProcessId}`).toggle(isNaN(value) || value <= 0);
                });
            }
            refreshCrsDependentOptions();
            if (processType === 'ctl') updateCtlDependentFields(newProcessId);
            $('#addProcessModal').modal('hide');
            $('#newProcessType option[value="crs"]').prop('disabled', processes.some(p => p.type === 'crs'));
            console.log(`addProcess: processType=${processType}, newProcessId=${newProcessId}`);
        }

        function deleteProcess(processId) {
            const process = processes.find(p => p.id === parseInt(processId));
            if (!process) return;
            if (process.type === 'crs') {
                const dependentCtlProcesses = processes.filter(p => p.type === 'ctl' && p.cuts.some(cut =>
                    cut.dependentIndex.split('-')[0] == processId));
                if (dependentCtlProcesses.length && !confirm(
                    `This will also remove ${dependentCtlProcesses.length} dependent CTL processes. Proceed?`)) return;
                totalUsedWeight = Number(formatWeight(totalUsedWeight - process.cuts.reduce((sum, cut) =>
                    sum + Number(cut.weight), 0)));
                dependentCtlProcesses.forEach(depProcess => {
                    depProcess.cuts = depProcess.cuts.filter(cut => cut.dependentIndex === "-1");
                    refreshCtlCutsTable(depProcess.id);
                    if (depProcess.cuts.length === 0) {
                        processes = processes.filter(p => p.id !== depProcess.id);
                        $(`#ctl-title-${depProcess.id}, #ctl-section-${depProcess.id}`).remove();
                    }
                });
            } else {
                process.cuts.forEach(cut => {
                    if (cut.dependentIndex !== "-1") {
                        const [crsProcessId, cutIndex] = cut.dependentIndex.split('-').map(Number);
                        const crsProcess = processes.find(p => p.id === crsProcessId);
                        if (crsProcess) {
                            const previousRemainingWeight = Number(crsProcess.cuts[cutIndex].remainingWeight);
                            crsProcess.cuts[cutIndex].remainingWeight = formatWeight(previousRemainingWeight +
                                Number(cut.weight));
                            console.log(
                                `deleteProcess: CTL processId=${processId}, dependentIndex=${cut.dependentIndex}, crsProcessId=${crsProcessId}, cutIndex=${cutIndex}, restoredWeight=${cut.weight}, newRemainingWeight=${crsProcess.cuts[cutIndex].remainingWeight}`
                            );
                            refreshCrsCutsTable(crsProcessId);
                        }
                    } else {
                        totalUsedWeight = Number(formatWeight(totalUsedWeight - Number(cut.weight)));
                        console.log(
                            `deleteProcess: independent cut, cutWeight=${cut.weight}, totalUsedWeight=${totalUsedWeight}`
                        );
                    }
                });
            }
            processes = processes.filter(p => p.id !== parseInt(processId));
            $(`#${process.type}-title-${processId}, #${process.type}-section-${processId}`).remove();
            balanceWeight = Number(formatWeight(netWeight - totalUsedWeight));
            updateUsedWeight();
            refreshCrsDependentOptions();
            $('#process-sections').append($('.process-buttons'));
            console.log(
                `deleteProcess: processId=${processId}, totalUsedWeight=${totalUsedWeight}, balanceWeight=${balanceWeight}`
            );
        }

        function populateDeleteProcessModal() {
            const select = $('#deleteProcessId');
            select.empty().append('<option value="">Select a process</option>');
            if (processes.length === 0) {
                $('#noProcessesMessage').show();
                $('#confirmDeleteProcess').prop('disabled', true);
            } else {
                processes.forEach(p => {
                    select.append(`<option value="${p.id}">${p.type.toUpperCase()} Process ${p.id}</option>`);
                });
                $('#noProcessesMessage').hide();
                $('#confirmDeleteProcess').prop('disabled', false);
            }
        }

        $(document).ready(function() {
            $('#client_id').select2({
                placeholder: "Select Client",
                allowClear: true
            });

            $('#crr_no').select2({
                placeholder: "Select CRR No.",
                allowClear: true
            });

            // Initialize client and CRR No. selection
            $('#client_id').on('change', function() {
                console.log('Client ID changed:', $(this).val());
                updateSelectedClientValues();
            });

            $('#crr_no').on('change', function() {
                const coilId = $(this).val();
                console.log('CRR No. changed:', coilId);
                getInfo(coilId);
            });

            // Trigger initial client selection to populate CRR No.
            $('#client_id').trigger('change');

            $('#initial-add-process').on('click', function() {
                if (netWeight === 0 || !validateCoilDetails()) {
                    alert('Please select valid coil details before adding a process.');
                    return;
                }
                const hasCrsProcess = processes.some(p => p.type === 'crs');
                $('#newProcessType').empty();
                if (!hasCrsProcess) {
                    $('#newProcessType').append('<option value="crs">CRS – Cut to Width</option>');
                }
                $('#newProcessType').append('<option value="ctl">CTL – Cut to Length</option>');
                $('#addProcessModal').modal('show');
            });

            $('#confirmAddProcess').on('click', function() {
                const processType = $('#newProcessType').val();
                if (!processType) {
                    alert('Please select a process type.');
                    return;
                }
                addProcess(processType);
            });

            $(document).on('click', '.remove-cut', function() {
                const processId = $(this).data('process-id');
                const index = $(this).data('index');
                removeCrsCut(processId, index);
            });

            $(document).on('click', '.remove-ctl-cut', function() {
                const processId = $(this).data('process-id');
                const index = $(this).data('index');
                removeCtlCut(processId, index);
            });

            $('#deleteProcess').on('click', function() {
                populateDeleteProcessModal();
                $('#deleteProcessModal').modal('show');
            });

            $('#confirmDeleteProcess').on('click', function() {
                const processId = $('#deleteProcessId').val();
                if (processId) {
                    deleteProcess(processId);
                    $('#deleteProcessModal').modal('hide');
                } else {
                    alert('Please select a process to delete.');
                }
            });

            $('#savePlan').on('click', function() {
                if (!validateCoilDetails()) {
                    alert('Please complete all coil details, including a valid grade.');
                    return;
                }
                if (processes.length === 0) {
                    alert('Please add at least one process.');
                    return;
                }
                if (!processes.some(p => p.cuts.length > 0)) {
                    alert('Please add at least one cut to a process.');
                    return;
                }
                const planData = {
                    client_id: $('#client_id').val(),
                    cut_id: $('#cut_id').val(),
                    coil_id: $('#crr_no').val(),
                    inward_id: $('#inward_id').val(),
                    grade_id: $('#grade_id').val() || null,
                    total_used_weight: formatWeight(totalUsedWeight),
                    balance_weight: formatWeight(balanceWeight),
                    processes: processes.map(p => ({
                        type: p.type,
                        cuts: p.cuts.map(cut => ({
                            width: Number(cut.width.toFixed(2)),
                            reCreatewidth:$('.reCreateWidth').val(),
                            quantity: cut.quantity,
                            weight: cut.weight,
                            length: cut.length ? Number(cut.length.toFixed(2)) : null,
                            dependent_index: cut.dependentIndex || null,
                            remainingWeight: cut.remainingWeight
                        }))
                    }))
                };
                console.log('Plan data to be sent:', JSON.stringify(planData, null, 2));
                const url = '{{ route('plans.storeRecreate') }}';
                $.ajax({
                    url: url,
                    type: 'POST',
                    data: JSON.stringify(planData),
                    contentType: 'application/json',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        alert(`Plan saved successfully!`);
                        resetPlan();
                        $('#client_id, #crr_no, #grade_id, #thickness, #width, #density, #netWeight, #inward_id').val('');
                        $('#currentBalance, #totalUsedWeight').text('0.000');
                        $('#usedBar').css('width', '0%').text('');
                        $('#summaryUsed, #summaryRemaining').text('0.000');
                        $('#client_id').val('').trigger('change');
                        $('#crr_no').val('').trigger('change');
                    },
                    error: function(xhr) {
                        console.error('Error saving plan:', xhr.status, xhr.responseText);
                        alert('Failed to save plan: ' + (xhr.responseJSON?.message || 'Unknown error'));
                    }
                });
            });

            $('#resetPlan').on('click', function() {
                if (confirm('Are you sure you want to reset the plan?')) {
                    $('#client_id, #crr_no, #grade_id, #thickness, #width, #density, #netWeight, #inward_id').val('');
                    $('#currentBalance, #totalUsedWeight').text('0.000');
                    $('#gradeError, #clientNameError, #crrNoError, #widthError, #thicknessError, #densityError, #netWeightError').hide();
                    resetPlan();
                    netWeight = 0;
                    width = 0;
                    thickness = 0;
                    density = 0;
                    coilLength = 0;
                    balanceWeight = 0;
                    totalUsedWeight = 0;
                    $('#client_id').val('').trigger('change');
                    $('#crr_no').val('').trigger('change');
                }
            });

            $('#printPlan').on('click', function() {
                if (!validateCoilDetails()) {
                    alert('Please complete all coil details, including a valid grade.');
                    return;
                }
                if (!processes.some(p => p.cuts.length > 0)) {
                    alert('Add at least one cut to print the plan.');
                    return;
                }
                window.print();
            });
        });
    </script>
@endsection