@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-fluid">
		<div class="row g-2 align-items-center">
                <div class="col">
                    <!-- Page pre-title -->
                    <div class="page-pretitle">
            
                    </div>
                    <h2 class="page-title ms-4">
                        Add - Beneficiary 
                    </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="#" class="btn btn-1">New view</a>
	                    </span>
                        <a href="/user/reports/baseline-report" class="btn btn-primary btn-5 d-none d-sm-inline-block">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-2">
                            
                            </svg>
                            Beneficiary Report
                        </a>
                            
                    </div>

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


<!-- Page body -->
<div class="page-body">
	<div class="container-fluid">
            <div class="row row-cards">
                <div class="col-12">
                    @if (session('success'))
                        <div id="success-message" class="alert alert-success">
                            {{ session('success') }}
                        </div>    
                        <script>
                            setTimeout(function() {
                                document.getElementById('success-message').style.display = 'none';
                            }, 5000);
                        </script>
                    @endif

                    <div id="overlay" style="display:none;position:fixed;top:0; left:0;
                         width:100%; height:100%;background:rgba(0,0,0,0.5);color:white;font-size:28px;
                        text-align:center;padding-top:20%;font-weight:bold;z-index:9999;">Please wait… Saving your data
                    </div>

                        
                    <form id="myForm" action="{{ route('farmers.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="card mb-4">
                        <div class="card-header bg-info text-white">
                            <h4 class="mb-0">Table no. 1.1 - Farmer Profile </h4>
                        </div>
                        <div class="card-body">
                            <div class="row">

                            <div class="border p-3 mb-4 rounded shadow-sm bg-light">
                            
                            <div class="row mb-3">
                            <div class="col-md-3 d-flex align-items-center">
                                    <label class="form-label required">Project Name:</label>
                            </div>
                                <div class="col-md-9">
                                  <select id="project_id" name="project_id" class="form-control" required>
                                    <option value="" disabled {{ old('project_id') === null ? 'selected' : '' }}>--Select Project--</option>
                                    @foreach($projects as $project)
                                        <option value="{{ $project->id }}" {{ old('project_id') == $project->id ? 'selected' : '' }}>
                                            {{ $project->name }}
                                        </option>
                                    @endforeach
                                </select>
                                </div>
                            </div>

<script>
$('#project_id').on('change', function () {
    var projectId = $(this).val();
    if (projectId) {
        $.ajax({
            url: '/get-project-type-by-project/' + projectId,
            type: 'GET',
            success: function (response) {
                let types = response.project_types; // ✅ Fix is here
                if (types.length > 0) {
                    let options = '<option value="">--Select Project Type--</option>';
                    types.forEach(function (type) {
                        options += '<option value="' + type.id + '">' + type.name + '</option>';
                    });
                    $('#project_type_id').html(options);
                } else {
                    $('#project_type_id').html('<option value="">No Project Types found</option>');
                }
            },
            error: function () {
                $('#project_type_id').html('<option value="">Error loading types</option>');
            }
        });
    } else {
        $('#project_type_id').html('<option value="">--Select Project Type--</option>');
    }
});
</script>

                                <div class="row mb-3">
                                    <div class="col-md-3 d-flex align-items-center">
                                        <label class="form-label required mb-0">Name of TSF Operational Area/Unit:</label>
                                    </div>
                                    <div class="col-md-9">
                                        <select id="unit_id" name="unit_id" class="form-control" required>
                                            <option value="{{ Auth::user()->unit_id }}">{{ Auth::user()->unit->name }}</option>
                                        
                                            
                                            
                                        </select>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <div class="col-md-3 d-flex align-items-center">
                                        <label class="form-label required mb-0">State Name:</label>
                                    </div>
                                    <div class="col-md-9">
                                        <select id="state_id" name="state_id" class="form-control">
                                            <option value="{{ Auth::user()->state_id }}">{{ Auth::user()->state->name }}</option>

                                        </select>
                                    </div>
                                </div>
    
                                <div class="row mb-3">
                                    <div class="col-md-3 d-flex align-items-center">
                                        <label class="form-label required mb-0">Date of Survey:</label>
                                    </div>
                                    <div class="col-md-9">
                                    <input type="date" name="date_of_survey" class="form-control" placeholder="Enter Date" required>
                                    </div>
                                </div>
    
                                <div class="row mb-3">
                                    <div class="col-md-3 d-flex align-items-center">
                                    <label class="form-label required mb-0">Year of Baseline Survey:</label>
                                    </div>
                                    <div class="col-md-9">
                                        <select id="financial_year_id" name="financial_year_id" class="form-control" required>
                                            <option value="">--Financial Year--</option>
                                            @foreach($financialyears as $financialyear)
                                                <option value="{{ $financialyear->id }}">{{ $financialyear->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>


                    <div class="row mb-3">
                        <div class="col-md-3 d-flex align-items-center">
                            <label class="form-label required mb-0">District Name:</label>
                        </div>
                        <div class="col-md-9">
                          <select name="district_id" id="district_id" class="form-control" required>
                            <option value="">-- Select District --</option>
                            @foreach ($districts as $district)
                                <option value="{{ $district->id }}">{{ $district->name }}</option>
                            @endforeach
                        </select>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-3 d-flex align-items-center">
                            <label class="form-label required mb-0">Block Name:</label>
                        </div>
                        <div class="col-md-9">
                            <select name="block_id" id="block_id" class="form-control" required>
                            <option value="" disabled selected>--Select Block--</option>
                            </select>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-3 d-flex align-items-center">
                            <label class="form-label required mb-0">Panchayat Name:</label>
                        </div>
                        <div class="col-md-9">
                            <select name="panchayat_id" id="panchayat_id" class="form-control" required>
                                <option value="">--Select Panchayat--</option>
                            </select>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-3 d-flex align-items-center">
                            <label class="form-label required mb-0">Village Name:</label>
                        </div>
                        <div class="col-md-9">
                            <select name="village_id" id="village_id" class="form-control" required>
                                <option value="">--Select Village--</option>
                            </select>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-3 d-flex align-items-center">
                            <label class="form-label required mb-0">WHS(Project Type):</label>
                        </div>
                        <div class="col-md-9">                                          
                        <select id="project_type_id" name="project_type_id" class="form-control" onchange="toggleFields(); updateProjectTypeDisplay();" required>
                            <option value="">--Select Type--</option>                                
                        </select>
                        </div>
                    </div> 
                    

                    
                    <div class="row mb-3">
                        <div class="col-md-3 d-flex align-items-center">
                            <label class="form-label required mb-0">Name of Respondent</label>
                        </div>
                        <div class="col-md-9">
                        <input type="text" name="name_of_respondent" class="form-control" placeholder="Enter Respondent name"   id="respondentInput" required>
                        </div>
                    </div>

                    <div class="row mb-3">
                            <div class="col-md-3 d-flex align-items-center">
                                <label class="form-label required mb-0">Mobile number:</label>
                            </div>
                            <div class="col-md-9">
                                <input type="text" 
                                    id="mobile_number" 
                                    name="mobile_number" 
                                    class="form-control" 
                                    placeholder="Enter mobile number"
                                    maxlength="10" 
                                    pattern="\d*" 
                                    oninput="this.value = this.value.replace(/[^0-9]/g, '')" 
                                    required>
                                <small id="mobile-message" class="form-hint mt-1"></small>
                            </div>
                        </div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function() {
  const $mobile = $('#mobile_number');
  const $msg = $('#mobile-message');
  const checkUrl = "{{ url()->current() }}";

  function setMessage(text, type){
    $msg.removeClass('text-danger text-success text-warning');
    if(type) $msg.addClass('text-' + type).text(text);
    else $msg.text('');
  }

  $mobile.on('blur', function() {
    const mobile = $(this).val().trim();
    if (!/^\d{10}$/.test(mobile)) { setMessage('Please enter a valid 10-digit number.', 'warning'); return; }

    $.ajax({
      url: checkUrl,
      type: 'GET',
      data: { check_mobile: mobile },
      dataType: 'text',      // <-- IMPORTANT: treat response as plain text
      timeout: 10000
    })
    .done(function(raw) {
      console.log('RAW SERVER RESPONSE (text):', raw);
      try {
        const json = JSON.parse(raw);
        console.log('PARSED JSON:', json);
        if (json.exists) {
          setMessage('⚠️ This mobile number already exists.', 'danger');
        } else {
          setMessage('✅ New mobile number.', 'success');
        }
      } catch (e) {
        console.warn('Response is NOT valid JSON (parse failed).');
        // show the first 500 chars so you can see what's coming back
        setMessage('Unexpected server response — check console.', 'warning');
      }
    })
    .fail(function(jqXHR, textStatus, errorThrown) {
      console.error('AJAX FAIL:', jqXHR.status, textStatus, errorThrown);
      console.error('responseText:', jqXHR.responseText);
      setMessage('Error checking number. See console for details.', 'warning');
    });
  });
});
</script>



                    <div class="row mb-3">
                        <div class="col-md-3 d-flex align-items-center">
                            <label class="form-label  mb-0">Alternate Mobile Number:</label>
                        </div>
                        <div class="col-md-9">
                        <input type="text" name="alternet_mobile_number" class="form-control" placeholder="Enter mobile Number"  pattern="\d*" maxlength="10"
       oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                        </div>
                    </div>  


                   <div class="row mb-3">
                        <div class="col-md-3 d-flex align-items-center">
                            <label class="form-label required mb-0">Upload Respondent Photo:</label>
                        </div>
                        <div class="col-md-9">
                            <input type="file"  name="upload_respondent_photo" class="form-control" accept="image/*" 
                                onchange="handleImage(this, 'photoError')" />

                            <small id="photoError" class="text-danger d-none"></small>
                        </div>
                    </div>
                </div>
</div>

<script>
async function compressImage(file, maxWidth = 1280, quality = 0.7) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();

        reader.onload = (event) => {
            const img = new Image();
            img.src = event.target.result;

            img.onload = () => {
                const canvas = document.createElement("canvas");

                const scale = maxWidth / img.width;
                canvas.width = maxWidth;
                canvas.height = img.height * scale;

                const ctx = canvas.getContext("2d");
                ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

                canvas.toBlob(
                    (blob) => resolve(blob),
                    "image/jpeg",
                    quality
                );
            };

            img.onerror = () => reject("Image load error");
        };

        reader.onerror = () => reject("File read error");
        reader.readAsDataURL(file);
    });
}

