@extends('layouts.main')

@section('main-container')
<div class="container-xl">

    {{-- Page Header --}}
    <div class="page-header d-print-none mb-4">
        <div class="row align-items-center">
            <div class="col">
                <h2 class="page-title">Watershed – General Information</h2>
            </div>
        </div>
    </div>

    @if(session('success'))
    <div class="alert alert-success">{{ session('success') }}</div>
        @endif

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

    <form action="{{ route('watershed.general-information.store') }}" method="POST" enctype="multipart/form-data" >
        @csrf

        {{-- Location Details --}}
        <div class="card mb-4">
    <div class="card-header bg-info text-white">
        <strong>1.1 Basic Watershed Information</strong>
    </div>

    <div class="card-body">

        <div class="row mb-3">
            <label class="col-md-4 fw-semibold">District</label>
            <div class="col-md-6">
                <select name="district_id" id="district_id" class="form-select">
                    <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 bg-light">
            <label class="col-md-4 fw-semibold">Block</label>
            <div class="col-md-6">
                <select name="block_id" id="block_id" class="form-select">
                    <option value="">Select Block</option>
                </select>
            </div>
        </div>

        <div class="row mb-3">
            <label class="col-md-4 fw-semibold">Watershed Name</label>
            <div class="col-md-6">
                <input type="text" name="watershed_name" class="form-control">
            </div>
        </div>

        <div class="row mb-3 bg-light">
            <label class="col-md-4 fw-semibold">Watershed Code</label>
            <div class="col-md-6">
                <input type="text" id="watershed_code" name="watershed_code" class="form-control">
            </div>
        </div>

        <div class="row mb-3">
            <label class="col-md-4 fw-semibold">River Basin System</label>
            <div class="col-md-6">
                <input type="text" name="river_basin_system" class="form-control">
            </div>
        </div>

        <div class="row mb-3 bg-light">
            <label class="col-md-4 fw-semibold">Agro Climatic Zone</label>
            <div class="col-md-6">
                <input type="text" name="agro_climatic_zone" class="form-control">
            </div>
        </div>

        <hr>

        <div class="row mb-3">
            <label class="col-md-4 fw-semibold">Latitude</label>
            <div class="col-md-6">
                <input type="number" step="0.0000001" name="latitude" class="form-control">
            </div>
        </div>

        <div class="row mb-3 bg-light">
            <label class="col-md-4 fw-semibold">Longitude</label>
            <div class="col-md-6">
                <input type="number" step="0.0000001" name="longitude" class="form-control">
            </div>
        </div>

        <div class="row mb-3">
            <label class="col-md-4 fw-semibold">Highest Elevation (m)</label>
            <div class="col-md-6">
                <input type="number" step="0.01" name="highest_elevation_m" class="form-control">
            </div>
        </div>

        <div class="row mb-3 bg-light">
            <label class="col-md-4 fw-semibold">Lowest Elevation (m)</label>
            <div class="col-md-6">
                <input type="number" step="0.01" name="lowest_elevation_m" class="form-control">
            </div>
        </div>

        <div class="row mb-3">
            <label class="col-md-4 fw-semibold">Height Difference (m)</label>
            <div class="col-md-6">
                <input type="number" step="0.01" name="height_difference_m" class="form-control">
            </div>
        </div>

        <div class="row mb-3 bg-light">
            <label class="col-md-4 fw-semibold">Drainage Length (m)</label>
            <div class="col-md-6">
                <input type="number" step="0.01" name="drainage_length_m" class="form-control">
            </div>
        </div>

        <div class="row mb-3">
            <label class="col-md-4 fw-semibold">Average Slope (%)</label>
            <div class="col-md-6">
                <input type="number" step="0.01" name="average_slope_percent" class="form-control">
            </div>
        </div>

    </div>
</div>







<div class="card mb-4">
    <div class="card-header bg-success-lt">
        <span class="fw-bold">1.2 Upload Map</span>
    </div>




    
    <div class="card-body">

        <div id="mapRows">

            <div class="row mb-3 align-items-center map-row">
                
                <div class="col-md-4">
                    <select name="map_type[]" class="form-select">
                        <option value="">Select Map Type</option>
                        <option value="Drainage">Drainage</option>
                        <option value="Soil">Soil</option>
                        <option value="LULC">LULC</option>
                        <option value="Other">Other</option>
                    </select>
                </div>

                <div class="col-md-6">
                    <input type="file" name="map_uploaded[]" class="form-control">
                </div>

                <div class="col-md-2">
                    <button type="button" class="btn btn-primary addRow">Add</button>
                </div>

            </div>

        </div>

    </div>
