@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">Edit Plan</h2>

        @if ($warning)
            <div class="alert alert-warning">{{ $warning }}</div>
        @endif

        <!-- Coil Details Section -->
        <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" disabled>
                        <option value="">Select Client</option>
                        @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" disabled>
                        <option value="">Select CRR No.</option>
                        @if ($plan->coil)
                            <option value="{{ $plan->coil_id }}" selected>
                                {{ $plan->coil->crr_no ?? 'N/A' }}
                            </option>
                        @endif
                    </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;" disabled>
                        <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" id="width" value="{{ $plan->coil->width ?? '' }}" readonly >
                    <input type="hidden" name="cut_id" id="cut_id" value="">
                    <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="{{ $plan->coil->thickness ?? '' }}"
                        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>
                    @php
                        // FIX: Use the correct density field from coil table
                        $coilDensity = $plan->coil->materialType->density ?? 0;

                    @endphp
                    <input type="number" class="form-control" id="density"
                        value="{{ $coilDensity }}" readonly>
                    <input type="hidden" class="form-control" name="inward_id" value="{{ $plan->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="{{ $plan->coil->net_weight ?? '' }}"
                        readonly>
                    <div id="netWeightError" class="error-message">Net Weight must be a positive number</div>
                </div>
            </div>
        </div>

        <!-- Balance Cards -->
        <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($plan->balance_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">
                                {{ number_format($plan->total_used_weight, 3) }}</span> TON</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Process Sections -->
        <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>
            <!-- Existing processes will be rendered here -->
        </div>

        <!-- Plan Summary -->
        <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>
                        @php
                            $usedPercent = $plan->coil->net_weight > 0 ?
                                ($plan->total_used_weight / $plan->coil->net_weight) * 100 : 0;
                        @endphp
                        <div class="progress mb-3">
                            <div class="progress-bar bg-success" role="progressbar" id="usedBar"
                                style="width: {{ $usedPercent }}%" aria-label="Used Weight">
                                {{ number_format($usedPercent, 1) }}%
                            </div>
                        </div>
                        <p class="card-text">Used: <span id="summaryUsed">
                                {{ number_format($plan->total_used_weight, 3) }}</span> TON</p>
                        <p class="card-text">Remaining: <span id="summaryRemaining">
                                {{ number_format($plan->balance_weight, 3) }}</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="updatePlan">Update 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>

    <!-- Add Process Modal -->
    <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>

    <!-- Delete Process Modal -->
    <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).toFixed(3);
        }

        // FIX: Initialize with correct density from coil table
        @php
            $coilDensity = $plan->coil->density ?? 0;
        @endphp

        let netWeight = {{ $plan->coil->net_weight ?? 0 }},
            width = {{ $plan->coil->width ?? 0 }},
            thickness = {{ $plan->coil->thickness ?? 0 }},
            density = {{ $coilDensity }},  // FIX: Use coil density, not material_type_density
            balanceWeight = {{ $plan->balance_weight ?? 0 }},
            totalUsedWeight = {{ $plan->total_used_weight ?? 0 }},
            processes = [],
            processCounter = 1,
            coilLength = 0;

        // Calculate coil length (for reference only)
        coilLength = getCoilLengthFromWeight(netWeight, width, thickness, density);

        // Initialize processes with existing cuts from database
        // Initialize processes with existing cuts