async function handleImage(input, errorId) {
    const file = input.files[0];
    const errorElement = document.getElementById(errorId);

    errorElement.classList.add("d-none");

    if (!file) return;

    // Check file type
    if (!file.type.startsWith("image/")) {
        errorElement.textContent = "Please upload a valid image file.";
        errorElement.classList.remove("d-none");
        input.value = "";
        return;
    }

    // Compress the image
    const compressedBlob = await compressImage(file, 1280, 0.7);

    // Convert to File object
    const compressedFile = new File([compressedBlob], file.name, {
        type: "image/jpeg",
        lastModified: Date.now()
    });

    // Replace original file with compressed file
    const dataTransfer = new DataTransfer();
    dataTransfer.items.add(compressedFile);
    input.files = dataTransfer.files;

    const sizeMB = compressedFile.size / (1024 * 1024);

    // Final validation - must be under 4MB
    if (sizeMB > 4) {
        errorElement.textContent = "File must be under 4MB even after compression.";
        errorElement.classList.remove("d-none");
        input.value = "";
        return;
    }
}
</script>


<script>
function toggleFields() {
    const dropdown = document.getElementById('project_type_id');
    const selectedText = dropdown.options[dropdown.selectedIndex].text;

    // Hide/show bed slope and stream fields for Pond types
    const bedSlopeDiv = document.getElementById('bed_slope_div');
    const streamDiv = document.getElementById('nature_of_stream_div');

    if (selectedText === 'Farm Pond' || selectedText === 'Pond Renovation') {
        bedSlopeDiv.style.display = 'none';
        streamDiv.style.display = 'none';
        bedSlopeDivScore.style.display = 'none';
        streamDivScore.style.display = 'none';
        div_nature_stream.style.display = 'none';
        nature_of_stream_score.style.display = 'none';
        
    } else {
        bedSlopeDiv.style.display = 'block';
        streamDiv.style.display = 'block';
    }

    // Treat these types as equivalent to MCD for hiding slope-related fields
    const mcdTypes = ['MCD', 'MCD Renovation', 'Hybrid Gabion', 'Gabion'];
    const shouldHideSlopeFields = mcdTypes.includes(selectedText);

    // Toggle slope-related fields
    document.getElementById('land_slope').closest('.col-md-2').style.display = shouldHideSlopeFields ? 'none' : '';
    document.getElementById('hydrological_location').closest('.col-md-2').style.display = shouldHideSlopeFields ? 'none' : '';
    document.getElementById('distance_from_drainage_line').closest('.col-md-2').style.display = shouldHideSlopeFields ? 'none' : '';

    // Always show LULC
    document.getElementById('lulc').closest('.col-md-2').style.display = '';
}

function updateProjectTypeDisplay() {
    let selectedText = $('#project_type_id option:selected').text();
    $('#project_type_display').val(selectedText);
}
</script>
</div>


</div>

<div class="card mb-4">
    <div class="card-header bg-secondary text-white  d-flex justify-content-between align-items-center">
        <h4 class="mb-0">Table 1.2 - Family Members</h4>
        <button type="button" class="btn btn-light btn-sm" onclick="addFamilyMember()">+ Add More</button>
    </div>

    <div class="card-body" id="familyMembersContainer">
        <!-- Family members will be added here dynamically -->
    </div>
</div>

<script>
let familyIndex = 0;