</div>

<script>
document.addEventListener("click", function(e){

    if(e.target.classList.contains("addRow")){
        let row = document.querySelector(".map-row").cloneNode(true);

        // Reset file input
        row.querySelector("input").value = "";

        // Reset dropdown
        row.querySelector("select").selectedIndex = 0;

        document.getElementById("mapRows").appendChild(row);
    }

});
</script>


{{-- ================= MICRO WATERSHED ================= --}}
<div id="microwatershed-container">

<div class="card mb-3 microwatershed-item" data-index="0">
<div class="card-header bg-primary-lt text-white d-flex justify-content-between py-2">
    <span class="fw-bold">1.3 Micro Watershed</span>
    <button type="button" class="btn btn-danger btn-sm remove-watershed">Remove</button>
</div>

<div class="card-body py-2"> {{-- reduced padding --}}

    {{-- MICRO CODE --}}
    <div class="row mb-2">
        <div class="col-md-3"> {{-- smaller width --}}
            <label class="form-label mb-1">Code</label>
            <input type="text" name="micro_watershed_code[]" 
                   class="form-control form-control-sm">
        </div>
    </div>

    {{-- ================= LOCATIONS ================= --}}
    <div class="location-container">

        <div class="location-row border p-2 mb-2" data-loc="0">

            <div class="row align-items-center">
                <div class="col-md-3">
                    <select name="panchayat_id[0][0]" 
                            class="form-select form-select-sm panchayat-dropdown">
                        <option value="">Panchayat</option>
                    </select>
                </div>

                <div class="col-md-3">
                    <select name="village_id[0][0]" 
                            class="form-select form-select-sm village-dropdown">
                        <option value="">Village</option>
                    </select>
                </div>

                <div class="col-md-3 text-end">
                    <button type="button" class="btn btn-success btn-sm add-location">+</button>
                    <button type="button" class="btn btn-danger btn-sm remove-location">-</button>
                </div>
            </div>

        </div>

    </div>

    {{-- ================= LULC ================= --}}
    <div class="lulc-block mt-3">
        <h6 class="fw-bold mb-2">Land Use (LULC)</h6>
        <div class="table-responsive">
        <table class="table table-sm table-striped table-hover align-middle">
            <thead class="table-light">
                <tr>
                    <th>Category</th>
                    <th width="120">Area</th>
                    <th width="120">%</th>
                </tr>
            </thead>
            <tbody>
                @foreach($lulcCategories as $category)
                <tr>
                    <td>
                        {{ $category->category_name }}
                        <input type="hidden" name="lulc_category_id[0][]" value="{{ $category->id }}">
                    </td>

                    <td>
                        <input type="number" step="0.01"
                               name="area[0][]"
                               class="form-control form-control-sm area-input">
                    </td>

                    <td>
                        <input type="number" step="0.01"
                               name="area_percentage[0][]"
                               class="form-control form-control-sm percent-input"
                               readonly>
                    </td>
                </tr>
                @endforeach
            </tbody>

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

</div>

<button type="button" id="add-micro" class="btn btn-success btn-sm mt-2">
    Add Micro Watershed
</button>
<script>
    let microIndex = 1;

// ================= ADD MICRO =================
$("#add-micro").click(function(){

    let clone = $(".microwatershed-item:first").clone();

    clone.attr("data-index", microIndex);

    clone.find("input").val('');
    clone.find("select").val('');

    // Reset location
    let locHtml = clone.find(".location-row:first").prop('outerHTML');
    clone.find(".location-container").html(locHtml);
    clone.find(".location-row").attr("data-loc", 0);

    // ✅ FIX LULC INDEX
    clone.find("input[name^='lulc_category_id']").each(function(){
        this.name = `lulc_category_id[${microIndex}][]`;
    });

    clone.find("input[name^='area']").each(function(){
        this.name = `area[${microIndex}][]`;
    });

    clone.find("input[name^='area_percentage']").each(function(){
        this.name = `area_percentage[${microIndex}][]`;
    });

    // update location names
    updateLocationNames(clone, microIndex, 0);

    $("#microwatershed-container").append(clone);

    microIndex++;
});