@foreach ($plan->processes as $process)
    processes.push({
        id: {{ $process->process_id }},
        type: '{{ $process->process_type }}',
        cuts: []
    });

    // Add CRS cuts
    @if ($process->process_type == 'crs')
        @foreach ($crs_coil as $cut)
            @if ($cut->process_id == $process->process_id)
                processes[processes.length - 1].cuts.push({
                    width: {{ $cut->cut_width ?? 0 }},
                    quantity: {{ $cut->quantity ?? 0 }},
                    weight: '{{ number_format($cut->weight ?? 0, 3) }}',
                    remainingWeight: '{{ number_format($cut->bal_weight ?? $cut->weight ?? 0, 3) }}'
                });
            @endif
        @endforeach
    @elseif ($process->process_type == 'ctl')
        // Add CTL cuts
        @foreach ($ctl_coil as $cut)
            @if ($cut->process_id == $process->process_id)
                processes[processes.length - 1].cuts.push({
                    dependentIndex: '{{ $cut->dependent_index ?? '-1' }}',
                    width: {{ $cut->cut_width ?? 0 }}, // This might be wrong initially
                    length: {{ $cut->cut_length ?? 0 }},
                    quantity: {{ $cut->quantity ?? 0 }},
                    weight: '{{ number_format($cut->weight ?? 0, 3) }}'
                });
            @endif
        @endforeach
    @endif
@endforeach

// Function to fix CTL cut widths after loading
function fixCtlCutWidthsAfterLoad() {
    processes.forEach(p => {
        if (p.type === 'ctl') {
            p.cuts.forEach(cut => {
                if (cut.dependentIndex && cut.dependentIndex !== "-1") {
                    const [crsProcessId, cutIndex] = cut.dependentIndex.split('-').map(Number);

                    // Find the CRS process and cut
                    const crsProcess = processes.find(proc =>
                        proc.id === crsProcessId && proc.type === 'crs'
                    );

                    if (crsProcess && crsProcess.cuts[cutIndex]) {
                        const crsCutWidth = crsProcess.cuts[cutIndex].width;

                        // Update CTL cut width to match CRS cut width
                        if (cut.width !== crsCutWidth) {
                            console.log(`Fixing CTL cut width on load: ${cut.width} -> ${crsCutWidth}`);
                            cut.width = crsCutWidth;
                        }
                    }
                }
            });
        }
    });
}

// Call this after rendering processes
$(document).ready(function () {
    // ... other initialization code ...

    // Fix CTL cut widths after loading
    setTimeout(() => {
        fixCtlCutWidthsAfterLoad();

        // Now render the tables with correct widths
        processes.forEach(p => {
            if (p.type === 'crs') {
                refreshCrsCutsTable(p.id);
            } else {
                refreshCtlCutsTable(p.id);
            }
        });
    }, 100);
});

        // Set processCounter to max ID + 1
        if (processes.length > 0) {
            processCounter = Math.max(...processes.map(p => p.id)) + 1;
        }

        // Debug log
        console.log('Initialized:', {
            netWeight: netWeight,
            width: width,
            thickness: thickness,
            density: density,
            balanceWeight: balanceWeight,
            totalUsedWeight: totalUsedWeight,
            coilLength: coilLength,
            processes: processes
        });

        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 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));

            updateUsedWeight();
            refreshCrsCutsTable(processId);
            refreshCrsDependentOptions();
            $(`#crsWidth-${processId}, #crsQuantity-${processId}`).val('');
        }

        // function addCtlCut(processId) {
        //     const dependentIndex = $(`#ctlDependentCut-${processId}`).val();
        //     const length = parseFloat($(`#ctlLength-${processId}`).val());
        //     const productionWeight = parseFloat($(`#ctlProductionWeight-${processId}`).val());

        //     if (dependentIndex === '' || isNaN(length) || length <= 0 || isNaN(productionWeight) || productionWeight <= 0) {
        //         alert('Enter valid positive length and production weight');
        //         return;
        //     }

        //     if (thickness <= 0 || density <= 0) {
        //         alert('Invalid coil details: Thickness or density is zero or negative. Please check coil selection.');
        //         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.');
        //             return;
        //         }
        //         const selectedCut = crsProcess.cuts[cutIndex];
        //         cutWidth = selectedCut.width;
        //         availableWeight = Number(formatWeight(selectedCut.remainingWeight));
        //     }

        //     if (cutWidth <= 0) {
        //         alert('Cut width must be positive');
        //         return;
        //     }

        //     if (productionWeight > availableWeight) {
        //         alert(`Exceeds available weight: ${availableWeight.toFixed(3)} TON`);
        //         return;
        //     }

        //     const pieceVol = cutWidth * thickness * length;
        //     const pieceWeight_grams = pieceVol * density / 1000;
        //     const pieceWeight_TON = pieceWeight_grams / 1_000_000;
        //     const quantity = Math.floor(productionWeight / pieceWeight_TON);
        //     const actualWeight = Number(formatWeight(quantity * pieceWeight_TON));

        //     if (!isFinite(quantity) || quantity <= 0) {
        //         alert('Production weight too low for one piece or invalid 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.`);
        //         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);
        //         refreshCrsCutsTable(crsProcessId);
        //     } else {
        //         totalUsedWeight = Number(formatWeight(totalUsedWeight + actualWeight));
        //         balanceWeight = Number(formatWeight(netWeight - totalUsedWeight));
        //     }

        //     updateUsedWeight();
        //     refreshCtlCutsTable(processId);
        //     $(`#ctlLength-${processId}, #ctlProductionWeight-${processId}`).val('');
        //     updateCtlDependentFields(processId);
        //     updateCtlPreview(processId);
        // }

