@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;
    }
    .scrap-info {
        background-color: #fff3cd;
        padding: 10px;
        border-radius: 5px;
    }
    .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;
    }
    .scrap-weight {
        color: red;
        font-weight: bold;
    }
    .scrap-bar {
        background-color: #dc3545;
        color: white;
    }
    .error-message {
        color: red;
        font-size: 0.9em;
        display: none;
    }
    @media print {
        button, .btn, .btn-close {
            display: none !important;
        }
        .modal, .modal-backdrop {
            display: none !important;
        }
        .process-buttons {
            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;
        }
        .scrap-bar {
            background-color: #ccc !important;
            color: black !important;
        }
        body {
            margin: 0 !important;
        }
        .container {
            padding: 10px !important;
        }
        .error-message {
            display: none !important;
        }
        .table {
            page-break-inside: auto !important;
        }
        tr {
            page-break-inside: avoid !important;
            page-break-after: auto !important;
        }
        .section-title, .coil-details, .scrap-info, .dimension-select {
            background-color: transparent !important;
            border: none !important;
        }
    }
</style>

<div class="container mt-4 mb-5">
    <h2 class="text-center mb-4">Metal Coil Processing Plan Creation</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" id="client_id" name="client_id[]" required>
                    <option value="">Select</option>
                    @foreach ($clients as $clientall)
                        <option value="{{ $clientall->client_id }}">{{ $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" id="crr_no" name="coil_id[]" required>
                    <option value="">Select</option>
                    @foreach ($coils as $in)
                        <option value="{{ $in->id }}">{{ $in->crr_no }}</option>
                    @endforeach
                </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">
                    <option value=""></option>
                    @foreach($grades as $grade)
                        <option value="{{ $grade->id }}">{{ $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" readonly>
                <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" 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" readonly>
                <input type="hidden" class="form-control" name="inward_id" value="" 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" 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">0.000</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 class="col-md-4">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Total Scrap</h5>
                    <p class="card-text"><span id="totalScrap">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>
            <button class="btn btn-warning" id="editPlan">Edit Plan</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 class="progress-bar scrap-bar" role="progressbar" id="scrapBar" style="width: 0%" aria-label="Scrap 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>
                    <p class="card-text">Scrap: <span id="summaryScrap" class="scrap-weight">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>
                    <button class="btn btn-secondary w-100 mb-2" id="resetPlan">Reset Plan</button>
                    <button class="btn btn-outline-primary 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>

<div class="modal fade" id="editPlanModal" tabindex="-1" aria-labelledby="editPlanModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editPlanModalLabel">Select Plan to Edit</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="editPlanId" class="form-label">Select Plan</label>
                    <select class="form-select" id="editPlanId">
                        <option value="">Select a plan</option>
                    </select>
                    <div id="noPlansMessage" class="text-danger mt-2" style="display: none;">
                        No plans available to edit.
                    </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-primary" id="confirmEditPlan">Load Plan</button>
            </div>
        </div>
    </div>
</div>

<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>
$(document).ready(function () {
    let netWeight = 0;
    let width = 0;
    let thickness = 0;
    let density = 0;
    let clientName = '';
    let crrNo = '';
    let grade = '';
    let balanceWeight = 0;
    let totalUsedWeight = 0;
    let totalScrap = 0;
    let processes = [];
    let processCounter = 0;
    let coilLength = 0;
    const defaultScrapWidth = 10;
    let defaultScrapWeight = 0;
    let currentPlanId = null; // Track the plan being edited
    let isEditMode = false; // Track edit mode

    // Calculate coil length from weight
    function getCoilLengthFromWeight(weightTon, coilWidth, coilThickness, density) {
        const weightKg = weightTon * 1000;
        const volume_mm3 = (weightKg / density) * 1000;
        return volume_mm3 / (coilWidth * coilThickness);
    }

    // Calculate weight for cuts
    function calculateWeight(cutWidth, cutThickness, cutDensity, cutLength) {
        const volume = cutWidth * cutThickness * cutLength;
        const weightKg = (volume * cutDensity) / 1000;
        return weightKg / 1000;
    }

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

        $('#clientNameError').toggle(!clientId);
        $('#crrNoError').toggle(!crrNoVal);
        $('#gradeError').toggle(!gradeVal);
        $('#widthError').toggle(isNaN(widthVal) || widthVal <= 0);
        $('#thicknessError').toggle(isNaN(thicknessVal) || thicknessVal <= 0);
        $('#densityError').toggle(isNaN(densityVal) || densityVal <= 0);
        $('#netWeightError').toggle(isNaN(netWeightVal) || netWeightVal <= 0);
        $('#widthError').text(widthVal <= defaultScrapWidth ? 'Width must be greater than 10mm (default scrap width)' : 'Width must be a positive number');

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

        return isValid;
    }

    // Set coil details
    function setCoilDetails() {
        if (!validateCoilDetails()) {
            return false;
        }
        clientName = $('#client_id option:selected').text();
        crrNo = $('#crr_no').val();
        grade = $('#grade_id option:selected').text();
        netWeight = parseFloat($('#netWeight').val());
        width = parseFloat($('#width').val());
        thickness = parseFloat($('#thickness').val());
        density = parseFloat($('#density').val());
        coilLength = getCoilLengthFromWeight(netWeight, width, thickness, density);
        defaultScrapWeight = calculateWeight(defaultScrapWidth, thickness, density, coilLength);
        balanceWeight = netWeight;
        totalUsedWeight = 0;
        totalScrap = 0;
        resetPlan();
        updateBalance();
        return true;
    }

    // Initialize scrap calculations
    function initializeScrap() {
        const hasCrsCuts = processes.some(p => p.type === 'crs' && p.cuts.length > 0);
        let currentLength = coilLength;

        if (processes.some(p => p.type === 'ctl') && processes.some(p => p.type === 'crs')) {
            currentLength = getCoilLengthFromWeight(balanceWeight, width, thickness, density);
            defaultScrapWeight = calculateWeight(defaultScrapWidth, thickness, density, currentLength);
        } else {
            defaultScrapWeight = calculateWeight(defaultScrapWidth, thickness, density, coilLength);
        }

        if (hasCrsCuts && totalScrap === 0) {
            if (netWeight - totalUsedWeight - defaultScrapWeight < 0) {
                return false;
            }
            totalScrap = defaultScrapWeight;
            processes.forEach(p => {
                if (p.type === 'crs') {
                    $(`#defaultScrapWidth-${p.id}`).val(defaultScrapWidth);
                    $(`#defaultScrapWeight-${p.id}`).val(defaultScrapWeight.toFixed(3));
                }
            });
        } else if (!hasCrsCuts) {
            processes.forEach(p => {
                if (p.type === 'crs') {
                    $(`#defaultScrapWidth-${p.id}`).val(0);
                    $(`#defaultScrapWeight-${p.id}`).val(0.000);
                }
            });
            totalScrap = 0;
        }
        balanceWeight = netWeight - totalUsedWeight - totalScrap;
        updateScrap();
        updateBalance();
        return true;
    }

    // Update balance display
    function updateBalance() {
        $('#currentBalance').text(balanceWeight.toFixed(3));
        $('#summaryRemaining').text(balanceWeight.toFixed(3));
        const usedPercent = netWeight > 0 ? (totalUsedWeight / netWeight) * 100 : 0;
        const scrapPercent = netWeight > 0 ? (totalScrap / netWeight) * 100 : 0;
        $('#usedBar').css('width', usedPercent + '%').text(`Used: ${usedPercent.toFixed(1)}%`);
        $('#scrapBar').css('width', scrapPercent + '%').text(scrapPercent > 0 ? `Scrap: ${scrapPercent.toFixed(1)}%` : '');
    }

    // Update used weight display
    function updateUsedWeight() {
        $('#totalUsedWeight').text(totalUsedWeight.toFixed(3));
        $('#summaryUsed').text(totalUsedWeight.toFixed(3));
        updateBalance();
    }

    // Update scrap display
    function updateScrap() {
        $('#totalScrap').text(totalScrap.toFixed(3));
        $('#summaryScrap').text(totalScrap.toFixed(3));
        updateBalance();
    }

    // Refresh CRS dependent options for CTL
    function refreshCrsDependentOptions() {
        processes.forEach(p => {
            if (p.type === 'ctl') {
                const select = $(`#ctlDependentCut-${p.id}`);
                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 availableWeight = netWeight - totalUsedWeight - totalScrap;
                    select.append(`<option value="-1">${width.toFixed(1)}mm (${availableWeight.toFixed(3)} TON)</option>`);
                    select.val('-1');
                    updateCtlDependentFields(p.id);
                } else {
                    processes.forEach(pr => {
                        if (pr.type === 'crs') {
                            pr.cuts.forEach((cut, index) => {
                                select.append(`<option value="${pr.id}-${index}">${cut.width.toFixed(1)}mm (${cut.remainingWeight.toFixed(3)} TON)</option>`);
                            });
                        }
                    });
                    select.val('');
                    updateCtlDependentFields(p.id);
                }
                select.prop('disabled', hasCrsCuts && !processes.some(pr => pr.type === 'crs' && pr.cuts.length > 0));
            }
        });
    }

    // Add CRS cut
    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 - (processes.some(p => p.type === 'crs' && p.cuts.length > 0) ? 0 : defaultScrapWidth);
        if (cutWidth * quantity > availableWidth) {
            alert(`Total cut width (${(cutWidth * quantity).toFixed(1)}mm) cannot exceed available width (${availableWidth.toFixed(1)}mm)`);
            return;
        }

        let currentLength = coilLength;
        if (processes.some(p => p.type === 'ctl')) {
            currentLength = getCoilLengthFromWeight(balanceWeight, width, thickness, density);
        }

        const cutWeight = calculateWeight(cutWidth, thickness, density, currentLength) * quantity;
        const hasCrsCuts = processes.some(p => p.type === 'crs' && p.cuts.length > 0);
        const additionalScrap = hasCrsCuts ? 0 : calculateWeight(defaultScrapWidth, thickness, density, currentLength);

        if (cutWeight + additionalScrap > balanceWeight) {
            alert(`Insufficient balance weight (${balanceWeight.toFixed(3)} TON). Adding this cut (${cutWeight.toFixed(3)} TON) and scrap (${additionalScrap.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: cutWeight, remainingWeight: cutWeight });
        totalUsedWeight += cutWeight;

        if (!initializeScrap()) {
            process.cuts.pop();
            totalUsedWeight -= cutWeight;
            alert('Cannot add cut: Applying scrap would result in a negative balance weight.');
            return;
        }

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

    // Refresh CRS cuts table
    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 += cut.weight;
            tableBody.append(`
                <tr>
                    <td>${cut.width.toFixed(1)}</td>
                    <td>${cut.quantity}</td>
                    <td>${cut.weight.toFixed(3)}</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(crsTotalWeight.toFixed(3));
    }

    // Remove CRS cut
    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 -= cut.weight;
        process.cuts.splice(index, 1);
        balanceWeight = netWeight - totalUsedWeight - totalScrap;
        initializeScrap();
        updateUsedWeight();
        refreshCrsCutsTable(processId);
        refreshCrsDependentOptions();
    }

    // Update CTL dependent fields
    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((s, c) => s + c.weight, 0);
            availableWeight = netWeight - usedWeight - totalScrap;
        } 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 = selectedCut.remainingWeight;
        }
        $(`#ctlWidth-${processId}`).val(cutWidth.toFixed(1));
        $(`#ctlAvailableWeight-${processId}`).val(availableWeight.toFixed(3));
        updateCtlPreview(processId);
    }

    // Add CTL cut
    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 CTL values');
            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((s, c) => s + c.weight, 0);
            availableWeight = netWeight - usedWeight - totalScrap;
        } else {
            const [crsProcessId, cutIndex] = dependentIndex.split('-').map(Number);
            const crsProcess = processes.find(p => p.id === crsProcessId);
            const selectedCut = crsProcess.cuts[cutIndex];
            cutWidth = selectedCut.width;
            availableWeight = selectedCut.remainingWeight;
        }
        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 = quantity * pieceWeight_TON;
        if (quantity <= 0) {
            alert('Production weight too low for one piece');
            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: dependentIndex,
            width: cutWidth,
            length,
            quantity,
            weight: actualWeight
        });
        if (dependentIndex !== "-1") {
            const [crsProcessId, cutIndex] = dependentIndex.split('-').map(Number);
            const crsProcess = processes.find(p => p.id === crsProcessId);
            crsProcess.cuts[cutIndex].remainingWeight -= actualWeight;
        } else {
            totalUsedWeight += actualWeight;
        }
        balanceWeight = netWeight - totalUsedWeight - totalScrap;
        updateUsedWeight();
        refreshCtlCutsTable(processId);
        $(`#ctlLength-${processId}, #ctlProductionWeight-${processId}`).val('');
        updateCtlDependentFields(processId);
        updateCtlPreview(processId);
    }

    // Refresh CTL cuts table
    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 += 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;
            })();
            tableBody.append(`
                <tr>
                    <td>${depWidth.toFixed(1)}mm</td>
                    <td>${cut.length.toFixed(1)}</td>
                    <td>${cut.quantity}</td>
                    <td>${cut.weight.toFixed(3)}</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(ctlTotalWeight.toFixed(3));
    }

    // Remove CTL cut
    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);
            crsProcess.cuts[cutIndex].remainingWeight += cut.weight;
        } else {
            totalUsedWeight -= cut.weight;
        }
        process.cuts.splice(index, 1);
        balanceWeight = netWeight - totalUsedWeight - totalScrap;
        updateUsedWeight();
        refreshCtlCutsTable(processId);
        updateCtlDependentFields(processId);
        updateCtlPreview(processId);
        refreshCrsDependentOptions();
    }

    // Reset plan
    function resetPlan() {
        processes.forEach(p => {
            if (p.type === 'crs') {
                p.cuts.forEach(cut => cut.remainingWeight = 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}`).text('0');
                $(`#previewActualWeight-${p.id}`).text('0.000');
            }
            $(`#${p.type}-title-${p.id}, #${p.type}-section-${p.id}`).remove();
        });
        processes = [];
        processCounter = 0;
        totalUsedWeight = 0;
        totalScrap = 0;
        balanceWeight = netWeight;
        currentPlanId = null;
        isEditMode = false;
        initializeScrap();
        updateUsedWeight();
        refreshCrsDependentOptions();
    }

    // Update CTL preview
    function updateCtlPreview(processId) {
        const length = parseFloat($(`#ctlLength-${processId}`).val());
        const productionWeight = parseFloat($(`#ctlProductionWeight-${processId}`).val());
        const selectedIndex = $(`#ctlDependentCut-${processId}`).val();
        if (!selectedIndex || isNaN(length) || isNaN(productionWeight) || length <= 0 || productionWeight <= 0) {
            $(`#previewCtlQuantity-${processId}`).text('0');
            $(`#previewActualWeight-${processId}`).text('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);
            cutWidth = crsProcess.cuts[cutIndex].width;
        }
        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 = quantity * pieceWeight_TON;
        $(`#previewCtlQuantity-${processId}`).text(quantity);
        $(`#previewActualWeight-${processId}`).text(actualWeight.toFixed(3));
    }

    // Add process
    function addProcess(processType) {
        if (netWeight === 0 || !validateCoilDetails()) {
            alert('Please select 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.');
            return;
        }
        const newProcessId = processCounter++;
        processes.push({ id: newProcessId, type: processType, cuts: [] });
        const crsSectionHtml = `
            <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="alert alert-secondary mb-3">
                    <strong>CRS Process Rules:</strong><br>
                    - User can cut coil vertically in multiple sizes<br>
                    - By default, subtract 10mm from net coil width and add to scrap<br>
                    - Only one CRS process allowed
                </div>
                <div class="row mb-3 scrap-info">
                    <div class="col-md-6">
                        <label class="form-label">Default Scrap (10mm width)</label>
                        <input type="number" class="form-control" id="defaultScrapWidth-${newProcessId}" value="0" readonly>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Scrap Weight</label>
                        <input type="number" class="form-control" id="defaultScrapWeight-${newProcessId}" value="0.000" readonly>
                    </div>
                </div>
                <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}">
                    </div>
                    <div class="col-md-4">
                        <label for="crsQuantity-${newProcessId}" class="form-label">Quantity</label>
                        <input type="number" class="form-control" id="crsQuantity-${newProcessId}">
                    </div>
                    <div class="col-md-4 d-flex align-items-end">
                        <button class="btn btn-primary" id="addCrsCut-${newProcessId}" data-process-id="${newProcessId}">Add Cut</button>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table table-bordered table-hover">
                        <thead>
                            <tr>
                                <th>Cut Width (mm)</th>
                                <th>Quantity</th>
                                <th>Production Weight (TON)</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody id="crsCutsTable-${newProcessId}"></tbody>
                        <tfoot>
                            <tr>
                                <th colspan="2">Total</th>
                                <th id="crsTotalWeight-${newProcessId}">0.000</th>
                                <th></th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        `;
        const ctlSectionHtml = `
            <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 is 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}">
                            <option value="">Select a CRS cut</option>
                        </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}">
                    </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}">
                    </div>
                    <div class="col-md-4 d-flex align-items-end">
                        <button class="btn btn-primary w-100" id="addCtlCut-${newProcessId}" data-process-id="${newProcessId}">Add Cut</button>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-md-6">
                        <label class="form-label"><strong>Estimated Quantity:</strong></label>
                        <div class="form-control bg-light" id="previewCtlQuantity-${newProcessId}">0</div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label"><strong>Estimated Used Weight (TON):</strong></label>
                        <div class="form-control bg-light" id="previewActualWeight-${newProcessId}">0.000</div>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table table-bordered table-hover">
                        <thead>
                            <tr>
                                <th>Dependent CRS Cut (mm)</th>
                                <th>Length (mm)</th>
                                <th>Quantity</th>
                                <th>Production Weight (TON)</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody id="ctlCutsTable-${newProcessId}"></tbody>
                        <tfoot>
                            <tr>
                                <th colspan="3">Total</th>
                                <th id="ctlTotalWeight-${newProcessId}">0.000</th>
                                <th></th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        `;
        const newSectionHtml = processType === 'crs' ? crsSectionHtml : ctlSectionHtml;
        $('.process-buttons').before(newSectionHtml);
        $(`#add${processType === 'crs' ? 'Crs' : 'Ctl'}Cut-${newProcessId}`).click(() => {
            if (processType === 'crs') {
                addCrsCut(newProcessId);
            } else {
                addCtlCut(newProcessId);
            }
        });
        if (processType === 'ctl') {
            $(`#ctlDependentCut-${newProcessId}`).change(() => updateCtlDependentFields(newProcessId));
            $(`#ctlLength-${newProcessId}, #ctlProductionWeight-${newProcessId}, #ctlDependentCut-${newProcessId}`).on('input change', () => updateCtlPreview(newProcessId));
        }
        initializeScrap();
        refreshCrsDependentOptions();
        if (processType === 'ctl') {
            updateCtlDependentFields(newProcessId);
        }
    }

    // Delete process
    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 -= process.cuts.reduce((sum, cut) => sum + 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) {
                        crsProcess.cuts[cutIndex].remainingWeight += cut.weight;
                    }
                } else {
                    totalUsedWeight -= cut.weight;
                }
            });
        }
        processes = processes.filter(p => p.id !== parseInt(processId));
        $(`#${process.type}-title-${processId}, #${process.type}-section-${processId}`).remove();
        balanceWeight = netWeight - totalUsedWeight - totalScrap;
        initializeScrap();
        updateUsedWeight();
        refreshCrsDependentOptions();
    }

    // Populate delete process modal
    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);
        }
    }

    // Populate edit plan modal
    function populateEditPlanModal() {
        const select = $('#editPlanId');
        select.empty().append('<option value="">Select a plan</option>');
        $.ajax({
            url: '{{ route("plans.list") }}',
            type: 'GET',
            dataType: 'json',
            success: function(data) {
                if (data.length === 0) {
                    $('#noPlansMessage').show();
                    $('#confirmEditPlan').prop('disabled', true);
                } else {
                    data.forEach(plan => {
                        select.append(`<option value="${plan.id}">Plan ${plan.id} - Client ${plan.client_name} - CRR ${plan.crr_no}</option>`);
                    });
                    $('#noPlansMessage').hide();
                    $('#confirmEditPlan').prop('disabled', false);
                }
            },
            error: function(xhr) {
                console.error('Error fetching plans:', xhr.status, xhr.responseText);
                alert('Failed to load plans.');
            }
        });
    }

    // Load plan for editing
    function loadPlan(planId) {
        $.ajax({
            url: '{{ route("plans.show", ":planId") }}'.replace(':planId', planId),
            type: 'GET',
            dataType: 'json',
            success: function(data) {
                resetPlan();
                currentPlanId = data.id;
                isEditMode = true;

                // Populate coil details
                $('#client_id').val(data.client_id).trigger('change');
                $('#crr_no').val(data.coil_id).trigger('change');
                $('#grade_id').val(data.grade_id).prop('disabled', true);
                $('#inward_id').val(data.inward_id);
                $('#width').val(data.width);
                $('#thickness').val(data.thickness);
                $('#density').val(data.density);
                $('#netWeight').val(data.net_weight);

                // Set coil details
                setCoilDetails();

                // Populate processes and cuts
                totalUsedWeight = parseFloat(data.total_used_weight);
                totalScrap = parseFloat(data.total_scrap);
                balanceWeight = parseFloat(data.balance_weight);
                processCounter = 0;
                processes = [];

                data.processes.forEach((process, index) => {
                    const processType = process.type;
                    addProcess(processType);
                    const processId = processes[index].id;
                    processes[index].cuts = process.cuts.map(cut => ({
                        width: cut.width,
                        quantity: cut.quantity,
                        weight: cut.weight,
                        remainingWeight: cut.remainingWeight || cut.weight,
                        length: cut.length,
                        dependentIndex: cut.dependent_index
                    }));

                    if (processType === 'crs') {
                        refreshCrsCutsTable(processId);
                    } else {
                        refreshCtlCutsTable(processId);
                    }
                });

                // Update UI
                initializeScrap();
                updateUsedWeight();
                updateScrap();
                refreshCrsDependentOptions();
                $('#savePlan').text('Update Plan');
            },
            error: function(xhr) {
                console.error('Error loading plan:', xhr.status, xhr.responseText);
                alert('Failed to load plan.');
            }
        });
    }

    // Update client coils
    function updateSelectedClientValues() {
        const clientId = $('#client_id').val();
        if (!clientId) return;

        let url = '{{ route('getClientinfoInward', [':clientId']) }}';
        url = url.replace(':clientId', clientId);

        var crr_noDropdown = $('#crr_no');
        if (crr_noDropdown.length) {
            $.ajax({
                url: url,
                type: "GET",
                dataType: "json",
                success: function(data) {
                    crr_noDropdown.empty();
                    crr_noDropdown.append(new Option('Select Coil CRR No', ''));

                    data.forEach(function(coil) {
                        crr_noDropdown.append(new Option(coil.crr_no, coil.id));
                    });

                    $('#thickness, #width, #grade_id, #netWeight, #inward_id, #density').val('');
                    $('#currentBalance, #totalScrap').text('0.000');
                },
                error: function(xhr) {
                    console.error('Error fetching coils:', xhr.status, xhr.responseText);
                    alert('Failed to load coil information.');
                }
            });
        }
    }

    // Get coil info
    function getInfo(crr_no) {
        let url = '{{ route('getCrrinfoInward', [':crr_no']) }}';
        url = url.replace(':crr_no', crr_no);

        if (!crr_no) {
            alert('Failed to load CRR information.');
            return;
        }

        $.ajax({
            url: url,
            type: "GET",
            dataType: "json",
            success: function(data) {
                const crrInfo = data.crr_info;

                localStorage.setItem("cdetail", JSON.stringify(crrInfo));

                $('#inward_id').val(crrInfo.inward_id);
                $('#thickness').val(crrInfo.thickness);
                $('#width').val(crrInfo.width);
                $('#density').val(crrInfo.material_type_density);
                $('#netWeight').val(crrInfo.curb_weight);
                $('#grade_id').val(crrInfo.grade_id);
                $('#grade_id').prop('disabled', true);

                setCoilDetails();
            },
            error: function(xhr) {
                console.error('Error fetching CRR info:', xhr.status, xhr.responseText);
                alert('Failed to load CRR information.');
            }
        });
    }

    // Event Handlers
    $('#initial-add-process').click(() => {
        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').off('click').on('click', () => {
            const processType = $('#newProcessType').val();
            addProcess(processType);
            $('#addProcessModal').modal('hide');
        });
    });

    $('#deleteProcess').click(() => {
        populateDeleteProcessModal();
        $('#deleteProcessModal').modal('show');
    });

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

    $('#editPlan').click(() => {
        populateEditPlanModal();
        $('#editPlanModal').modal('show');
    });

    $('#confirmEditPlan').click(() => {
        const planId = $('#editPlanId').val();
        if (planId) {
            loadPlan(planId);
            $('#editPlanModal').modal('hide');
        } else {
            alert('Please select a plan to edit.');
        }
    });

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

    $('#savePlan').click(function () {
        if (!validateCoilDetails()) {
            alert('Please correct invalid coil details.');
            return;
        }
        const hasCuts = processes.some(p => p.cuts.length > 0);
        if (!hasCuts) {
            alert('Add at least one cut to save the plan.');
            return;
        }
        if (balanceWeight < 0) {
            alert('Balance weight cannot be negative. Please adjust cuts or scrap.');
            return;
        }

        const planData = {
            client_id: $('#client_id').val(),
            coil_id: $('#crr_no').val(),
            inward_id: $('#inward_id').val(),
            grade_id: $('#grade_id').val(),
            total_used_weight: totalUsedWeight,
            total_scrap: totalScrap,
            balance_weight: balanceWeight,
            processes: processes.map(process => ({
                type: process.type,
                cuts: process.cuts.map(cut => ({
                    width: cut.width,
                    quantity: cut.quantity,
                    weight: cut.weight,
                    length: cut.length || null,
                    dependent_index: cut.dependentIndex || null,
                    remaining_weight: cut.remainingWeight || null
                }))
            }))
        };

        const url = isEditMode ? '{{ route("plans.update", ":planId") }}'.replace(':planId', currentPlanId) : '{{ route("plans.save") }}';
        const method = isEditMode ? 'PUT' : 'POST';

        $.ajax({
            url: url,
            type: method,
            data: JSON.stringify(planData),
            contentType: 'application/json',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                alert(`Plan ${isEditMode ? 'updated' : 'saved'} successfully! Plan ID: ${response.plan_id}`);
                resetPlan();
                $('#client_id, #crr_no, #grade_id, #width, #thickness, #density, #netWeight, #inward_id').val('');
                $('#currentBalance, #totalUsedWeight, #totalScrap').text('0.000');
                $('#grade_id').prop('disabled', false);
                $('#savePlan').text('Save Plan');
                netWeight = 0;
                width = 0;
                thickness = 0;
                density = 0;
                balanceWeight = 0;
                totalUsedWeight = 0;
                totalScrap = 0;
                coilLength = 0;
                defaultScrapWeight = 0;
            },
            error: function(xhr) {
                console.error(`Error ${isEditMode ? 'updating' : 'saving'} plan:`, xhr.status, xhr.responseText);
                alert(`Failed to ${isEditMode ? 'update' : 'save'} plan: ${xhr.responseJSON?.message || 'Unknown error'}`);
            }
        });
    });

    $('#resetPlan').click(function () {
        if (confirm('Reset the entire plan?')) {
            resetPlan();
            $('#client_id, #crr_no, #grade_id, #width, #thickness, #density, #netWeight, #inward_id').val('');
            $('#currentBalance, #totalUsedWeight, #totalScrap').text('0.000');
            $('#grade_id').prop('disabled', false);
            $('#savePlan').text('Save Plan');
            netWeight = 0;
            width = 0;
            thickness = 0;
            density = 0;
            balanceWeight = 0;
            totalUsedWeight = 0;
            totalScrap = 0;
            coilLength = 0;
            defaultScrapWeight = 0;
        }
    });

    $('#printPlan').click(function () {
        window.print();
    });

    // Initialize
    $('#client_id').change(updateSelectedClientValues);
    $('#crr_no').change(function () {
        getInfo($(this).val());
    });
    initializeScrap();
    refreshCrsDependentOptions();
});
</script>