// ================= ADD LOCATION =================
$(document).on("click", ".add-location", function(){

    let microBlock = $(this).closest(".microwatershed-item");
    let microIdx = microBlock.data("index");

    let container = microBlock.find(".location-container");
    let locIndex = container.find(".location-row").length;

    let clone = container.find(".location-row:first").clone();

    clone.attr("data-loc", locIndex);
    clone.find("select").val('');

    updateLocationNames(clone, microIdx, locIndex);

    container.append(clone);
});


// ================= REMOVE LOCATION =================
$(document).on("click", ".remove-location", function(){

    let container = $(this).closest(".location-container");

    if(container.find(".location-row").length > 1){
        $(this).closest(".location-row").remove();
    }
});


// ================= REMOVE MICRO =================
$(document).on("click", ".remove-watershed", function(){

    if($(".microwatershed-item").length > 1){
        $(this).closest(".microwatershed-item").remove();
    }
});


// ================= UPDATE LOCATION NAMES =================
function updateLocationNames(block, microIdx, locIdx){

    block.find(".panchayat-dropdown").attr("name", `panchayat_id[${microIdx}][${locIdx}]`);
    block.find(".village-dropdown").attr("name", `village_id[${microIdx}][${locIdx}]`);
}


// ================= AREA % (PER MICRO) =================
$(document).on("input", ".area-input", function(){

    let block = $(this).closest(".microwatershed-item");

    let total = 0;

    block.find(".area-input").each(function(){
        let val = parseFloat($(this).val());
        if(!isNaN(val)) total += val;
    });

    block.find(".area-input").each(function(i){

        let val = parseFloat($(this).val());
        let percentField = block.find(".percent-input").eq(i);

        if(!isNaN(val) && total > 0){
            percentField.val(((val / total) * 100).toFixed(2));
        } else {
            percentField.val('');
        }
    });
});
</script>






<script>

let watershedIndex = 1;

// ✅ ADD MICRO WATERSHED
$("#add-microwatershed").click(function(){

    let clone = $(".microwatershed-item:first").clone();

    // Reset inputs
    clone.find("input").val('');
    clone.find("select").val('');

    // ✅ Reset Panchayat rows (ONLY ONE ROW)
    clone.find(".panchayat-group").html(`
        <div class="row mb-2 panchayat-row">
            <div class="col-sm-4">
                <select name="panchayat_id[${watershedIndex}][]" class="form-select form-select-sm panchayat-dropdown">
                    <option value="">Select Panchayat</option>
                </select>
            </div>

            <div class="col-sm-4">
                <select name="village_id[${watershedIndex}][]" class="form-select form-select-sm village-dropdown">
                    <option value="">Select Village</option>
                </select>
            </div>

            <div class="col-sm-2">
                <button type="button" class="btn btn-success btn-sm add-panchayat">+</button>
            </div>

            <div class="col-sm-2">
                <button type="button" class="btn btn-danger btn-sm remove-panchayat">-</button>
            </div>
        </div>
    `);

    // ✅ FIX LULC INDEX
    clone.find("input[name^='lulc_category_id']").each(function(){
        this.name = this.name.replace(/\[\d+\]/, `[${watershedIndex}]`);
    });

    clone.find("input[name^='area']").each(function(){
        this.name = this.name.replace(/\[\d+\]/, `[${watershedIndex}]`);
    });

    clone.find("input[name^='area_percentage']").each(function(){
        this.name = this.name.replace(/\[\d+\]/, `[${watershedIndex}]`);
    });

    $("#microwatershed-container").append(clone);

    watershedIndex++;
});


// ✅ ADD PANCHAYAT ROW
$(document).on("click", ".add-panchayat", function(){

    let row = $(this).closest(".panchayat-row");
    let clone = row.clone();

    clone.find("select").val('');

    row.parent().append(clone);
});

// ✅ REMOVE PANCHAYAT ROW
$(document).on("click", ".remove-panchayat", function(){

    let group = $(this).closest(".panchayat-group");

    if(group.find(".panchayat-row").length > 1){
        $(this).closest(".panchayat-row").remove();
    }
});