function addFamilyMember() {
    const container = document.getElementById('familyMembersContainer');
    const memberId = `family-member-${familyIndex}`;
    const isFirst = familyIndex === 0;
    const extraClasses = isFirst ? '' : 'border-top pt-1 mt-1';

    const memberHTML = `
        <div id="${memberId}" class="family-member-group ${extraClasses}">
            <div class="row align-items-end">
                <div class="col-md-3 mb-0">
                    ${isFirst ? '<label class="form-label">Name</label>' : ''}
                    <input type="text" name="household[${familyIndex}][name]" class="form-control"
                     placeholder="Enter Name">
                </div>

                <div class="col-md-2 mb-0">
                    ${isFirst ? '<label class="form-label">Age</label>' : ''}
                    <input type="number" name="household[${familyIndex}][age]" class="form-control" placeholder="Age" required min="0" max="80"> 
                </div>

                <div class="col-md-2 mb-0">
                    ${isFirst ? '<label class="form-label">Gender</label>' : ''}
                    <select name="household[${familyIndex}][gender]" class="form-control" required>
                        <option value="" selected disabled>--Select Category--</option>
                        <option value="male">Male</option>
                        <option value="female">Female</option>
                    </select>
                </div>

                <div class="col-md-2 mb-0">
                    ${isFirst ? '<label class="form-label">Category</label>' : ''}
                    <select name="household[${familyIndex}][category]" class="form-control">
                        <option value="" selected disabled>--Select Category--</option>
                        <option value="SC">SC</option>
                        <option value="ST">ST</option>
                        <option value="OBC">OBC</option>
                        <option value="General">General</option>
                    </select>
                </div>

                <div class="col-md-2 mb-0">
                    ${isFirst ? '<label class="form-label">Education Level</label>' : ''}
                    <select name="household[${familyIndex}][education_level]" class="form-control">
                        <option value="" selected disabled>--Select--</option>
                        <option value="Illiterate">Illiterate</option>
                        <option value="Primary">Primary</option>
                        <option value="Matric">Matric</option>
                        <option value="Intermediate">Intermediate</option>
                        <option value="Graduate">Graduate</option>
                        <option value="Post Graduate">Post Graduate</option>
                        <option value="Technical Degree">Technical Degree</option>
                    </select>
                </div>

                <div class="col-md-1 mb-0">
                    <button type="button" class="btn btn-sm btn-danger mt-4" onclick="removeFamilyMember('${memberId}')">&times;</button>
                </div>
            </div>
        </div>
    `;

    container.insertAdjacentHTML('beforeend', memberHTML);

    // Auto-fill first household name with respondent name
    if (familyIndex === 0) {
        const respondentInput = document.querySelector('input[name="name_of_respondent"]');
        const householdNameInput = container.querySelector(`input[name="household[${familyIndex}][name]"]`);
        if (respondentInput && householdNameInput) {
            householdNameInput.value = respondentInput.value;

            // Live sync
            respondentInput.addEventListener('input', function () {
                householdNameInput.value = this.value;
            });
        }
    }

    familyIndex++;
}

function removeFamilyMember(memberId) {
    const element = document.getElementById(memberId);
    if (element) element.remove();
}

// Add the first member on page load
document.addEventListener('DOMContentLoaded', function () {
    addFamilyMember();
});
</script>



<div class="card mb-2">
  <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
    <h4 class="mb-0">Table 1.3 - Land Holding Information</h4>
    <button type="button" class="btn btn-light btn-sm" id="add-more-land">Add More</button>
  </div>

  <div id="land-details-container">
    <div class="card-body land-block border-bottom position-relative" data-index="0">
      <div class="row align-items-start">
        <div class="col-md-2 mb-1">
          <label class="form-label">Plot/Khata Number</label>
          <input type="text" name="plot_khata[0]" class="form-control" placeholder="e.g. 123" required>
        </div>

        <div class="col-md-2 mb-1">
          <label class="form-label">Type Of Land</label>
          <select name="type_of_land[0]" class="form-control" required>
            <option value="" selected disabled>Select</option>
            <option value="Agricultural Land">Agricultural Land</option>
            <option value="Cultivable Wasteland">Cultivable Wasteland</option>
            <option value="Non cultivable Wasteland">Non cultivable Wasteland</option>
          </select>
        </div>

        <div class=" mb-1" style="width:135px">
          <label class="form-label">Total Area (Acre)</label>
          <input type="text" name="area[0]" class="form-control area-input total-area"
                 placeholder="e.g. 2.0" oninput="validateDecimalInput(this)" required>
        </div>

        <div class="col-md-2 mb-1">
          <label class="form-label">Irrigated Area (Acre)</label>
          <input type="text" name="irrigated_area[0]" class="form-control area-input irrigated-area"
                 placeholder="e.g. 1.0" oninput="validateDecimalInput(this)" required>
        </div>

        <div class="col-md-2 mb-1">
          <label class="form-label">Non-Irrigated Area</label>
          <input type="text" name="non_irrigated_area[0]" class="form-control area-input non-irrigated-area"
                 placeholder="e.g. 1.0" readonly required>
        </div>

        <div class="col-md-2 mb-1">
          <label class="form-label">Source of Irrigation</label>
          <select name="source_of_irrigation[0][]" class="form-control" multiple required > 
            <option value="Pond">Pond</option>
            <option value="Canal">Canal</option>
            <option value="Well">Well</option>
            <option value="Tube well">Tube well</option>
            <option value="River">River</option>
            <option value="Borewell">Borewell</option>
            <option value="Lift Irrigation">Lift Irrigation</option>
            <option value="None">None</option>
          </select>
        </div>
      </div>
    </div>
  </div>
</div>





    <div class="row m-2">
        <div class="col-md-10 d-flex justify-content-end align-items-center">
            <label class="form-label">Total Area: (Acre)</label>
        </div>
        <div class="col-md-2">
            <input type="text" id="total-area" name="land_total_area" class="form-control form-control">
        </div>
    </div>






<!-- ✅ Script Section -->
<script>
function validateDecimalInput(el) {
  el.value = el.value.replace(/[^0-9.]/g, '');
  const parts = el.value.split('.');
  if (parts.length > 2) {
    el.value = parts[0] + '.' + parts[1];
  }
}

$(document).on('input', '.total-area, .irrigated-area', function () {
  let $row = $(this).closest('.land-block');

  let total = parseFloat($row.find('.total-area').val()) || 0;
  let irrigated = parseFloat($row.find('.irrigated-area').val()) || 0;

  if (irrigated > total) {
    alert('Irrigated Area cannot be greater than Total Area.');
    $row.find('.irrigated-area').val('');
    $row.find('.non-irrigated-area').val(total.toFixed(2));
  } else {
    let nonIrrigated = total - irrigated;
    $row.find('.non-irrigated-area').val(nonIrrigated.toFixed(2));
  }
});

document.addEventListener('DOMContentLoaded', function () {
  const addMoreBtn = document.getElementById('add-more-land');
  const container = document.getElementById('land-details-container');
  let index = container.querySelectorAll('.land-block').length;

  addMoreBtn.addEventListener('click', function () {
    const lastBlock = container.querySelector('.land-block:last-child');
    const newBlock = lastBlock.cloneNode(true);

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

    newBlock.querySelectorAll('input, select').forEach(input => {
      if (input.type === 'select-multiple') {
        [...input.options].forEach(opt => opt.selected = false);
      } else {
        input.value = '';
      }
    });

    newBlock.querySelectorAll('[name]').forEach(el => {
      const newName = el.name.replace(/\[\d+\]/, `[${index}]`);
      el.name = newName;
    });

    newBlock.setAttribute('data-index', index);

    if (!newBlock.querySelector('.remove-land-block')) {
      const removeCol = document.createElement('div');
      removeCol.className = 'col-md-0 mb-1 text-end';
      removeCol.innerHTML = `
        <button type="button" class="btn btn-sm btn-danger mt-0 remove-land-block" title="Remove">&cross;</button>
      `;
      newBlock.querySelector('.row').appendChild(removeCol);
    }

    container.appendChild(newBlock);
    index++;
  });

  container.addEventListener('click', function (e) {
    if (e.target.closest('.remove-land-block')) {
      const block = e.target.closest('.land-block');
      if (container.querySelectorAll('.land-block').length > 1) {
        block.remove();
        updateTotalArea();
      } else {
        alert('At least one block must remain.');
      }
    }
  });

  container.addEventListener('input', function () {
    updateTotalArea();
  });

  function updateTotalArea() {
    let total = 0;
    container.querySelectorAll('input[name^="area["]').forEach(input => {
      const val = parseFloat(input.value);
      if (!isNaN(val)) total += val;
    });
    document.getElementById('total-area').value = total.toFixed(2);
  }
});
</script>




