@extends('layouts.structure')

@section('content')
    <!-- Include Select2 CSS -->
    {{-- <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> --}}
    <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;
        }

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

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

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

        @media print {

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

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

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

            .scrap-bar {
                background-color: #ccc !important;
                color: black !important;
            }

            body {
                margin: 0 !important;
            }

            .container {
                padding: 10px !important;
            }

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

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

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

    <div class="container mt-4 mb-5">
        <h2 class="text-center mb-4">Plan 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 select2-client" id="client_id" name="client_id[]" required>
                        <option value="">Select Client</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 select2-crr" id="crr_no" name="coil_id[]" required>
                        <option value="">Select CRR No.</option>
                    </select>
                    <div id="crrNoError" class="error-message">Please select a CRR No.</div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="mb-3">
                    <label for="grade_id" class="form-label">Grade</label>
                    <select class="form-control" name="grade_id" id="grade_id" style="background-color: white;">
                        <option value="">N/A</option>
                        @foreach ($grades as $grade)
                            <option value="{{ $grade->id }}">{{ $grade->grade_name }}</option>
                        @endforeach
                    </select>
                    <div id="gradeError" class="error-message">Grade is required</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="mb-3">
                    <label for="width" class="form-label">Width (mm)</label>
                    <input type="number" class="form-control" id="width" 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>
            </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>
                        <a href="{{ route('plans.index') }}" class="btn btn-primary w-100 mb-2">View Plans</a>
                        <button class="btn btn-secondary w-100" id="printPlan">Print Plan</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="addProcessModal" tabindex="-1" aria-labelledby="addProcessModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addProcessModalLabel">Add New Process</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="newProcessType" class="form-label">Select Process Type</label>
                        <select class="form-select" id="newProcessType">
                            <option value="crs">CRS – Cut to Width</option>
                            <option value="ctl">CTL – Cut to Length</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="confirmAddProcess">Add Process</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="deleteProcessModal" tabindex="-1" aria-labelledby="deleteProcessModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteProcessModalLabel">Delete a Process</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="deleteProcessId" class="form-label">Select Process to Delete</label>
                        <select class="form-select" id="deleteProcessId">
                            <option value="">Select a process</option>
                        </select>
                        <div id="noProcessesMessage" class="text-danger mt-2" style="display: none;">No processes
                            available to delete.</div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger" id="confirmDeleteProcess">Delete Process</button>
                </div>
            </div>
        </div>
    </div>

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

        let netWeight = 0,
            width = 0,
            thickness = 0,
            density = 0,
            clientName = '',
            crrNo = '',
            grade = '',
            balanceWeight = 0,
            totalUsedWeight = 0,
            totalScrap = 0,
            processes = [],
            processCounter = 0,
            coilLength = 0;
        const defaultScrapWidth = 10;
        let defaultScrapWeight = 0;

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

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

        function addCrsCut(processId) {
            const cutWidth = parseFloat($(`#crsWidth-${processId}`).val());
            const quantity = parseInt($(`#crsQuantity-${processId}`).val());
            if (isNaN(cutWidth) || cutWidth <= 0 || isNaN(quantity) || quantity <= 0) {
                alert('Enter valid width and quantity');
                return;
            }
            const usedWidth = processes.filter(p => p.type === 'crs').flatMap(p => p.cuts).reduce((sum, cut) => sum + cut
                .width * cut.quantity, 0);
            const availableWidth = width - usedWidth - (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 = Number(formatWeight(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: formatWeight(cutWeight),
                remainingWeight: formatWeight(cutWeight)
            });
            totalUsedWeight = Number(formatWeight(totalUsedWeight + cutWeight));
            if (!initializeScrap()) {
                process.cuts.pop();
                totalUsedWeight = Number(formatWeight(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('');
        }

        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 = Number(formatWeight(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 = Number(formatWeight(selectedCut.remainingWeight));
            }
            if (productionWeight > availableWeight) {
                alert(`Exceeds available weight: ${availableWeight.toFixed(3)} TON`);
                return;
            }
            const pieceVol = Number(formatWeight(cutWidth * thickness * length));
            const pieceWeight_grams = Number(formatWeight(pieceVol * density / 1000));
            const pieceWeight_TON = Number(formatWeight(pieceWeight_grams / 1_000_000));
            const quantity = Math.floor(productionWeight / pieceWeight_TON);
            const actualWeight = Number(formatWeight(quantity * pieceWeight_TON));
            if (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,
                width: cutWidth,
                length,
                quantity,
                weight: formatWeight(actualWeight)
            });
            if (dependentIndex !== "-1") {
                const [crsProcessId, cutIndex] = dependentIndex.split('-').map(Number);
                const crsProcess = processes.find(p => p.id === crsProcessId);
                crsProcess.cuts[cutIndex].remainingWeight = formatWeight(Number(crsProcess.cuts[cutIndex].remainingWeight) -
                    actualWeight);
            } else {
                totalUsedWeight = Number(formatWeight(totalUsedWeight + actualWeight));
            }
            balanceWeight = Number(formatWeight(netWeight - totalUsedWeight - totalScrap));
            updateUsedWeight();
            refreshCtlCutsTable(processId);
            $(`#ctlLength-${processId}, #ctlProductionWeight-${processId}`).val('');
            updateCtlDependentFields(processId);
            updateCtlPreview(processId);
        }

        function validateCoilDetails() {
            let isValid = true;
            const clientId = $('#client_id').val();
            const crrNoVal = $('#crr_no').val();
            const widthVal = parseFloat($('#width').val());
            const thicknessVal = parseFloat($('#thickness').val());
            const densityVal = parseFloat($('#density').val());
            const netWeightVal = parseFloat($('#netWeight').val());
            const gradeVal = $('#grade_id').val();
            $('#clientNameError').toggle(!clientId);
            $('#crrNoError').toggle(!crrNoVal);
            $('#widthError').toggle(isNaN(widthVal) || widthVal <= 0);
            $('#thicknessError').toggle(isNaN(thicknessVal) || thicknessVal <= 0);
            $('#densityError').toggle(isNaN(densityVal) || densityVal <= 0);
            $('#netWeightError').toggle(isNaN(netWeightVal) || netWeightVal <= 0);
            $('#gradeError').toggle(!gradeVal);
            $('#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;
        }

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

        function updateSelectedClientValues() {
            const clientId = $('#client_id').val();
            const crrNoDropdown = $('#crr_no');
            crrNoDropdown.empty().append('<option value="">Select CRR No.</option>');
            $('#thickness, #width, #grade_id, #netWeight, #inward_id, #density').val('');
            $('#currentBalance, #totalUsedWeight, #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);
            $.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>`);
                    });
                    // Reinitialize Select2 for CRR No. dropdown
                    crrNoDropdown.select2({
                        placeholder: "Select CRR No.",
                        allowClear: true
                    });
                },
                error: function(xhr) {
                    console.error('Error fetching coils:', xhr.status, xhr.responseText);
                    alert('Failed to load coil information: ' + (xhr.responseJSON?.message || 'Unknown error'));
                }
            });
        }

        function getInfo(coilId) {
            if (!coilId) {
                console.log('No CRR No. selected');
                $('#grade_id, #thickness, #width, #density, #netWeight, #inward_id').val('');
                $('#gradeError').text('Please select a CRR No.').show();
                return;
            }
            console.log('CRR No. change event triggered for coilId:', coilId);
            const url = '{{ route('getCrrinfoInward', [':coilId']) }}'.replace(':coilId', coilId);
            $.ajax({
                url: url,
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    console.log('Full AJAX response:', data);
                    if (!data || !data.crr_info) {
                        console.error('Invalid response: crr_info missing');
                        alert('Invalid coil data received.');
                        $('#grade_id, #thickness, #width, #density, #netWeight, #inward_id').val('');
                        $('#gradeError').text('Invalid coil data').show();
                        return;
                    }
                    const crrInfo = data.crr_info;
                    const gradeId = crrInfo.grade_id || '';
                    const gradeSelect = $('#grade_id');
                    gradeSelect.val(gradeId);
                    gradeSelect.prop('disabled', true);
                    if (!gradeId) {
                        console.warn('Grade ID missing:', {
                            grade_id: gradeId
                        });
                        $('#gradeError').text('Grade data missing for this coil').show();
                    } else {
                        $('#gradeError').hide();
                    }
                    $('#inward_id').val(crrInfo.inward_id || '');
                    $('#thickness').val(crrInfo.thickness || '');
                    $('#width').val(crrInfo.width || '');
                    $('#density').val(crrInfo.material_type_density || '');
                    $('#netWeight').val(formatWeight(crrInfo.net_weight || 0));
                    localStorage.setItem('cdetail', JSON.stringify(crrInfo));
                    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();
                }
            });
        }

        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 = Number(formatWeight(defaultScrapWeight));
                processes.forEach(p => {
                    if (p.type === 'crs') {
                        $(`#defaultScrapWidth-${p.id}`).val(defaultScrapWidth);
                        $(`#defaultScrapWeight-${p.id}`).val(formatWeight(defaultScrapWeight));
                    }
                });
            } else if (!hasCrsCuts) {
                processes.forEach(p => {
                    if (p.type === 'crs') {
                        $(`#defaultScrapWidth-${p.id}`).val(0);
                        $(`#defaultScrapWeight-${p.id}`).val('0.000');
                    }
                });
                totalScrap = 0;
            }
            balanceWeight = Number(formatWeight(netWeight - totalUsedWeight - totalScrap));
            updateScrap();
            updateBalance();
            return true;
        }

        function updateBalance() {
            $('#currentBalance').text(formatWeight(balanceWeight));
            $('#summaryRemaining').text(formatWeight(balanceWeight));
            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)}%` :
                '');
        }

        function updateUsedWeight() {
            $('#totalUsedWeight').text(formatWeight(totalUsedWeight));
            $('#summaryUsed').text(formatWeight(totalUsedWeight));
            updateBalance();
        }

        function updateScrap() {
            $('#totalScrap').text(formatWeight(totalScrap));
            $('#summaryScrap').text(formatWeight(totalScrap));
            updateBalance();
        }

        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 = Number(formatWeight(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}) TON</option>`
                                    );
                                });
                            }
                        });
                        select.val('');
                        updateCtlDependentFields(p.id);
                    }
                    select.prop('disabled', hasCrsCuts && !processes.some(pr => pr.type === 'crs' && pr.cuts
                        .length > 0));
                }
            });
        }

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

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

        function updateCtlDependentFields(processId) {
            const selectedIndex = $(`#ctlDependentCut-${processId}`).val();
            if (!selectedIndex) {
                $(`#ctlWidth-${processId}, #ctlAvailableWeight-${processId}`).val('');
                updateCtlPreview(processId);
                return;
            }
            let cutWidth, availableWeight;
            if (selectedIndex === "-1") {
                cutWidth = width;
                const usedWeight = processes.filter(p => p.type === 'ctl').flatMap(p => p.cuts).filter(cut => cut
                    .dependentIndex == "-1").reduce((s, c) => s + Number(c.weight), 0);
                availableWeight = Number(formatWeight(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 = Number(formatWeight(selectedCut.remainingWeight));
            }
            $(`#ctlWidth-${processId}`).val(cutWidth.toFixed(1));
            $(`#ctlAvailableWeight-${processId}`).val(formatWeight(availableWeight));
            updateCtlPreview(processId);
        }

        function refreshCtlCutsTable(processId) {
            const tableBody = $(`#ctlCutsTable-${processId}`);
            tableBody.empty();
            const process = processes.find(p => p.id === processId);
            let ctlTotalWeight = 0;
            process.cuts.forEach((cut, index) => {
                ctlTotalWeight = Number(formatWeight(ctlTotalWeight + Number(cut.weight)));
                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}</td>
                        <td><button class="btn btn-sm btn-danger remove-ctl-cut" data-process-id="${processId}" data-index="${index}">Remove</button></td>
                    </tr>`);
            });
            $(`#ctlTotalWeight-${processId}`).text(formatWeight(ctlTotalWeight));
        }

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

        function resetPlan() {
            processes.forEach(p => {
                if (p.type === 'crs') {
                    p.cuts.forEach(cut => cut.remainingWeight = formatWeight(cut.weight));
                    $(`#crsCutsTable-${p.id}`).empty();
                    $(`#crsTotalWeight-${p.id}`).text('0.000');
                    $(`#crsWidth-${p.id}, #crsQuantity-${p.id}`).val('');
                } else {
                    p.cuts = [];
                    $(`#ctlCutsTable-${p.id}`).empty();
                    $(`#ctlTotalWeight-${p.id}`).text('0.000');
                    $(`#ctlLength-${p.id}, #ctlProductionWeight-${p.id}, #ctlDependentCut-${p.id}, #ctlWidth-${p.id}, #ctlAvailableWeight-${p.id}`)
                        .val('');
                    $(`#previewCtlQuantity-${p.id}`).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 = Number(formatWeight(netWeight));
            initializeScrap();
            updateUsedWeight();
            refreshCrsDependentOptions();
            $('#process-sections').append($('.process-buttons'));
        }

        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 = Number(formatWeight(cutWidth * thickness * length));
            const pieceWeight_grams = Number(formatWeight(pieceVol * density / 1000));
            const pieceWeight_TON = Number(formatWeight(pieceWeight_grams / 1_000_000));
            const quantity = Math.floor(productionWeight / pieceWeight_TON);
            const actualWeight = Number(formatWeight(quantity * pieceWeight_TON));
            $(`#previewCtlQuantity-${processId}`).text(quantity);
            $(`#previewActualWeight-${processId}`).text(formatWeight(actualWeight));
        }

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

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

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

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

            // Initialize Select2 for CRR No. dropdown (initially empty)
            $('#crr_no').select2({
                placeholder: "Select CRR No.",
                allowClear: true
            });

            $('#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;
                }
                if (!processes.some(p => p.cuts.length > 0)) {
                    alert('Please add at least one cut to a process.');
                    return;
                }
                const planData = {
                    client_id: $('#client_id').val(),
                    coil_id: $('#crr_no').val(),
                    inward_id: $('#inward_id').val(),
                    grade_id: $('#grade_id').val() || null,
                    total_used_weight: formatWeight(totalUsedWeight),
                    total_scrap: formatWeight(totalScrap),
                    balance_weight: formatWeight(balanceWeight),
                    processes: processes.map(p => ({
                        type: p.type,
                        cuts: p.cuts.map(cut => ({
                            width: Number(cut.width.toFixed(2)),
                            quantity: cut.quantity,
                            weight: cut.weight,
                            length: cut.length ? Number(cut.length.toFixed(2)) :
                                null,
                            dependent_index: cut.dependentIndex || null,
                            remainingWeight: cut.remainingWeight || null
                        }))
                    }))
                };
                console.log('Plan data to be sent:', planData);
                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!`);
                        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');
                        // Reset Select2 dropdowns
                        $('#client_id').val('').trigger('change');
                        $('#crr_no').val('').trigger('change');
                    },
                    error: function(xhr) {
                        console.error('Error saving plan:', xhr.status, xhr.responseText);
                        alert('Failed to save plan: ' + (xhr.responseJSON?.message ||
                            'Unknown error'));
                    }
                });
            });

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

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










{{--Working wala code--}}
@extends('layouts.structure')

@section('content')
    <!-- Include Select2 CSS -->
    {{-- <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> --}}
    <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;
        }

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

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

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

        @media print {

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

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

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

            .scrap-bar {
                background-color: #ccc !important;
                color: black !important;
            }

            body {
                margin: 0 !important;
            }

            .container {
                padding: 10px !important;
            }

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

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

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

    <div class="container mt-4 mb-5">
        <h2 class="text-center mb-4">Plan 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 select2-client" id="client_id" name="client_id[]" required>
                        <option value="">Select Client</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 select2-crr" id="crr_no" name="coil_id[]" required>
                        <option value="">Select CRR No.</option>
                    </select>
                    <div id="crrNoError" class="error-message">Please select a CRR No.</div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="mb-3">
                    <label for="grade_id" class="form-label">Grade</label>
                    <select class="form-control" name="grade_id" id="grade_id" style="background-color: white;">
                        <option value="">N/A</option>
                        @foreach ($grades as $grade)
                            <option value="{{ $grade->id }}">{{ $grade->grade_name }}</option>
                        @endforeach
                    </select>
                    <div id="gradeError" class="error-message">Grade is required</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="mb-3">
                    <label for="width" class="form-label">Width (mm)</label>
                    <input type="number" class="form-control" id="width" 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>
            </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>
                        <a href="{{ route('plans.index') }}" class="btn btn-primary w-100 mb-2">View Plans</a>
                        <button class="btn btn-secondary w-100" id="printPlan">Print Plan</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="addProcessModal" tabindex="-1" aria-labelledby="addProcessModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addProcessModalLabel">Add New Process</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="newProcessType" class="form-label">Select Process Type</label>
                        <select class="form-select" id="newProcessType">
                            <option value="crs">CRS – Cut to Width</option>
                            <option value="ctl">CTL – Cut to Length</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="confirmAddProcess">Add Process</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="deleteProcessModal" tabindex="-1" aria-labelledby="deleteProcessModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteProcessModalLabel">Delete a Process</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="deleteProcessId" class="form-label">Select Process to Delete</label>
                        <select class="form-select" id="deleteProcessId">
                            <option value="">Select a process</option>
                        </select>
                        <div id="noProcessesMessage" class="text-danger mt-2" style="display: none;">No processes
                            available to delete.</div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger" id="confirmDeleteProcess">Delete Process</button>
                </div>
            </div>
        </div>
    </div>

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

        let netWeight = 0,
            width = 0,
            thickness = 0,
            density = 0,
            clientName = '',
            crrNo = '',
            grade = '',
            balanceWeight = 0,
            totalUsedWeight = 0,
            totalScrap = 0,
            processes = [],
            processCounter = 0,
            coilLength = 0;
        const defaultScrapWidth = 0;
        let defaultScrapWeight = 0;

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

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

        function addCrsCut(processId) {
            const cutWidth = parseFloat($(`#crsWidth-${processId}`).val());
            const quantity = parseInt($(`#crsQuantity-${processId}`).val());
            if (isNaN(cutWidth) || cutWidth <= 0 || isNaN(quantity) || quantity <= 0) {
                alert('Enter valid width and quantity');
                return;
            }
            const usedWidth = processes.filter(p => p.type === 'crs').flatMap(p => p.cuts).reduce((sum, cut) => sum + cut
                .width * cut.quantity, 0);
            const availableWidth = width - usedWidth - (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 = Number(formatWeight(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: formatWeight(cutWeight),
                remainingWeight: formatWeight(cutWeight)
            });
            totalUsedWeight = Number(formatWeight(totalUsedWeight + cutWeight));
            if (!initializeScrap()) {
                process.cuts.pop();
                totalUsedWeight = Number(formatWeight(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('');
        }

        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 = Number(formatWeight(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 = Number(formatWeight(selectedCut.remainingWeight));
            }
            if (productionWeight > availableWeight) {
                alert(`Exceeds available weight: ${availableWeight.toFixed(3)} TON`);
                return;
            }
            const pieceVol = Number(formatWeight(cutWidth * thickness * length));
            const pieceWeight_grams = Number(formatWeight(pieceVol * density / 1000));
            const pieceWeight_TON = Number(formatWeight(pieceWeight_grams / 1_000_000));
            const quantity = Math.floor(productionWeight / pieceWeight_TON);
            const actualWeight = Number(formatWeight(quantity * pieceWeight_TON));
            if (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,
                width: cutWidth,
                length,
                quantity,
                weight: formatWeight(actualWeight)
            });
            if (dependentIndex !== "-1") {
                const [crsProcessId, cutIndex] = dependentIndex.split('-').map(Number);
                const crsProcess = processes.find(p => p.id === crsProcessId);
                crsProcess.cuts[cutIndex].remainingWeight = formatWeight(Number(crsProcess.cuts[cutIndex].remainingWeight) -
                    actualWeight);
            } else {
                totalUsedWeight = Number(formatWeight(totalUsedWeight + actualWeight));
            }
            balanceWeight = Number(formatWeight(netWeight - totalUsedWeight - totalScrap));
            updateUsedWeight();
            refreshCtlCutsTable(processId);
            $(`#ctlLength-${processId}, #ctlProductionWeight-${processId}`).val('');
            updateCtlDependentFields(processId);
            updateCtlPreview(processId);
        }

        function validateCoilDetails() {
            let isValid = true;
            const clientId = $('#client_id').val();
            const crrNoVal = $('#crr_no').val();
            const widthVal = parseFloat($('#width').val());
            const thicknessVal = parseFloat($('#thickness').val());
            const densityVal = parseFloat($('#density').val());
            const netWeightVal = parseFloat($('#netWeight').val());
            const gradeVal = $('#grade_id').val();
            $('#clientNameError').toggle(!clientId);
            $('#crrNoError').toggle(!crrNoVal);
            $('#widthError').toggle(isNaN(widthVal) || widthVal <= 0);
            $('#thicknessError').toggle(isNaN(thicknessVal) || thicknessVal <= 0);
            $('#densityError').toggle(isNaN(densityVal) || densityVal <= 0);
            $('#netWeightError').toggle(isNaN(netWeightVal) || netWeightVal <= 0);
            $('#gradeError').toggle(!gradeVal);
            $('#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;
        }

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

        function updateSelectedClientValues() {
            const clientId = $('#client_id').val();
            const crrNoDropdown = $('#crr_no');
            crrNoDropdown.empty().append('<option value="">Select CRR No.</option>');
            $('#thickness, #width, #grade_id, #netWeight, #inward_id, #density').val('');
            $('#currentBalance, #totalUsedWeight, #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);
            $.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>`);
                    });
                    // Reinitialize Select2 for CRR No. dropdown
                    crrNoDropdown.select2({
                        placeholder: "Select CRR No.",
                        allowClear: true
                    });
                },
                error: function(xhr) {
                    console.error('Error fetching coils:', xhr.status, xhr.responseText);
                    alert('Failed to load coil information: ' + (xhr.responseJSON?.message || 'Unknown error'));
                }
            });
        }

        function getInfo(coilId) {
            if (!coilId) {
                console.log('No CRR No. selected');
                $('#grade_id, #thickness, #width, #density, #netWeight, #inward_id').val('');
                $('#gradeError').text('Please select a CRR No.').show();
                return;
            }
            console.log('CRR No. change event triggered for coilId:', coilId);
            const url = '{{ route('getCrrinfoInward', [':coilId']) }}'.replace(':coilId', coilId);
            $.ajax({
                url: url,
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    console.log('Full AJAX response:', data);
                    if (!data || !data.crr_info) {
                        console.error('Invalid response: crr_info missing');
                        alert('Invalid coil data received.');
                        $('#grade_id, #thickness, #width, #density, #netWeight, #inward_id').val('');
                        $('#gradeError').text('Invalid coil data').show();
                        return;
                    }
                    const crrInfo = data.crr_info;
                    const gradeId = crrInfo.grade_id || '';
                    const gradeSelect = $('#grade_id');
                    gradeSelect.val(gradeId);
                    gradeSelect.prop('disabled', true);
                    if (!gradeId) {
                        console.warn('Grade ID missing:', {
                            grade_id: gradeId
                        });
                        $('#gradeError').text('Grade data missing for this coil').show();
                    } else {
                        $('#gradeError').hide();
                    }
                    $('#inward_id').val(crrInfo.inward_id || '');
                    $('#thickness').val(crrInfo.thickness || '');
                    $('#width').val(crrInfo.width || '');
                    $('#density').val(crrInfo.material_type_density || '');
                    $('#netWeight').val(formatWeight(crrInfo.net_weight || 0));
                    localStorage.setItem('cdetail', JSON.stringify(crrInfo));
                    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();
                }
            });
        }

        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 = Number(formatWeight(defaultScrapWeight));
                processes.forEach(p => {
                    if (p.type === 'crs') {
                        $(`#defaultScrapWidth-${p.id}`).val(defaultScrapWidth);
                        $(`#defaultScrapWeight-${p.id}`).val(formatWeight(defaultScrapWeight));
                    }
                });
            } else if (!hasCrsCuts) {
                processes.forEach(p => {
                    if (p.type === 'crs') {
                        $(`#defaultScrapWidth-${p.id}`).val(0);
                        $(`#defaultScrapWeight-${p.id}`).val('0.000');
                    }
                });
                totalScrap = 0;
            }
            balanceWeight = Number(formatWeight(netWeight - totalUsedWeight - totalScrap));
            updateScrap();
            updateBalance();
            return true;
        }

        function updateBalance() {
            $('#currentBalance').text(formatWeight(balanceWeight));
            $('#summaryRemaining').text(formatWeight(balanceWeight));
            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)}%` :
                '');
        }

        function updateUsedWeight() {
            $('#totalUsedWeight').text(formatWeight(totalUsedWeight));
            $('#summaryUsed').text(formatWeight(totalUsedWeight));
            updateBalance();
        }

        function updateScrap() {
            $('#totalScrap').text(formatWeight(totalScrap));
            $('#summaryScrap').text(formatWeight(totalScrap));
            updateBalance();
        }

        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 = Number(formatWeight(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}) TON</option>`
                                    );
                                });
                            }
                        });
                        select.val('');
                        updateCtlDependentFields(p.id);
                    }
                    select.prop('disabled', hasCrsCuts && !processes.some(pr => pr.type === 'crs' && pr.cuts
                        .length > 0));
                }
            });
        }

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

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

        function updateCtlDependentFields(processId) {
            const selectedIndex = $(`#ctlDependentCut-${processId}`).val();
            if (!selectedIndex) {
                $(`#ctlWidth-${processId}, #ctlAvailableWeight-${processId}`).val('');
                updateCtlPreview(processId);
                return;
            }
            let cutWidth, availableWeight;
            if (selectedIndex === "-1") {
                cutWidth = width;
                const usedWeight = processes.filter(p => p.type === 'ctl').flatMap(p => p.cuts).filter(cut => cut
                    .dependentIndex == "-1").reduce((s, c) => s + Number(c.weight), 0);
                availableWeight = Number(formatWeight(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 = Number(formatWeight(selectedCut.remainingWeight));
            }
            $(`#ctlWidth-${processId}`).val(cutWidth.toFixed(1));
            $(`#ctlAvailableWeight-${processId}`).val(formatWeight(availableWeight));
            updateCtlPreview(processId);
        }

        function refreshCtlCutsTable(processId) {
            const tableBody = $(`#ctlCutsTable-${processId}`);
            tableBody.empty();
            const process = processes.find(p => p.id === processId);
            let ctlTotalWeight = 0;
            process.cuts.forEach((cut, index) => {
                ctlTotalWeight = Number(formatWeight(ctlTotalWeight + Number(cut.weight)));
                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}</td>
                        <td><button class="btn btn-sm btn-danger remove-ctl-cut" data-process-id="${processId}" data-index="${index}">Remove</button></td>
                    </tr>`);
            });
            $(`#ctlTotalWeight-${processId}`).text(formatWeight(ctlTotalWeight));
        }

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

        function resetPlan() {
            processes.forEach(p => {
                if (p.type === 'crs') {
                    p.cuts.forEach(cut => cut.remainingWeight = formatWeight(cut.weight));
                    $(`#crsCutsTable-${p.id}`).empty();
                    $(`#crsTotalWeight-${p.id}`).text('0.000');
                    $(`#crsWidth-${p.id}, #crsQuantity-${p.id}`).val('');
                } else {
                    p.cuts = [];
                    $(`#ctlCutsTable-${p.id}`).empty();
                    $(`#ctlTotalWeight-${p.id}`).text('0.000');
                    $(`#ctlLength-${p.id}, #ctlProductionWeight-${p.id}, #ctlDependentCut-${p.id}, #ctlWidth-${p.id}, #ctlAvailableWeight-${p.id}`)
                        .val('');
                    $(`#previewCtlQuantity-${p.id}`).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 = Number(formatWeight(netWeight));
            initializeScrap();
            updateUsedWeight();
            refreshCrsDependentOptions();
            $('#process-sections').append($('.process-buttons'));
        }

        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 = Number(formatWeight(cutWidth * thickness * length));
            const pieceWeight_grams = Number(formatWeight(pieceVol * density / 1000));
            const pieceWeight_TON = Number(formatWeight(pieceWeight_grams / 1_000_000));
            const quantity = Math.floor(productionWeight / pieceWeight_TON);
            const actualWeight = Number(formatWeight(quantity * pieceWeight_TON));
            $(`#previewCtlQuantity-${processId}`).text(quantity);
            $(`#previewActualWeight-${processId}`).text(formatWeight(actualWeight));
        }

        function addProcess(processType) {
            if (netWeight === 0 || !validateCoilDetails()) {
                alert('Please select valid coil details before adding a process.');
                return;
            }
            if (processType === 'crs' && processes.some(p => p.type === 'crs')) {
                alert('Only one CRS process is allowed per plan.');
                $('#newProcessType option[value="crs"]').prop('disabled', true);
                return;
            }
            const newProcessId = processCounter++;
            processes.push({
                id: newProcessId,
                type: processType,
                cuts: []
            });
            const sectionHtml = processType === 'crs' ? `
                <div class="section-title" id="crs-title-${newProcessId}"><h4>CRS – Cut to Width</h4></div>
                <div class="process-section" id="crs-section-${newProcessId}" data-process-id="${newProcessId}" data-process-type="crs">

                    <div class="row mb-3">
                        <div class="col-md-4"><label for="crsWidth-${newProcessId}" class="form-label">Cut Width (mm)</label><input type="number" class="form-control" id="crsWidth-${newProcessId}" placeholder="Enter width"></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'));
        }

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

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

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

            // Initialize Select2 for CRR No. dropdown (initially empty)
            $('#crr_no').select2({
                placeholder: "Select CRR No.",
                allowClear: true
            });

            $('#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;
                }
                if (!processes.some(p => p.cuts.length > 0)) {
                    alert('Please add at least one cut to a process.');
                    return;
                }
                const planData = {
                    client_id: $('#client_id').val(),
                    coil_id: $('#crr_no').val(),
                    inward_id: $('#inward_id').val(),
                    grade_id: $('#grade_id').val() || null,
                    total_used_weight: formatWeight(totalUsedWeight),
                    total_scrap: formatWeight(totalScrap),
                    balance_weight: formatWeight(balanceWeight),
                    processes: processes.map(p => ({
                        type: p.type,
                        cuts: p.cuts.map(cut => ({
                            width: Number(cut.width.toFixed(2)),
                            quantity: cut.quantity,
                            weight: cut.weight,
                            length: cut.length ? Number(cut.length.toFixed(2)) :
                                null,
                            dependent_index: cut.dependentIndex || null,
                            remainingWeight: cut.remainingWeight || null
                        }))
                    }))
                };
                console.log('Plan data to be sent:', planData);
                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!`);
                        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');
                        // Reset Select2 dropdowns
                        $('#client_id').val('').trigger('change');
                        $('#crr_no').val('').trigger('change');
                    },
                    error: function(xhr) {
                        console.error('Error saving plan:', xhr.status, xhr.responseText);
                        alert('Failed to save plan: ' + (xhr.responseJSON?.message ||
                            'Unknown error'));
                    }
                });
            });

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

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