// ✅ REMOVE MICRO WATERSHED
$(document).on("click",".remove-watershed",function(){
    if($(".microwatershed-item").length > 1){
        $(this).closest(".microwatershed-item").remove();
    }
});

</script>


<script>
function calculateLULCAreas() {

    let treatable = 0;
    let nonTreatable = 0;

    document.querySelectorAll('.lulc-block tbody tr').forEach(row => {

        let category = row.querySelector('td:first-child').innerText.trim().toLowerCase();
        let area = parseFloat(row.querySelector('.area-input').value) || 0;

        // ✅ Treatable categories
        if (
            category.includes('irrigated agriculture') ||
            category.includes('rainfed agriculture') ||
            category.includes('fallow') ||
            category.includes('pasture') ||
            category.includes('grazing') ||
            category.includes('wasteland')
        ) {
            treatable += area;
        }

        // ❌ Non-treatable categories
        else if (
            category.includes('forest') ||
            category.includes('settlement') ||
            category.includes('water')
        ) {
            nonTreatable += area;
        }

    });

    let total = treatable + nonTreatable;

    // Set values
    document.getElementById('treatable_area').value = treatable.toFixed(2);
    document.getElementById('non_treatable_area').value = nonTreatable.toFixed(2);
    document.getElementById('total_area').value = total.toFixed(2);
}


// Trigger on input
document.addEventListener('input', function(e) {
    if (e.target.classList.contains('area-input')) {
        calculateLULCAreas();
    }
});
</script>







<div class="card mb-4 mt-2">
    <div class="card-header bg-success-lt">1.4 Area Details (in Hectare)</div>

<div class="card-body row">
    <div class="col-md-4 mb-3">
        <label class="form-label">Total Watershed Area</label>
        <input type="number" step="0.01" id="total_area" name="total_watershed_area_ha" class="form-control" readonly>
    </div>

    <div class="col-md-4 mb-3">
        <label class="form-label">Total Treatable Area</label>
        <input type="number" step="0.01" id="treatable_area" name="total_treatable_area_ha" class="form-control" readonly>
    </div>

    <div class="col-md-4 mb-3">
        <label class="form-label">Non Treatable Area</label>
        <input type="number" step="0.01" id="non_treatable_area" name="forest_uncultivable_area_ha" class="form-control" readonly>
    </div>
</div>


</div>

<div class="card mb-4">
    <div class="card-header bg-primary-lt text-white d-flex justify-content-between py-2">
        <span class="fw-bold">1.5 Rainfall Data</span>
    </div>

    <div class="card-body py-2">

        <div class="row mb-3">

            <div class="col-md-3">
                <label class="form-label">From Year</label>
                <select id="from_year" class="form-select form-select-sm">
                    <option value="">Select Year</option>
                    @for($y=2000;$y<=2035;$y++)
                        <option value="{{ $y }}">{{ $y }}</option>
                    @endfor
                </select>
            </div>

            <div class="col-md-3">
                <label class="form-label">To Year</label>
                <select id="to_year" class="form-select form-select-sm">
                    <option value="">Select Year</option>
                    @for($y=2000;$y<=2035;$y++)
                        <option value="{{ $y }}">{{ $y }}</option>
                    @endfor
                </select>
            </div>

        </div>

        {{-- Dynamic rainfall rows --}}
        <div id="rainfall-container" class="row"></div>

        <div class="row">
            <div class="col-md-6 mt-3">
                <label class="form-label">Average Last 10 Years</label>
                <input type="number"
                       name="average_rain"
                       id="averageRainfall"
                       class="form-control"
                       readonly>
            </div>

            <div class="col-md-6 mt-3">
                <label class="form-label">Data Source</label>
                <input type="text" name="data_source" class="form-control">
            </div>
        </div>

    </div>
</div>

<script>
document.getElementById('from_year').addEventListener('change', buildRainfall);
document.getElementById('to_year').addEventListener('change', buildRainfall);

function buildRainfall() {

    let from = parseInt(document.getElementById('from_year').value);
    let to = parseInt(document.getElementById('to_year').value);

    let container = document.getElementById('rainfall-container');
    container.innerHTML = '';

    if (!from || !to || to < from) return;

    for (let y = from; y <= to; y++) {

        container.innerHTML += `
        <div class="col-md-3 mb-2 text-center">
            <label class="fw-bold">${y}</label>

            <!-- ✅ Year array -->
            <input type="hidden" name="year[]" value="${y}">

            <!-- ✅ Rainfall array -->
            <input type="number"
                   name="sl_year_rainfall_mm[]"
                   class="form-control rainfall-input"
                   placeholder="mm">
        </div>`;
    }
}