function addCtlCut(processId) {
    console.log(`Adding CTL cut for process ${processId}`);
    try {
        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) {
            alert('Please select a dependent CRS cut.');
            return;
        }
        if (isNaN(length) || length <= 0) {
            alert('Please enter a valid length.');
            return;
        }
        if (isNaN(productionWeight) || productionWeight <= 0) {
            alert('Please enter a valid production weight.');
            return;
        }
        if (thickness <= 0 || density <= 0) {
            alert('Invalid coil details: Thickness or density is zero or negative.');
            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.');
                return;
            }
            const selectedCut = crsProcess.cuts[cutIndex];
            cutWidth = selectedCut.width;
            availableWeight = Number(selectedCut.remainingWeight);
        }

        if (productionWeight > availableWeight + 0.0001) {
            alert(`Production weight (${productionWeight.toFixed(3)} TON) exceeds available weight (${availableWeight.toFixed(3)} TON)`);
            return;
        }

        // Calculate piece weight (for quantity estimation)
        const pieceVol = cutWidth * thickness * length;
        const pieceWeight_grams = pieceVol * density / 1000;
        const pieceWeight_TON = pieceWeight_grams / 1_000_000;

        if (pieceWeight_TON <= 0) {
            alert('Invalid dimensions: Piece weight is zero.');
            return;
        }

        const quantity = Math.floor(productionWeight / pieceWeight_TON);
        if (quantity <= 0) {
            alert('Production weight is too low to produce even one piece.');
            return;
        }

        // Use exact user-entered production weight (this is the key!)
        const cutWeight = Number(formatWeight(productionWeight));

        const process = processes.find(p => p.id === processId);
        process.cuts.push({
            dependentIndex,
            width: cutWidth,
            length: length,
            quantity: quantity,
            weight: cutWeight,
            remainingWeight: cutWeight
        });

        // Deduct from CRS remaining weight
        if (dependentIndex !== "-1") {
            const [crsProcessId, cutIndex] = dependentIndex.split('-').map(Number);
            const crsProcess = processes.find(p => p.id === crsProcessId);
            const prevRemaining = Number(crsProcess.cuts[cutIndex].remainingWeight);
            crsProcess.cuts[cutIndex].remainingWeight = Number(formatWeight(prevRemaining - productionWeight));
            refreshCrsCutsTable(crsProcessId);
        } else {
            totalUsedWeight = Number(formatWeight(totalUsedWeight + productionWeight));
            balanceWeight = Number(formatWeight(netWeight - totalUsedWeight));
        }

        updateUsedWeight();
        refreshCtlCutsTable(processId);
        refreshCrsDependentOptions();
        updateCtlDependentFields(processId);

        // Clear inputs
        $(`#ctlLength-${processId}, #ctlProductionWeight-${processId}`).val('');

        console.log(`CTL cut added successfully: ${quantity} pcs × ${length}mm → ${cutWeight} TON used`);
    } catch (error) {
        console.error('Error in addCtlCut:', error);
        alert('Failed to add CTL cut. Check console for details.');
    }
}
        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) && widthVal > 0 && !isNaN(thicknessVal) && thicknessVal > 0 &&
                     !isNaN(densityVal) && densityVal > 0 && !isNaN(netWeightVal) && netWeightVal > 0 && gradeVal;
            return isValid;
        }

        function setCoilDetails() {
            if (!validateCoilDetails()) return false;

            // Update from form inputs
            netWeight = Number(formatWeight(parseFloat($('#netWeight').val())));
            width = parseFloat($('#width').val());
            thickness = parseFloat($('#thickness').val());
            density = parseFloat($('#density').val());
            coilLength = getCoilLengthFromWeight(netWeight, width, thickness, density);

            // Recalculate balance based on current totalUsedWeight
            balanceWeight = Number(formatWeight(netWeight - totalUsedWeight));

            updateBalance();
            console.log('Coil details updated:', { netWeight, width, thickness, density, coilLength, balanceWeight });
            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>`);
                    });
                    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 gradeId = crrInfo.grade_id || '';
                    const thicknessVal = parseFloat(crrInfo.thickness);
                    const densityVal = parseFloat(crrInfo.material_type_density);
                    const widthVal = parseFloat(crrInfo.width);
                    const netWeightVal = parseFloat(crrInfo.net_weight);

                    console.log('Coil Details:', { gradeId, thicknessVal, densityVal, widthVal, netWeightVal });

                    const gradeSelect = $('#grade_id');
                    gradeSelect.val(gradeId);
                    gradeSelect.prop('disabled', true);

                    if (!gradeId) {
                        console.warn('Grade ID missing');
                        $('#gradeError').text('Grade data missing for this coil').show();
                    } else {
                        $('#gradeError').hide();
                    }

                    $('#inward_id').val(crrInfo.inward_id || '');
                    $('#thickness').val(crrInfo.thickness || '');
                    $('#width').val(crrInfo.width || '');
                    $('#density').val(crrInfo.material_type_density || '');
                    $('#netWeight').val(formatWeight(crrInfo.net_weight || 0));

                    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:', { thicknessVal, 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('Balance updated:', { balanceWeight, totalUsedWeight, usedPercent });
        }

        function updateUsedWeight() {
            // Update display
            $('#totalUsedWeight').text(formatWeight(totalUsedWeight));
            $('#summaryUsed').text(formatWeight(totalUsedWeight));

            // Recalculate balance
            balanceWeight = Number(formatWeight(netWeight - totalUsedWeight));

            updateBalance();
            console.log('Used weight updated:', { totalUsedWeight, 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);

                    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);
                    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));
        }

        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;
            }

            // Remove dependent CTL cuts
            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));

            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);
        }

       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)));

        // Get the correct width
        let displayWidth = cut.width;

        // If dependent on CRS, verify the width is correct
        if (cut.dependentIndex !== "-1") {
            const [crsProcessId, cutIndex] = cut.dependentIndex.split('-').map(Number);
            const crsProcess = processes.find(p => p.id === crsProcessId);
            if (crsProcess && crsProcess.cuts[cutIndex]) {
                // Ensure we use the CRS cut width
                const crsCutWidth = crsProcess.cuts[cutIndex].width;
                if (displayWidth !== crsCutWidth) {
                    displayWidth = crsCutWidth;
                    cut.width = crsCutWidth; // Update the stored width
                }
            }
        }

        const formattedQuantity = cut.quantity.toLocaleString('en-US');
        tableBody.append(`
            <tr>
                <td>${displayWidth.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}, cuts displayed with correct widths`);
}

        function removeCtlCut(processId, index) {
            const process = processes.find(p => p.id === processId);
            const cut = process.cuts[index];

            if (cut.dependentIndex !== "-1") {
                const [crsProcessId, cutIndex] = cut.dependentIndex.split('-').map(Number);
                const crsProcess = processes.find(p => p.id === crsProcessId);
                if (crsProcess && crsProcess.cuts[cutIndex]) {
                    const previousRemainingWeight = Number(crsProcess.cuts[cutIndex].remainingWeight);
                    crsProcess.cuts[cutIndex].remainingWeight = formatWeight(previousRemainingWeight + Number(cut.weight));
                    refreshCrsCutsTable(crsProcessId);
                }
            } else {
                totalUsedWeight = Number(formatWeight(totalUsedWeight - Number(cut.weight)));
                balanceWeight = Number(formatWeight(netWeight - totalUsedWeight));
            }

            process.cuts.splice(index, 1);
            updateUsedWeight();
            refreshCtlCutsTable(processId);
            updateCtlDependentFields(processId);
            updateCtlPreview(processId);
            refreshCrsDependentOptions();
        }

        // function updateCtlPreview(processId) {
        //     const length = parseFloat($(`#ctlLength-${processId}`).val());
        //     const productionWeight = parseFloat($(`#ctlProductionWeight-${processId}`).val());
        //     const selectedIndex = $(`#ctlDependentCut-${processId}`).val();

        //     if (!selectedIndex || isNaN(length) || length <= 0 || isNaN(productionWeight) || productionWeight <= 0) {
        //         $(`#previewCtlQuantity-${processId}`).val('0');
        //         $(`#previewActualWeight-${processId}`).val('0.000');
        //         return;
        //     }

        //     if (thickness <= 0 || density <= 0) {
        //         $(`#previewCtlQuantity-${processId}`).val('0');
        //         $(`#previewActualWeight-${processId}`).val('0.000');
        //         alert('Invalid coil details: Thickness or density is zero or negative.');
        //         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');
        //             alert('Selected CRS cut is invalid.');
        //             return;
        //         }
        //         cutWidth = crsProcess.cuts[cutIndex].width;
        //     }

        //     const pieceVol = cutWidth * thickness * length;
        //     const pieceWeight_grams = pieceVol * density / 1000;
        //     const pieceWeight_TON = Number(formatWeight(pieceWeight_grams / 1_000_000));
        //     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');
        //         return;
        //     }

        //     const formattedQuantity = quantity.toLocaleString('en-US');
        //     $(`#previewCtlQuantity-${processId}`).val(formattedQuantity);
        //     $(`#previewActualWeight-${processId}`).val(formatWeight(actualWeight));
        // }

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();

    if (!selectedIndex || isNaN(length) || length <= 0 || isNaN(productionWeight) || productionWeight <= 0) {
        $(`#previewCtlQuantity-${processId}`).val('0');
        $(`#previewActualWeight-${processId}`).val('0.000');
        return;
    }

    if (thickness <= 0 || density <= 0) {
        alert('Invalid coil details.');
        $(`#previewCtlQuantity-${processId}`).val('0');
        $(`#previewActualWeight-${processId}`).val('0.000');
        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]) {
            alert('Invalid CRS cut selected.');
            $(`#previewCtlQuantity-${processId}`).val('0');
            $(`#previewActualWeight-${processId}`).val('0.000');
            return;
        }
        cutWidth = crsProcess.cuts[cutIndex].width;
    }

    const pieceVol = cutWidth * thickness * length;
    const pieceWeight_grams = pieceVol * density / 1000;
    const pieceWeight_TON = pieceWeight_grams / 1_000_000;

    if (pieceWeight_TON <= 0) {
        $(`#previewCtlQuantity-${processId}`).val('0');
        $(`#previewActualWeight-${processId}`).val('0.000');
        return;
    }

    const quantity = Math.floor(productionWeight / pieceWeight_TON);
    const formattedQuantity = quantity.toLocaleString('en-US');

    $(`#previewCtlQuantity-${processId}`).val(quantity > 0 ? formattedQuantity : '0');
    $(`#previewActualWeight-${processId}`).val(formatWeight(productionWeight));
}
        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', () => {
                    updateCtlDependentFields(newProcessId);
                });

                $(`#ctlLength-${newProcessId}`).on('input change', () => {
                    updateCtlPreview(newProcessId);
                });

                $(`#ctlProductionWeight-${newProcessId}`).on('input change', () => {
                    updateCtlPreview(newProcessId);
                });
            }

            refreshCrsDependentOptions();
            if (processType === 'ctl') updateCtlDependentFields(newProcessId);
            $('#addProcessModal').modal('hide');
            $('#newProcessType option[value="crs"]').prop('disabled', processes.some(p => p.type === 'crs'));
        }

        function renderExistingProcesses() {
            processes.forEach(process => {
                const sectionHtml = process.type === 'crs' ? `
                    <div class="section-title" id="crs-title-${process.id}"><h4>CRS – Cut to Width</h4></div>
                    <div class="process-section" id="crs-section-${process.id}" data-process-id="${process.id}" data-process-type="crs">
                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label for="crsWidth-${process.id}" class="form-label">Cut Width (mm)</label>
                                <input type="number" class="form-control" id="crsWidth-${process.id}" placeholder="Enter width" min="0.001" step="0.001">
                                <div id="crsWidthError-${process.id}" class="error-message">Width must be positive</div>
                            </div>
                            <div class="col-md-4">
                                <label for="crsQuantity-${process.id}" class="form-label">Quantity</label>
                                <input type="number" class="form-control" id="crsQuantity-${process.id}" placeholder="Enter quantity" min="1">
                                <div id="crsQuantityError-${process.id}" 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(${process.id})">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-${process.id}"></tbody>
                            <tfoot>
                                <tr>
                                    <th colspan="2">Total Weight</th>
                                    <th id="crsTotalWeight-${process.id}">0.000</th>
                                    <th></th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                ` : `
                    <div class="section-title" id="ctl-title-${process.id}"><h4>CTL – Cut to Length</h4></div>
                    <div class="process-section" id="ctl-section-${process.id}" data-process-id="${process.id}" 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-${process.id}" class="form-label">Select Dependent CRS Cut</label>
                                <select class="form-control" id="ctlDependentCut-${process.id}"></select>
                            </div>
                            <div class="col-md-4">
                                <label for="ctlWidth-${process.id}" class="form-label">Width (mm)</label>
                                <input type="number" class="form-control" id="ctlWidth-${process.id}" readonly>
                            </div>
                            <div class="col-md-4">
                                <label for="ctlAvailableWeight-${process.id}" class="form-label">Available Weight (TON)</label>
                                <input type="number" class="form-control" id="ctlAvailableWeight-${process.id}" readonly>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label for="ctlLength-${process.id}" class="form-label">Length (mm)</label>
                                <input type="number" class="form-control" id="ctlLength-${process.id}" placeholder="Enter length" min="0.001" step="0.001" oninput="updateCtlPreview(${process.id})">
                                <div id="ctlLengthError-${process.id}" class="error-message">Length must be positive</div>
                            </div>
                            <div class="col-md-4">
                                <label for="ctlProductionWeight-${process.id}" class="form-label">Production Weight (TON)</label>
                                <input type="number" class="form-control" id="ctlProductionWeight-${process.id}" placeholder="Enter weight" min="0.001" step="0.001" oninput="updateCtlPreview(${process.id})">
                                <div id="ctlProductionWeightError-${process.id}" 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(${process.id})">Add Cut</button>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="previewCtlQuantity-${process.id}" class="form-label"><strong>Estimated Quantity:</strong></label>
                                <input type="text" class="form-control bg-light" id="previewCtlQuantity-${process.id}" value="0" readonly>
                            </div>
                            <div class="col-md-6">
                                <label for="previewActualWeight-${process.id}" class="form-label"><strong>Estimated Used Weight (TON):</strong></label>
                                <input type="text" class="form-control bg-light" id="previewActualWeight-${process.id}" 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-${process.id}"></tbody>
                            <tfoot>
                                <tr>
                                    <th colspan="3">Total Weight</th>
                                    <th id="ctlTotalWeight-${process.id}">0.000</th>
                                    <th></th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                `;

                $('.process-buttons').before(sectionHtml);

                if (process.type === 'ctl') {
                    $(`#ctlDependentCut-${process.id}`).on('change', () => {
                        updateCtlDependentFields(process.id);
                    });

                    $(`#ctlLength-${process.id}`).on('input change', () => {
                        updateCtlPreview(process.id);
                    });

                    $(`#ctlProductionWeight-${process.id}`).on('input change', () => {
                        updateCtlPreview(process.id);
                    });
                }

                if (process.type === 'crs') {
                    refreshCrsCutsTable(process.id);
                } else {
                    refreshCtlCutsTable(process.id);
                }
            });

            $('#process-sections').append($('.process-buttons'));
            refreshCrsDependentOptions();

            processes.forEach(p => {
                if (p.type === 'ctl') {
                    updateCtlDependentFields(p.id);
                }
            });
        }
        
        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 => {
            const processTypeName = p.type === 'crs' ? 'CRS - Cut to Width' : 'CTL - Cut to Length';
            select.append(`<option value="${p.id}">${processTypeName} (Process ID: ${p.id})</option>`);
        });
        $('#noProcessesMessage').hide();
        $('#confirmDeleteProcess').prop('disabled', false);
    }
}

