@extends('layouts.usermain')


@section('main-container')
<div class="page-header d-print-none container">
    <div class="container-fluid">
        <div class="row g-2 align-items-center">
            <div class="col">
                <div class="page-pretitle">WHS</div>
                <h2 class="page-title">Update Income</h2>
            </div>
            <div class="col-auto ms-auto d-print-none">
                <div class="btn-list">
                    <!-- Button: New View -->
                    
                </div>
            </div>
        </div>
    </div>
</div>




<div class="page-body">

@if (session('success'))
    <div id="success-alert" class="alert alert-success alert-dismissible fade show" role="alert">
        {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

    <script>
        setTimeout(function() {
            let alertBox = document.getElementById('success-alert');
            if (alertBox) {
                // Bootstrap 5 fade out
                alertBox.classList.remove('show');
                alertBox.classList.add('fade');
                setTimeout(() => alertBox.remove(), 500); // remove after fade
            }
        }, 4000); // 4 seconds
    </script>
    @endif
<div class="container-fluid bg-white">

    <form action="{{ route('income.crop.store') }}" method="POST">
    @csrf
        <div class="col-sm-4 d-flex align-items-center mb-1">
            <label for="financialyear_id" class="me-4 mb-0" style="min-width: 150px;">Interventions Year</label>
            <select name="financialyear_id" id="financialyear_id" class="form-control">
                <option value="">--Select Year--</option>
                @foreach($financialyears as $financialyear)
                    <option value="{{ $financialyear->id }}">{{ $financialyear->name }}</option>
                @endforeach
            </select>
        </div>
    <input type="hidden" value="{{$baselinedetail->id}}" name="baseline_id">
    <input type="hidden" value="{{$member_id}}" name="water_user_group_id">
    

    <div class="card mb-4 shadow-sm">
    <div class="card-header bg-secondary text-white d-flex justify-content-between align-items-center">
        <h5 class="mb-0">Table 1.7 - Crop Details</h5>
        <div class="d-flex gap-2">
            <button type="button" class="btn btn-outline-light btn-sm" data-bs-toggle="modal" data-bs-target="#CropModal">
                View
            </button>
            <button type="button" class="btn btn-light btn-sm" onclick="addKharifCrop()">
                + Add More
            </button>
        </div>
    </div>



<div class="container">
    <div class="row">
        <div class="col-md-1">
                <label class="form-label small mb-1">Seasons Type</label>
        </div>
        <div class="col-md-2">
                <label class="form-label small mb-1">Category</label>
        </div>
         <div class="col-md-1">
                <label class="form-label small mb-1">Crop</label>
        </div>
        <div class="col-md-1">
                <label class="form-label small mb-1">Area (Acre)</label>
        </div>
         <div class="col-md-1">
                <label class="form-label small mb-1">Production (Qtl)</label>
        </div>
         <div class="col-md-1">
                <label class="form-label small mb-1">Productivity</label>
        </div>
        <div class="col-md-1">
                <label class="form-label small mb-1">Market Rate (₹)</label>
        </div>

         <div class="col-md-1">
                <label class="form-label small mb-1">Total Income (₹)</label>
        </div>
         <div class="col-md-1">
                <label class="form-label small mb-1">Input Cost (₹)</label>
        </div>
        <div class="col-md-1">
                <label class="form-label small mb-1">Net Income (₹)</label>
        </div>
    
    </div>
</div>

    <div class="card-body" id="kharif-container">
        <div class="row align-items-end kharif-crop-group g-2 mb-1" id="kharif-0">
            <!-- Fields -->
            <div class="col-md-1">
                
                <select name="crop_planning[0][season_id]" class="form-select season" onchange="fetchCategories(this)" required>
                    <option value="" disabled selected>--Select--</option>
                    @foreach($seasons as $season)
                        <option value="{{ $season->id }}">{{ $season->name }}</option>
                    @endforeach
                </select>
            </div>

            <div class="col-md-2">
              
                <select name="crop_planning[0][category_id]" class="form-select category" onchange="fetchCrops(this)" required></select>
            </div>

            <div class="col-md-1">
                <select name="crop_planning[0][crop_id]" class="form-select crop">
                    <option value="" disabled selected>--Select--</option>
                </select>
            </div>

            <div class="col-md-1">
                <input type="text" name="crop_planning[0][area]" class="form-control" oninput="validateDecimalInput(this)" required>
            </div>

            <div class="col-md-1">
            
                <input type="text" name="crop_planning[0][production]" class="form-control" oninput="validateDecimalInput(this)" required>
            </div>

            <div class="col-md-1">
                
                <input type="text" name="crop_planning[0][productivity]" class="form-control" oninput="validateDecimalInput(this)" required>
            </div>

            <div class="col-md-1">
                
                <input type="text" name="crop_planning[0][market_rate]" class="form-control" oninput="validateDecimalInput(this)" required>
            </div>

            <div class="col-md-1">
                
                <input type="text" name="crop_planning[0][total_income]" class="form-control" readonly>
            </div>

            <div class="col-md-1">
                
                <input type="text" name="crop_planning[0][input_cost]" class="form-control" oninput="validateDecimalInput(this); calculateKharif(0)" required>
            </div>

            <div class="col-md-1">
            
                <input type="text" name="crop_planning[0][net_profit]" class="form-control" readonly>
            </div>

            <!-- Remove Button -->
            <div class="col-md-1 d-flex align-items-end">
                <button type="button" class="btn btn-sm btn-danger" title="Remove this crop row" onclick="removeCropRow(this)">
                    &times;
                </button>
            </div>
        </div>
    </div>

    <!-- Total Row -->
    <div class="row mt-2">
        <div class="col-md-10 d-flex justify-content-end align-items-center">
            <label class="mb-0">Total Net Income (₹)</label>
        </div>
        <div class="col-md-2">
            <input type="number" id="crop_income_total" name="crop_income_total" class="form-control" readonly>
        </div>
    </div>
</div>

    




<script>
    function fetchCategories(seasonSelect) {
        const seasonId = seasonSelect.value;
        const row = seasonSelect.closest('.row'); // adjust if needed
        const categorySelect = row.querySelector('.category');
        const cropSelect = row.querySelector('.crop');

        if (seasonId) {
            $.ajax({
                url: `/get-categories-by-season/${seasonId}`,
                type: 'GET',
                success: function(categories) {
                    let options = '<option value="">--Select Category--</option>';
                    $.each(categories, function(index, category) {
                        options += `<option value="${category.id}">${category.name}</option>`;
                    });
                    categorySelect.innerHTML = options;
                    cropSelect.innerHTML = '<option value="">--Select Crop--</option>'; // reset crop
                }
            });
        } else {
            categorySelect.innerHTML = '<option value="">--Select Category--</option>';
            cropSelect.innerHTML = '<option value="">--Select Crop--</option>';
        }
    }

    function fetchCrops(categorySelect) {
        const categoryId = categorySelect.value;
        const row = categorySelect.closest('.row'); // adjust if needed
        const cropSelect = row.querySelector('.crop');

        if (categoryId) {
            $.ajax({
                url: `/get-crops-by-category/${categoryId}`,
                type: 'GET',
                success: function(crops) {
                    let options = '<option value="">--Select Crop--</option>';
                    $.each(crops, function(index, crop) {
                        options += `<option value="${crop.id}">${crop.name}</option>`;
                    });
                    cropSelect.innerHTML = options;
                }
            });
        } else {
            cropSelect.innerHTML = '<option value="">--Select Crop--</option>';
        }
    }
</script>



















<!-- JS Script -->
<script>
let kharifIndex = 1;

function addKharifCrop() {
    const container = document.getElementById('kharif-container');
    const original = document.querySelector('.kharif-crop-group');
    const clone = original.cloneNode(true);

    clone.id = `kharif-${kharifIndex}`;
    clone.querySelectorAll('select, input').forEach((el) => {
        if (el.name) el.name = el.name.replace(/\[\d+\]/, `[${kharifIndex}]`);
        if (el.id) el.id = el.id.replace(/\d+/, kharifIndex);
        if (el.type === 'text' || el.tagName === 'SELECT') el.value = '';
    });

    // Update calculateKharif call
    const inputCostInput = clone.querySelector('input[name$="[input_cost]"]');
    if (inputCostInput) {
        inputCostInput.setAttribute('oninput', `validateDecimalInput(this); calculateKharif(${kharifIndex})`);
    }

    container.appendChild(clone);
    kharifIndex++;
}

function removeCropRow(button) {
    const row = button.closest('.kharif-crop-group');
    if (document.querySelectorAll('.kharif-crop-group').length > 1) {
        row.remove();
        updateTotalCropIncome();
    } else {
        alert("At least one crop row is required.");
    }
}

document.addEventListener('DOMContentLoaded', function () {
    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[title]'));
    tooltipTriggerList.forEach(function (el) {
        new bootstrap.Tooltip(el);
    });
});
</script>






<script>
function updateTotalCropIncome() {
    let total = 0;
    document.querySelectorAll('input[name^="crop_planning"][name$="[net_profit]"]').forEach(input => {
        total += parseFloat(input.value) || 0;
    });

    // Set total to both IDs
    document.getElementById('crop_income_total').value = total.toFixed(2);
    document.getElementById('agri_total_income').value = total.toFixed(2); // <-- added line
}

document.addEventListener('input', function(event) {
    if (event.target.name && event.target.name.includes('crop_planning')) {
        const inputName = event.target.name;
        const indexMatch = inputName.match(/\[(\d+)\]/);

        if (!indexMatch) return;

        const index = indexMatch[1];

        const productionField = document.querySelector(`input[name="crop_planning[${index}][production]"]`);
        const areaField = document.querySelector(`input[name="crop_planning[${index}][area]"]`);
        const productivityField = document.querySelector(`input[name="crop_planning[${index}][productivity]"]`);

        const marketRateField = document.querySelector(`input[name="crop_planning[${index}][market_rate]"]`);
        const totalIncomeField = document.querySelector(`input[name="crop_planning[${index}][total_income]"]`);

        const inputCostField = document.querySelector(`input[name="crop_planning[${index}][input_cost]"]`);
        const netProfitField = document.querySelector(`input[name="crop_planning[${index}][net_profit]"]`);

        // === Calculate Total Income ===
        if (productionField && marketRateField && totalIncomeField) {
            const production = parseFloat(productionField.value) || 0;
            const marketRate = parseFloat(marketRateField.value) || 0;

            if (production > 0 && marketRate > 0) {
                const totalIncome = production * marketRate;
                totalIncomeField.value = totalIncome.toFixed(2);
            } else {
                totalIncomeField.value = '';
            }
        }

        // === Calculate Productivity ===
        if (productionField && areaField && productivityField) {
            const production = parseFloat(productionField.value) || 0;
            const area = parseFloat(areaField.value) || 0;

            if (production > 0 && area > 0) {
                const productivity = production / area;
                productivityField.value = productivity.toFixed(2);
            } else {
                productivityField.value = '';
            }
        }

        // === Calculate Net Profit ===
        if (totalIncomeField && inputCostField && netProfitField) {
            const totalIncome = parseFloat(totalIncomeField.value) || 0;
            const inputCost = parseFloat(inputCostField.value) || 0;

            if (totalIncome > 0) {
                const netProfit = totalIncome - inputCost;
                netProfitField.value = netProfit.toFixed(2);
            } else {
                netProfitField.value = '';
            }
        }

        // === Update Grand Total Income ===
        updateTotalCropIncome();
    }
});
</script>




<!-- Crop Modal -->
<div class="modal fade" id="CropModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg"> <!-- Use modal-sm, modal-lg, or modal-xl for size -->
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Crop</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
    @if(!$croppings)
    <div class="alert alert-warning">
        No cropping data found for this baseline.
    </div>
@else
     <div class="table-responsive">
            <table class="table table-bordered table-striped table-hover">
                <thead class="table-dark">
                    <tr>
                        <th>#</th>
                        <th>FinancialYear</th>
                        <th>Season</th>
                        <th>Category</th>
                        <th>Crop</th>
                        <th>Cultivation</th>
                        <th>Production</th>
                        <th>Productivity</th>
                        <th>Market Rate</th>
                        <th>Price</th>
                        <th>Total Income</th>
                        <th>Cost</th>
                        <th>Profit</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($croppings as $index => $crop)
                        <tr>
                            <td>{{ $index + 1 }}</td>
                            <td>{{ $crop->financial_year->name }}</td>
                            <td>{{ $crop->season->name }}</td>
                            <td>{{ $crop->category->name }}</td>
                            <td>{{ $crop->crop->name }}</td>
                            <td>{{ $crop->cultivation ?? 'N/A' }}</td>
                            <td>{{ $crop->production ?? 'N/A' }}</td>
                            <td>{{ $crop->productivity ?? 'N/A' }}</td>
                            <td>{{ number_format($crop->market_rate, 2) }}</td>
                            <td>{{ number_format($crop->price, 2) }}</td>
                            <td>{{ number_format($crop->total_income, 2) }}</td>
                            <td>{{ number_format($crop->cost, 2) }}</td>
                            <td>{{ number_format($crop->profit, 2) }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
@endif


      
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>












<div class="modal fade" id="LiveStockModal" tabindex="-1" aria-labelledby="LiveStockModal" aria-hidden="true">
  <div class="modal-dialog modal-lg"> <!-- Use modal-sm, modal-lg, or modal-xl for size -->
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Livestock</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
    @if(!$croppings)
    <div class="alert alert-warning">
        No cropping data found for this baseline.
    </div>
@else
     <div class="table-responsive">
              <table class="table table-bordered table-striped text-center">
        <thead class="table-dark">
            <tr>
                <th>ID</th>
                <th>Baseline ID</th>
                <th>Financial Year</th>
                <th>Name</th>
                <th>Number</th>
                <th>Purpose of Rearing</th>
                <th>Total Income</th>
                <th>Cost of Rearing</th>
                <th>Net Income</th>
                <th>Total Livestock Income</th>
            </tr>
        </thead>
        <tbody>
            @foreach($livestockIncomes as $income)
            <tr>
                <td>{{ $income->id }}</td>
                <td>{{ $income->baseline_id }}</td>
                <td>{{ $income->financial_year->name ?? '-' }}</td>
                <td>{{ $income->name }}</td>
                <td>{{ $income->number ?? '-' }}</td>
                <td>{{ $income->purpose_rearing ?? '-' }}</td>
                <td>{{ $income->total_income ?? '-' }}</td>
                <td>{{ $income->cost_rearing ?? '-' }}</td>
                <td>{{ $income->net_income ?? '-' }}</td>
                <td>{{ $income->total_livestock_income ?? '-' }}</td>
            </tr>
            @endforeach
        </tbody>
    </table>
        </div>
@endif

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>











<div class="modal fade" id="AlliedModal" tabindex="-1" aria-labelledby="AlliedModal" aria-hidden="true">
  <div class="modal-dialog modal-lg"> <!-- Use modal-sm, modal-lg, or modal-xl for size -->
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel"> Other Allied</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
    @if(!$croppings)
    <div class="alert alert-warning">
        No cropping data found for this baseline.
    </div>
@else
     <div class="table-responsive">
              <table class="table table-bordered table-striped text-center">
    <thead class="table-dark">
        <tr>
            <th>ID</th>
            <th>Baseline ID</th>
            <th>Financial Year</th>
            <th>Sector Name</th>
            <th>Annual Production</th>
            <th>Unit</th>
            <th>Market Rate</th>
            <th>Total Income</th>
            <th>Annual Expenditure</th>
            <th>Net Income</th>
        </tr>
    </thead>
    <tbody>
        @forelse($alliedIncome as $income)
            <tr>
                <td>{{ $income->id }}</td>
                <td>{{ $income->baseline_id }}</td>
                <td>{{ $income->financial_year->name ?? '-' }}</td>
                <td>{{ $income->sector_name }}</td>
                <td>{{ number_format($income->annual_production, 2) }}</td>
                <td>{{ $income->unit_of_measurement }}</td>
                <td>{{ number_format($income->market_rate, 2) }}</td>
                <td>{{ number_format($income->total_income, 2) }}</td>
                <td>{{ number_format($income->annual_expenditure, 2) }}</td>
                <td>{{ number_format($income->net_income, 2) }}</td>
            </tr>
        @empty
            <tr>
                <td colspan="10">No data found for the latest financial year.</td>
            </tr>
        @endforelse
    </tbody>
</table>

        </div>
@endif

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>



<div class="card mb-4">


   <div class="card-header bg-info text-white d-flex justify-content-between align-items-center">
    <h5 class="mb-0">Table 1.8 - Livestock Details</h5>
    <div class="d-flex gap-2">
        <button type="button" class="btn btn-outline-light btn-sm" data-bs-toggle="modal" data-bs-target="#LiveStockModal">
            <i class="bi bi-eye"></i> View
        </button>
        <button type="button" class="btn btn-light btn-sm" onclick="addLivestockRow()">
            + Add More
        </button>
    </div>
</div>


    <div class="card-body" id="livestockContainer">
        <!-- Initial row -->
        <div class="row livestock-group mb-3 align-items-end" id="livestock-row-0">
            <div class="col-md-3 mb-0">
                <label class="form-label">Name of Livestock</label>
                <select name="livestock[0][name]" class="form-select" required>
                    <option value="" disabled selected>--Select--</option>
                    <option value="Cow">Cow</option>
                    <option value="Buffalo">Buffalo</option>
                    <option value="Goat">Goat</option>
                    <option value="Pig">Pig</option>
                    <option value="Poultry">Poultry</option>
                    <option value="Sheep">Sheep</option>
                </select>
            </div>
            <div class="col-md-1 mb-0">
                <label class="form-label">Number</label>
                <input type="number" name="livestock[0][number]" class="form-control text-end" min="0" required onwheel="this.blur()" required>
            </div>
            <div class="col-md-2 mb-0">
                <label class="form-label">Purpose of Rearing</label>
                <input type="text" name="livestock[0][purpose_rearing]" class="form-control" placeholder="e.g. Milk, Meat" required>
            </div>
            <div class="col-md-2 mb-0">
                <label class="form-label">Total Income (₹)</label>
                <input type="number" step="0.01" name="livestock[0][total_income]" class="form-control text-end" oninput="calculateNet(this)" required onwheel="this.blur()">
            </div>
            <div class="col-md-2 mb-0">
                <label class="form-label">Cost of Rearing (₹)</label>
                <input type="number" step="0.01" name="livestock[0][cost_rearing]" class="form-control text-end" oninput="calculateNet(this)" required onwheel="this.blur()">
            </div>
            <div class="col-md-1 mb-0">
                <label class="form-label">Net Income (₹)</label>
                <input type="text" name="livestock[0][net_income]" class="form-control text-end bg-light" readonly required>
            </div>
        </div>       
</div>


<div class="container">
    <div class="d-flex justify-content-end align-items-center mb-2">
    <label for="otheralliedsector_total_income" class="form-label me-2 mb-0">Total Net Income (₹)</label>
    <input type="text" name="total_livestock_inc" class="form-control text-center bg-light fw-bold" id="total_livestock_inc" readonly style="max-width: 150px;" required>
            
</div>
    
</div>





<script>
let livestockIndex = 1;

// === Crop Income Calculation ===
function updateTotalCropIncome() {
    let total = 0;
    document.querySelectorAll('input[name^="crop_planning"][name$="[net_profit]"]').forEach(input => {
        total += parseFloat(input.value) || 0;
    });

    document.getElementById('crop_income_total').value = total.toFixed(2);
    updateAgriTotalIncome(); // update combined total
}

// === Livestock Income Calculation ===
function updateTotalLivestockIncome() {
    let totalNetIncome = 0;
    document.querySelectorAll('[name*="livestock"][name$="[net_income]"]').forEach(input => {
        const val = parseFloat(input.value);
        if (!isNaN(val)) totalNetIncome += val;
    });

    document.getElementById("total_livestock_inc").value = totalNetIncome.toFixed(2);
    updateAgriTotalIncome(); // update combined total
}

// === Combine Total Income (Crop + Livestock) ===
function updateAgriTotalIncome() {
    const cropTotal = parseFloat(document.getElementById('crop_income_total').value) || 0;
    const livestockTotal = parseFloat(document.getElementById('total_livestock_inc').value) || 0;
    const agriTotal = cropTotal + livestockTotal;

    document.getElementById('agri_total_income').value = agriTotal.toFixed(2);
}

// === Event Listener for Crop Fields ===
document.addEventListener('input', function(event) {
    if (event.target.name && event.target.name.includes('crop_planning')) {
        const inputName = event.target.name;
        const indexMatch = inputName.match(/\[(\d+)\]/);
        if (!indexMatch) return;
        const index = indexMatch[1];

        const productionField = document.querySelector(`input[name="crop_planning[${index}][production]"]`);
        const areaField = document.querySelector(`input[name="crop_planning[${index}][area]"]`);
        const productivityField = document.querySelector(`input[name="crop_planning[${index}][productivity]"]`);

        const marketRateField = document.querySelector(`input[name="crop_planning[${index}][market_rate]"]`);
        const totalIncomeField = document.querySelector(`input[name="crop_planning[${index}][total_income]"]`);

        const inputCostField = document.querySelector(`input[name="crop_planning[${index}][input_cost]"]`);
        const netProfitField = document.querySelector(`input[name="crop_planning[${index}][net_profit]"]`);

        // === Calculate Total Income ===
        if (productionField && marketRateField && totalIncomeField) {
            const production = parseFloat(productionField.value) || 0;
            const marketRate = parseFloat(marketRateField.value) || 0;
            if (production > 0 && marketRate > 0) {
                totalIncomeField.value = (production * marketRate).toFixed(2);
            } else {
                totalIncomeField.value = '';
            }
        }

        // === Calculate Productivity ===
        if (productionField && areaField && productivityField) {
            const production = parseFloat(productionField.value) || 0;
            const area = parseFloat(areaField.value) || 0;
            if (production > 0 && area > 0) {
                productivityField.value = (production / area).toFixed(2);
            } else {
                productivityField.value = '';
            }
        }

        // === Calculate Net Profit ===
        if (totalIncomeField && inputCostField && netProfitField) {
            const totalIncome = parseFloat(totalIncomeField.value) || 0;
            const inputCost = parseFloat(inputCostField.value) || 0;
            if (totalIncome > 0) {
                netProfitField.value = (totalIncome - inputCost).toFixed(2);
            } else {
                netProfitField.value = '';
            }
        }

        updateTotalCropIncome(); // update crop total and agri total
    }
});

// === Livestock Net Income Calculation on Input Change ===
function calculateNet(input) {
    const row = input.closest('.row');
    const total = parseFloat(row.querySelector('[name*="[total_income]"]').value) || 0;
    const cost = parseFloat(row.querySelector('[name*="[cost_rearing]"]').value) || 0;
    const netField = row.querySelector('[name*="[net_income]"]');
    const net = total - cost;
    netField.value = isNaN(net) ? '' : net.toFixed(2);

    updateTotalLivestockIncome(); // update livestock and agri total
}

// === Add Livestock Row ===
function addLivestockRow() {
    const container = document.getElementById("livestockContainer");
    const newRow = document.createElement("div");
    newRow.className = "row livestock-group mb-3 align-items-end";
    newRow.id = `livestock-row-${livestockIndex}`;

    newRow.innerHTML = `
        <div class="col-md-3">
            <select name="livestock[${livestockIndex}][name]" class="form-select" required>
                <option value="" disabled selected>--Select--</option>
                <option value="Cow">Cow</option>
                <option value="Buffalo">Buffalo</option>
                <option value="Goat">Goat</option>
                <option value="Pig">Pig</option>
                <option value="Poultry">Poultry</option>
                <option value="Sheep">Sheep</option>
            </select>
        </div>
        <div class="col-md-1">
            <input type="number" name="livestock[${livestockIndex}][number]" class="form-control text-end" min="0" required onwheel="this.blur()">
        </div>
        <div class="col-md-2">
            <input type="text" name="livestock[${livestockIndex}][purpose_rearing]" class="form-control" required>
        </div>
        <div class="col-md-2">
            <input type="number" step="0.01" name="livestock[${livestockIndex}][total_income]" class="form-control text-end" oninput="calculateNet(this)" required onwheel="this.blur()">
        </div>
        <div class="col-md-2">
            <input type="number" step="0.01" name="livestock[${livestockIndex}][cost_rearing]" class="form-control text-end" oninput="calculateNet(this)" required onwheel="this.blur()">
        </div>
        <div class="col-md-1">
            <input type="text" name="livestock[${livestockIndex}][net_income]" class="form-control text-end bg-light" readonly>
        </div>
        <div class="col-md-1">
            <button type="button" class="btn btn-danger btn-sm mt-4" onclick="removeLivestockRow(this)">×</button>
        </div>
    `;

    container.insertBefore(newRow, document.getElementById("totalIncomeRow"));
    livestockIndex++;
}

// === Remove Livestock Row ===
function removeLivestockRow(button) {
    const row = button.closest('.row');
    row.remove();
    updateTotalLivestockIncome(); // update livestock and agri total
}
</script>










<div class="card mb-3">
    <div class="card-header bg-secondary text-white d-flex justify-content-between align-items-center">
    <h5 class="mb-0">Table 1.9 - Other Allied Sector</h5>
    <div class="d-flex gap-2">
        <button type="button" class="btn btn-outline-light btn-sm" data-bs-toggle="modal" data-bs-target="#AlliedModal">
            <i class="bi bi-eye"></i> View
        </button>
        <button type="button" class="btn btn-light btn-sm" onclick="addOtherAlliedSector()">
            + Add More
        </button>
    </div>
</div>

    <div class="card-body" id="OtherAlliedSector">
        <div class="row align-items-end mb-2" id="otherAlliedSectorRow-0">
            <div class="col-md-2 mb-1">
                <label class="form-label">Allied Sector</label>
                <select name="otheralliedsector[0][sector_name]" class="form-control" required>
                     <option value="" selected disabled>--Select--</option>
                    <option value="NILL">NILL</option>
                    <option value="Horticulture">Horticulture</option>
                    <option value="Floriculture">Floriculture</option>
                    <option value="Sericulture">Sericulture</option>
                    <option value="Apiculture">Apiculture</option>
                    <option value="NTFP">NTFP</option>
                    <option value="Fishery">Fishery</option>
                    <option value="Dairy">Dairy</option>
                    <option value="Mushroom">Mushroom</option>
                </select>
            </div>

            <div class="col-md-2 mb-1">
                <label class="form-label">Annual Production</label>
                <input type="text" name="otheralliedsector[0][annual_production]" class="form-control annual_production" placeholder="e.g. 500" required oninput="validateDecimalInput(this)">
            </div>

            <div class="col-md-2 mb-1">
                <label class="form-label">Unit of Measurement</label>
                <input type="text" name="otheralliedsector[0][unit_of_measurement]" class="form-control" placeholder="e.g. Liters, Kg" required>
            </div>

            <div class="col-md-1 mb-1">
                <label class="form-label">Market Rate (₹)</label>
                <input type="text" name="otheralliedsector[0][market_rate]" class="form-control market_rate" placeholder="e.g. 40.50" oninput="validateDecimalInput(this)" required>
            </div>

            <div class="col-md-1 mb-1">
                <label class="form-label">Total Income (₹)</label>
                <input type="text" name="otheralliedsector[0][total_income]" class="form-control total_income" placeholder="e.g. 20000" readonly required>
            </div>

            <div class="col-md-2 mb-1">
                <label class="form-label">Annual Expenditure (₹)</label>
                <input type="text" name="otheralliedsector[0][annual_expenditure]" class="form-control annual_expenditure" placeholder="e.g. 5000" oninput="validateDecimalInput(this)" required>
            </div>

            <div class="col-md-1 mb-1">
                <label class="form-label">Net Income (₹)</label>
                <input type="text" name="otheralliedsector[0][net_income]" class="form-control net_income" placeholder="e.g. 15000" readonly required>
            </div>

            <div class="col-md-1 mb-1 remove-btn">
                <!-- No remove button for first row -->
            </div>
        </div>
    </div>

    <div class="container">
        <div class="d-flex justify-content-end align-items-center mb-2">
            <label for="otheralliedsector_total_income" class="form-label me-2 mb-0">Total Net Income (₹)</label>
            <input type="text" id="otheralliedsector_total_income" name="total_income" class="form-control" placeholder="e.g. 15000" style="max-width: 150px;" readonly>
        </div>
    </div>
</div>














<script>
let alliedSectorIndex = 1;

function addOtherAlliedSector() {
    const container = document.getElementById('OtherAlliedSector');
    const newRow = document.getElementById('otherAlliedSectorRow-0').cloneNode(true);
    newRow.id = `otherAlliedSectorRow-${alliedSectorIndex}`;

    // Remove all labels
    newRow.querySelectorAll('label').forEach(label => label.remove());

    // Update name attributes and clear values
    newRow.querySelectorAll('input, select').forEach(element => {
        const name = element.getAttribute('name');
        if (name) {
            const newName = name.replace(/\[\d+\]/, `[${alliedSectorIndex}]`);
            element.setAttribute('name', newName);
        }

        if (element.tagName === 'SELECT') {
            element.selectedIndex = 0;
        } else {
            element.value = '';
        }
    });

    // Add remove button in cloned row
    const lastCol = newRow.querySelector('.remove-btn');
    if (lastCol) {
        lastCol.innerHTML = `
            <label class="form-label d-block">&nbsp;</label>
            <button type="button" class="btn btn-danger btn-sm" onclick="removeOtherAlliedSector(${alliedSectorIndex})">&times;</button>
        `;
    }

    container.appendChild(newRow);
    alliedSectorIndex++;

    updateTotalNetIncome();
}

function removeOtherAlliedSector(index) {
    const row = document.getElementById(`otherAlliedSectorRow-${index}`);
    if (row) row.remove();

    updateTotalNetIncome();
}

function updateTotalNetIncome() {
    let netIncomeTotal = 0;

    // Sum all net_income inputs
    document.querySelectorAll('.net_income').forEach(input => {
        const value = parseFloat(input.value) || 0;
        netIncomeTotal += value;
    });

    // Update other allied sector total income field
    const otherAlliedTotalInput = document.getElementById('otheralliedsector_total_income');
    if (otherAlliedTotalInput) {
        otherAlliedTotalInput.value = netIncomeTotal.toFixed(2);
    }

    // Update agri_total_income by adding net income from allied sector
    const agriInput = document.getElementById('agri_total_income');
    if (agriInput) {
        const previousAdded = parseFloat(agriInput.getAttribute('data-last-otherallied')) || 0;
        const currentValue = parseFloat(agriInput.value) || 0;

        // Remove previously added net income to avoid duplication
        const baseIncome = currentValue - previousAdded;

        const newTotal = baseIncome + netIncomeTotal;

        agriInput.value = newTotal.toFixed(2);
        agriInput.setAttribute('data-last-otherallied', netIncomeTotal.toFixed(2));
    }
}

document.addEventListener('input', function (event) {
    if (
        event.target.classList.contains('annual_production') ||
        event.target.classList.contains('market_rate') ||
        event.target.classList.contains('annual_expenditure')
    ) {
        const row = event.target.closest('[id^="otherAlliedSectorRow"]');
        if (!row) return;

        const production = parseFloat(row.querySelector('.annual_production')?.value) || 0;
        const rate = parseFloat(row.querySelector('.market_rate')?.value) || 0;
        const expenditure = parseFloat(row.querySelector('.annual_expenditure')?.value) || 0;

        const totalIncome = production * rate;
        const netIncome = totalIncome - expenditure;

        row.querySelector('.total_income').value = totalIncome.toFixed(2);
        row.querySelector('.net_income').value = netIncome.toFixed(2);

        updateTotalNetIncome();
    }
});

document.addEventListener('DOMContentLoaded', function () {
    updateTotalNetIncome();
});
</script>






<!-- Select for Enterprise/Business -->
<div class="container-fluid">
    <div class="col-md-12 mb-2">
        <div class="row align-items-center">
            <div class="col-md-3">
                <label class="form-label mb-0" for="hasEnterprise">Enterprise / Business</label>
            </div>
            <div class="col-md-4">
                <select name="has_enterprise"
                        class="form-control"
                        id="hasEnterprise"
                        onchange="toggleEnterpriseSection(this.value)"
                        required>
                    <option value="" disabled {{ old('has_enterprise') === null ? 'selected' : '' }}>--Select--</option>
                    <option value="Yes" {{ old('has_enterprise') == 'Yes' ? 'selected' : '' }}>Yes</option>
                    <option value="No" {{ old('has_enterprise') == 'No' ? 'selected' : '' }}>No</option>
                </select>
            </div>
        </div>
    </div>
</div>

<!-- Card for Micro Enterprises / Small Business -->
<div class="card mb-2" id="microEnterpriseCard" style="display: none;">
    <div class="card-header bg-secondary text-white d-flex justify-content-between align-items-center">
    <h5 class="mb-0">Table 1.9A - Micro Enterprises / Small Business</h5>
    
    <div class="d-flex gap-2">
        <button type="button" class="btn btn-outline-light btn-sm" data-bs-toggle="modal" data-bs-target="#MicroModal">
            <i class="bi bi-eye"></i> View
        </button>
        <button type="button" class="btn btn-light btn-sm" onclick="addMicroEnterprise()">
            + Add More
        </button>
    </div>
</div>


    <div class="card-body" id="microEnterprise">
        <div class="row align-items-end mb-2" id="microEnterpriseRow-0">
            <div class="col-md-2 mb-1">
                <label class="form-label">Business Name</label>
                <input type="text" name="micro_enterprises[0][business_name]" class="form-control" placeholder="e.g. Village Dairy Unit">
            </div>
            <div class="col-md-1 mb-1">
                <label class="form-label">Entrepreneur Name</label>
                <input type="text" name="micro_enterprises[0][entrepreneur_name]" class="form-control" placeholder="e.g. Ramesh Kumar" pattern="[A-Za-z\s]+">
            </div>
            <div class="col-md-1 mb-1">
                <label class="form-label">Persons Employed</label>
                <input type="number" name="micro_enterprises[0][persons_employed]" class="form-control persons-employed" placeholder="e.g. 3">
            </div>
            <div class="col-md-2 mb-1">
    <label class="form-label">Total Income (₹)</label>
    <input type="number" name="micro_enterprises[0][total_income]" class="form-control total-income"
           placeholder="e.g. 50000" oninput="calculateNetIncome(0)">
</div>

<div class="col-md-2 mb-1">
    <label class="form-label">Annual Expenditure (₹)</label>
    <input type="number" name="micro_enterprises[0][annual_expenditure]" class="form-control annual-expenditure"
           placeholder="e.g. 30000" oninput="calculateNetIncome(0)">
</div>

<div class="col-md-1 mb-1">
    <label class="form-label">Net Income (₹)</label>
    <input type="number" name="micro_enterprises[0][net_income]" class="form-control net-income"
           placeholder="e.g. 20000" readonly>
</div>
            <div class="col-md-2 mb-1">
                <label class="form-label">Registration Status</label>
                <select name="micro_enterprises[0][registration_status]" class="form-control">
                    <option value="">--Select--</option>
                    <option value="Registered">Registered</option>
                    <option value="Not Registered">Not Registered</option>
                </select>
            </div>
            <div class="col-md-1 mb-1">
                <label class="form-label d-block">&nbsp;</label>
                <button type="button" class="btn btn-danger btn-sm" onclick="removeMicroEnterprise(0)">
                    &times;
                </button>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="d-flex justify-content-end align-items-center mb-2">
            <label for="enterprises_total_income" class="form-label me-2 mb-0">Total Net Income (₹)</label>
            <input type="text" id="enterprises_total_income"  class="form-control" placeholder="e.g. 15000" style="max-width: 150px;" readonly>
        </div>
    </div>
</div>

<input type="hidden" id="micro_enterprises_income" name="micro_enterprises_income">


<!-- Script -->
<script>
let microEnterpriseIndex = 1;

// Automatically calculate net income when Total Income or Expenditure is changed
document.addEventListener('input', function (e) {
    if (e.target.classList.contains('total-income') || e.target.classList.contains('annual-expenditure')) {
        const row = e.target.closest('.row');
        if (!row) return;

        const totalInput = row.querySelector('.total-income');
        const expInput = row.querySelector('.annual-expenditure');
        const netInput = row.querySelector('.net-income');

        const total = parseFloat(totalInput?.value) || 0;
        const exp = parseFloat(expInput?.value) || 0;
        const net = total - exp;

        if (netInput) {
            netInput.value = net.toFixed(2);
            netInput.classList.toggle('text-danger', net < 0);
        }

        updateTotalEnterpriseNetIncome();
    }
});

function updateTotalEnterpriseNetIncome() {
    let totalNetIncome = 0;
    let totalPersonsEmployed = 0;

    document.querySelectorAll('.net-income').forEach(input => {
        const val = parseFloat(input.value);
        if (!isNaN(val)) totalNetIncome += val;
    });

    document.querySelectorAll('.persons-employed').forEach(input => {
        const val = parseInt(input.value);
        if (!isNaN(val)) totalPersonsEmployed += val;
    });

    document.getElementById('enterprises_total_income').value = totalNetIncome.toFixed(2);
    document.getElementById('micro_enterprises_income').value = totalNetIncome.toFixed(2);

    const sourcesMemberInput = document.querySelector('input[name="sources[1][member_involved]"]');
    if (sourcesMemberInput) sourcesMemberInput.value = totalPersonsEmployed;

    const sourcesAnnualIncomeInput = document.getElementById('sources_annual_income_1');
    if (sourcesAnnualIncomeInput) sourcesAnnualIncomeInput.value = totalNetIncome.toFixed(2);

    if (typeof updateAgriTotalIncome === 'function') {
        updateAgriTotalIncome();
    }
}

function addMicroEnterprise() {
    const container = document.getElementById('microEnterprise');
    const newRow = document.getElementById('microEnterpriseRow-0').cloneNode(true);
    newRow.id = `microEnterpriseRow-${microEnterpriseIndex}`;

    newRow.querySelectorAll('input, select').forEach(input => {
        const name = input.getAttribute('name');
        if (name) {
            const updatedName = name.replace(/\[\d+\]/, `[${microEnterpriseIndex}]`);
            input.setAttribute('name', updatedName);
        }
        input.value = '';
        input.classList.remove('text-danger');
    });

    newRow.querySelector('button.btn-danger').setAttribute('onclick', `removeMicroEnterprise(${microEnterpriseIndex})`);

    container.appendChild(newRow);
    microEnterpriseIndex++;
}

function removeMicroEnterprise(index) {
    const row = document.getElementById(`microEnterpriseRow-${index}`);
    if (row) {
        row.remove();
        updateTotalEnterpriseNetIncome();
    }
}

// Toggle MicroEnterprise section
function toggleEnterpriseSection(value) {
    const section = document.getElementById('microEnterpriseCard');
    section.style.display = value === 'Yes' ? 'block' : 'none';
}

// Init on page load
window.addEventListener('DOMContentLoaded', function () {
    const dropdown = document.getElementById('hasEnterprise');
    if (dropdown && dropdown.value === 'Yes') {
        toggleEnterpriseSection('Yes');
    }

    updateTotalEnterpriseNetIncome();
});
</script>














<div class="modal fade" id="MicroModal" tabindex="-1" aria-labelledby="MicroModal" aria-hidden="true">
  <div class="modal-dialog modal-lg"> <!-- Use modal-sm, modal-lg, or modal-xl for size -->
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Livestock</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
    @if(!$croppings)
    <div class="alert alert-warning">
        No cropping data found for this baseline.
    </div>
@else
     <div class="table-responsive">
    <table class="table table-bordered table-striped text-center">
    <thead class="table-dark">
        <tr>
            <th>ID</th>
            <th>Baseline ID</th>
            <th>Financial Year</th>
            <th>Business Name</th>
            <th>Entrepreneur Name</th>
            <th>Persons Employed</th>
            <th>Total Income</th>
            <th>Annual Expenditure</th>
            <th>Net Income</th>
            <th>Registration Status</th>
        </tr>
    </thead>
    <tbody>
        @forelse($microIncome as $enterprise)
            <tr>
                <td>{{ $enterprise->id }}</td>
                <td>{{ $enterprise->baseline_id }}</td>
                <td>{{ $enterprise->financial_year->name ?? '-' }}</td>
                <td>{{ $enterprise->business_name }}</td>
                <td>{{ $enterprise->entrepreneur_name }}</td>
                <td>{{ $enterprise->persons_employed }}</td>
                <td>{{ number_format($enterprise->total_income, 2) }}</td>
                <td>{{ number_format($enterprise->annual_expenditure, 2) }}</td>
                <td>{{ number_format($enterprise->net_income, 2) }}</td>
                <td>{{ ucfirst($enterprise->registration_status) }}</td>
            </tr>
        @empty
            <tr>
                <td colspan="10">No microenterprise data available.</td>
            </tr>
        @endforelse
    </tbody>
</table>
        </div>
@endif

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>













<div class="container-fluid">
<div class="col-md-12 mb-2">
    <div class="row align-items-center">
        <div class="col-md-3">
            <label for="dailyWageLaborToggle" class="form-label mb-0 fw-bold">Is there any Daily Wage Labor?</label>
        </div>
        <div class="col-md-4">
              <select id="dailyWageLaborToggle" 
                    name="has_dailyWages" 
                    class="form-control" 
                    onchange="toggleDailyWageLabor()" 
                    required>
                <option value="" disabled {{ old('has_dailyWages') === null ? 'selected' : '' }}>--Select--</option>
                <option value="Yes" {{ old('has_dailyWages') == 'Yes' ? 'selected' : '' }}>Yes</option>
                <option value="No" {{ old('has_dailyWages') == 'No' ? 'selected' : '' }}>No</option>
            </select>
        </div>
    </div>
</div>














<!-- Daily Wage Labor Card -->
<div class="card mb-3" id="dailyWageLaborCard" style="display: none;">
    <div class="card-header bg-info text-white d-flex justify-content-between align-items-center">
    <h5 class="mb-0">Table 1.10 - Daily Wage Labor</h5>

    <div class="d-flex gap-2">
        <button type="button" class="btn btn-outline-light btn-sm" data-bs-toggle="modal" data-bs-target="#WagesdModal">
            <i class="bi bi-eye"></i> View
        </button>
        <button type="button" class="btn btn-light btn-sm" onclick="addDailyWageLabor()">
            + Add More
        </button>
    </div>
</div>


    <div class="card-body" id="dailyWageLabor">
        <div class="row align-items-end mb-2" id="dailyWageLaborRow-0">
            <div class="col-md-2 mb-3">
                <label class="form-label">No. of Family Members</label>
                <input type="number" id="no_of_family_members_0" name="daily_wage_labors[0][no_of_family_members]" class="form-control" placeholder="e.g. 2" oninput="calculateNetIncome(0)">
            </div>
            <div class="col-md-2 mb-3">
                <label class="form-label">Working Days</label>
                <input type="number" id="working_days_0" name="daily_wage_labors[0][working_days]" class="form-control" placeholder="e.g. 120" oninput="calculateNetIncome(0)">
            </div>
            <div class="col-md-2 mb-3">
                <label class="form-label">Seasonal / Throughout Year</label>
                <select id="seasonal_or_year_round_0" name="daily_wage_labors[0][seasonal_or_year_round]" class="form-select">
                    <option value="">--Select--</option>
                    <option value="Seasonal">Seasonal</option>
                    <option value="Throughout the Year">Throughout the Year</option>
                </select>
            </div>
            <div class="col-md-2 mb-3">
                <label class="form-label">Distance from Home (km)</label>
                <input type="number" id="distance_from_home_km_0" name="daily_wage_labors[0][distance_from_home_km]" class="form-control" placeholder="e.g. 5.5">
            </div>
            <div class="col-md-1 mb-3">
                <label class="form-label">Wage Rate (₹)</label>
                <input type="number" id="wage_rate_0" name="daily_wage_labors[0][wage_rate]" class="form-control" placeholder="e.g. 350.00" oninput="calculateNetIncome(0)">
            </div>
            <div class="col-md-2 mb-3">
                <label class="form-label">Net Income (₹)</label>
                <input type="number" id="wages_net_income_0" name="daily_wage_labors[0][net_income]" class="form-control wages-net-income" placeholder="e.g. 20000.00" readonly>
            </div>

            <div class="col-md-1 mb-3 d-flex align-items-end">
                <button type="button" class="btn btn-danger btn-sm" onclick="removeDailyWageLabor(0)">
                    &times;
                </button>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="d-flex justify-content-end align-items-center mb-2">
            <label for="enterprises_total_income" class="form-label me-2 mb-0">Total Net Income  (₹)</label>
            <input type="text" id="wages_total_income" class="form-control" placeholder="e.g. 15000" style="max-width: 150px;" readonly>
        </div>
    </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
    let wageLaborIndex = 1;

    function toggleDailyWageLabor() {
        const selection = document.getElementById("dailyWageLaborToggle").value;
        const card = document.getElementById("dailyWageLaborCard");

        if (selection === "Yes") {
            card.style.display = "block";
            card.querySelectorAll("input, select").forEach(input => input.setAttribute("required", "required"));
        } else {
            card.style.display = "none";
            card.querySelectorAll("input, select").forEach(input => input.removeAttribute("required"));

            setFieldValue("wages_total_income", '0');
            setFieldValue("total_wages_income", '0');
            setFieldValueByName("sources[2][member_involved]", '0');
            setFieldValue("total_working_days", '0');
        }
    }

    function addDailyWageLabor() {
        const container = document.getElementById("dailyWageLabor");

        const row = document.createElement("div");
        row.className = "row align-items-end mb-2";
        row.id = `dailyWageLaborRow-${wageLaborIndex}`;

        row.innerHTML = `
            <div class="col-md-2 mb-3">
                <input type="number" id="no_of_family_members_${wageLaborIndex}" name="daily_wage_labors[${wageLaborIndex}][no_of_family_members]" class="form-control" placeholder="e.g. 2" min="0" step="1" oninput="calculateNetIncome(${wageLaborIndex})">
            </div>
            <div class="col-md-2 mb-3">
                <input type="number" id="working_days_${wageLaborIndex}" name="daily_wage_labors[${wageLaborIndex}][working_days]" class="form-control" placeholder="e.g. 120" min="0" step="1" oninput="calculateNetIncome(${wageLaborIndex})">
            </div>
            <div class="col-md-2 mb-3">
                <select name="daily_wage_labors[${wageLaborIndex}][seasonal_or_year_round]" class="form-select">
                    <option value="">--Select--</option>
                    <option value="Seasonal">Seasonal</option>
                    <option value="Throughout the Year">Throughout the Year</option>
                </select>
            </div>
            <div class="col-md-2 mb-3">
                <input type="number" step="0.01" id="distance_from_home_km_${wageLaborIndex}" name="daily_wage_labors[${wageLaborIndex}][distance_from_home_km]" class="form-control" placeholder="e.g. 5.5">
            </div>
            <div class="col-md-1 mb-3">
                <input type="number" step="0.01" id="wage_rate_${wageLaborIndex}" name="daily_wage_labors[${wageLaborIndex}][wage_rate]" class="form-control" placeholder="e.g. 350.00" oninput="calculateNetIncome(${wageLaborIndex})">
            </div>
            <div class="col-md-2 mb-3">
                <input type="number" step="0.01" id="wages_net_income_${wageLaborIndex}" name="daily_wage_labors[${wageLaborIndex}][net_income]" class="form-control wages-net-income" placeholder="e.g. 20000.00" readonly>
            </div>
            <div class="col-md-1 mb-3 d-flex align-items-end">
                <button type="button" class="btn btn-danger btn-sm" onclick="removeDailyWageLabor(${wageLaborIndex})">&times;</button>
            </div>
        `;

        container.appendChild(row);
        wageLaborIndex++;
    }

    function calculateNetIncome(index) {
        const members = parseInt(document.getElementById(`no_of_family_members_${index}`)?.value) || 0;
        const days = parseInt(document.getElementById(`working_days_${index}`)?.value) || 0;
        const rate = parseFloat(document.getElementById(`wage_rate_${index}`)?.value) || 0;

        const netIncome = members * days * rate;
        const netIncomeField = document.getElementById(`wages_net_income_${index}`);
        if (netIncomeField) {
            netIncomeField.value = netIncome.toFixed(2);
            netIncomeField.classList.add('wages-net-income');
        }

        updateDailyWageTotals();
    }

    function updateDailyWageTotals() {
        let totalIncome = 0, totalMembers = 0, totalDays = 0;

        document.querySelectorAll('.wages-net-income').forEach(input => {
            totalIncome += parseFloat(input.value) || 0;
        });

        document.querySelectorAll('[name^="daily_wage_labors"][name$="[no_of_family_members]"]').forEach(input => {
            totalMembers += parseInt(input.value) || 0;
        });

        document.querySelectorAll('[name^="daily_wage_labors"][name$="[working_days]"]').forEach(input => {
            totalDays += parseInt(input.value) || 0;
        });

        // Final update to DOM
        setFieldValue("wages_total_income", totalIncome.toFixed(2));
        setFieldValue("total_wages_income", totalIncome.toFixed(2));
        setFieldValueByName("sources[2][member_involved]", totalMembers);
        setFieldValue("total_working_days", totalDays);

        console.log("✅ Updated wages_total_income:", totalIncome.toFixed(2));
    }

    function setFieldValue(id, value) {
        const field = document.getElementById(id);
        if (field) {
            field.value = value;
            field.setAttribute("value", value); // for fallback
        } else {
            console.warn(`⚠️ Field with ID "${id}" not found.`);
        }
    }

    function setFieldValueByName(name, value) {
        const field = document.querySelector(`[name="${name}"]`);
        if (field) field.value = value;
    }

    function removeDailyWageLabor(index) {
        const row = document.getElementById(`dailyWageLaborRow-${index}`);
        if (row) {
            row.remove();
            updateDailyWageTotals();
        }
    }

    // Expose functions to global scope if needed
    window.toggleDailyWageLabor = toggleDailyWageLabor;
    window.addDailyWageLabor = addDailyWageLabor;
    window.calculateNetIncome = calculateNetIncome;
    window.removeDailyWageLabor = removeDailyWageLabor;

    // Initial setup
    const netField = document.getElementById("wages_net_income_0");
    if (netField) netField.classList.add("wages-net-income");

    calculateNetIncome(0);
    updateDailyWageTotals();
});
</script>