// 🔥 Calculate average on input
document.addEventListener('input', function(e) {
    if (e.target.classList.contains('rainfall-input')) {
        calculateRainfall();
    }
});

function calculateRainfall() {

    let inputs = document.querySelectorAll('.rainfall-input');

    let total = 0;
    let count = 0;

    inputs.forEach(el => {
        let val = parseFloat(el.value);
        if (!isNaN(val)) {
            total += val;
            count++;
        }
    });

    let avg = count ? (total / count) : 0;

    document.getElementById('averageRainfall').value = avg.toFixed(2);
}
</script>
















<div class="card mb-4">
    <div class="card-header bg-blue-lt">
        <span class="fw-bold">1.6 Climatic Data </span>
    </div>

    <div class="card-body">

        {{-- BASIC CLIMATE --}}
        <div class="row mb-3">
    <div class="col-md-6">
        <label>Nearest Meteorological Station</label>
        <input type="text" name="climate[station]" class="form-control form-control-sm">
    </div>

    <div class="col-md-6">
        <label>Distance (km)</label>
        <input type="number" step="0.01" name="climate[distance]" class="form-control form-control-sm">
    </div>
</div>

<div class="row mb-3">
    <div class="col-md-4">
        <label>Normal Rainfall (mm)</label>
        <input type="number" step="0.01" name="climate[normal_rainfall]" class="form-control form-control-sm">
    </div>

    <div class="col-md-4">
        <label>Max Intensity (mm/hr)</label>
        <input type="number" step="0.01" name="climate[intensity]" class="form-control form-control-sm">
    </div>

    <div class="col-md-4">
        <label>Max 24hr Rainfall (mm)</label>
        <input type="number" step="0.01" name="climate[max_24hr]" class="form-control form-control-sm">
    </div>
</div>

{{-- ✅ NEW 10-YEAR DATA --}}
<div class="row mb-3">
    <div class="col-md-4">
        <label>Intensity (10-year, mm/hr)</label>
        <input type="number" step="0.01" name="climate[intensity_10yr]" class="form-control form-control-sm">
    </div>

    <div class="col-md-4">
        <label>Max 24hr Rainfall (10-year, mm)</label>
        <input type="number" step="0.01" name="climate[max_24hr_10yr]" class="form-control form-control-sm">
    </div>

    <div class="col-md-4">
        <label>Data Source</label>
        <input type="text" name="climate[data_source]" class="form-control form-control-sm">
    </div>
</div>

        {{-- TEMPERATURE TABLE --}}
        <h5 class="mt-3">Temperature (°C)</h5>

        <table class="table table-sm table-bordered" id="tempTable">
            <thead class="table-light">
                <tr>
                    <th>#</th>
                    <th>Particular</th>
                    <th>Summer</th>
                    <th>Monsoon</th>
                    <th>Winter</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td><input type="text" name="temp[particular][]" class="form-control form-control-sm"></td>
                    <td><input type="number" name="temp[summer][]" class="form-control form-control-sm"></td>
                    <td><input type="number" name="temp[monsoon][]" class="form-control form-control-sm"></td>
                    <td><input type="number" name="temp[winter][]" class="form-control form-control-sm"></td>
                    <td><button type="button" class="btn btn-danger btn-sm removeRow">-</button></td>
                </tr>
            </tbody>
        </table>

        <button type="button" class="btn btn-primary btn-sm" id="addTempRow">
            + Add Row
        </button>

<script>

document.getElementById('addTempRow').addEventListener('click', function () {

    let tbody = document.querySelector('#tempTable tbody');
    let rowCount = tbody.rows.length + 1;

    let row = document.createElement('tr');

    row.innerHTML = `
        <td class="sn">${rowCount}</td>

        <td>
            <input type="text" name="temp[particular][]" 
                   class="form-control form-control-sm">
        </td>

        <td>
            <input type="number" name="temp[summer][]" 
                   class="form-control form-control-sm">
        </td>

        <td>
            <input type="number" name="temp[monsoon][]" 
                   class="form-control form-control-sm">
        </td>

        <td>
            <input type="number" name="temp[winter][]" 
                   class="form-control form-control-sm">
        </td>

        <td class="text-center">
            <button type="button" class="btn btn-danger btn-sm removeRow">-</button>
        </td>
    `;

    tbody.appendChild(row);

});