<div class="card mb-4">
        <div class="card-header bg-secondary text-white d-flex justify-content-between align-items-center">
            <h4 class="mb-0">Table: 1.4 Water Harvesting Structures Planning</h4>
        </div>

        <div class="card-body row" id="planning">
            <div class="col-md-2 mb-1">
                <label class="form-label">Type of Structures</label>
                <input type="text" id="project_type_display"  class="form-control" placeholder="e.g. 1"  readonly>
            </div>

            <div class="col-md-1 mb-1">
                <label class="form-label">Length (m)</label>
                <input type="text" name="length" class="form-control" placeholder="e.g. 10.5" oninput="validateDecimalInput(this)" required>
            </div>

            <div class="col-md-1 mb-1">
                <label class="form-label">Width (m)</label>
                <input type="number" name="width" class="form-control" placeholder="e.g. 10.5"  step="any" min="0" required>
            </div>

            <div class="col-md-2 mb-1">
                <label class="form-label">Depth/Height (m)</label>
                <input type="number" name="depth" class="form-control" placeholder="e.g. 10.5"  step="any" min="0"  required>
            </div>

            <div class="col-md-2 mb-1">
                <label class="form-label">Latitude</label>
                <input type="text" name="latitude" class="form-control" placeholder="e.g. 23.4567" required
       oninput="validateLatLongInput(this)">
            </div>

            <div class="col-md-2 mb-1">
                <label class="form-label">Longitude</label>
                <input type="text" name="longitude" class="form-control" placeholder="e.g. 85.1234" required
       oninput="validateLatLongInput(this)">
            </div>

            <div class="col-md-2 mb-1">
                <label class="form-label">Geotagged Pre-Photos</label>
                <input type="file" name="geotagged" class="form-control" accept="image/*" required  onchange="handleImage(this, 'geotagError')" />
                <small id="geotagError" class="text-danger d-none"></small>    
        </div>
    </div>



<div class="card mb-2">
  <div class="card-header bg-primary-lt text-white d-flex justify-content-between align-items-center">
    <h4 class="mb-0">Upload Documents</h4>
  </div>

  <div class="card-body row">
    <div class="col-md-4 mb-1">
      <label class="form-label">Beneficiary Agreement Form</label>
      <input type="file" name="beneficiary_agreement" class="form-control pdf-file" required accept=".pdf">
    </div>

    <div class="col-md-4 mb-1">
      <label class="form-label">Add Plot/Khata Ownership Document</label>
      <input type="file" name="khata_document" class="form-control pdf-file" required accept=".pdf">
    </div>

    <div class="col-md-4 mb-1">
      <label class="form-label">Other Document</label>
      <input type="file" name="other_document" class="form-control pdf-file" required accept=".pdf">
    </div>
  </div>
</div>

<!-- Example submit button (give it the id "submitBtn") -->

<script>
(function () {
  const LIMIT = 10 * 1024 * 1024;       // 10.0 MB - absolute maximum (error)
  const RED_THRESHOLD = 9.5 * 1024 * 1024; // >9.5 MB - show red warning
  const YELLOW_THRESHOLD = 6 * 1024 * 1024; // >=6 MB - show yellow caution

  function formatMB(bytes) {
    return (bytes / (1024 * 1024)).toFixed(2) + ' MB';
  }

  function getOrCreateStatusBox(input) {
    // Keep one status box per input (immediately after input)
    let box = input.nextElementSibling;
    if (!box || !box.classList.contains('file-status')) {
      box = document.createElement('div');
      box.className = 'file-status';
      box.style.marginTop = '5px';
      box.style.fontWeight = '600';
      input.insertAdjacentElement('afterend', box);
    }
    return box;
  }

  function anyInputHasError() {
    return Array.from(document.querySelectorAll('.file-status'))
      .some(el => el.innerText.includes('❌')); // only treat ❌ as real error
  }

  function updateSubmitState() {
    const submit = document.getElementById('submitBtn');
    if (!submit) return;
    submit.disabled = anyInputHasError();
  }

  function isPdfFile(file) {
    if (!file) return false;
    if (file.type && file.type.toLowerCase().includes('pdf')) return true;
    return file.name && file.name.toLowerCase().endsWith('.pdf');
  }

  function validateSingleInput(input) {
    const box = getOrCreateStatusBox(input);
    box.innerHTML = ''; // reset
    box.style.color = ''; // reset color
    const files = input.files;
    if (!files || files.length === 0) {
      updateSubmitState();
      return;
    }

    const file = files[0];
    console.log('Selected file:', file.name, 'size bytes =', file.size, 'MB =', formatMB(file.size));

    // Always show detected size first
    let detectedText = `Detected: ${formatMB(file.size)}`;

    // Validate file type
    if (!isPdfFile(file)) {
      box.style.color = 'red';
      box.innerHTML = `❌ ${detectedText} — Invalid type. Please upload a PDF.`;
      input.value = ''; // clear
      updateSubmitState();
      return;
    }

    // If file is over absolute limit -> error
    if (file.size > LIMIT) {
      box.style.color = 'red';
      box.innerHTML = `❌ ${detectedText} — File too large. Maximum allowed: ${formatMB(LIMIT)}.`;
      alert('File is too large! Maximum allowed is 10 MB.');
      input.value = ''; // clear
      updateSubmitState();
      return;
    }

    // Size is within allowed range — show color-coded status
    if (file.size > RED_THRESHOLD) {
      // > 9.5 MB and <= 10 MB -> high-warning red (but not an error)
      box.style.color = '#b71c1c'; // deep red
      box.innerHTML = `⚠️ ${detectedText} — High size (close to limit).`;
    } else if (file.size >= YELLOW_THRESHOLD) {
      // 6 MB <= size <= 9.5 MB -> yellow caution
      box.style.color = '#ff8f00'; // amber
      box.innerHTML = `⚠️ ${detectedText} — Caution: large file.`;
    } else {
      // < 6 MB -> green OK
      box.style.color = '#2e7d32'; // green
      box.innerHTML = `✔ ${detectedText} — Good.`;
    }

    updateSubmitState();
  }

  function attachListeners() {
    document.querySelectorAll('.pdf-file').forEach(input => {
      // Remove previous if any and reattach
      if (input._validateHandler) input.removeEventListener('change', input._validateHandler);
      const handler = function () { validateSingleInput(input); };
      input.addEventListener('change', handler);
      input._validateHandler = handler;
    });
  }

  document.addEventListener('DOMContentLoaded', function () {
    attachListeners();
    // validate any prefilled inputs (if browser prefilled)
    document.querySelectorAll('.pdf-file').forEach(i => validateSingleInput(i));
  });

  // Expose if you still use inline onchange attributes
  window.validatePDFFile = function (el) { validateSingleInput(el); };
})();
</script>