<div class="modal fade" id="WagesdModal" tabindex="-1" aria-labelledby="WagesdModal" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Daily Wage Labor</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>

      <div class="modal-body">
        @if(!$wageIncome || $wageIncome->isEmpty())
          <div class="alert alert-warning">
              No migration/labour data found for this baseline.
          </div>
        @else
          <div class="table-responsive">
            <table class="table table-bordered table-striped text-center">
              <thead class="table-dark">
                <tr>
                  <th>ID</th>
                  <th>Baseline ID</th>
                  <th>Financial Year</th>
                  <th>No. of Family Members</th>
                  <th>Working Days</th>
                  <th>Type (Seasonal/Year-Round)</th>
                  <th>Distance (km)</th>
                  <th>Wage Rate</th>
                  <th>Net Income</th>
                </tr>
              </thead>
              <tbody>
                @foreach($wageIncome as $income)
                  <tr>
                    <td>{{ $income->id }}</td>
                    <td>{{ $income->baseline_id }}</td>
                    <td>{{ $income->financial_year->name ?? '-' }}</td>
                    <td>{{ $income->no_of_family_members ?? '-' }}</td>
                    <td>{{ $income->working_days ?? '-' }}</td>
                    <td>{{ $income->seasonal_or_year_round ?? '-' }}</td>
                    <td>{{ $income->distance_from_home_km ?? '-' }}</td>
                    <td>{{ number_format($income->wage_rate, 2) }}</td>
                    <td>{{ number_format($income->net_income, 2) }}</td>
                  </tr>
                @endforeach
              </tbody>
            </table>
          </div>
        @endif
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>