// ================= REMOVE ROW =================
document.addEventListener('click', function (e) {

    if (e.target.classList.contains('removeRow')) {

        let tbody = document.querySelector('#tempTable tbody');

        // Prevent removing last row
        if (tbody.rows.length === 1) {
            return;
        }

        e.target.closest('tr').remove();

        // Re-index rows
        let rows = tbody.querySelectorAll('tr');

        rows.forEach((row, index) => {
            row.querySelector('.sn').innerText = index + 1;
        });
    }

});

</script>


        

        {{-- YEAR TEMP --}}
        <h5 class="mt-4">Year Wise Temperature</h5>

        <table class="table table-sm table-bordered" id="yearTempTable">
            <thead class="table-light">
                <tr>
                    <th>#</th>
                    <th>Year</th>
                    <th>Max</th>
                    <th>Min</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>
                        <select name="year_temp[year_id][]" class="form-control form-control-sm">
                            <option value="">Select</option>
                            @foreach($years as $year)
                                <option value="{{ $year->id }}">{{ $year->name }}</option>
                            @endforeach
                        </select>
                    </td>
                    <td><input type="number" name="year_temp[max][]" class="form-control form-control-sm"></td>
                    <td><input type="number" name="year_temp[min][]" class="form-control form-control-sm"></td>
                    <td><button type="button" class="btn btn-danger btn-sm removeRow">-</button></td>
                </tr>
            </tbody>
        </table>

        <button type="button" class="btn btn-primary btn-sm" id="addYearTempRow">
            + Add Row
        </button>



        <script>

document.getElementById('addYearTempRow').addEventListener('click', function () {

    let tbody = document.querySelector('#yearTempTable tbody');
    let rowCount = tbody.rows.length + 1;

    let row = document.createElement('tr');

    row.innerHTML = `
        <td class="sn">${rowCount}</td>

        <td>
            <select name="year_temp[year_id][]" 
                    class="form-control form-control-sm">
                <option value="">Select</option>
                @foreach($years as $year)
                    <option value="{{ $year->id }}">{{ $year->name }}</option>
                @endforeach
            </select>
        </td>

        <td>
            <input type="number" 
                   name="year_temp[max][]" 
                   class="form-control form-control-sm">
        </td>

        <td>
            <input type="number" 
                   name="year_temp[min][]" 
                   class="form-control form-control-sm">
        </td>

        <td class="text-center">
            <button type="button" class="btn btn-danger btn-sm removeYearRow">-</button>
        </td>
    `;

    tbody.appendChild(row);

});


// ================= REMOVE ROW =================
document.addEventListener('click', function (e) {

    if (e.target.classList.contains('removeYearRow')) {

        let tbody = document.querySelector('#yearTempTable tbody');

        // Prevent deleting last row
        if (tbody.rows.length === 1) {
            return;
        }

        e.target.closest('tr').remove();

        // Re-index S.N.
        let rows = tbody.querySelectorAll('tr');

        rows.forEach((row, index) => {
            row.querySelector('.sn').innerText = index + 1;
        });
    }

});

</script>

        {{-- HUMIDITY --}}
        <h5 class="mt-4">Monthly Humidity (%)</h5>

        <table class="table table-sm table-bordered" id="humidityTable">
            <thead class="table-light">
                <tr>
                    <th>#</th>
                    <th>Month</th>
                    <th>%</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>
                        <select name="humidity[month][]" class="form-control form-control-sm text-center">
                            <option>January</option>
                            <option>February</option>
                            <option>March</option>
                            <option>April</option>
                            <option>May</option>
                            <option>June</option>
                            <option>July</option>
                            <option>August</option>
                            <option>September</option>
                            <option>October</option>
                            <option>November</option>
                            <option>December</option>
                        </select>
                    </td>
                    <td><input type="number" name="humidity[value][]" class="form-control form-control-sm humidity-input"></td>
                    <td><button type="button" class="btn btn-danger btn-sm removeRow">-</button></td>
                </tr>
            </tbody>
        </table>

        <button type="button" class="btn btn-primary btn-sm" id="addHumidityRow">
            + Add Row
        </button>

