@extends('layouts.usermain')

@section('main-container')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<div class="page-header d-print-none">
    <div class="container-xl">
        <div class="row g-2 align-items-center">
            <div class="col">
            
                <h2 class="page-title">
                Water harvesting Structure Agri Baseline       
                </h2>
            </div>
            <!-- Page title actions -->
            <div class="col-auto ms-auto d-print-none">
                <div class="btn-list">
                    <span class="d-none d-sm-inline">
                        <a href="{{ route('export.excel') }}" class="btn btn-1">Download Excel</a>
                    </span>
                    <a href="/farmers/create" class="btn btn-primary btn-5 d-none d-sm-inline-block">
                        Add
                    </a>  
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Page body -->
<div class="page-body">
    <div class="container-xl">
        <div class="card mb-4 shadow-sm">
                @if(session('success'))
                <div class="alert alert-success" id="flash-message">
                    {{ session('success') }}
                </div>
                @endif

                @if(session('error'))
                <div class="alert alert-danger" id="flash-message">
                {{ session('error') }}
                </div>
                @endif

<script>
    setTimeout(function() {
        let flashMessage = document.getElementById('flash-message');
        if (flashMessage) {
            flashMessage.style.transition = "opacity 0.5s ease";
            flashMessage.style.opacity = "0";
            setTimeout(() => flashMessage.remove(), 500);
        }
    }, 3000); // 3 seconds
</script>

  <form action="" method="POST">

    <input type="hidden" name="financial_year_id" value="{{ request('financial_year_id') }}">
    <input type="hidden" name="water_user_group_id" value="{{ request('water_user_group_id') }}">   


        @csrf
<!-- Crop -->

<div class="card mb-2">
  <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>
    <button type="button" class="btn btn-light btn-sm" id="add-kharif-btn">+ Add More</button>
  </div>

  <div class="card-body" id="kharif-container">

    <!-- TEMPLATE ROW -->
    <div class="row align-items-end kharif-crop-group g-2 mb-1"
         id="kharif-0"
         data-row-index="0">

      <div style="width:100px">
        <label class="form-label small mb-1">Seasons Type</label>
        <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 style="width:100px">
        <label class="form-label small mb-1">Category</label>
        <select name="crop_planning[0][category_id]"
                class="form-select category"
                required>
          <option value="" disabled selected>--Select--</option>
        </select>
      </div>

      <div style="width:120px">
        <label class="form-label small mb-1">Crop</label>
        <select name="crop_planning[0][crop_id]"
                class="form-select crop"
                onchange="onCropChange(this)">
          <option value="" disabled selected>--Select--</option>
        </select>
      </div>

      <input type="hidden"
             name="crop_planning[0][productivity_database]"
             class="productivity">

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

      <div style="width:11%">
        <label class="form-label small mb-1">Total Production (Qtl)</label>
        <input type="text"
               name="crop_planning[0][production]"
               class="form-control production-input"
               oninput="validateDecimalInput(this)"
               required>
      </div>

      <div style="width:12%">
        <label class="form-label small mb-1">Productivity (Qtl/Acre)</label>
        <input type="text"
               name="crop_planning[0][productivity]"
               class="form-control productivity-input"
               oninput="validateDecimalInput(this)"
               required>
      </div>

      <div class="col-md-1">
        <label class="form-label small mb-1">Market Rate (₹/Qtl)</label>
        <input type="text"
               name="crop_planning[0][market_rate]"
               class="form-control market-rate-input"
               oninput="validateDecimalInput(this)" 
               required>
      </div>

      <div class="col-md-1">
        <label class="form-label small mb-1">Total Income (₹)</label>
        <input type="text"
               name="crop_planning[0][total_income]"
               class="form-control total-income-input"
               readonly>
      </div>

      <div style="width:120px">
        <label class="form-label small mb-1">Total Cost of Cultivation (₹)</label>
        <input type="text"
               name="crop_planning[0][input_cost]"
               class="form-control input-cost-input"
               oninput="validateDecimalInput(this)"
               required>
      </div>

      <div class="col-md-1">
        <label class="form-label small mb-1">Net Income (₹)</label>
        <input type="text"
               name="crop_planning[0][net_profit]"
               class="form-control net-profit-input"
               readonly>
      </div>

      <!-- Remove Button -->
      <div class="col-auto d-flex align-items-center">
        <button type="button"
                class="btn btn-outline-danger btn-sm remove-row-btn"
                title="Remove row">
          &times;
        </button>
      </div>

      <div class="col-12 mt-1">
        <small class="prod-check-message text-muted" aria-live="polite"></small>
      </div>

    </div>
  </div>

  <div class="row m-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="croppings_total_net_income"
             class="form-control"
             readonly>
    </div>
  </div>