function deleteProcess(processId) {
    const process = processes.find(p => p.id === parseInt(processId));
    if (!process) return;

    console.log(`Deleting process: ID=${processId}, Type=${process.type}`);

    if (process.type === 'crs') {
        // Find dependent CTL cuts
        const dependentCtlProcesses = processes.filter(p => p.type === 'ctl');
        const dependentCuts = [];

        dependentCtlProcesses.forEach(ctlProcess => {
            ctlProcess.cuts.forEach(cut => {
                if (cut.dependentIndex && cut.dependentIndex !== "-1") {
                    const [crsProcessId, cutIndex] = cut.dependentIndex.split('-').map(Number);
                    if (crsProcessId === parseInt(processId)) {
                        dependentCuts.push({
                            processId: ctlProcess.id,
                            cut: cut
                        });
                    }
                }
            });
        });

        if (dependentCuts.length > 0) {
            if (!confirm(`This will also remove ${dependentCuts.length} dependent CTL cuts. Proceed?`)) {
                return;
            }

            // Remove dependent CTL cuts and recalculate weights
            dependentCuts.forEach(dep => {
                const ctlProcess = processes.find(p => p.id === dep.processId);
                if (ctlProcess) {
                    // Remove the dependent cut
                    ctlProcess.cuts = ctlProcess.cuts.filter(c =>
                        !(c.dependentIndex === dep.cut.dependentIndex)
                    );

                    // Refresh the CTL table
                    refreshCtlCutsTable(ctlProcess.id);

                    // If CTL process has no cuts left, remove it
                    if (ctlProcess.cuts.length === 0) {
                        processes = processes.filter(p => p.id !== ctlProcess.id);
                        $(`#ctl-title-${ctlProcess.id}, #ctl-section-${ctlProcess.id}`).remove();
                    }
                }
            });
        }

        // Subtract CRS cuts weight from total
        const crsTotalWeight = process.cuts.reduce((sum, cut) => sum + Number(cut.weight), 0);
        totalUsedWeight = Number(formatWeight(totalUsedWeight - crsTotalWeight));

    } else {
        // For CTL process
        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 && crsProcess.cuts[cutIndex]) {
                    // Restore weight to parent CRS cut
                    const previousRemainingWeight = Number(crsProcess.cuts[cutIndex].remainingWeight);
                    crsProcess.cuts[cutIndex].remainingWeight = formatWeight(
                        previousRemainingWeight + Number(cut.weight)
                    );
                    refreshCrsCutsTable(crsProcessId);
                }
            } else {
                // Independent CTL cut - subtract from total used weight
                totalUsedWeight = Number(formatWeight(totalUsedWeight - Number(cut.weight)));
            }
        });
    }

    // Remove the process from array and DOM
    processes = processes.filter(p => p.id !== parseInt(processId));
    $(`#${process.type}-title-${processId}, #${process.type}-section-${processId}`).remove();

    // Recalculate balance
    balanceWeight = Number(formatWeight(netWeight - totalUsedWeight));

    // Update UI
    updateUsedWeight();
    refreshCrsDependentOptions();

    // Re-append process buttons to maintain order
    $('#process-sections').append($('.process-buttons'));

    // Re-enable CRS option if no CRS process exists
    const hasCrsProcess = processes.some(p => p.type === 'crs');
    $('#newProcessType option[value="crs"]').prop('disabled', hasCrsProcess);

    console.log(`Process deleted: ID=${processId}, Remaining processes:`, processes);
}
        

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

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

            // Set initial coil details
            setCoilDetails();

            // Render existing processes
            renderExistingProcesses();

            // Event handlers
            $('#client_id').on('change', function () {
                updateSelectedClientValues();
            });

            $('#crr_no').on('change', function () {
                const coilId = $(this).val();
                getInfo(coilId);
            });

            $('#initial-add-process').on('click', function () {
                if (netWeight === 0 || !validateCoilDetails()) {
                    alert('Please select a client and CRR No. to set 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.');
                }
            });

            $('#updatePlan').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 = {
        plan_id: {{ $plan->id }},
        client_id: $('#client_id').val(),
        coil_id: $('#crr_no').val(),
        cut_id: $('#cut_id').val() || null,
        inward_id: $('#inward_id').val(),
        grade_id: $('#grade_id').val() || null,
        total_used_weight: formatWeight(totalUsedWeight),
        balance_weight: formatWeight(balanceWeight),
        processes: processes.map(p => {
            if (p.type === 'crs') {
                return {
                    type: p.type,
                    cuts: p.cuts.map(cut => ({
                        width: Number(cut.width.toFixed(2)),
                        quantity: cut.quantity,
                        weight: cut.weight,
                        length: null,
                        dependent_index: null,
                        remainingWeight: cut.remainingWeight
                    }))
                };
            } else {
                // For CTL processes, ensure correct width is sent
                return {
                    type: p.type,
                    cuts: p.cuts.map(cut => {
                        // Determine the correct width for CTL cuts
                        let correctWidth = cut.width;

                        // If it's a dependent CTL cut, get the CRS cut width
                        if (cut.dependentIndex !== "-1") {
                            const [crsProcessId, cutIndex] = cut.dependentIndex.split('-').map(Number);
                            const crsProcess = processes.find(proc => proc.id === crsProcessId);
                            if (crsProcess && crsProcess.cuts[cutIndex]) {
                                correctWidth = crsProcess.cuts[cutIndex].width;
                            }
                        }

                        return {
                            width: Number(correctWidth.toFixed(2)), // Use correct width
                            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:', planData);
    const url = '{{ route('plans.update', $plan->id) }}';
    $.ajax({
        url: url,
        type: 'PUT',
        data: JSON.stringify(planData),
        contentType: 'application/json',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function (response) {
            alert('Plan updated successfully!');
            window.location.href = '{{ route('plans.index') }}';
        },
        error: function (xhr) {
            console.error('Error updating plan:', xhr.status, xhr.responseText);
            alert('Failed to update plan: ' + (xhr.responseJSON?.message || 'Unknown error'));
        }
    });
});

            $('#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();
            });

            // Initialize UI
            updateBalance();
        });
    </script>
@endsection