<script>


// ================= ADD ROW =================
document.getElementById('addHumidityRow').addEventListener('click', function () {

    let tbody = document.querySelector('#humidityTable tbody');
    let rowCount = tbody.rows.length + 1;

    let row = document.createElement('tr');

    row.innerHTML = `
        <td class="sn">${rowCount}</td>

        <td>
            <select name="humidity[month][]" 
                    class="form-control form-control-sm">
                <option>January</option>
                <option>February</option>
                <option>March</option>
                <option>April</option>
                <option>May</option>
                <option>June</option>
                <option>July</option>
                <option>August</option>
                <option>September</option>
                <option>October</option>
                <option>November</option>
                <option>December</option>
            </select>
        </td>

        <td>
            <input type="number" 
                   name="humidity[value][]" 
                   class="form-control form-control-sm humidity-input">
        </td>

        <td class="text-center">
            <button type="button" class="btn btn-danger btn-sm removeHumidityRow">-</button>
        </td>
    `;

    tbody.appendChild(row);
});


// ================= REMOVE ROW =================
document.addEventListener('click', function (e) {

    if (e.target.classList.contains('removeHumidityRow')) {

        let tbody = document.querySelector('#humidityTable tbody');

        // Prevent deleting last row
        if (tbody.rows.length === 1) {
            tbody.querySelectorAll('input').forEach(input => input.value = '');
            return;
        }

        e.target.closest('tr').remove();

        // Re-index
        let rows = tbody.querySelectorAll('tr');

        rows.forEach((row, index) => {
            row.querySelector('.sn').innerText = index + 1;
        });

        calculateHumidity(); // recalc after delete
    }

});


// ================= AUTO CALCULATION =================
function calculateHumidity() {

    let inputs = document.querySelectorAll('.humidity-input');

    let values = [];

    inputs.forEach(input => {
        let val = parseFloat(input.value);
        if (!isNaN(val)) values.push(val);
    });

    if (values.length === 0) return;

    let max = Math.max(...values);
    let min = Math.min(...values);
    let avg = values.reduce((a, b) => a + b, 0) / values.length;

    // if you have fields, update them
    let maxField = document.querySelector('input[name="max_humidity_percent"]');
    let minField = document.querySelector('input[name="min_humidity_percent"]');
    let avgField = document.querySelector('input[name="avg_humidity_percent"]');

    if (maxField) maxField.value = max.toFixed(2);
    if (minField) minField.value = min.toFixed(2);
    if (avgField) avgField.value = avg.toFixed(2);
}


// ================= TRIGGER CALC =================
document.addEventListener('input', function (e) {
    if (e.target.classList.contains('humidity-input')) {
        calculateHumidity();
    }
});


</script>



    </div>
</div>














<div class="text-end mt-3">
    <button type="submit" class="btn btn-primary">
        Save Watershed Information
    </button>
</div>
        

    </form>
</div>

</div>






<script>

document.addEventListener("input", function(e){

if(e.target.classList.contains("area-input")){

let rows = document.querySelectorAll("tbody tr");

let total = 0;
let nonTreatable = 0;

rows.forEach(function(row){

let category = row.cells[0].innerText.trim().toLowerCase();
let areaInput = row.querySelector(".area-input");

let area = parseFloat(areaInput.value) || 0;

total += area;

if(category.includes("settlement") || 
   category.includes("forest") || 
   category.includes("others")){
    
    nonTreatable += area;
}

});

let treatable = total - nonTreatable;

document.getElementById("total_area").value = total.toFixed(2);
document.getElementById("non_treatable_area").value = nonTreatable.toFixed(2);
document.getElementById("treatable_area").value = treatable.toFixed(2);

}

});

</script>