</div>

<script>
document.addEventListener("click", function(e) {
  if (e.target.closest(".remove-row-btn")) {
    const row = e.target.closest(".kharif-crop-group");
    row.remove();
    calculateTotalNetIncome(); // optional recalculation after row removal
  }
});
</script>











<script>
/* =========================================================
   REMOVE ROW (delegated)
========================================================= */
document.addEventListener('click', function (e) {
  const btn = e.target.closest('.remove-row-btn');
  if (!btn) return;

  const row = btn.closest('.kharif-crop-group');
  if (!row) return;

  const rows = document.querySelectorAll('.kharif-crop-group');
  if (rows.length <= 1) return; // keep at least one row

  row.remove();
  updateTotalCropIncome();
});

/* =========================================================
   FETCH PRODUCTIVITY
========================================================= */
async function fetchProductivityFromServer(cropId) {
  if (!cropId) return 0;

  try {
    const res = await fetch(`/api/get-productivity?crop_id=${encodeURIComponent(cropId)}`, {
      headers: { Accept: 'application/json' }
    });
    if (!res.ok) throw new Error('Network error');
    const json = await res.json();
    return parseFloat(json.productivity) || 0;
  } catch (err) {
    console.error('fetchProductivityFromServer error', err);
    return 0;
  }
}

/* =========================================================
   ADD / CLONE ROW
========================================================= */
let kharifIndex = document.querySelectorAll('.kharif-crop-group').length;

document.getElementById('add-kharif-btn')?.addEventListener('click', addKharifCrop);

function addKharifCrop() {
  const template = document.getElementById('kharif-0');
  if (!template) return;

  const clone = template.cloneNode(true);
  const newIndex = kharifIndex++;

  clone.id = `kharif-${newIndex}`;
  clone.dataset.rowIndex = newIndex;

  clone.querySelectorAll('[name]').forEach(el => {
    const name = el.getAttribute('name');
    if (name) el.setAttribute('name', name.replace(/\[\d+\]/, `[${newIndex}]`));

    if (el.tagName === 'SELECT') el.selectedIndex = 0;
    else el.value = '';

    delete el.dataset.userEdited;
  });

  clone.querySelectorAll('[id]').forEach(el => el.removeAttribute('id'));

  document.getElementById('kharif-container').appendChild(clone);
}

/* =========================================================
   CROP CHANGE
========================================================= */
async function onCropChange(selectEl) {
  const row = selectEl.closest('.kharif-crop-group');
  if (!row || !selectEl.value) return;

  const opt = selectEl.selectedOptions[0];
  let dbProd = parseFloat(opt?.dataset?.productivity || 0);

  if (!dbProd) dbProd = await fetchProductivityFromServer(selectEl.value);

  row.dataset.dbProd = dbProd || 0;

  const hidden = row.querySelector('[name$="[productivity_database]"]');
  if (hidden) hidden.value = dbProd ? dbProd.toFixed(2) : '';

  recalcFromArea(row);
}

/* =========================================================
   VALIDATION
========================================================= */
function validateProductionAgainstDB(row) {
  const area = parseFloat(row.querySelector('[name$="[area]"]')?.value) || 0;
  const productionEl = row.querySelector('[name$="[production]"]');
  const production = parseFloat(productionEl?.value) || 0;
  const dbProd = parseFloat(row.dataset.dbProd || 0);
  const msg = row.querySelector('.prod-check-message');

  if (!area || !production || !dbProd) {
    msg.textContent = '';
    msg.className = 'prod-check-message text-muted';
    return;
  }

  const expected = dbProd * area;

  if (production > expected) {
    msg.textContent = `⚠️ Production exceeds allowed (${expected.toFixed(2)} Qtl)`;
    msg.className = 'prod-check-message text-danger';
    productionEl.value = '';
    productionEl.focus();
  } else {
    msg.textContent = `✅ OK`;
    msg.className = 'prod-check-message text-success';
  }
}