@endsection










    <script>
        // Global variables
        let netWeight = 0;
        let width = 0;
        let thickness = 0;
        let density = 0;
        let clientName = '';
        let crrNo = '';
        let grade = '';
        let balanceWeight = 0;
        let totalUsedWeight = 0;
        let totalScrap = 0;
        let processes = [];
        let processCounter = 0;
        let coilLength = 0;
        const defaultScrapWidth = 10;
        let defaultScrapWeight = 0;

        // Calculate coil length from weight
        function getCoilLengthFromWeight(weightTon, coilWidth, coilThickness, density) {
            const weightKg = weightTon * 1000;
            const volume_mm3 = (weightKg / density) * 1000;
            return volume_mm3 / (coilWidth * coilThickness);
        }

        // Calculate weight for cuts
        function calculateWeight(cutWidth, cutThickness, cutDensity, cutLength) {
            const volume = cutWidth * cutThickness * cutLength;
            const weightKg = (volume * cutDensity) / 1000;
            return weightKg / 1000;
        }

        // Add CRS cut
        function addCrsCut(processId) {
            console.log('addCrsCut called for processId:', 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 - (processes.some(p => p.type === 'crs' && p.cuts.length > 0) ? 0 :
                defaultScrapWidth);
            if (cutWidth * quantity > availableWidth) {
                alert(
                    `Total cut width (${(cutWidth * quantity).toFixed(1)}mm) cannot exceed available width (${availableWidth.toFixed(1)}mm)`
                    );
                return;
            }
            let currentLength = coilLength;
            if (processes.some(p => p.type === 'ctl')) {
                currentLength = getCoilLengthFromWeight(balanceWeight, width, thickness, density);
            }
            const cutWeight = calculateWeight(cutWidth, thickness, density, currentLength) * quantity;
            const hasCrsCuts = processes.some(p => p.type === 'crs' && p.cuts.length > 0);
            const additionalScrap = hasCrsCuts ? 0 : calculateWeight(defaultScrapWidth, thickness, density, currentLength);
            if (cutWeight + additionalScrap > balanceWeight) {
                alert(
                    `Insufficient balance weight (${balanceWeight.toFixed(3)} TON). Adding this cut (${cutWeight.toFixed(3)} TON) and scrap (${additionalScrap.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: cutWeight,
                remainingWeight: cutWeight
            });
            totalUsedWeight += cutWeight;
            if (!initializeScrap()) {
                process.cuts.pop();
                totalUsedWeight -= cutWeight;
                alert('Cannot add cut: Applying scrap would result in a negative balance weight.');
                return;
            }
            updateUsedWeight();
            refreshCrsCutsTable(processId);
            refreshCrsDependentOptions();
            $(`#crsWidth-${processId}, #crsQuantity-${processId}`).val('');
        }

        // Add CTL cut
        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());
            if (!dependentIndex || isNaN(length) || length <= 0 || isNaN(productionWeight) || productionWeight <= 0) {
                alert('Enter valid CTL values');
                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((s, c) => s + c.weight, 0);
                availableWeight = netWeight - usedWeight - totalScrap;
            } else {
                const [crsProcessId, cutIndex] = dependentIndex.split('-').map(Number);
                const crsProcess = processes.find(p => p.id === crsProcessId);
                const selectedCut = crsProcess.cuts[cutIndex];
                cutWidth = selectedCut.width;
                availableWeight = selectedCut.remainingWeight;
            }
            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 = quantity * pieceWeight_TON;
            if (quantity <= 0) {
                alert('Production weight too low for one piece');
                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: dependentIndex,
                width: cutWidth,
                length,
                quantity,
                weight: actualWeight
            });
            if (dependentIndex !== "-1") {
                const [crsProcessId, cutIndex] = dependentIndex.split('-').map(Number);
                const crsProcess = processes.find(p => p.id === crsProcessId);
                crsProcess.cuts[cutIndex].remainingWeight -= actualWeight;
            } else {
                totalUsedWeight += actualWeight;
            }
            balanceWeight = netWeight - totalUsedWeight - totalScrap;
            updateUsedWeight();
            refreshCtlCutsTable(processId);
            $(`#ctlLength-${processId}, #ctlProductionWeight-${processId}`).val('');
            updateCtlDependentFields(processId);
            updateCtlPreview(processId);
        }

        // Validate coil 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);
            $('#widthError').text(widthVal <= defaultScrapWidth ?
                'Width must be greater than 10mm (default scrap width)' : 'Width must be a positive number');

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

            return isValid;
        }

        // Set coil details
        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 = parseFloat($('#netWeight').val());
            width = parseFloat($('#width').val());
            thickness = parseFloat($('#thickness').val());
            density = parseFloat($('#density').val());
            coilLength = getCoilLengthFromWeight(netWeight, width, thickness, density);
            defaultScrapWeight = calculateWeight(defaultScrapWidth, thickness, density, coilLength);
            balanceWeight = netWeight;
            totalUsedWeight = 0;
            totalScrap = 0;
            resetPlan();
            updateBalance();
            return true;
        }

        // Update client coils
        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, #totalScrap').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);
            console.log('Fetching coils for client:', clientId, 'URL:', url);

            $.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>`
                        );
                    });
                },
                error: function(xhr) {
                    console.error('Error fetching coils:', xhr.status, xhr.responseText);
                    alert('Failed to load coil information: ' + (xhr.responseJSON?.message || 'Unknown error'));
                }
            });
        }

        // Get coil info
        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);
            console.log('Fetching coil details, URL:', url);

            $.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;
                    console.log('crr_info:', crrInfo);

                    const gradeName = crrInfo.grade_name || 'Not specified';
                    console.log('Setting grade_name:', gradeName);

                    const gradeSelect = $('#grade_id');
                    gradeSelect.empty().append('<option value="">Select Grade</option>');
                    if (gradeName !== 'Not specified') {
                        gradeSelect.append(
                            `<option value="${gradeName}" selected>${gradeName}</option>`);
                    }
                    gradeSelect.prop('disabled', true);

                    if (!gradeName || gradeName === 'Not specified') {
                        console.warn('Grade name missing:', {
                            grade_name: gradeName
                        });
                        $('#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(crrInfo.net_weight || '');

                    localStorage.setItem('cdetail', JSON.stringify(crrInfo));
                    console.log('Fields set - grade:', $('#grade_id').val());

                    if (!setCoilDetails()) {
                        console.error('Failed to validate coil details');
                        alert('Invalid coil details. Please check the selected coil.');
                    }
                },
                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();
                }
            });
        }

        // Initialize scrap calculations
        function initializeScrap() {
            const hasCrsCuts = processes.some(p => p.type === 'crs' && p.cuts.length > 0);
            let currentLength = coilLength;

            if (processes.some(p => p.type === 'ctl') && processes.some(p => p.type === 'crs')) {
                currentLength = getCoilLengthFromWeight(balanceWeight, width, thickness, density);
                defaultScrapWeight = calculateWeight(defaultScrapWidth, thickness, density, currentLength);
            } else {
                defaultScrapWeight = calculateWeight(defaultScrapWidth, thickness, density, coilLength);
            }

            if (hasCrsCuts && totalScrap === 0) {
                if (netWeight - totalUsedWeight - defaultScrapWeight < 0) {
                    return false;
                }
                totalScrap = defaultScrapWeight;
                processes.forEach(p => {
                    if (p.type === 'crs') {
                        $(`#defaultScrapWidth-${p.id}`).val(defaultScrapWidth);
                        $(`#defaultScrapWeight-${p.id}`).val(defaultScrapWeight.toFixed(3));
                    }
                });
            } else if (!hasCrsCuts) {
                processes.forEach(p => {
                    if (p.type === 'crs') {
                        $(`#defaultScrapWidth-${p.id}`).val(0);
                        $(`#defaultScrapWeight-${p.id}`).val(0.000);
                    }
                });
                totalScrap = 0;
            }
            balanceWeight = netWeight - totalUsedWeight - totalScrap;
            updateScrap();
            updateBalance();
            return true;
        }

        // Update balance display
        function updateBalance() {
            $('#currentBalance').text(balanceWeight.toFixed(3));
            $('#summaryRemaining').text(balanceWeight.toFixed(3));
            const usedPercent = netWeight > 0 ? (totalUsedWeight / netWeight) * 100 : 0;
            const scrapPercent = netWeight > 0 ? (totalScrap / netWeight) * 100 : 0;
            $('#usedBar').css('width', usedPercent + '%').text(`Used: ${usedPercent.toFixed(1)}%`);
            $('#scrapBar').css('width', scrapPercent + '%').text(scrapPercent > 0 ? `Scrap: ${scrapPercent.toFixed(1)}%` :
                '');
        }

        // Update used weight display
        function updateUsedWeight() {
            $('#totalUsedWeight').text(totalUsedWeight.toFixed(3));
            $('#summaryUsed').text(totalUsedWeight.toFixed(3));
            updateBalance();
        }

        // Update scrap display
        function updateScrap() {
            $('#totalScrap').text(totalScrap.toFixed(3));
            $('#summaryScrap').text(totalScrap.toFixed(3));
            updateBalance();
        }

        // Refresh CRS dependent options for CTL
        function refreshCrsDependentOptions() {
            processes.forEach(p => {
                if (p.type === 'ctl') {
                    const select = $(`#ctlDependentCut-${p.id}`);
                    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 availableWeight = netWeight - totalUsedWeight - totalScrap;
                        select.append(
                            `<option value="-1">${width.toFixed(1)}mm (${availableWeight.toFixed(3)} TON)</option>`
                        );
                        select.val('-1');
                        updateCtlDependentFields(p.id);
                    } else {
                        processes.forEach(pr => {
                            if (pr.type === 'crs') {
                                pr.cuts.forEach((cut, index) => {
                                    select.append(
                                        `<option value="${pr.id}-${index}">${cut.width.toFixed(1)}mm (${cut.remainingWeight.toFixed(3)} TON)</option>`
                                    );
                                });
                            }
                        });
                        select.val('');
                        updateCtlDependentFields(p.id);
                    }
                    select.prop('disabled', hasCrsCuts && !processes.some(pr => pr.type === 'crs' && pr.cuts
                        .length > 0));
                }
            });
        }

        // Refresh CRS cuts table
        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 += cut.weight;
                tableBody.append(`
                    <tr>
                        <td>${cut.width.toFixed(1)}</td>
                        <td>${cut.quantity}</td>
                        <td>${cut.weight.toFixed(3)}</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(crsTotalWeight.toFixed(3));
        }

        // Remove CRS cut
        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 -= cut.weight;
            process.cuts.splice(index, 1);
            balanceWeight = netWeight - totalUsedWeight - totalScrap;
            initializeScrap();
            updateUsedWeight();
            refreshCrsCutsTable(processId);
            refreshCrsDependentOptions();
        }

        // Update CTL dependent fields
        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((s, c) => s + c.weight, 0);
                availableWeight = netWeight - usedWeight - totalScrap;
            } 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 = selectedCut.remainingWeight;
            }
            $(`#ctlWidth-${processId}`).val(cutWidth.toFixed(1));
            $(`#ctlAvailableWeight-${processId}`).val(availableWeight.toFixed(3));
            updateCtlPreview(processId);
        }

        // Refresh CTL cuts table
        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 += 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;
                })();
                tableBody.append(`
                    <tr>
                        <td>${depWidth.toFixed(1)}mm</td>
                        <td>${cut.length.toFixed(1)}</td>
                        <td>${cut.quantity}</td>
                        <td>${cut.weight.toFixed(3)}</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(ctlTotalWeight.toFixed(3));
        }

        // Remove CTL cut
        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);
                crsProcess.cuts[cutIndex].remainingWeight += cut.weight;
            } else {
                totalUsedWeight -= cut.weight;
            }
            process.cuts.splice(index, 1);
            balanceWeight = netWeight - totalUsedWeight - totalScrap;
            updateUsedWeight();
            refreshCtlCutsTable(processId);
            updateCtlDependentFields(processId);
            updateCtlPreview(processId);
            refreshCrsDependentOptions();
        }

        // Reset plan
        function resetPlan() {
            processes.forEach(p => {
                if (p.type === 'crs') {
                    p.cuts.forEach(cut => cut.remainingWeight = 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}`).text('0');
                    $(`#previewActualWeight-${p.id}`).text('0.000');
                }
                $(`#${p.type}-title-${p.id}, #${p.type}-section-${p.id}`).remove();
            });
            processes = [];
            processCounter = 0;
            totalUsedWeight = 0;
            totalScrap = 0;
            balanceWeight = netWeight;
            initializeScrap();
            updateUsedWeight();
            refreshCrsDependentOptions();
            $('#process-sections').append($('.process-buttons'));
        }

        // Update CTL preview
        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}`).text('0');
                $(`#previewActualWeight-${processId}`).text('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);
                cutWidth = crsProcess.cuts[cutIndex].width;
            }
            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 = quantity * pieceWeight_TON;
            $(`#previewCtlQuantity-${processId}`).text(quantity);
            $(`#previewActualWeight-${processId}`).text(actualWeight.toFixed(3));
        }

        // Add process
        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="alert alert-secondary mb-3">
                        <strong>CRS Process Rules:</strong><br>
                        - User can cut coil vertically in multiple sizes<br>
                        - By default, subtract 10mm from net coil width and add to scrap<br>
                        - Only one CRS process allowed
                    </div>
                    <div class="row mb-3 scrap-info">
                        <div class="col-md-6">
                            <label class="form-label">Default Scrap (10mm width)</label>
                            <input type="number" class="form-control" id="defaultScrapWidth-${newProcessId}" value="0" readonly>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Scrap Weight</label>
                            <input type="number" class="form-control" id="defaultScrapWeight-${newProcessId}" value="0.000" readonly>
                        </div>
                    </div>
                    <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">
                        </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">
                        </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>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">
                        </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">
                        </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 class="form-label"><strong>Estimated Quantity:</strong></label>
                            <div class="form-control bg-light" id="previewCtlQuantity-${newProcessId}">0</div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label"><strong>Estimated Used Weight (TON):</strong></label>
                            <div class="form-control bg-light" id="previewActualWeight-${newProcessId}">0.000</div>
                        </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}, #ctlProductionWeight-${newProcessId}, #ctlDependentCut-${newProcessId}`)
                    .on('input change', () => updateCtlPreview(newProcessId));
            }
            initializeScrap();
            refreshCrsDependentOptions();
            if (processType === 'ctl') {
                updateCtlDependentFields(newProcessId);
            }
            $('#addProcessModal').modal('hide');
            $('#newProcessType option[value="crs"]').prop('disabled', processes.some(p => p.type === 'crs'));
        }

        // Delete process
        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 -= process.cuts.reduce((sum, cut) => sum + 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) {
                            crsProcess.cuts[cutIndex].remainingWeight += cut.weight;
                        }
                    } else {
                        totalUsedWeight -= cut.weight;
                    }
                });
            }
            processes = processes.filter(p => p.id !== parseInt(processId));
            $(`#${process.type}-title-${processId}, #${process.type}-section-${processId}`).remove();
            balanceWeight = netWeight - totalUsedWeight - totalScrap;
            initializeScrap();
            updateUsedWeight();
            refreshCrsDependentOptions();
            $('#process-sections').append($('.process-buttons'));
        }

        // Populate delete process modal
        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 for event bindings
        $(document).ready(function() {
            $('#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);
            });

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

            {{-- $('#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;
                }
                const planData = {
                    client_id: $('#client_id').val(),
                    coil_id: $('#crr_no').val(),
                    inward_id: $('#inward_id').val(),
                    grade_name: $('#grade_id').val(),
                    processes: processes.map(p => ({
                        type: p.type,
                        cuts: p.cuts
                    }))
                };
                console.log('Saving plan:', planData);
                alert('Plan saved successfully!');
                resetPlan();
            }); --}}


            $('#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;
                }
                const planData = {
                    client_id: $('#client_id').val(),
                    coil_id: $('#crr_no').val(),
                    inward_id: $('#inward_id').val(),
                    grade_name: $('#grade_id').val(),
                    total_used_weight: totalUsedWeight,
                    total_scrap: totalScrap,
                    balance_weight: balanceWeight,
                    processes: processes.map(p => ({
                        type: p.type,
                        cuts: p.cuts.map(cut => ({
                            ...cut,
                            weight: formatWeight(cut.weight),
                            remainingWeight: cut.remainingWeight ? formatWeight(
                                cut.remainingWeight) : undefined
                        }))
                    }))
                };
                const url = '{{ route('plans.store') }}';
                $.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! Plan ID: ${response.plan_id}`);
                        resetPlan();
                        $('#client_id, #crr_no, #grade_id, #thickness, #width, #density, #netWeight, #inward_id')
                            .val('');
                        $('#currentBalance, #totalUsedWeight, #totalScrap').text('0.000');
                        $('#usedBar, #scrapBar').css('width', '0%').text('');
                        $('#summaryUsed, #summaryRemaining, #summaryScrap').text('0.000');
                    },
                    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, #totalScrap').text('0.000');
                    $('#gradeError, #clientNameError, #crrNoError, #widthError, #thicknessError, #densityError, #netWeightError')
                        .hide();
                    resetPlan();
                }
            });

            $('#printPlan').on('click', function() {
                if (!validateCoilDetails()) {
                    alert('Please complete all coil details, including a valid grade.');
                    return;
                }
                window.print();
            });
        });
    </script>