<div class="card mb-4">
    <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
        <h4 class="mb-0">Table 1.5:-WHS Technical Feasibility</h4>
    </div>
    <div class="card-body row" id="tech">
      <div class="col-md-2 mb-1">
        <label class="form-label">Catchment Area (ha)</label>
        <input type="text" name="catchment_area"  id="catchment_area" class="form-control" placeholder="e.g. 10.5" oninput="validateDecimalInput(this); calculateCatchmentScore()" required> 
      </div>
      <div class="col-md-2 mb-1">
        <label for="land_slope" class="form-label">Land Slope</label>
        <select name="land_slope" id="land_slope" class="form-select" onchange="calculateLandSlopeScore()" required> 
            <option value="" disabled selected>Select Land Slope</option>
            <option value="1">1%</option>
            <option value="2">2%</option>
            <option value="3">3%</option>
            <option value="4">4%</option>
            <option value="5">5%</option>
            <option value="6">6%</option>
            <option value="7">7%</option>
        </select>
        </div>

        <div class="col-md-2 mb-1" id="bed_slope_div">
    <label for="bed_slope" class="form-label">Bed Slope</label>
    <select name="bed_slope" id="bed_slope" class="form-select" onchange="calculateBedSlopeScore()">
        <option value="" disabled selected>Select Land Slope</option>
        <option value="1">1%</option>
        <option value="2">2%</option>
        <option value="3">3%</option>
        <option value="4">4%</option>
        <option value="5">5%</option>
        <option value="6">6%</option>
        <option value="7">7%</option>
    </select>
</div>
     

        <div class="col-md-2 mb-1">
        <label for="geological_location" class="form-label">Geographical Location</label>
            <select name="geological_location" id="geological_location" class="form-select" onchange="calculateGeologicalScore()" required>
               
            <option value="" disabled selected hidden>-- Select Source Type --</option>
            <option value="Low Land">Low Land</option>
                <option value="Mid Land">Mid Land</option>
                <option value="Up Land">Up Land</option>
            </select>
        </div>



        <div class="col-md-2 mb-1" id="nature_of_stream_div">
            <label for="nature_of_stream" class="form-label">Nature of Stream</label>
                <select name="nature_of_stream" id="nature_of_stream" class="form-select" >
                <option value="" selected>Select Stream</option>
                <option value="Perennial">Perennial</option>
                <option value="Seasonal">Seasonal</option>
            </select>
        </div>



      <div class="col-md-2 mb-1">
        <label for="hydrological_location"  class="form-label">Hydrological Location</label>
        <select name="hydrological_location" id="hydrological_location" class="form-select" onchange="calculateHydrologicalScore()" required>
            
            <option value="" disabled selected hidden>-- Select --</option>
            <option value="Discharge Zone">Discharge Zone</option>
            <option value="Transition Zone">Transition Zone</option>
            <option value="Recharge Zone">Recharge Zone</option>
            </select>
        </div>

      <div class="col-md-2 mb-1">
        <label class="form-label">Dist from drainage(m)</label>
        <input type="text" name="distance_from_drainage_line" id="distance_from_drainage_line"  oninput ="validateDecimalInput(this);"
    class="form-control" placeholder="Enter distance in meters" required>   
      </div>
      <div class="col-md-2 mb-1">
        <label for="lulc" class="form-label">LULC</label>
       <select name="lulc" id="lulc" class="form-select" required>
            <option value="" disabled selected>Select Land Use / Land Cover (LULC)</option>
            
            <option value="agricultural_use">Agricultural</option>
            <option value="fallow land">Fallow land</option>
            <option value="forest land">Forest Land</option>
            <option value="barren land">Barren Land</option>
        </select>
        </div>
    </div>


    <div class="row align-items-center">
            <div class="col-auto">
                <label class="form-label mb-0"><small class="form-text text-muted">Catchment Area</small></label>
            </div>
            <div class="col-auto">
                <input type="text" id="catchment_score" name="catchment_score" value="0.00" readonly style="border: none; outline: none; background: transparent; width: 50px;">%
            </div>
            <div class="col-auto">
                <label class="form-label mb-0"><small class="form-text text-muted">Land Slope:</small></label>
            </div>
            <div class="col-auto">
                <input type="number" name="land_slope_score" id="land_slope_score" value="0.00" readonly style="border: none; outline: none; background: transparent; width: 50px;">%
            </div>
            <div class="col-auto" id="bedSlopeDivScore">
                <label class="form-label mb-0"><small class="form-text text-muted">	Bed Slope:</small></label>
            </div>
            <div class="col-auto" id="streamDivScore">
                <input type="number" name="bed_slope_score" id="bed_slope_score" value="0.00" readonly style="border: none; outline: none; background: transparent; width: 50px;">
            </div>
            <div class="col-auto">
                <label class="form-label  mb-0"><small class="form-text text-muted">Geographical </small></label>
                </div>
                <div class="col-auto">
                <input type="text"  name="geological_score" id="geological_score" class="form-control" value="0.00" readonly style="border: none; outline: none; background: transparent; width: 55px;">
            </div>
            
            <div class="col-auto" id="div_nature_stream">
                <label class="form-label mb-0"><small class="form-text text-muted">	Nature Of Stream:</small></label>
            </div>
            <div class="col-auto">
                <input type="number" name="nature_of_stream_score" id="nature_of_stream_score" value="0.00" readonly style="border: none; outline: none; background: transparent; width: 50px;">
            </div>


            
            
            <div class="col-auto" id="divHydrological">
                <label class="form-label  mb-0"><small class="form-text text-muted">Hydrological</small></label>
                </div>
                <div class="col-auto">
                <input type="text"  name="hydrological_score" id="hydrological_score" class="form-control" value="0.00" readonly style="border: none; outline: none; background: transparent; width: 55px;">
            </div>
            <div class="col-md-2">
                <small class="form-text text-muted text-center">
                Distance Drainage Line: <strong id="distance_from_drainage_line_score">-</strong>%
                </small>
            </div>
            <div class="col-auto">
                <small class="form-text text-muted">
                    LULC: <strong id="lulc_score">-</strong>%
                </small>
            </div>
            <div class="col-auto">
                <small class="form-text text-muted">
                    Total Score: 
                    <input type="text" id="total_score" name="technical_feasibility_score" 
 style="border: none; outline: none; width: 50px; font-size: 14px;">%

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