/* =========================================================
   TOTAL NET INCOME
========================================================= */
function updateTotalCropIncome() {
  let total = 0;
  document.querySelectorAll('[name$="[net_profit]"]').forEach(el => {
    total += parseFloat(el.value) || 0;
  });
  document.getElementById('crop_income_total').value = total.toFixed(2);
}

/* =========================================================
   CALCULATIONS
========================================================= */
function recalcFromArea(row) {
  const area = parseFloat(row.querySelector('[name$="[area]"]')?.value) || 0;
  const dbProd = parseFloat(row.dataset.dbProd || 0);

  if (!area || !dbProd) return;

  const production = row.querySelector('[name$="[production]"]');
  const productivity = row.querySelector('[name$="[productivity]"]');

  if (!production.dataset.userEdited) {
    production.value = (area * dbProd).toFixed(2);
    productivity.value = dbProd.toFixed(2);
  }

  recalcIncome(row);
}

function recalcIncome(row) {
  const production = parseFloat(row.querySelector('[name$="[production]"]')?.value) || 0;
  const rate = parseFloat(row.querySelector('[name$="[market_rate]"]')?.value) || 0;
  const totalIncomeField = row.querySelector('[name$="[total_income]"]');
  const inputCost = parseFloat(row.querySelector('[name$="[input_cost]"]')?.value) || 0;
  const netProfitField = row.querySelector('[name$="[net_profit]"]');

  // calculate total income
  totalIncomeField.value = production && rate ? (production * rate).toFixed(2) : '';

  // calculate net profit
  netProfitField.value = (parseFloat(totalIncomeField.value || 0) - inputCost).toFixed(2);

  updateTotalCropIncome();
  updateAgriTotalIncome();
}

/* =========================================================
   DELEGATED INPUT HANDLER
========================================================= */
document.addEventListener('input', function (e) {
  const t = e.target;
  if (!t.name || !t.name.includes('crop_planning')) return;

  const row = t.closest('.kharif-crop-group');
  if (!row) return;

  if (t.name.endsWith('[production]')) t.dataset.userEdited = true;

  // recalc based on area/productivity
  if (t.name.endsWith('[area]') || t.name.endsWith('[productivity]')) recalcFromArea(row);

  // recalc total income & net profit if production, market_rate, or input_cost changes
  if (t.name.endsWith('[production]') || t.name.endsWith('[market_rate]') || t.name.endsWith('[input_cost]')) {
    recalcIncome(row);
  }

  clearTimeout(row._timer);
  row._timer = setTimeout(() => {
    validateProductionAgainstDB(row);
  }, 150);
});

/* =========================================================
   CHANGE HANDLER (CROP / CATEGORY)
========================================================= */
document.addEventListener('change', function (e) {
  const t = e.target;
  if (!t.name) return;

  if (t.name.includes('[crop_id]')) onCropChange(t);
  if (t.name.includes('[category_id]') && typeof fetchCrops === 'function') fetchCrops(t);
});

/* =========================================================
   DECIMAL SANITIZER
========================================================= */
function validateDecimalInput(el) {
  el.value = el.value.replace(/[^\d.]/g, '');
  const p = el.value.split('.');
  if (p.length > 2) el.value = p[0] + '.' + p.slice(1).join('');
}
</script>








<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>
        <button type="button" class="btn btn-light btn-sm" onclick="addLivestockRow()">+ Add More</button>
    </div>

    <div class="card-body" id="livestockContainer">
        <!-- Initial row -->
        <div class="row livestock-group mb-3  id="livestock-row-0">
            <div class="col-md-2 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="Nill">Nill</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>
                     <option value="Other">Other</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-center" 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-center" 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-center" oninput="calculateNet(this)" required onwheel="this.blur()">
            </div>
            <div class="col-md-2 mb-0">
                <label class="form-label">Net Income (₹)</label>
                <input type="text" name="livestock[0][net_income]" class="form-control text-center bg-light" readonly required>
            </div>
        </div>

        <!-- Total Net Income Row -->       