{{-- 07/05/ code working  --}}

@extends('layouts.structure')

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

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

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

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

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

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

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

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

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

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

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

        @media print {

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

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

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

            body {
                margin: 0 !important;
            }

            .container {
                padding: 10px !important;
            }

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

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

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

    <div class="container mt-4 mb-5">
        <h2 class="text-center mb-4">Plan 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 select2-client" id="client_id" name="client_id[]" required>
                        <option value="">Select Client</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 select2-crr" id="crr_no" name="coil_id[]" required>
                        <option value="">Select CRR No.</option>
                    </select>
                    <div id="crrNoError" class="error-message">Please select a CRR No.</div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="mb-3">
                    <label for="grade_id" class="form-label">Grade</label>
                    <select class="form-control" name="grade_id" id="grade_id" style="background-color: white;">
                        <option value="">N/A</option>
                        @foreach ($grades as $grade)
                            <option value="{{ $grade->id }}">{{ $grade->grade_name }}</option>
                        @endforeach
                    </select>
                    <div id="gradeError" class="error-message">Grade is required</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="mb-3">
                    <label for="width" class="form-label">Width (mm)</label>
                    <input type="number" class="form-control" id="width" 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>
        <div id="process-sections">
            <div class="process-buttons">
                <button class="btn btn-success" id="initial-add-process">Add Process</button>
                <button class="btn btn-danger" id="deleteProcess">Delete Process</button>
            </div>
        </div>
        <div class="section-title mt-5">
            <h4>Plan Summary</h4>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Material Utilization</h5>
                        <div class="progress mb-3">
                            <div class="progress-bar bg-success" role="progressbar" id="usedBar" style="width: 0%"
                                aria-label="Used Weight">0%</div>
                        </div>
                        <p class="card-text">Used: <span id="summaryUsed">0.000</span> TON</p>
                        <p class="card-text">Remaining: <span id="summaryRemaining">0.000</span> TON</p>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Plan Actions</h5>
                        <button class="btn btn-success w-100 mb-2" id="savePlan">Save Plan</button>
                        <a href="{{ route('plans.index') }}" class="btn btn-primary w-100 mb-2">View Plans</a>
                        <button class="btn btn-secondary w-100" id="printPlan">Print Plan</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="addProcessModal" tabindex="-1" aria-labelledby="addProcessModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addProcessModalLabel">Add New Process</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="newProcessType" class="form-label">Select Process Type</label>
                        <select class="form-select" id="newProcessType">
                            <option value="crs">CRS – Cut to Width</option>
                            <option value="ctl">CTL – Cut to Length</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="confirmAddProcess">Add Process</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="deleteProcessModal" tabindex="-1" aria-labelledby="deleteProcessModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteProcessModalLabel">Delete a Process</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="deleteProcessId" class="form-label">Select Process to Delete</label>
                        <select class="form-select" id="deleteProcessId">
                            <option value="">Select a process</option>
                        </select>
                        <div id="noProcessesMessage" class="text-danger mt-2" style="display: none;">No processes
                            available to delete.</div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger" id="confirmDeleteProcess">Delete Process</button>
                </div>
            </div>
        </div>
    </div>

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

        let netWeight = 0,
            width = 0,
            thickness = 0,
            density = 0,
            clientName = '',
            crrNo = '',
            grade = '',
            balanceWeight = 0,
            totalUsedWeight = 0,
            processes = [],
            processCounter = 0,
            coilLength = 0;

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

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

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

        function addCtlCut(processId) {
            const dependentIndex = $(`#ctlDependentCut-${processId}`).val();
            const length = parseFloat($(`#ctlLength-${processId}`).val());
            const productionWeight = parseFloat($(`#ctlProductionWeight-${processId}`).val());
            if (!dependentIndex || isNaN(length) || length <= 0 || isNaN(productionWeight) || productionWeight <= 0) {
                alert('Enter valid 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 = Number(formatWeight(netWeight - usedWeight));
            } 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 = Number(formatWeight(selectedCut.remainingWeight));
            }
            if (productionWeight > availableWeight) {
                alert(`Exceeds available weight: ${availableWeight.toFixed(3)} TON`);
                return;
            }
            const pieceVol = Number(formatWeight(cutWidth * thickness * length));
            const pieceWeight_grams = Number(formatWeight(pieceVol * density / 1000));
            const pieceWeight_TON = Number(formatWeight(pieceWeight_grams / 1_000_000));
            const quantity = Math.floor(productionWeight / pieceWeight_TON);
            const actualWeight = Number(formatWeight(quantity * pieceWeight_TON));
            if (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,
                width: cutWidth,
                length,
                quantity,
                weight: formatWeight(actualWeight)
            });
            if (dependentIndex !== "-1") {
                const [crsProcessId, cutIndex] = dependentIndex.split('-').map(Number);
                const crsProcess = processes.find(p => p.id === crsProcessId);
                crsProcess.cuts[cutIndex].remainingWeight = formatWeight(Number(crsProcess.cuts[cutIndex].remainingWeight) -
                    actualWeight);
            } else {
                totalUsedWeight = Number(formatWeight(totalUsedWeight + actualWeight));
                balanceWeight = Number(formatWeight(netWeight - totalUsedWeight));
            }
            updateUsedWeight();
            refreshCtlCutsTable(processId);
            $(`#ctlLength-${processId}, #ctlProductionWeight-${processId}`).val('');
            updateCtlDependentFields(processId);
            updateCtlPreview(processId);
        }

        function validateCoilDetails() {
            let isValid = true;
            const clientId = $('#client_id').val();
            const crrNoVal = $('#crr_no').val();
            const widthVal = parseFloat($('#width').val());
            const thicknessVal = parseFloat($('#thickness').val());
            const densityVal = parseFloat($('#density').val());
            const netWeightVal = parseFloat($('#netWeight').val());
            const gradeVal = $('#grade_id').val();
            $('#clientNameError').toggle(!clientId);
            $('#crrNoError').toggle(!crrNoVal);
            $('#widthError').toggle(isNaN(widthVal) || widthVal <= 0);
            $('#thicknessError').toggle(isNaN(thicknessVal) || thicknessVal <= 0);
            $('#densityError').toggle(isNaN(densityVal) || densityVal <= 0);
            $('#netWeightError').toggle(isNaN(netWeightVal) || netWeightVal <= 0);
            $('#gradeError').toggle(!gradeVal);
            isValid = clientId && crrNoVal && !isNaN(widthVal) && widthVal > 0 && !isNaN(thicknessVal) &&
                thicknessVal > 0 && !isNaN(densityVal) && densityVal > 0 && !isNaN(netWeightVal) && netWeightVal > 0 &&
                gradeVal;
            return isValid;
        }

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

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

        function getInfo(coilId) {
            if (!coilId) {
                console.log('No CRR No. selected');
                $('#grade_id, #thickness, #width, #density, #netWeight, #inward_id').val('');
                $('#gradeError').text('Please select a CRR No.').show();
                return;
            }
            console.log('CRR No. change event triggered for coilId:', coilId);
            const url = '{{ route('getCrrinfoInward', [':coilId']) }}'.replace(':coilId', coilId);
            $.ajax({
                url: url,
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    console.log('Full AJAX response:', data);
                    if (!data || !data.crr_info) {
                        console.error('Invalid response: crr_info missing');
                        alert('Invalid coil data received.');
                        $('#grade_id, #thickness, #width, #density, #netWeight, #inward_id').val('');
                        $('#gradeError').text('Invalid coil data').show();
                        return;
                    }
                    const crrInfo = data.crr_info;
                    const gradeId = crrInfo.grade_id || '';
                    const gradeSelect = $('#grade_id');
                    gradeSelect.val(gradeId);
                    gradeSelect.prop('disabled', true);
                    if (!gradeId) {
                        console.warn('Grade ID missing:', {
                            grade_id: gradeId
                        });
                        $('#gradeError').text('Grade data missing for this coil').show();
                    } else {
                        $('#gradeError').hide();
                    }
                    $('#inward_id').val(crrInfo.inward_id || '');
                    $('#thickness').val(crrInfo.thickness || '');
                    $('#width').val(crrInfo.width || '');
                    $('#density').val(crrInfo.material_type_density || '');
                    $('#netWeight').val(formatWeight(crrInfo.net_weight || 0));
                    localStorage.setItem('cdetail', JSON.stringify(crrInfo));
                    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();
                }
            });
        }

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

        function updateUsedWeight() {
            $('#totalUsedWeight').text(formatWeight(totalUsedWeight));
            $('#summaryUsed').text(formatWeight(totalUsedWeight));
            balanceWeight = Number(formatWeight(netWeight - totalUsedWeight));
            updateBalance();
        }

        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 = Number(formatWeight(netWeight - totalUsedWeight));
                        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} TON)</option>`
                                    );
                                });
                            }
                        });
                        select.val('');
                        updateCtlDependentFields(p.id);
                    }
                    select.prop('disabled', hasCrsCuts && !processes.some(pr => pr.type === 'crs' && pr.cuts
                        .length > 0));
                }
            });
        }

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

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

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

        function refreshCtlCutsTable(processId) {
            const tableBody = $(`#ctlCutsTable-${processId}`);
            tableBody.empty();
            const process = processes.find(p => p.id === processId);
            let ctlTotalWeight = 0;
            process.cuts.forEach((cut, index) => {
                ctlTotalWeight = Number(formatWeight(ctlTotalWeight + Number(cut.weight)));
                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}</td>
                        <td><button class="btn btn-sm btn-danger remove-ctl-cut" data-process-id="${processId}" data-index="${index}">Remove</button></td>
                    </tr>`);
            });
            $(`#ctlTotalWeight-${processId}`).text(formatWeight(ctlTotalWeight));
        }

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

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

        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 = Number(formatWeight(cutWidth * thickness * length));
            const pieceWeight_grams = Number(formatWeight(pieceVol * density / 1000));
            const pieceWeight_TON = Number(formatWeight(pieceWeight_grams / 1_000_000));
            const quantity = Math.floor(productionWeight / pieceWeight_TON);
            const actualWeight = Number(formatWeight(quantity * pieceWeight_TON));
            $(`#previewCtlQuantity-${processId}`).text(quantity);
            $(`#previewActualWeight-${processId}`).text(formatWeight(actualWeight));
        }

        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>- Only one CRS process allowed</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));
            }
            refreshCrsDependentOptions();
            if (processType === 'ctl') updateCtlDependentFields(newProcessId);
            $('#addProcessModal').modal('hide');
            $('#newProcessType option[value="crs"]').prop('disabled', processes.some(p => p.type === 'crs'));
        }

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

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

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

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

            $('#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;
                }
                if (!processes.some(p => p.cuts.length > 0)) {
                    alert('Please add at least one cut to a process.');
                    return;
                }
                const planData = {
                    client_id: $('#client_id').val(),
                    coil_id: $('#crr_no').val(),
                    inward_id: $('#inward_id').val(),
                    grade_id: $('#grade_id').val() || null,
                    total_used_weight: formatWeight(totalUsedWeight),
                    balance_weight: formatWeight(balanceWeight),
                    processes: processes.map(p => ({
                        type: p.type,
                        cuts: p.cuts.map(cut => ({
                            width: Number(cut.width.toFixed(2)),
                            quantity: cut.quantity,
                            weight: cut.weight,
                            length: cut.length ? Number(cut.length.toFixed(2)) :
                                null,
                            dependent_index: cut.dependentIndex || null,
                            remainingWeight: cut.remainingWeight || null
                        }))
                    }))
                };
                console.log('Plan data to be sent:', planData);
                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!`);
                        resetPlan();
                        $('#client_id, #crr_no, #grade_id, #thickness, #width, #density, #netWeight, #inward_id')
                            .val('');
                        $('#currentBalance, #totalUsedWeight').text('0.000');
                        $('#usedBar').css('width', '0%').text('');
                        $('#summaryUsed, #summaryRemaining').text('0.000');
                        $('#client_id').val('').trigger('change');
                        $('#crr_no').val('').trigger('change');
                    },
                    error: function(xhr) {
                        console.error('Error saving plan:', xhr.status, xhr.responseText);
                        alert('Failed to save plan: ' + (xhr.responseJSON?.message ||
                            'Unknown error'));
                    }
                });
            });

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

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