<script>
$(document).ready(function () {

    function capitalize(text) {
        return text.toLowerCase().replace(/\b\w/g, l => l.toUpperCase());
    }

    // District → Block
    $('#district_id').on('change', function () {

    
        let districtId = $(this).val();
        $('#block_id').html('<option value="">Select Block</option>');
        $('#panchayat_id').html('<option value="">Select Panchayat</option>');
        $('#village_id').html('<option value="">Select Village</option>');
        $('#watershed_code').val('');

        if (!districtId) return;

        $.getJSON(`/geo/get-blocks/${districtId}`, function (data) {
            $.each(data, (_, block) => {
                $('#block_id').append(`<option value="${block.id}">${capitalize(block.name)}</option>`);
            });
        });
    });

    // Block → Panchayat
 $('#block_id').on('change', function () {

    let blockId = $(this).val();

    $('.panchayat-dropdown').html('<option value="">Select Panchayat</option>');
    $('.village-dropdown').html('<option value="">Select Village</option>');

    if (!blockId) return;

    $.getJSON(`/geo/get-panchayats/${blockId}`, function (data) {

        $('.panchayat-dropdown').each(function () {

            let dropdown = $(this);

            $.each(data, (_, panchayat) => {
                dropdown.append(`<option value="${panchayat.id}">${capitalize(panchayat.name)}</option>`);
            });

        });

    });
});

    // Panchayat → Village
    $(document).on('change', '.panchayat-dropdown', function () {

    let panchayatId = $(this).val();
    let currentRow = $(this).closest('.row'); // scope to row

    let villageDropdown = currentRow.find('.village-dropdown');

    villageDropdown.html('<option value="">Select Village</option>');

    if (!panchayatId) return;

    $.getJSON(`/geo/get-villages/${panchayatId}`, function (data) {

        $.each(data, (_, village) => {
            villageDropdown.append(`<option value="${village.id}">${capitalize(village.name)}</option>`);
        });

    });

});

    // Village → Watershed Code
    $('#village_id').on('change', function () {
        let villageId = $(this).val();
        if (!villageId) return;

        $.getJSON('/watershed/fetch-code', {
            district_id: $('#district_id').val(),
            block_id: $('#block_id').val(),
            panchayat_id: $('#panchayat_id').val(),
            village_id: villageId
        }, function (data) {
            $('#watershed_code').val(data.code ?? '');
            setMicroCodes();
        });
    });

    // Household Add/Remove
    let index = 1;

    $('#householdContainer').on('click', '.addRow', function () {
        let clone = $('.household-row:first').clone();
        clone.find('input,select').each(function () {
            this.name = this.name.replace(/\[\d+]/, `[${index}]`);
            this.value = '';
        });
        $('#householdContainer').append(clone);
        index++;
        setMicroCodes();
    });

    $('#householdContainer').on('click', '.removeRow', function () {
        if ($('.household-row').length > 1) {
            $(this).closest('.household-row').remove();
            setMicroCodes();
        }
    });

    // Micro Code generation
    function setMicroCodes() {
        let code = $('#watershed_code').val();
        if (!code) return;

        $.getJSON('/watershed/next-micro-code', { watershed_code: code }, res => {
            $('.micro-code').each((i, el) => {
                el.value = code + '-' + String(res.next + i).padStart(3, '0');
            });
        });
    }

});


$('#village_id').on('change', function () {
    let villageId = $(this).val();
    if (!villageId) return;

    $.getJSON('/watershed/fetch-code', {
        state_id: $('#state_id').val(),       // if you have a state select
        district_id: $('#district_id').val(),
        block_id: $('#block_id').val(),
        panchayat_id: $('#panchayat_id').val(),
        village_id: villageId
    }, function (data) {
        $('#watershed_code').val(data.code ?? '');
        setMicroCodes(); // optional if generating micro codes
    });
});
</script>

<script>
let watershedIndex = 1;

$("#add-microwatershed").click(function(){

let block = $(".microwatershed-item:first").clone();

block.find("input").val('');
block.find("select").val('');

$("#microwatershed-container").append(block);

watershedIndex++;

});


$(document).on("click",".add-lulc-row",function(){

let tbody = $(this).closest('.card').find('.lulc-table-body');

let row = tbody.find(".lulc-row:first").clone();

row.find("input").val('');
row.find("select").val('');

tbody.append(row);

});


$(document).on("click",".remove-row",function(){

if($(this).closest("tbody").find("tr").length > 1){
$(this).closest("tr").remove();
}

});


$(document).on("click",".remove-watershed",function(){

if($(".microwatershed-item").length > 1){
$(this).closest(".microwatershed-item").remove();
}

});
</script>


@endsection