</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="livestocks_total_net_income" class="form-control text-center bg-light fw-bold" id="total_livestock_inc" readonly style="max-width: 150px;" required>
            
</div>
</div>




<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Trigger on input for crop planning
        document.querySelectorAll('input[name^="crop_planning"][name$="[net_profit]"]').forEach(input => {
            input.addEventListener('input', updateTotalCropIncome);
        });

        // Trigger on input for other allied sector
        document.querySelectorAll('input[name^="otheralliedsector"][name$="[net_income]"]').forEach(input => {
            input.addEventListener('input', updateTotalCropIncome);
        });

        // Trigger on input for livestock
        document.querySelectorAll('input[name^="livestock"][name$="[net_income]"]').forEach(input => {
            input.addEventListener('input', updateTotalCropIncome);
        });
    });
</script>





<script>
let livestockIndex = 1;


// === 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
    updateTotalCropIncome();
}

// === 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) {
        const productivity = production / area;
        productivityField.value = productivity.toFixed(2);


        const productivityDatabaseElement = document.getElementById('productivity_database');
const productivity_database = parseFloat(productivityDatabaseElement.value) || 0; // Replace this with your actual DB value

        if (productivity > productivity_database) {
            alert('Productivity cannot be greater than the database value');
            productionField.value = ''; // clear the production field
            productivityField.value = ''; // clear productivity field if needed
        }
    } 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="Nill">Nill</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" min="0" required onwheel="this.blur()">
        </div>
        <div class="col-md-2">
            <input type="text" name="livestock[${livestockIndex}][purpose_rearing]" class="form-control text-center" required>
        </div>
        <div class="col-md-2">
            <input type="number" step="0.01" name="livestock[${livestockIndex}][total_income]" class="form-control text-center" 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-center" 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>
        <button type="button" class="btn btn-light btn-sm" onclick="addOtherAlliedSector()">+ Add More</button>
    </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 sectorDropdown" id="sectorDropdown" 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]" id="unitField" class="form-control unitField" 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="livestocks_total_net_income" class="form-control" placeholder="e.g. 15000" style="max-width: 150px;" readonly>
        </div>
    </div>
</div>


<script>
function getUnitForSector(sector) {
    switch (sector) {
        case 'Nill': return 'N/A';
        case 'Horticulture':
        case 'Floriculture':
        case 'NTFP':
        case 'Mushroom':
        case 'Fishery': return 'Kg';
        case 'Dairy': return 'Litre';
        case 'Sericulture':
        case 'Apiculture': return 'Number';
        default: return '';
    }
}

// Attach delegated event listener
document.addEventListener('change', function (event) {
    if (event.target.classList.contains('sectorDropdown')) {
        const selected = event.target.value;
        const row = event.target.closest('[id^="otherAlliedSectorRow"]');
        const unitField = row.querySelector('.unitField');

        if (unitField) {
            unitField.value = getUnitForSector(selected);
        }
    }
});
</script>