<div class="card mb-3" id="sourceOfIncomeCard">
    <div class="card-header bg-info text-white">
        <h5 class="mb-0">Table 1.11 - Source of Family Income</h5>
    </div>

    <div class="card-body">
        {{-- Row 1: Agriculture and Allied --}}
        <div class="row align-items-end mb-3">
            <div class="col-md-3">
                <label class="form-label">Occupation</label>
                <input type="text" class="form-control" value="Agriculture and Allied" readonly>
                <input type="hidden" name="sources[0][occupation]" value="Agriculture and Allied">
            </div>
            <div class="col-md-2">
                <label class="form-label">Source Type</label>
                <select name="sources[0][source_type]" class="form-select" required>
                    <option value="" selected disabled>-- Source Type --</option>
                    <option value="PRIMARY SOURCE">PRIMARY SOURCE</option>
                    <option value="SECONDARY SOURCE">SECONDARY SOURCE</option>
                    <option value="NONE">NONE</option>
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label">No of Days Engagement</label>
                <input type="number" step="1"  name="sources[0][no_of_days_engagement]" class="form-control" value="0" placeholder="Days" min="0" oninput="validity.valid||(value='');" onblur="if(this.value==='' ){this.value='0';}">
            </div>
            <div class="col-md-2">
                <label class="form-label">Member Involved</label>
                <input type="number" name="sources[0][member_involved]" class="form-control" placeholder="Members" step="1" value="0" oninput="this.value = this.value.replace(/[^0-9]/g, '');">
            </div>
            <div class="col-md-3">
                <label class="form-label">Annual Income (₹)</label>
                <input type="number" id="agri_total_income" name="sources[0][annual_income]" class="form-control source-income" placeholder="Annual Income ₹">
            </div>
        </div>

        {{-- Row 2: Micro Enterprise --}}
        <div class="row align-items-end mb-3">
            <div class="col-md-3">
                <input type="text" class="form-control" value="Micro Enterprise" readonly>
                <input type="hidden" name="sources[1][occupation]" value="Micro Enterprise">
            </div>
            <div class="col-md-2">
                <select name="sources[1][source_type]" class="form-select" required>
                    <option value="" selected disabled>-- Source Type --</option>
                    <option value="PRIMARY SOURCE">PRIMARY SOURCE</option>
                    <option value="SECONDARY SOURCE">SECONDARY SOURCE</option>
                    <option value="NONE">NONE</option>
                </select>
            </div>
            <div class="col-md-2">
                <input type="number" step="1"  name="sources[1][no_of_days_engagement]" value="0" class="form-control" placeholder="Days">
            </div>
            <div class="col-md-2">
                <input type="number" id="sources_member_involved_1" name="sources[1][member_involved]" class="form-control" placeholder="Members" min="0" step="1" oninput="this.value = this.value.replace(/[^0-9]/g, '');" value="{{ old('sources.1.member_involved') }}">
            </div>
            <div class="col-md-3">
                <input type="number" id="sources_annual_income_1" name="sources[1][annual_income]" class="form-control source-income" placeholder="Annual Income ₹">
            </div>
        </div>

        {{-- Row 3: Wage Labor --}}
        <div class="row align-items-end mb-3">
            <div class="col-md-3">
                <input type="text" class="form-control" value="Wage Labor" readonly>
                <input type="hidden" name="sources[2][occupation]" value="Wage Labor">
            </div>
            <div class="col-md-2">
                <select name="sources[2][source_type]" class="form-select" required>
                    <option value="" selected disabled>-- Source Type --</option>
                    <option value="PRIMARY SOURCE">PRIMARY SOURCE</option>
                    <option value="SECONDARY SOURCE">SECONDARY SOURCE</option>
                    <option value="NONE">NONE</option>
                </select>
            </div>
            <div class="col-md-2">
                <input type="number" id="total_working_days" step="1" value="0" name="sources[2][no_of_days_engagement]" class="form-control" placeholder="Days">
            </div>
            <div class="col-md-2">
                <input type="number" id="sources_member_involved_2" name="sources[2][member_involved]" class="form-control" placeholder="Members" min="0" value="0" oninput="this.value = this.value.replace(/[^0-9]/g, '');">
            </div>
            <div class="col-md-3">
                <input type="number" id="total_wages_income" name="sources[2][annual_income]" class="form-control source-income" placeholder="Annual Income ₹" value="0.00">
            </div>
        </div>

        {{-- Total Income Display --}}
        <div class="row align-items-end mb-3">
            <div class="col-md-9"></div>
            <div class="col-md-3">
                <div class="form-group">
                    <label class="form-label fw-semibold">Total Income (₹)</label>
                    <!-- For submission -->
                    <input type="number" id="total_income_display"  class="form-control bg-light" name="total" value="0.00">
                    <!-- For display -->
                    
                </div>
            </div>
        </div>
    </div>