<script>
function updateTotalScoreAndColor() {
    const catchmentScore = parseFloat(document.getElementById('catchment_score').value) || 0;
    const bedSlopeScore = parseFloat(document.getElementById('land_slope_score').value) || 0;
    const geologicalScore = parseFloat(document.getElementById('geological_score').value) || 0;
    const hydrologicalScore = parseFloat(document.getElementById('hydrological_score').value) || 0;

    const drainageScoreText = document.getElementById('distance_from_drainage_line_score').innerText;
    const distancedrainage = !isNaN(parseFloat(drainageScoreText)) ? parseFloat(drainageScoreText) : 0;

    const lulcScoreText = document.getElementById('lulc_score').innerText;
    const lulcScore = !isNaN(parseFloat(lulcScoreText)) ? parseFloat(lulcScoreText) : 0;

    const totalScore = catchmentScore + bedSlopeScore + geologicalScore + hydrologicalScore + distancedrainage + lulcScore;

    const totalScoreElement = document.getElementById('total_score');
    totalScoreElement.value = totalScore.toFixed(2);

    if (totalScore < 80) {
        totalScoreElement.style.color = '#ff0000'; // brighter red
        totalScoreElement.style.fontWeight = 'bold';
        totalScoreElement.style.backgroundColor = '#ffe6e6'; // light red background
        totalScoreElement.style.padding = '2px 5px';
        totalScoreElement.style.borderRadius = '4px';
    } else {
        totalScoreElement.style.color = '#008000'; // bright green
        totalScoreElement.style.fontWeight = 'bold';
        totalScoreElement.style.backgroundColor = '#e6ffe6'; // light green background
        totalScoreElement.style.padding = '2px 5px';
        totalScoreElement.style.borderRadius = '4px';
    }
}

function calculateCatchmentScore() {
    const area = parseFloat(document.getElementById('catchment_area').value);
    let score = 0;
    if (!isNaN(area)) {
        score = (area > 3) ? 20 : (area >= 1) ? 10 : 0;
    }
    document.getElementById('catchment_score').value = score;
    updateTotalScoreAndColor();
}

function calculateLandSlopeScore() {
    const slope = parseFloat(document.getElementById('land_slope').value);
    let score = 0;
    if (!isNaN(slope)) {
        score = (slope <= 2) ? 20 : (slope <= 5) ? 10 : 0;
    }
    document.getElementById('land_slope_score').value = score;
    updateTotalScoreAndColor();
}

function calculateBedSlopeScore() {
    const slope = parseFloat(document.getElementById('bed_slope').value);
    let score = 0;
    if (!isNaN(slope)) {
        score = (slope <= 2) ? 20 : (slope <= 5) ? 10 : 0;
    }
    document.getElementById('bed_slope_score').value = score;
    updateTotalScoreAndColor();
}

function calculateGeologicalScore() {
    const location = document.getElementById('geological_location').value;
    let score = 0;
    switch (location) {
        case "Low Land": score = 15; break;
        case "Mid Land": score = 7.5; break;
        case "Up Land": score = 0; break;
        default: score = 0;
    }
    document.getElementById('geological_score').value = score;
    updateTotalScoreAndColor();
}

function calculateHydrologicalScore() {
    const location = document.getElementById('hydrological_location').value;
    let score = 0;
    switch (location) {
        case "Discharge Zone": score = 15; break;
        case "Transition Zone": score = 7.5; break;
        case "Recharge Zone": score = 0; break;
        default: score = 0;
    }
    document.getElementById('hydrological_score').value = score;
    updateTotalScoreAndColor();
}

document.getElementById('distance_from_drainage_line').addEventListener('input', function () {
    const distance = parseFloat(this.value);
    let score = '-';
    if (!isNaN(distance)) {
        score = (distance < 300) ? 15 : (distance <= 1000) ? 7.5 : 0;
    }
    document.getElementById('distance_from_drainage_line_score').innerText = score;
    updateTotalScoreAndColor();
});

document.getElementById('lulc').addEventListener('change', function () {
    const value = this.value;
    let score = '-';
    if (value === 'agricultural_use') {
        score = 15;
    } else if (value === 'fallow land') {
        score = 0;
    } else if (value === 'forest land') {
        score = 0;
    }
    else if (value === 'barren land') {
        score = 0;
    }

    document.getElementById('lulc_score').innerText = score;
    updateTotalScoreAndColor();
});
</script>









<!-- Water User Group -->
<div class="card mb-2">
  <div class="card-header bg-secondary text-white d-flex justify-content-between align-items-center">
    <h4 class="mb-0">Table 1.6 - Water User Group</h4>
    <button type="button" class="btn btn-light btn-sm" onclick="addUserGroup()">+ Add More</button>
  </div>

  <div class="card-body" id="userGroupContainer">
    <!-- initial row index 0 -->
    <div class="row user-group align-items-end" id="user-group-0">
      <div class="col-md-2 mb-1">
        <label class="form-label">Name of Beneficiary</label>
        <input type="text" name="water_user_groups[0][name_of_beneficiary]" 
               class="form-control beneficiary-input" id="beneficiaryInput"
               oninput="this.value = this.value.replace(/[^A-Za-z\s]/g, '')" required>
      </div>

      <div class="col-md-2 mb-1">
        <label class="form-label">Category</label>
        <select name="water_user_groups[0][category]" class="form-control" required> 
          <option value="" disabled selected>--Select Category--</option>
          <option value="SC">SC</option>
          <option value="ST">ST</option>
          <option value="OBC">OBC</option>
          <option value="General">General</option>
        </select>
      </div>

      <div class="col-md-2 mb-1">
        <label class="form-label">Plot/Khata No.</label>
        <input type="text" name="water_user_groups[0][plot_khata_no]" class="form-control">
      </div>

      <div class="col-md-2 mb-1">
        <label class="form-label">Land Area (Acre)</label>
        <input type="number" step="0.01" name="water_user_groups[0][land_comment]" 
               class="form-control land-input" placeholder="Land (Acre)" required>
      </div>

      <div class="col-md-2 mb-1">
        <label class="form-label">Farmer Type</label>
        <input type="text" name="water_user_groups[0][farmer_type]" 
               class="form-control farmer-type-input" readonly placeholder="Farmer Type">
      </div>

      <div class="col-md-2 mb-1">
        <label class="form-label">Potential Irrigation (Acre)</label>
        <input type="number" step="0.01" name="water_user_groups[0][potential_irrigation]" 
               class="form-control irrigation-input" placeholder="Potential (Acre)" required>
      </div>
    </div>
  </div>

  <div class="row m-2">
    <div class="col-md-8 d-flex justify-content-end align-items-center"></div>
    <div class="col-md-2">
      <input type="hidden" id="total_wug_member" name="total_wug_member" value="1" class="form-control" readonly>
    </div>

    <div class="col-md-9 d-flex justify-content-end align-items-center">
      <label class="form-label">Total Land (Acre)</label>
    </div>
    <div class="col-md-2">
      <input type="text" id="water_user_land_total" name="water_user_groups_total_land" class="form-control" readonly>
    </div>
  </div>
</div>

<script>
/* --- State --- */
let userGroupIndex = 1; // next index (0 exists already)

/* --- Utility: update WUG count --- */
function updateWugCount() {
  document.getElementById('total_wug_member').value = document.querySelectorAll('.user-group').length;
}

/* --- Update total land --- */
function updateLandTotal() {
  const inputs = document.querySelectorAll('.land-input');
  let total = 0;
  inputs.forEach(input => {
    const value = parseFloat(input.value);
    if (!isNaN(value)) total += value;
  });
  document.getElementById('water_user_land_total').value = total.toFixed(2);
}

/* --- Compute farmer type from land value --- */
function computeFarmerTypeFromLand(landVal) {
  if (landVal === null || isNaN(landVal) || landVal === '') return '';
  const v = parseFloat(landVal);
  if (v > 0 && v <= 2.5) return "Marginal Farmer";
  if (v > 2.5 && v <= 5) return "Small Farmer";
  if (v > 5 && v <= 10) return "Medium Farmer";
  if (v > 10) return "Big Farmer";
  return "";
}