<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="1" {{ old('has_enterprise') == '1' ? 'selected' : '' }}>Yes</option>
                    <option value="0" {{ old('has_enterprise') == '0' ? '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>
        <button type="button" class="btn btn-light btn-sm" onclick="addMicroEnterprise()">+ Add More</button>
    </div>

    <div class="card-body" id="microEnterprise">
        <div class="row align-items-end mb-1" 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="this.value=this.value.replace(/[^0-9]/g,''); updateTotalEnterpriseNetIncome();">
</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" name="micro_enterprises_total_net_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;

// Auto calculate net income + total persons employed
document.addEventListener('input', function (e) {

    // Net income calculation
    if (e.target.classList.contains('total-income') || e.target.classList.contains('annual-expenditure')) {

        const row = e.target.closest('.row');
        if (!row) return;

        const total = parseFloat(row.querySelector('.total-income')?.value) || 0;
        const exp = parseFloat(row.querySelector('.annual-expenditure')?.value) || 0;
        const netInput = row.querySelector('.net-income');

        const net = total - exp;

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

        updateTotalEnterpriseNetIncome();
    }

    // Persons employed update
    if (e.target.classList.contains('persons-employed')) {
        e.target.value = e.target.value.replace(/[^0-9]/g, '');
        updateTotalEnterpriseNetIncome();
    }
});

function updateTotalEnterpriseNetIncome() {

    let totalNetIncome = 0;
    let totalPersonsEmployed = 0;

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

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

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

    // 🔥 AUTO UPDATE THIS INPUT
    const sourcesMemberInput = document.querySelector('input[name="sources[1][member_involved]"]');
    if (sourcesMemberInput) {
        sourcesMemberInput.value = totalPersonsEmployed;
    }

    // Optional income sync
    const sourcesAnnualIncomeInput = document.getElementById('sources_annual_income_1');
    if (sourcesAnnualIncomeInput) {
        sourcesAnnualIncomeInput.value = totalNetIncome.toFixed(2);
    }
}

// Add new enterprise row
function addMicroEnterprise() {

    const container = document.getElementById('microEnterprise');
    const template = document.getElementById('microEnterpriseRow-0');
    const newRow = template.cloneNode(true);

    newRow.id = `microEnterpriseRow-${microEnterpriseIndex}`;

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

    newRow.querySelectorAll('label').forEach(label => label.remove());

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

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

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

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

// Init
window.addEventListener('DOMContentLoaded', function () {
    updateTotalEnterpriseNetIncome();
});
</script>





<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="1" {{ old('has_dailyWages') == '1' ? 'selected' : '' }}>Yes</option>
                <option value="0" {{ old('has_dailyWages') == '0' ? '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-primary text-white d-flex justify-content-between align-items-center">
        <h5 class="mb-0">Table 1.10 - Daily Wage Labor</h5>
        <button type="button" class="btn btn-light btn-sm" onclick="addDailyWageLabor()">+ Add More</button>
    </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="wages_total_income" class="form-label me-2 mb-0">Total Net Income  (₹)</label>
            <input type="text" id="wages_total_income" name="daily_wage_labors_total_net_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 === "1") {
            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="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="text" id="agri_total_income" name="sources[0][annual_income]" class="form-control" 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="text" id="sources_annual_income_1" name="sources[1][annual_income]" class="form-control" 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="text" id="total_wages_income" name="sources[2][annual_income]" class="form-control" 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="text" id="total" name="source_of_family_incomes_total_income"  class="form-control bg-light" name="total" value="0.00">
                    <!-- For display -->
                    
                </div>
            </div>
        </div>
    </div>

<div class="text-center me-3 mb-3">
    <button type="submit" class="btn btn-info">Submit</button>
    <button type="reset" class="btn btn-secondary ms-2">Reset</button>
</div>
</form>

                </div>
            </div>
        </div>
    </div>
</div>





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

        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>








<script>
let cropIndex = 1;

function addKharifCrop() {
    const firstRow = document.getElementById('kharif-0');
    const container = firstRow.parentNode;

    // Clone the first row
    const newRow = firstRow.cloneNode(true);

    // Remove any <label> elements from the cloned row
    newRow.querySelectorAll('label').forEach(label => label.remove());

    // Update the ID
    newRow.id = `kharif-${cropIndex}`;

    // Update all input/select names and clear values
    const inputs = newRow.querySelectorAll('input, select');
    inputs.forEach(input => {
        // Update the name attribute index
        const name = input.getAttribute('name');
        if (name) {
            const updatedName = name.replace(/\[\d+\]/, `[${cropIndex}]`);
            input.setAttribute('name', updatedName);
        }

        // Remove ID attribute if exists
        input.removeAttribute('id');

        // Reset values
        if (input.tagName === 'SELECT') {
            input.selectedIndex = 0;
        } else {
            input.value = '';
        }
    });

    // Add/remove column with cross button (if not already present)
    let removeCol = newRow.querySelector('.remove-col');
    if (!removeCol) {
        removeCol = document.createElement('div');
        removeCol.className = 'col-md-1 mb-0  remove-col';
        removeCol.innerHTML = `
            <button type="button" class="btn btn-sm btn-danger mt-4" onclick="removeKharifRow(this)">&times;</button>
        `;
        newRow.appendChild(removeCol);
    }

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

function removeKharifRow(button) {
    const rows = document.querySelectorAll('.kharif-crop-group');
    if (rows.length > 1) {
        const row = button.closest('.kharif-crop-group');
        if (row) {
            row.remove();
        }
    }
}

</script>

<script>
function fetchCrops(categorySelect) {
    var categoryId = categorySelect.value;
    var row = categorySelect.closest('.kharif-crop-group');
    var $row = $(row);
    var $cropSelect = $row.find('.crop');
    var $productivityInput = $row.find('.productivity');

    // clear existing
    $cropSelect.html('<option value="">Select Crop</option>');
    $productivityInput.val('');

    if (!categoryId) {
        return;
    }

    $.ajax({
        url: '/crops/' + categoryId,
        method: 'GET',
        success: function(response) {
            // response should be an array of crop objects: [{id:1, name:'Maize', productivity: 2.5}, ...]
            if (!Array.isArray(response)) {
                console.error('Unexpected response format', response);
                return;
            }

            // populate options with data-productivity
            response.forEach(function(crop) {
                // ensure productivity exists (fallback to empty string)
                var prod = (crop.productivity !== undefined && crop.productivity !== null) ? crop.productivity : '';
                var opt = $('<option>')
                    .val(crop.id)
                    .text(crop.name)
                    .attr('data-productivity', prod);

                $cropSelect.append(opt);
            });

            // OPTIONAL: If you want the first crop auto-selected and productivity filled:
            // var firstOpt = $cropSelect.find('option').eq(1);
            // if (firstOpt.length) { firstOpt.prop('selected', true).trigger('change'); }
        },
        error: function(xhr) {
            console.log(xhr.responseText);
        }
    });
}

// Use event delegation so every .crop select (even newly populated ones) triggers this once
$(document).on('change', '.crop', function() {
    var $this = $(this);
    var selectedOption = $this.find('option:selected');
    var productivity = selectedOption.attr('data-productivity') || '';

    // find productivity input in same row and set value
    var $row = $this.closest('.kharif-crop-group');
    $row.find('.productivity').val(productivity);

    // optional: show in console for debugging
    console.log('Row productivity set to:', productivity);
});
</script>
<script>
function fetchCategories(seasonSelect) {
    var seasonId = seasonSelect.value;
    var row = seasonSelect.closest('.kharif-crop-group');
    var categorySelect = row.querySelector('.category');
    var cropSelect = row.querySelector('.crop');

    if (seasonId) {
        $.ajax({
            url: '/categories/' + seasonId,
            method: 'GET',
            success: function(response) {
                // Clear old categories
                categorySelect.innerHTML = '<option value="">--Select Category--</option>';
                cropSelect.innerHTML = '<option value="">--Select Crop--</option>'; // Also clear crop

                // Add new categories
                $.each(response, function(key, category) {
                    categorySelect.innerHTML += '<option value="'+ category.id +'">'+ category.name +'</option>';
                });
            },
            error: function(xhr) {
                console.log(xhr.responseText);
            }
        });
    } else {
        // If no season selected, reset category dropdown
        categorySelect.innerHTML = '<option value="">--Select Category--</option>';
        cropSelect.innerHTML = '<option value="">--Select Crop--</option>';
    }
}

</script>


<script>
document.addEventListener('DOMContentLoaded', function () {

    function updateTotal() {
        let agri = parseFloat(document.getElementById('agri_total_income').value) || 0;
        let ent  = parseFloat(document.getElementById('enterprises_total_income').value) || 0;
        let wage = parseFloat(document.getElementById('wages_total_income').value) || 0;

        document.getElementById('total').value = (agri + ent + wage).toFixed(2);
    }

    // Check every 300ms for any change
    setInterval(updateTotal, 300);

});
</script>

<script>
    setTimeout(() => {
        const msg = document.getElementById('flash-message');
        if (msg) msg.style.display = 'none';
    }, 3000);
</script>


@endsection