<div class="text-center">
    <button type="submit" name="action" value="submit" class="btn btn-primary">
        Submit
    </button>

    <button type="reset" class="btn btn-default">
        Reset
    </button>
</div>


</form>
</div>



<script>
    document.addEventListener('DOMContentLoaded', () => {
        let lastKnownTotal = 0;

        function calculateTotalSourceIncome() {
            let total = 0;
            document.querySelectorAll('.source-income').forEach(input => {
                let val = input.value.trim();
                val = val.replace(/,/g, ''); // remove commas if any
                const number = parseFloat(val);
                if (!isNaN(number)) {
                    total += number;
                }
            });

            const totalInput = document.getElementById('total_income_display');
            if (totalInput && total.toFixed(2) !== lastKnownTotal.toFixed(2)) {
                totalInput.value = total.toFixed(2);
                lastKnownTotal = total;
            }
        }

        // Poll every 500ms
        setInterval(calculateTotalSourceIncome, 500);

        // Also bind manual user input
        document.querySelectorAll('.source-income').forEach(input => {
            input.addEventListener('input', calculateTotalSourceIncome);
        });

        // Initial calculation
        calculateTotalSourceIncome();
    });
</script>




<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
    $('#season-select').on('change', function() {
        let seasonId = $(this).val();
        alert("test");

        if (seasonId) {
            $.ajax({
                url: `/get-categories-by-season/${seasonId}`,
                type: 'GET',
                success: function(categories) {
                    let options = '<option value="">--Select Category--</option>';
                    $.each(categories, function(index, category) {
                        options += `<option value="${category.id}">${category.name}</option>`;
                    });
                    $('#category-select').html(options);
                }
            });
        } else {
            $('#category-select').html('<option value="">--Select Category--</option>');
        }
    });
</script>
<script>
    $('#category-select').on('change', function () {
        let categoryId = $(this).val();

        if (categoryId) {
            $.ajax({
                url: `/get-crops-by-category/${categoryId}`,
                type: 'GET',
                success: function (crops) {
                    let cropOptions = '<option value="">--Select Crop--</option>';
                    $.each(crops, function (index, crop) {
                        cropOptions += `<option value="${crop.id}">${crop.name}</option>`;
                    });
                    $('#crop-select').html(cropOptions);
                }
            });
        } else {
            $('#crop-select').html('<option value="">--Select Crop--</option>');
        }
    });
</script>

  </div>
</div>




@endsection