/* --- Validation and farmer-type writer (runs per-row) --- */
function validateComparison(input) {
  // find index from name (works for land or potential)
  const name = input.name || '';
  const match = name.match(/water_user_groups\[(\d+)\]/);
  if (!match) return;
  const i = match[1];

  const land = document.querySelector('[name="water_user_groups[' + i + '][land_comment]"]');
  const irr  = document.querySelector('[name="water_user_groups[' + i + '][potential_irrigation]"]');
  const farmerTypeField = document.querySelector('[name="water_user_groups[' + i + '][farmer_type]"]');

  // If land or irr are missing (shouldn't), exit
  if (!land || !irr || !farmerTypeField) return;

  const landVal = land.value === '' ? null : parseFloat(land.value);
  const irrVal  = irr.value === '' ? null : parseFloat(irr.value);

  // Reset validity
  land.setCustomValidity('');
  irr.setCustomValidity('');

  // If both set and potential > land => clear potential and warn
  if (landVal !== null && irrVal !== null && irrVal > landVal) {
    irr.value = '';
    irr.setCustomValidity('Potential Irrigation cannot be greater than Land Area.');
    irr.reportValidity();
  }

  // Optional strict rule (enforce land > potential). If you want to allow equal, remove this block:
  if (landVal !== null && irrVal !== null && !(landVal >= irrVal)) {
    const msg = 'Land Area (Acre) must be greater than Potential Irrigation (Acre).';
    land.setCustomValidity(msg);
    irr.setCustomValidity(msg);
    land.reportValidity();
    irr.reportValidity();
  }

  // Compute and write farmer type
  const farmerType = computeFarmerTypeFromLand(landVal);
  farmerTypeField.value = farmerType;
}

/* --- Event delegation for inputs inside container --- */
document.getElementById('userGroupContainer').addEventListener('input', function (e) {
  const el = e.target;
  if (!el) return;

  // If land or potential changed -> validateComparison for that row and update totals
  if (el.name && /\bwater_user_groups\[\d+\]\[(land_comment|potential_irrigation)\]/.test(el.name)) {
    validateComparison(el);
    // Always recalc total land when land-input changes
    if (el.classList.contains('land-input')) updateLandTotal();
  }

  // Keep beneficiary sanitized (if user edits)
  if (el.classList.contains('beneficiary-input')) {
    el.value = el.value.replace(/[^A-Za-z\s]/g, '');
  }
});

/* --- Add new user group row --- */
function addUserGroup() {
  const container = document.getElementById("userGroupContainer");

  const newRow = document.createElement('div');
  newRow.classList.add('row', 'user-group', 'mt-2', 'align-items-end');
  newRow.id = `user-group-${userGroupIndex}`;

  newRow.innerHTML = `
    <div class="col-md-2 mb-1">
      <input type="text" name="water_user_groups[${userGroupIndex}][name_of_beneficiary]" 
             class="form-control beneficiary-input" placeholder="Name" required>
    </div>

    <div class="col-md-2 mb-1">
      <select name="water_user_groups[${userGroupIndex}][category]" class="form-control" required>
        <option value="">--Select Category--</option>
        <option value="SC">SC</option>
        <option value="ST">ST</option>
        <option value="OBC">OBC</option>
        <option value="General">General</option>
      </select>
    </div>

    <div class="col-md-2 mb-1">
      <input type="text" name="water_user_groups[${userGroupIndex}][plot_khata_no]" 
             class="form-control" placeholder="Plot/Khata No.">
    </div>

    <div class="col-md-2 mb-1">
      <input type="number" step="0.01" name="water_user_groups[${userGroupIndex}][land_comment]" 
             class="form-control land-input" placeholder="Land (Acre)">
    </div>

    <div class="col-md-2 mb-1">
      <input type="text" name="water_user_groups[${userGroupIndex}][farmer_type]" 
             class="form-control farmer-type-input" readonly placeholder="Farmer Type">
    </div>

    <div class="col-md-1 mb-1">
      <input type="number" step="0.01" name="water_user_groups[${userGroupIndex}][potential_irrigation]" 
             class="form-control irrigation-input" placeholder="Potential (Acre)">
    </div>

    <div class="col-md-1 mb-1">
      <button type="button" class="btn btn-sm btn-danger remove-user-group">&times;</button>
    </div>
  `;

  container.appendChild(newRow);
  userGroupIndex++;

  // update totals and count
  updateLandTotal();
  updateWugCount();
}

/* --- Remove row handler (event delegation) --- */
document.getElementById("userGroupContainer").addEventListener('click', function(e) {
  if (e.target.classList.contains('remove-user-group')) {
    const row = e.target.closest('.user-group');
    if (!row) return;
    if (document.querySelectorAll('.user-group').length > 1) {
      row.remove();
      updateLandTotal();
      updateWugCount();
    } else {
      alert("At least one row must remain.");
    }
  }
});

/* --- Optional: copy respondent -> beneficiary if respondentInput exists --- */
const respondentInput = document.getElementById('respondentInput'); // may be elsewhere on your form
// beneficiaryInput is per-row; to support initial behavior (if you want the first beneficiary to mirror respondent)
if (respondentInput) {
  respondentInput.addEventListener('input', function () {
    const firstBenef = document.querySelector('.beneficiary-input');
    if (firstBenef) firstBenef.value = this.value.replace(/[^A-Za-z\s]/g, '');
  });
}

/* --- Initial: run once to set totals & counts --- */
document.addEventListener('DOMContentLoaded', function() {
  updateLandTotal();
  updateWugCount();
});
</script>


<div class="card-footer text-center">
    <!-- Submit Button -->
    <button type="submit" class="btn btn-primary" id="submitBtn">
        <i class="ti ti-device-floppy"></i> Submit
    </button>

    <!-- Reset Button -->
    <button type="reset" class="btn btn-secondary ms-2">
        <i class="ti ti-refresh"></i> Reset
    </button>
</div>

</div>

</form>

</div>

</div>




{{-- JS to calculate total --}}
<script>
    function sanitizeValue(id) {
        const val = parseFloat(document.getElementById(id).value.replace(/,/g, ''));
        return isNaN(val) || val < 0 ? 0 : val;
    }

    function calculateTotalIncome() {
        const val1 = sanitizeValue('agri_total_income');
        const val2 = sanitizeValue('sources_annual_income_1');
        const val3 = sanitizeValue('total_wages_income');

        const total = val1 + val2 + val3;

        // Raw value to backend
        document.getElementById('total').value = total.toFixed(2);

        // Pretty format to user
        document.getElementById('total').value = total.toLocaleString('en-IN', {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        });
    }

    // Recalculate on input
    ['agri_total_income', 'sources_annual_income_1', 'total_wages_income'].forEach(id => {
        document.getElementById(id).addEventListener('input', calculateTotalIncome);
    });

    // Watch for script changes
    let lastValues = { agri: '', source1: '', wages: '' };
    setInterval(() => {
        const agriVal = document.getElementById('agri_total_income').value;
        const source1Val = document.getElementById('sources_annual_income_1').value;
        const wagesVal = document.getElementById('total_wages_income').value;

        if (agriVal !== lastValues.agri || source1Val !== lastValues.source1 || wagesVal !== lastValues.wages) {
            lastValues = { agri: agriVal, source1: source1Val, wages: wagesVal };
            calculateTotalIncome();
        }
    }, 300);

    // Initial calculation
    window.addEventListener('DOMContentLoaded', calculateTotalIncome);
