@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">
                        Beneficiary Edit 
                    </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">
                        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">
                {{-- Success Message --}}
                @if (session('success'))
                    <div id="success-message" class="alert alert-success">
                        {{ session('success') }}
                    </div>
                    <script>
                        setTimeout(() => {
                            document.getElementById('success-message')?.remove();
                        }, 5000);
                    </script>
                @endif

    
               @if($baseline->admin_comments)
                    <div id="status-message" class="alert alert-danger alert-dismissible fade show" role="alert">
                        <strong>{{ ucfirst($baseline->status) }}:</strong> {{ $baseline->admin_comments }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif
                {{-- Edit Form --}}
                <form method="POST" action="{{ route('baseline.update', $baseline->id) }}" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <div class="card mb-4">
                    <div class="card-header bg-info text-white">
                        <h5 class="mb-0">Table no. 1.1 - Farmer Profile </h5>
                    </div>
                    <div class="card-body">
                    <div class="row">
                        <div class="col-9">
                            <div class="border p-3 mb-4 rounded shadow-sm bg-light">
            <!-- Project Name -->
                            <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>--Select Project--</option>
                                @foreach($projects as $project)
                                    <option value="{{ $project->id }}" 
                                    {{ old('project_id', $baseline->project_id) == $project->id ? 'selected' : '' }}>
                                    {{ $project->name }}
                                    </option>
                                @endforeach
                            </select>
                </div>
            </div>

            <!-- Unit -->
            <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="{{ $baseline->unit_id }}">{{ $baseline->unit->name ?? '' }}</option>
                    </select>
                </div>
            </div>

            <!-- State -->
            <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="{{ $baseline->state_id }}">{{ $baseline->state->name ?? '' }}</option>
                    </select>
                </div>
            </div>

            <!-- Date of Survey -->
            <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"
                        value="{{ old('date_of_survey', $baseline->date_of_survey) }}" required>
                </div>
            </div>

            <!-- Financial Year -->
            <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>
                        @foreach($financialyears as $financialyear)
                            <option value="{{ $financialyear->id }}" 
                                {{ old('financial_year_id', $baseline->financial_year_id) == $financialyear->id ? 'selected' : '' }}>
                                {{ $financialyear->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>

            <!-- District -->
            <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="{{ $baseline->district_id }}">{{ $baseline->district->name ?? '' }}</option>
                    </select>
                </div>
            </div>

            <!-- Block -->
            <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>
                        @foreach($blocks as $block)
                            <option value="{{ $block->id }}" 
                                {{ old('block_id', $baseline->block_id) == $block->id ? 'selected' : '' }}>
                                {{ $block->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>

            <!-- Panchayat -->
            <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="{{ $baseline->panchayat_id }}">{{ $baseline->panchayat->name ?? '' }}</option>
                    </select>
                </div>
            </div>

            <!-- Village -->
            <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="{{ $baseline->village_id }}">{{ $baseline->village->name ?? '' }}</option>
                    </select>
                </div>
            </div>

            <!-- Project Type -->
            <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" required>
                        <option value="">--Select Type--</option>
                        @foreach($project_types as $type)
                            <option value="{{ $type->id }}" 
                                {{ old('project_type_id', $baseline->project_type_id) == $type->id ? 'selected' : '' }}>
                                {{ $type->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>

            <!-- Name of Respondent -->
            <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" value="{{ old('name_of_respondent', $baseline->name_of_respondent) }}" required>
                </div>
            </div>

            <!-- Mobile number -->
            <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" name="mobile_number" class="form-control"
                        placeholder="Enter mobile Number" pattern="\d*" maxlength="10"
                        oninput="this.value = this.value.replace(/[^0-9]/g, '')"
                        value="{{ old('mobile_number', $baseline->mobile_number) }}" required>
                </div>
            </div>

            <!-- Alternate Mobile number -->
            <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 alternate mobile Number" pattern="\d*" maxlength="10"
                        oninput="this.value = this.value.replace(/[^0-9]/g, '')"
                        value="{{ old('alternet_mobile_number', $baseline->alternet_mobile_number) }}">
                </div>
            </div>

        </div>

    </div> <!-- End col-9 -->


    <!-- RIGHT SIDE PHOTO PREVIEW (col-3) -->
    <div class="col-3 text-center">

        

        <input type="file" name="upload_respondent_photo"
            class="form-control mb-3" accept=".jpg,.jpeg,.png">
        @if($baseline->upload_respondent_photo)
             <img src="{{ asset('storage/' . $baseline->upload_respondent_photo) }}"
                alt="Respondent Photo" class="img-thumbnail border border-primary"
                    style="width: 180px; height: 220px; object-fit: cover; border-radius: 8px;">
                        
        @else
            <img src="{{ asset('default_user.png') }}"
                class="img-fluid rounded border"
                style="max-height: 250px; object-fit: cover;">
        @endif

        <small id="photoError" class="text-danger d-none">
            Only JPG/PNG files under 5MB are allowed.
        </small>
        <label class="form-label fw-bold mt-2">Respondent Photo</label>
    </div> <!-- End col-3 -->

</div> <!-- End row -->

    </div>
</div>
<script>
function validateImageSize(input, errorId) {
    const file = input.files[0];
    const errorElement = document.getElementById(errorId);
    
    // Hide error by default
    errorElement.classList.add('d-none');

    if (file) {
        const fileSizeMB = file.size / (1024 * 1024); // Convert bytes to MB
        const allowedTypes = ['image/jpeg', 'image/png', 'image/jpg'];

        if (fileSizeMB > 5 || !allowedTypes.includes(file.type)) {
            // Show error message and clear the input
            errorElement.classList.remove('d-none');
            input.value = '';
        }
    }
}
</script>



<div class="card mb-3 shadow-sm">
    <div class="card-header bg-info text-white d-flex justify-content-between align-items-center py-2">
        <h6 class="mb-0 fw-semibold">Table 1.2 – Family Members</h6>

        <button type="button"
                class="btn btn-light btn-sm"
                onclick="addFamilyMember()">
            <i class="bi bi-plus-circle me-1"></i> Add More
        </button>
    </div>

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

        <!-- Header Row -->
        <div class="row g-2 text-center fw-semibold small border-bottom pb-1 mb-2">
            <div class="col-md-3">Name</div>
            <div class="col-md-2">Age</div>
            <div class="col-md-2">Gender</div>
            <div class="col-md-2">Category</div>
            <div class="col-md-2">Education Level</div>
            <div class="col-md-1">Action</div>
        </div>

        <!-- Rows -->
        <div id="familyMembersContainer"></div>

    </div>
</div>

<script>
let familyIndex = 0;
const existingHouseholds = @json($baseline->households ?? []);

function addFamilyMember(member = {}) {
    const container = document.getElementById('familyMembersContainer');
    const memberId = `family-member-${familyIndex}`;

    // destructure with SAFE defaults
    const {
        name = '',
        age = '',
        gender = '',
        category = '',
        education_level = ''
    } = member;

    const memberHTML = `
        <div id="${memberId}" class="border-bottom pb-2 mb-2 position-relative">
            <div class="row g-2 align-items-start">

                <div class="col-md-3">
                    <input type="text"
                           name="household[${familyIndex}][name]"
                           class="form-control form-control-sm text-center"
                           value="${name}"
                           placeholder="Enter Name"
                           required>
                </div>

                <div class="col-md-2">
                    <input type="number"
                           name="household[${familyIndex}][age]"
                           class="form-control form-control-sm text-center"
                           value="${age}"
                           min="0" max="80"
                           placeholder="Age">
                </div>

                <div class="col-md-2">
                    <select name="household[${familyIndex}][gender]"
                            class="form-select form-select-sm text-center"
                            required>
                        <option value="" selected>Select</option>
                        <option value="male" ${gender === 'male' ? 'selected' : ''}>Male</option>
                        <option value="female" ${gender === 'female' ? 'selected' : ''}>Female</option>
                    </select>
                </div>

                <div class="col-md-2">
                    <select name="household[${familyIndex}][category]"
                            class="form-select form-select-sm text-center">
                        <option value="" selected>Select</option>
                        <option value="SC" ${category === 'SC' ? 'selected' : ''}>SC</option>
                        <option value="ST" ${category === 'ST' ? 'selected' : ''}>ST</option>
                        <option value="OBC" ${category === 'OBC' ? 'selected' : ''}>OBC</option>
                        <option value="General" ${category === 'General' ? 'selected' : ''}>General</option>
                    </select>
                </div>

                <div class="col-md-2">
                    <select name="household[${familyIndex}][education_level]"
                            class="form-select form-select-sm text-center">
                        <option value="" selected>Select</option>
                        ${['Illiterate','Primary','Matric','Intermediate','Graduate','Post Graduate','Technical Degree']
                            .map(level =>
                                `<option value="${level}" ${education_level === level ? 'selected' : ''}>${level}</option>`
                            ).join('')}
                    </select>
                </div>

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

            </div>
        </div>
    `;

    container.insertAdjacentHTML('beforeend', memberHTML);

    // Auto-fill ONLY first member name from respondent
    if (familyIndex === 0 && !name) {
        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;
            respondentInput.addEventListener('input', () => {
                householdNameInput.value = respondentInput.value;
            });
        }
    }

    familyIndex++;
}

function removeFamilyMember(memberId) {
    document.getElementById(memberId)?.remove();
}

document.addEventListener('DOMContentLoaded', () => {
    if (existingHouseholds.length > 0) {
        existingHouseholds.forEach(member => addFamilyMember(member));
    } else {
        addFamilyMember();
    }
});
</script>





@php $landIndex = 0; @endphp


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

    <div id="land-details-container">

        {{-- ===== HEADER ROW (ONLY ONCE) ===== --}}
        <div class="card-body pb-1">
            <div class="row text-center fw-semibold small">
                <div class="col-md-2">Plot / Khata No.</div>
                <div class="col-md-2">Type of Land</div>
                <div class="col-md-1">Total Area</div>
                <div class="col-md-2">Irrigated Area</div>
                <div class="col-md-2">Non-Irrigated</div>
                <div class="col-md-2">Irrigation Source</div>
                <div class="col-md-1">Action</div>
            </div>
        </div>
        <hr class="my-0">

        {{-- ===== DATA ROWS ===== --}}
        @foreach($landHoldings as $land)

            @php
                $sourceArray = old("source_of_irrigation.$landIndex")
                    ?? (is_array($land->irrigation_sources)
                        ? $land->irrigation_sources
                        : json_decode($land->irrigation_sources, true)
                            ?? explode(',', $land->irrigation_sources));

                $sourceArray = array_map('trim', (array) $sourceArray);
            @endphp

            <div class="card-body land-block border-bottom" data-index="{{ $landIndex }}">
                <input type="hidden" name="land_id[{{ $landIndex }}]" value="{{ $land->id }}">

                <div class="row align-items-center text-center g-2">

                    {{-- Plot / Khata --}}
                    <div class="col-md-2">
                        <input type="text"
                               name="plot_khata[{{ $landIndex }}]"
                               class="form-control form-control-sm text-center"
                               value="{{ old("plot_khata.$landIndex", $land->plot_khata) }}"
                               required>
                    </div>

                    {{-- Type of Land --}}
                    <div class="col-md-2">
      <select name="type_of_land[{{ $landIndex }}]" class=">
    @foreach(['Agricultural Land','Cultivable','Wasteland','Non-cultivable'] as $type)
        <option value="{{ $type }}" {{ $land->land_type === $type ? 'selected' : '' }}>
            {{ $type }}
        </option>
    @endforeach
</select>
                    </div>

                    {{-- Total Area --}}
                    <div class="col-md-1">
                        <input type="text"
                               name="area[{{ $landIndex }}]"
                               class="form-control form-control-sm text-center total-area"
                               value="{{ old("area.$landIndex", $land->area) }}"
                               oninput="validateDecimalInput(this)"
                               required>
                    </div>

                    {{-- Irrigated Area --}}
                    <div class="col-md-2">
                        <input type="text"
                               name="irrigated_area[{{ $landIndex }}]"
                               class="form-control form-control-sm text-center irrigated-area"
                               value="{{ old("irrigated_area.$landIndex", $land->irrigated_area) }}"
                               oninput="validateDecimalInput(this)"
                               required>
                    </div>

                    {{-- Non-Irrigated --}}
                    <div class="col-md-2">
                         <input type="text"
           name="non_irrigated_area[{{ $landIndex }}]"
           class="form-control form-control-sm text-center non-irrigated-area"
           value="{{ number_format(($land->area ?? 0) - ($land->irrigated_area ?? 0), 2) }}"
           readonly>
                    </div>

                    {{-- Irrigation Source --}}
                    <div class="col-md-2">
                        <select name="source_of_irrigation[{{ $landIndex }}][]"
                                class="form-select form-select-sm text-center"
                                multiple
                                required>
                            @foreach(['Pond','Canal','Well','Tube well','River','Borewell','Lift Irrigation','None'] as $option)
                                <option value="{{ $option }}"
                                    {{ in_array($option, $sourceArray) ? 'selected' : '' }}>
                                    {{ $option }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    {{-- Action --}}
                    <div class="col-md-1">
                        @if($landIndex > 0)
                            <button type="button"
                                    class="btn btn-sm btn-danger remove-land-block">
                                &times;
                            </button>
                        @endif
                    </div>

                </div>
            </div>

            @php $landIndex++; @endphp
        @endforeach
    </div>
</div>





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

    let landIndex = {{ count($landHoldings) }};

    function updateTotalArea() {
        let total = 0;
        $('input[name^="area"]').each(function () {
            let val = parseFloat($(this).val());
            if (!isNaN(val)) total += val;
        });
        $('#total-area').val(total.toFixed(2));
    }

    function updateNonIrrigated($row) {
        let area = parseFloat($row.find('input[name^="area"]').val()) || 0;
        let irrigated = parseFloat($row.find('input[name^="irrigated_area"]').val()) || 0;

        $row.find('input[name^="non_irrigated_area"]')
            .val((area - irrigated).toFixed(2));
    }

    function bindRowEvents($row) {
        $row.find('input[name^="area"], input[name^="irrigated_area"]')
            .on('input', function () {
                updateNonIrrigated($row);
                updateTotalArea();
            });
    }

    $('#add-more-land').on('click', function () {

        let $lastBlock = $('.land-block').last();
        let $newBlock = $lastBlock.clone();

        $newBlock.attr('data-index', landIndex);

        $newBlock.find('input, select').each(function () {
            let $el = $(this);
            let name = $el.attr('name');

            if (name) {
                $el.attr('name', name.replace(/\[\d+\]/, '[' + landIndex + ']'));
            }

            if ($el.is('select')) {
                $el.val(null);
            } else {
                $el.val('');
            }
        });

        // 🔹 FORCE non-irrigated to blank
        $newBlock.find('.non-irrigated-area').val('');

        $('#land-details-container').append($newBlock);

        bindRowEvents($newBlock);

        landIndex++;
        updateTotalArea();
    });

    $(document).on('click', '.remove-land-block', function () {
        $(this).closest('.land-block').remove();
        updateTotalArea();
    });

    // Initial rows
    $('.land-block').each(function () {
        bindRowEvents($(this));
    });

    updateTotalArea();
});
</script>










@if($WaterHarvestingPlannings->isNotEmpty())
    @foreach ($WaterHarvestingPlannings as $index => $planning)
<div class="card mb-3 shadow-sm">
    {{-- Card Header --}}
    <div class="card-header bg-info text-white d-flex justify-content-between align-items-center py-2">
                <h6 class="mb-0">
                    Table 1.4 - Water Harvesting Structures Planning (Edit #{{ $loop->iteration }})
                </h6>
            </div>

            <div class="card-body row" id="planning">
                <!-- Planning ID -->
                <input type="hidden" name="planning_ids[{{ $index }}]" value="{{ $planning->id }}">

                <!-- Type of Structure -->
                <div class="col-md-2 mb-1">
                    <label class="form-label">Type of Structures</label>
                    <input type="text"
                           class="form-control form-control-sm"
                           value="{{ $planning->projectType->name ?? '-' }}"
                           disabled>
                    <input type="hidden"
                           name="type_of_structure[{{ $index }}]"
                           value="{{ $planning->project_type_id }}">
                </div>

                <!-- Length -->
                <div class="col-md-1 mb-1">
                    <label class="form-label">Length (m)</label>
                    <input type="number" step="0.01" min="0"
                           name="length[{{ $index }}]"
                           class="form-control form-control-sm"
                           value="{{ old('length.'.$index, $planning->length) }}" required>
                </div>

                <!-- Width -->
                <div class="col-md-1 mb-1">
                    <label class="form-label">Width (m)</label>
                    <input type="number" step="0.01" min="0"
                           name="width[{{ $index }}]"
                           class="form-control form-control-sm"
                           value="{{ old('width.'.$index, $planning->width) }}" required>
                </div>

                <!-- Depth / Height -->
                <div class="col-md-2 mb-1">
                    <label class="form-label">Depth / Height (m)</label>
                    <input type="number" step="0.01" min="0"
                           name="depth_or_height[{{ $index }}]"
                           class="form-control form-control-sm"
                           value="{{ old('depth_or_height.'.$index, $planning->depth_or_height) }}" required>
                </div>

                <!-- Latitude -->
                <div class="col-md-2 mb-1">
                    <label class="form-label">Latitude</label>
                    <input type="text"
                           name="latitude[{{ $index }}]"
                           class="form-control form-control-sm"
                           value="{{ old('latitude.'.$index, $planning->latitude) }}"
                           oninput="validateLatLongInput(this)" required>
                </div>

                <!-- Longitude -->
                <div class="col-md-2 mb-1">
                    <label class="form-label">Longitude</label>
                    <input type="text"
                           name="longitude[{{ $index }}]"
                           class="form-control form-control-sm"
                           value="{{ old('longitude.'.$index, $planning->longitude) }}"
                           oninput="validateLatLongInput(this)" required>
                </div>

                <!-- Geotagged Photo -->
                <div class="col-md-2 mb-1">
    <label class="form-label">Geotagged Pre-Photo</label>

    <input type="file"
           name="geotagged_file"
           class="form-control form-control-sm"
           accept=".jpg,.jpeg,.png"
           onchange="validateImageSize(this, 'geotagError')">

    @if(!empty($planning->geotagged_file))
        <div class="mt-1">
            <a href="{{ asset('storage/'.$planning->geotagged_file) }}"
               target="_blank"
               class="btn btn-sm btn-outline-primary mb-1">
                View Existing
            </a>

            <img src="{{ asset('storage/'.$planning->geotagged_file) }}"
                 class="img-thumbnail d-block"
                 style="max-height:120px">

            <input type="hidden"
                   name="old_geotagged_file"
                   value="{{ $planning->geotagged_file }}">
        </div>
    @endif
</div>

            </div>
        </div>
    @endforeach
@else
    <div class="alert alert-warning">
        No Water Harvesting Planning data available.
    </div>
@endif


<div class="card mb-3 shadow-sm">
    {{-- Card Header --}}
    <div class="card-header bg-secondary text-white d-flex justify-content-between align-items-center py-2">
                
        <h6 class="mb-0">Upload Documents</h6>
    </div>

    <div class="card-body row">

        {{-- Beneficiary Agreement --}}
        <div class="col-md-4 mb-2">
            <label class="form-label">Beneficiary Agreement Form</label>

            @if(!empty($documents?->beneficiary_agreement))
                <div class="mb-1">
                    <a href="{{ asset('storage/'.$documents->beneficiary_agreement) }}"
                       target="_blank"
                       class="btn btn-sm btn-outline-primary">
                        View Existing PDF
                    </a>
                </div>
            @endif

            <input type="file"
                   name="beneficiary_agreement"
                   class="form-control pdf-file"
                   accept=".pdf"
                   {{ empty($documents?->beneficiary_agreement) ? 'required' : '' }}>
        </div>

        {{-- Khata Document --}}
        <div class="col-md-4 mb-2">
            <label class="form-label">Add Plot/Khata Ownership Document</label>

            @if(!empty($documents?->khata_document))
                <div class="mb-1">
                    <a href="{{ asset('storage/'.$documents->khata_document) }}"
                       target="_blank"
                       class="btn btn-sm btn-outline-primary">
                        View Existing PDF
                    </a>
                </div>
            @endif

            <input type="file"
                   name="khata_document"
                   class="form-control pdf-file"
                   accept=".pdf"
                   {{ empty($documents?->khata_document) ? 'required' : '' }}>
        </div>

        {{-- Other Document --}}
        <div class="col-md-4 mb-2">
            <label class="form-label">Other Document</label>

            @if(!empty($documents?->other_document))
                <div class="mb-1">
                    <a href="{{ asset('storage/'.$documents->other_document) }}"
                       target="_blank"
                       class="btn btn-sm btn-outline-primary">
                        View Existing PDF
                    </a>
                </div>
            @endif

            <input type="file"
                   name="other_document"
                   class="form-control pdf-file"
                   accept=".pdf"
                   {{ empty($documents?->other_document) ? 'required' : '' }}>
        </div>

    </div>
</div>



<div class="card mb-3 shadow-sm">
    {{-- Card Header --}}
    <div class="card-header bg-info text-white d-flex justify-content-between align-items-center py-2">
            
        <h6 class="mb-0">Table 1.5: WHS Technical Feasibility</h6>
    </div>

    <div class="card-body">
        {{-- Row 1: All Inputs --}}
        <div class="row g-3">
            <div class="col-md-2">
                <label class="form-label">Catchment Area (ha)</label>
                <input type="number" name="catchment_area" 
       id="catchment_area" class="form-control" 
       placeholder="Enter Catchment Area" step="any"  min="0" oninput="calculateCatchmentScore()"  value="{{ old('catchment_area', $baseline->technicalFeasibility->catchment_area ?? '') }}">
            </div>

            <div class="col-md-2">
                <label class="form-label">Land Slope</label>
                <select name="land_slope" id="land_slope" class="form-select" onchange="calculateLandSlopeScore()" required>
                    <option value="" disabled {{ old('land_slope', $technicalfeasibility->land_slope ?? '') == '' ? 'selected' : '' }}>Select</option>
                    @for ($i = 1; $i <= 7; $i++)
                        <option value="{{ $i }}" {{ old('land_slope', $technicalfeasibility->land_slope ?? '') == $i ? 'selected' : '' }}>{{ $i }}%</option>
                    @endfor
                </select>
            </div>

           @if (isset($planning) && $planning->project_type_id !== 1)
            <div class="col-md-2">
                <label class="form-label">Bed Slope</label>
                <select name="bed_slope" id="bed_slope" class="form-select" onchange="calculateBedSlopeScore()">
                    <option value="" disabled {{ old('bed_slope', $technicalfeasibility->bed_slope ?? '') == '' ? 'selected' : '' }}>Select</option>
                    @for ($i = 1; $i <= 7; $i++)
                        <option value="{{ $i }}" {{ old('bed_slope', $technicalfeasibility->bed_slope ?? '') == $i ? 'selected' : '' }}>{{ $i }}%</option>
                    @endfor
                </select>
            </div>
            @endif

            <div class="col-md-2">
                <label class="form-label">Geographical Location</label>
                <select name="geological_location" id="geological_location" class="form-select" onchange="calculateGeologicalScore()" required>
                    <option value="" disabled hidden {{ old('geological_location', $technicalfeasibility->geological_location ?? '') == '' ? 'selected' : '' }}>-- Select --</option>
                    <option value="Low Land" {{ old('geological_location', $technicalfeasibility->geological_location ?? '') == 'Low Land' ? 'selected' : '' }}>Low Land</option>
                    <option value="Mid Land" {{ old('geological_location', $technicalfeasibility->geological_location ?? '') == 'Mid Land' ? 'selected' : '' }}>Mid Land</option>
                    <option value="Up Land" {{ old('geological_location', $technicalfeasibility->geological_location ?? '') == 'Up Land' ? 'selected' : '' }}>Up Land</option>
                </select>
            </div>

          @if (isset($planning) && $planning->project_type_id !== 1)
            <div class="col-md-2">
                <label class="form-label">Nature of Stream</label>
                <select name="nature_of_stream" id="nature_of_stream" class="form-select">
                    <option value="" {{ old('nature_of_stream', $technicalfeasibility->nature_of_stream ?? '') == '' ? 'selected' : '' }}>Select</option>
                    <option value="Perennial" {{ old('nature_of_stream', $technicalfeasibility->nature_of_stream ?? '') == 'Perennial' ? 'selected' : '' }}>Perennial</option>
                    <option value="Seasonal" {{ old('nature_of_stream', $technicalfeasibility->nature_of_stream ?? '') == 'Seasonal' ? 'selected' : '' }}>Seasonal</option>
                </select>
            </div>
            @endif

            <div class="col-md-2">
                <label class="form-label">Hydrological Location</label>
                <select name="hydrological_location" id="hydrological_location" class="form-select" onchange="calculateHydrologicalScore()" required>
                    <option value="" disabled hidden {{ old('hydrological_location', $technicalfeasibility->hydrological_location ?? '') == '' ? 'selected' : '' }}>-- Select --</option>
                    <option value="Discharge Zone" {{ old('hydrological_location', $technicalfeasibility->hydrological_location ?? '') == 'Discharge Zone' ? 'selected' : '' }}>Discharge Zone</option>
                    <option value="Transition Zone" {{ old('hydrological_location', $technicalfeasibility->hydrological_location ?? '') == 'Transition Zone' ? 'selected' : '' }}>Transition Zone</option>
                    <option value="Recharge Zone" {{ old('hydrological_location', $technicalfeasibility->hydrological_location ?? '') == 'Recharge Zone' ? 'selected' : '' }}>Recharge Zone</option>
                </select>
            </div>

            <div class="col-md-2">
                <label class="form-label">Distance → Drainage (m)</label>
                <input type="text" name="distance_from_drainage_line" id="distance_from_drainage_line"
                       class="form-control"
                       placeholder="Enter distance"
                       value="{{ old('distance_from_drainage_line', $technicalfeasibility->distance_from_drainage_line ?? '') }}"
                       oninput="validateDecimalInput(this);" required>
            </div>

            <div class="col-md-2">
                <label class="form-label">LULC</label>
                <select name="lulc" id="lulc" class="form-select" required>
                    <option value="" disabled {{ old('lulc', $technicalFeasibility->lulc ?? '') == '' ? 'selected' : '' }}>Select</option>
                    <option value="agricultural_use" {{ old('lulc', $technicalfeasibility->lulc ?? '') == 'agricultural_use' ? 'selected' : '' }}>Agricultural</option>
                    <option value="fallow land" {{ old('lulc', $technicalfeasibility->lulc ?? '') == 'fallow land' ? 'selected' : '' }}>Fallow Land</option>
                    <option value="forest land" {{ old('lulc', $technicalfeasibility->lulc ?? '') == 'forest land' ? 'selected' : '' }}>Forest Land</option>
                    <option value="barren land" {{ old('lulc', $technicalfeasibility->lulc ?? '') == 'barren land' ? 'selected' : '' }}>Barren Land</option>
                </select>
            </div>
        </div>

        {{-- Row 2: Score Summary --}}
        <div class="row mt-4">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center border rounded p-2 bg-light">
            <span>Catchment: <strong id="catchment_score">0.00</strong>%</span>
            <span>Land Slope: <strong id="land_slope_score">0.00</strong>%</span>
         @if (isset($planning) && $planning->project_type_id !== 1)
                <span>Bed Slope: <strong id="bed_slope_score">0.00</strong>%</span>
                <span>Stream: <strong id="nature_of_stream_score">0.00</strong>%</span>
            @endif
            <span>Geographical: <strong id="geological_score">0.00</strong>%</span>
            <span>Hydrological: <strong id="hydrological_score">0.00</strong>%</span>
            <span>Drainage: <strong id="distance_from_drainage_line_score">-</strong>%</span>
            <span>LULC: <strong id="lulc_score">-</strong>%</span>
            <span class="bg-info text-white px-2 py-1 rounded">
                Total:
                <input type="text" id="total_score" name="technical_feasibility_score"
                       value="{{ old('technical_feasibility_score', $technicalfeasibility->technical_feasibility_score ?? '0.00') }}"
                       readonly style="border:none; width:55px; background:transparent; color:white;">
                %
            </span>
        </div>
    </div>
</div>

    </div>
</div>


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

    // Trigger all calculations on page load (EDIT MODE FIX)
    if (document.getElementById('catchment_area')?.value) {
        calculateCatchmentScore();
    }

    if (document.getElementById('land_slope')?.value) {
        calculateLandSlopeScore();
    }

    if (document.getElementById('bed_slope')?.value) {
        calculateBedSlopeScore();
    }

    if (document.getElementById('geological_location')?.value) {
        calculateGeologicalScore();
    }

    if (document.getElementById('hydrological_location')?.value) {
        calculateHydrologicalScore();
    }

    const distanceEl = document.getElementById('distance_from_drainage_line');
    if (distanceEl && distanceEl.value) {
        distanceEl.dispatchEvent(new Event('input'));
    }

    const lulcEl = document.getElementById('lulc');
    if (lulcEl && lulcEl.value) {
        lulcEl.dispatchEvent(new Event('change'));
    }

    updateTotalScoreAndColor();
});

/* ================= TOTAL SCORE ================= */
function updateTotalScoreAndColor() {

    const getScore = id => {
        const val = document.getElementById(id)?.innerText;
        return isNaN(parseFloat(val)) ? 0 : parseFloat(val);
    };

    const totalScore =
        getScore('catchment_score') +
        getScore('land_slope_score') +
        getScore('bed_slope_score') +
        getScore('geological_score') +
        getScore('hydrological_score') +
        getScore('distance_from_drainage_line_score') +
        getScore('lulc_score');

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

    if (totalScore < 50) {
        totalEl.style.color = '#d9534f';
        totalEl.style.backgroundColor = '#ffe6e6';
    } else if (totalScore < 80) {
        totalEl.style.color = '#f0ad4e';
        totalEl.style.backgroundColor = '#fff3cd';
    } else {
        totalEl.style.color = '#28a745';
        totalEl.style.backgroundColor = '#e6ffe6';
    }

    totalEl.style.fontWeight = 'bold';
}

/* ================= INDIVIDUAL SCORES ================= */

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').innerText = score;
    updateTotalScoreAndColor();
}

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

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

function calculateGeologicalScore() {
    const val = document.getElementById('geological_location').value;
    const score = val === 'Low Land' ? 15 : val === 'Mid Land' ? 7.5 : 0;
    document.getElementById('geological_score').innerText = score;
    updateTotalScoreAndColor();
}

function calculateHydrologicalScore() {
    const val = document.getElementById('hydrological_location').value;
    const score = val === 'Discharge Zone' ? 15 : val === 'Transition Zone' ? 7.5 : 0;
    document.getElementById('hydrological_score').innerText = score;
    updateTotalScoreAndColor();
}

/* ================= EVENTS ================= */

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

document.getElementById('lulc')?.addEventListener('change', function () {
    const score = this.value === 'agricultural_use' ? 15 : 0;
    document.getElementById('lulc_score').innerText = score;
    updateTotalScoreAndColor();
});
</script>



{{-- ===========================
     Table 1.6 - Water User Group
=========================== --}}
<div class="card mb-3 shadow-sm">

    <div class="card-header bg-secondary text-white position-relative py-2">
        <h6 class="mb-0 text-center fw-semibold">
            Table 1.6 - Water User Group
        </h6>

        <button type="button"
                class="btn btn-light btn-sm position-absolute end-0 top-50 translate-middle-y me-2"
                onclick="addUserGroup()">
            <i class="bi bi-plus-circle me-1"></i> Add Member
        </button>
    </div>

    <div class="card-body" id="userGroupContainer">

        <div class="row text-center fw-semibold mb-2 small">
            <div class="col-md-2">Beneficiary</div>
            <div class="col-md-2">Category</div>
            <div class="col-md-2">Plot / Khata No.</div>
            <div class="col-md-3">Land Area (Acre)</div>
            <div class="col-md-2">Potential Irrigation (Acre)</div>
            <div class="col-md-1">Action</div>
        </div>

    </div>

    <div class="card-footer d-flex justify-content-end align-items-center gap-2">
        <label class="form-label mb-0">Total Land (Acre):</label>
        <input type="text"
               id="water_user_land_total"
               class="form-control form-control-sm text-center"
               style="width:120px"
               readonly>
    </div>

</div>

<script>
const existingGroups = @json(old('water_user_groups', $baseline->waterUserGroups ?? []));
let userGroupIndex = existingGroups.length || 0;

/* =============================
   ADD ROW
============================= */
function addUserGroup(group = {}) {

    const container = document.getElementById('userGroupContainer');
    const rowId = `user-group-${userGroupIndex}`;

    const {
        id = '',
        name_of_beneficiary = '',
        category = '',
        plot_khata_no = '',
        land_comment = '',
        potential_irrigation = ''
    } = group;

    const html = `
        <div class="row user-group mb-2 align-items-center" id="${rowId}">

            <!-- 🔑 CRITICAL: hidden ID for update -->
            <input type="hidden"
                   name="water_user_groups[${userGroupIndex}][id]"
                   value="${id}">

            <div class="col-md-2">
                <input type="text"
                       name="water_user_groups[${userGroupIndex}][name_of_beneficiary]"
                       value="${name_of_beneficiary}"
                       class="form-control text-center form-control-sm"
                       oninput="this.value=this.value.replace(/[^A-Za-z\\s]/g,'')"
                       required>
            </div>

            <div class="col-md-2">
                <select name="water_user_groups[${userGroupIndex}][category]"
                        class="form-select text-center form-select-sm"
                        required>
                    <option value="" disabled ${category === '' ? 'selected' : ''}>--Select--</option>
                    ${['SC','ST','OBC','General'].map(cat =>
                        `<option value="${cat}" ${category === cat ? 'selected' : ''}>${cat}</option>`
                    ).join('')}
                </select>
            </div>

            <div class="col-md-2">
                <input type="text"
                       name="water_user_groups[${userGroupIndex}][plot_khata_no]"
                       value="${plot_khata_no}"
                       class="form-control text-center form-control-sm">
            </div>

            <div class="col-md-3">
                <input type="number" step="0.01"
                       name="water_user_groups[${userGroupIndex}][land_comment]"
                       value="${land_comment}"
                       class="form-control text-center land-input form-control-sm"
                       oninput="validateDecimalInput(this); calculateTotalLand();"
                       required>
            </div>

            <div class="col-md-2">
                <input type="number" step="0.01"
                       name="water_user_groups[${userGroupIndex}][potential_irrigation]"
                       value="${potential_irrigation}"
                       class="form-control text-center form-control-sm"
                       oninput="validateDecimalInput(this)"
                       required>
            </div>

            <div class="col-md-1 text-center">
                <button type="button"
                        class="btn btn-sm btn-danger"
                        onclick="removeUserGroup('${rowId}')">
                    &times;
                </button>
            </div>
        </div>
    `;

    container.insertAdjacentHTML('beforeend', html);
    userGroupIndex++;
    calculateTotalLand();
}

/* =============================
   REMOVE ROW (UI ONLY)
============================= */
function removeUserGroup(rowId) {
    if (document.querySelectorAll('.user-group').length <= 1) {
        alert('At least one member is required.');
        return;
    }
    document.getElementById(rowId)?.remove();
    calculateTotalLand();
}

/* =============================
   TOTAL LAND
============================= */
function calculateTotalLand() {
    let total = 0;
    document.querySelectorAll('.land-input').forEach(input => {
        total += parseFloat(input.value) || 0;
    });
    document.getElementById('water_user_land_total').value = total.toFixed(2);
}

/* =============================
   DECIMAL VALIDATION
============================= */
function validateDecimalInput(input) {
    input.value = input.value.replace(/[^0-9.]/g, '');
}

/* =============================
   INIT (EDIT / CREATE)
============================= */
document.addEventListener('DOMContentLoaded', () => {
    if (existingGroups.length > 0) {
        existingGroups.forEach(group => addUserGroup(group));
    } else {
        addUserGroup();
    }
});
</script>




<div class="text-center my-2">
    <button type="submit" class="btn btn-primary px-4">Update</button>

    <button type="reset" class="btn btn-secondary px-4">Reset</button>
</div>




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

@endsection