</script>

<script>
    function updateDailyWageTotals() {
    let totalIncome = 0;
    let totalMembers = 0;
    let 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;
    });

    // Update sources[2] summary fields
    const incomeInput = document.getElementById("total_wages_income");
    const memberInput = document.getElementById("sources_member_involved_2");
    const daysInput = document.getElementById("total_working_days");

    if (incomeInput) incomeInput.value = totalIncome.toFixed(2);
    if (memberInput) memberInput.value = totalMembers;
    if (daysInput) daysInput.value = totalDays;
}

</script>






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

        $('#state_id').empty().append('<option value="">Loading...</option>');

        if (unitId) {
            $.ajax({
                url: '/get-states/' + unitId,
                type: 'GET',
                success: function (states) {
                    $('#state_id').empty().append('<option value="">Select State</option>');
                    $.each(states, function (key, state) {
                        $('#state_id').append('<option value="' + state.id + '">' + state.name + '</option>');
                    });
                }
            });
        } else {
            $('#stateId').empty().append('<option value="">Select State</option>');
        }
    });
</script>

<script>
    $(document).ready(function() {
        $('#state_id').change(function() {
            var stateId = $(this).val();
            
            if (stateId) {
                $.ajax({
                    url: '/geo/get-districts/' + stateId,
                    type: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        $('#district_id').empty().append('<option value="">--Select District--</option>');
                        $.each(data, function(key, district) {
                            $('#district_id').append('<option value="'+ district.id +'">'+ district.name +'</option>');
                        });
                    },
                    error: function(xhr, status, error) {
                        console.log("AJAX Error:", error);
                    }
                });
            } else {
                $('#district_id').empty().append('<option value="">--Select District--</option>');
            }
        });
    });
</script>

<script>
    $(document).ready(function() {
        $('#district_id').change(function() {
            var districtId = $(this).val();

            if (districtId) {
                $.ajax({
                    url: '/geo/get-blocks/' + districtId,
                    type: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        $('#block_id').empty().append('<option value="">--Select Block--</option>');
                        
                        $.each(data, function(key, block) {
                            // Capitalize first letter of each word
                            var formattedName = block.name
                                .toLowerCase()
                                .split(' ')
                                .map(function(word) {
                                    return word.charAt(0).toUpperCase() + word.slice(1);
                                })
                                .join(' ');

                            $('#block_id').append('<option value="' + block.id + '">' + formattedName + '</option>');
                        });
                    },
                    error: function(xhr, status, error) {
                        console.error("AJAX Error:", error);
                        alert("Failed to fetch blocks. Please try again.");
                    }
                });
            } else {
                $('#block_id').empty().append('<option value="">--Select Block--</option>');
            }
        });
    });
</script>


<script>
    $(document).ready(function() {
        $('#block_id').change(function() {
            var blockId = $(this).val();
            
            if (blockId) {
                $.ajax({
                    url: '/geo/get-panchayats/' + blockId,
                    type: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        $('#panchayat_id').empty().append('<option value="">--Select Panchayat--</option>');
                        
                        $.each(data, function(key, panchayat) {
                            // Convert name: first letter uppercase, rest lowercase
                            var formattedName = panchayat.name.charAt(0).toUpperCase() + panchayat.name.slice(1).toLowerCase();

                            $('#panchayat_id').append(
                                $('<option>', {
                                    value: panchayat.id,
                                    text: formattedName
                                })
                            );
                        });
                    },
                    error: function(xhr, status, error) {
                        console.error("AJAX Error:", error);
                        alert("Failed to fetch Panchayats. Please try again.");
                    }
                });
            } else {
                $('#panchayat_id').empty().append('<option value="">--Select Panchayat--</option>');
            }
        });
    });
</script>

<script>
    $(document).ready(function() {
        $('#panchayat_id').on('change', function() {
            var panchayatId = $(this).val();

            if (panchayatId) {
                $.ajax({
                    url: '/geo/get-villages/' + panchayatId, // ensure this route is set
                    type: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        $('#village_id').empty().append('<option value="">--Select Village--</option>');
                        
                        $.each(data, function(index, village) {
                            // Convert first letter to uppercase and rest lowercase
                            var formattedName = village.name.charAt(0).toUpperCase() + village.name.slice(1).toLowerCase();

                            $('#village_id').append(
                                $('<option>', {
                                    value: village.id,
                                    text: formattedName
                                })
                            );
                        });
                    },
                    error: function(xhr) {
                        alert("Something went wrong while fetching villages.");
                        console.error(xhr.responseText);
                    }
                });
            } else {
                $('#village_id').empty().append('<option value="">--Select Village--</option>');
            }
        });
    });
</script>












<script>
function calculateTotalArea() {
  let total = 0;
  document.querySelectorAll('.area-input').forEach(input => {
    const val = parseFloat(input.value);
    if (!isNaN(val)) {
      total += val;
    }
  });
  document.getElementById('total-area').value = total.toFixed(2); // Set input value instead of textContent
}

// When area input changes, recalculate total
document.getElementById('land-details-container').addEventListener('input', function (e) {
  if (e.target.classList.contains('area-input')) {
    calculateTotalArea();
  }
});

// When Add More is clicked, wait for block to be added, then recalculate
addMoreBtn.addEventListener('click', function () {
  setTimeout(calculateTotalArea, 50); // Give time for DOM to update
});
</script>






<script>
function validateDecimalInput(el) {
    // Remove all except digits and dot
    el.value = el.value
        .replace(/[^0-9.]/g, '')           // allow only numbers and dot
        .replace(/(\..*)\./g, '$1');       // allow only one dot

    // Allow max 2 decimal places
    if (el.value.indexOf('.') >= 0) {
        el.value = el.value.substring(0, el.value.indexOf('.') + 3);
    }
}
</script>

<script>
function validateLatLongInput(el) {
    el.value = el.value
        .replace(/[^0-9.\-]/g, '')    // only digits, dot, dash allowed
        .replace(/(?!^)-/g, '')       // dash only allowed at first character
        .replace(/(\..*)\./g, '$1');  // only one dot allowed

    // Optional: limit to 6 decimal places (change +7 to +5 if you want 4 decimal places)
    if (el.value.indexOf('.') >= 0) {
        el.value = el.value.substring(0, el.value.indexOf('.') + 7);
    }
}
</script>

<script>
function validatePDFFile(input) {
    const file = input.files[0];
    if (file) {
        const fileType = file.type;
        const fileName = file.name;
        const validTypes = ['application/pdf'];
        const validExtension = /\.pdf$/i;

        if (!validTypes.includes(fileType) || !validExtension.test(fileName)) {
            alert('Please select a valid PDF file.');
            input.value = ''; // reset file input
        }
    }
}
</script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        const form = document.getElementById("myForm"); // change to your form id

        if (form) {
            form.addEventListener("submit", function () {
                document.getElementById("overlay").style.display = "block";
            });
        }
    });
</script>


@endsection