@include('layouts.header', ['title' => 'Add Survey Residential'])
    <div class="wrapper">
    @include('layouts.agency-user-navbar')
    @include('layouts.agency-user-sidebar')
    @php
        $surveyScreen1Data = isset($surveyData['survey_user_residential'][0]) ? $surveyData['survey_user_residential'][0] : [];
    @endphp

        <div class="content-page">
            <div class="content">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-12">
                            <div class="page-title-box">
                                <div class="page-title-right"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="card">
                                <div class="card-header">
                                <h4 class="page-title">Name Of The Project: {{ $project['name'] ?? 'N/A' }}</h4>
                                <h4 class="page-title">Structure</h4>
                                <h4 class="page-title">
                                {{ isset($surveyData['structure_use'])
                                    ? ($surveyData['structure_use'] == 1
                                        ? 'Residential'
                                        : ($surveyData['structure_use'] == 3
                                            ? 'Residential + Commercial'
                                            : 'N/A'))
                                    : 'N/A'
                                }}
                                </h4>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-lg-12">
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="page-title">Basic Info</h4>
                                </div>

                                <form id="userForm"
                                    action="{{ route('agencyUser.saveFormScreen1.serveyDetails', ['project_id' => encrypt($projectId), 'survey_id' => encrypt($surveyId)]) }}"
                                    method="POST" enctype="multipart/form-data" autocomplete="off">
                                    @csrf
                                    @if(isset($surveyScreen1Data['residential_user_photo_file_name']))
                                        <input type="hidden" name="existing_photo" value="1">
                                    @endif
                                    <div class="card-body">
                                    <div class="row">
                                            <div class="col-lg-6">
                                                <div class="mb-3">
                                                    <label for="name" class="form-label">Occupant Photo<span class="text-danger">*</span></label>
                                                    <input type="file" id="residential_user_photo_file_name" name="residential_user_photo_file_name"
                                                        class="form-control @error('residential_user_photo_file_name') is-invalid @enderror"
                                                        placeholder="Upload residential user photo file name"
                                                        value="{{ old('residential_user_photo_file_name') }}"
                                                        >
                                                        {{-- Show image preview if exists --}}
                                                        @if(!empty($surveyScreen1Data['residential_user_photo_file_name']))
                                                            <div class="mt-2" style="width: 100px; height: 100px;">
                                                                <img src="{{ asset($surveyScreen1Data['residential_user_photo_file_name']) }}"
                                                                    alt="Occupant Photo"
                                                                    style="width: 100%; height: 100%; object-fit: cover; border: 1px solid #ccc; border-radius: 4px;"
                                                                    onerror="this.onerror=null; this.src='/assets/images/no-image.png';"
                                                                >
                                                            </div>
                                                        @endif

                                                    @error('residential_user_photo_file_name')
                                                        <div class="invalid-feedback">
                                                            {{ $message }}
                                                        </div>
                                                    @enderror
                                                </div>
                                            </div>

                                            <div class="col-lg-6">
                                                <div class="mb-3">
                                                    <label for="name" class="form-label"> Name of occupant of Structure <span
                                                            class="text-danger">*</span></label>
                                                    <input type="text" id="name_occupant_structure" name="name_occupant_structure"
                                                        class="form-control @error('name_occupant_structure') is-invalid @enderror"
                                                        placeholder="Enter Name of occupant of Structure"
                                                        value="{{ old('name_occupant_structure', $surveyScreen1Data['name_occupant_structure'] ?? '') }}"
                                                        >
                                                    @error('name_occupant_structure')
                                                        <div class="invalid-feedback">
                                                            {{ $message }}
                                                        </div>
                                                    @enderror
                                                </div>
                                            </div>

                                        </div>
                                        <div class="row">

                                            <div class="col-lg-6">
                                                <div class="mb-3">
                                                    <label for="structure_holder_id" class="form-label">Status of present structure holder <span class="text-danger">*</span></label>
                                                    <select class="form-select form-select-sm @error('structure_holder_id') is-invalid @enderror" name="structure_holder_id" id="structure_holder_id">
                                                        <option value="">Select Status of present structure holder</option>
                                                        <option value="1" {{ (old('structure_holder_id', $surveyScreen1Data['structure_holder_id'] ?? '') == 1) ? 'selected' : '' }}>Occupant</option>
                                                        <option value="2" {{ (old('structure_holder_id', $surveyScreen1Data['structure_holder_id'] ?? '') == 2) ? 'selected' : '' }}>Tenant(Renter)</option>
                                                        <option value="3" {{ (old('structure_holder_id', $surveyScreen1Data['structure_holder_id'] ?? '') == 3) ? 'selected' : '' }}>Purchased</option>
                                                        <option value="4" {{ (old('structure_holder_id', $surveyScreen1Data['structure_holder_id'] ?? '') == 4) ? 'selected' : '' }}>Relatives</option>
                                                        <option value="5" {{ (old('structure_holder_id', $surveyScreen1Data['structure_holder_id'] ?? '') == 5) ? 'selected' : '' }}>Other(Specify)</option>
                                                    </select>
                                                    {{-- Wrapper for other input --}}
                                                    <div id="other_input_wrapper" class="mt-2" style="display: none;">
                                                        <label for="structure_holder_other" class="form-label">Other</label>
                                                        <input type="text" name="structure_holder_other" id="other_structure_holder"
                                                            class="form-control" placeholder="Enter other structure holder"
                                                            value="{{ old('structure_holder_other', $surveyScreen1Data['structure_holder_other'] ?? '') }}">
                                                    </div>
                                                        @error('structure_holder_id')
                                                        <div class="invalid-feedback">
                                                            {{ $message }}
                                                        </div>
                                                    @enderror
                                                </div>
                                            </div>

                                            <div class="col-lg-6">
                                                <div class="mb-3">
                                                    <label for="structure_owner_name" class="form-label">Name of the Structure owner <span
                                                            class="text-danger">*</span></label>
                                                    <input type="input" id="structure_owner_name" name="structure_owner_name"
                                                        class="form-control @error('structure_owner_name') is-invalid @enderror"
                                                        placeholder="Enter Name of the Structure owner"
                                                        value="{{ old('structure_owner_name', $surveyScreen1Data['structure_owner_name'] ?? '') }}"
                                                        >

                                                    @error('structure_owner_name')
                                                        <div class="invalid-feedback">
                                                            {{ $message }}
                                                        </div>
                                                    @enderror
                                                </div>
                                            </div>

                                        </div>

                                        <div class="row">

                                            <div class="col-lg-6">
                                                <div class="mb-3">
                                                    <label for="place_of_residence" class="form-label">Place of Residence if owner is not stays in this structure <span
                                                            class="text-danger">*</span></label>
                                                    <input type="input" id="place_of_residence" name="place_of_residence"
                                                        class="form-control @error('place_of_residence') is-invalid @enderror"
                                                        placeholder="Enter Place of Residence if owner is not stays in this structure"
                                                        value="{{ old('place_of_residence', $surveyScreen1Data['place_of_residence'] ?? '') }}"
                                                        >

                                                    @error('place_of_residence')
                                                        <div class="invalid-feedback">
                                                            {{ $message }}
                                                        </div>
                                                    @enderror
                                                </div>
                                            </div>

                                            <div class="col-lg-6">
                                                <div class="mb-3">
                                                    <label for="gender_id" class="form-label">Gender <span
                                                            class="text-danger">*</span></label>
                                                    <select class="form-select form-select-sm @error('gender_id') is-invalid @enderror" name="gender_id" id="gender_id">
                                                        <option value="">Select Gender</option>
                                                        <option value="1" {{ (old('gender_id', $surveyScreen1Data['gender_id'] ?? '') == 1) ? 'selected' : '' }}>Male</option>
                                                        <option value="2" {{ (old('gender_id', $surveyScreen1Data['gender_id'] ?? '') == 2) ? 'selected' : '' }}>Female</option>
                                                        <option value="3" {{ (old('gender_id', $surveyScreen1Data['gender_id'] ?? '') == 3) ? 'selected' : '' }}>Other</option>
                                                    </select>
                                                    {{-- Other Gender Input --}}
                                                    <div id="gender_other_wrapper" class="mt-2" style="display: none;">
                                                        <label for="gender_other" class="form-label">Other Gender</label>
                                                        <input type="text" name="gender_other" id="gender_other"
                                                            class="form-control" placeholder="Enter other gender"
                                                            value="{{ old('gender_other', $surveyScreen1Data['gender_other'] ?? '') }}">
                                                    @error('gender_other')
                                                        <div class="invalid-feedback">
                                                            {{ $message }}
                                                        </div>
                                                    @enderror
                                                    </div>
                                                    @error('gender_id')
                                                        <div class="invalid-feedback">
                                                            {{ $message }}
                                                        </div>
                                                    @enderror
                                                </div>
                                            </div>


                                        </div>

                                        <div class="row">
                                                <div class="col-lg-6">
                                                    <div class="mb-3">
                                                        <label for="mother_tongue_id" class="form-label">Mother Tongue <span
                                                                class="text-danger">*</span></label>
                                                                <select class="form-select form-select-sm @error('mother_tongue_id') is-invalid @enderror"
                                                                    name="mother_tongue_id" id="mother_tongue_id">
                                                                <option value="">Select Mother Tongue</option>
                                                                @foreach ($motherTongues as $tongue)
                                                                    <option value="{{ $tongue->id }}" {{ (old('mother_tongue_id', $surveyScreen1Data['mother_tongue_id'] ?? '') == $tongue->id) ? 'selected' : '' }}>
                                                                        {{ $tongue->name }}
                                                                    </option>
                                                                @endforeach
                                                            </select>

                                                            {{-- Other mother tongue Input --}}
                                                            <div id="mother_tongue_other_wrapper" class="mt-2" style="display: none;">
                                                                <label for="mother_tongue_other" class="form-label">Other Mother Tongue</label>
                                                                <input type="text" name="mother_tongue_other" id="mother_tongue_other"
                                                                    class="form-control" placeholder="Enter mother tongue other"
                                                                    value="{{ old('mother_tongue_other', $surveyScreen1Data['mother_tongue_other'] ?? '') }}">
                                                            @error('mother_tongue_other')
                                                                <div class="invalid-feedback">
                                                                    {{ $message }}
                                                                </div>
                                                            @enderror
                                                            </div>

                                                            @error('mother_tongue_id')
                                                                <div class="invalid-feedback">
                                                                    {{ $message }}
                                                                </div>
                                                            @enderror
                                                    </div>
                                                </div>

                                                <div class="col-lg-6">
                                                <div class="mb-3">
                                                    <label for="place_of_origin" class="form-label">Place of Origin <span
                                                            class="text-danger">*</span></label>
                                                    <input type="input" id="place_of_origin" name="place_of_origin"
                                                        class="form-control @error('place_of_origin') is-invalid @enderror"
                                                        placeholder="Enter Place of Origin"
                                                        value="{{ old('place_of_origin', $surveyScreen1Data['place_of_origin'] ?? '') }}"
                                                        >

                                                    @error('place_of_origin')
                                                        <div class="invalid-feedback">
                                                            {{ $message }}
                                                        </div>
                                                    @enderror
                                                </div>
                                            </div>

                                        </div>

                                        <div class="row">
                                                <div class="col-lg-6">
                                                    <div class="mb-3">
                                                        <label for="mother_tongue_id" class="form-label">Caste Group <span
                                                                class="text-danger">*</span></label>
                                                                <select class="form-select form-select-sm @error('caste_group_id') is-invalid @enderror"
                                                                        name="caste_group_id" id="caste_group_id">
                                                                    <option value="">Select Caste Group</option>
                                                                    @foreach ($casteGroups as $group)
                                                                        <option value="{{ $group->id }}" {{ (old('caste_group_id', $surveyScreen1Data['caste_group_id'] ?? '') == $group->id) ? 'selected' : '' }}>
                                                                            {{ $group->name }}
                                                                        </option>
                                                                    @endforeach
                                                                </select>

                                                                @error('caste_group_id')
                                                                    <div class="invalid-feedback">
                                                                        {{ $message }}
                                                                    </div>
                                                                @enderror
                                                    </div>
                                                </div>

                                                <div class="col-lg-6">
                                                <div class="mb-3">
                                                    <label for="place_of_origin" class="form-label">Religion<span
                                                            class="text-danger">*</span></label>
                                                            <select class="form-select form-select-sm @error('religion_id') is-invalid @enderror"
                                                                    name="religion_id" id="religion_id">
                                                                <option value="">Select Religion</option>
                                                                @foreach ($religions as $religion)
                                                                    <option value="{{ $religion->id }}" {{ (old('religion_id', $surveyScreen1Data['religion_id'] ?? '') == $religion->id) ? 'selected' : '' }}>
                                                                        {{ $religion->name }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                            {{-- Other Religion Input --}}
                                                            <div id="religion_other_wrapper" class="mt-2" style="display: none;">
                                                                <label for="religion_other" class="form-label">Other Religion</label>
                                                                <input type="text" name="religion_other" id="religion_other"
                                                                    class="form-control" placeholder="Enter other religion"
                                                                    value="{{ old('religion_other', $surveyScreen1Data['religion_other'] ?? '') }}">
                                                            @error('religion_other')
                                                                <div class="invalid-feedback">
                                                                    {{ $message }}
                                                                </div>
                                                            @enderror
                                                            </div>

                                                            @error('religion_id')
                                                                <div class="invalid-feedback">
                                                                    {{ $message }}
                                                                </div>
                                                            @enderror

                                                </div>
                                            </div>

                                        </div>

                                        <div class="row">
                                                {{-- <div class="col-lg-6">
                                                    <div class="mb-3">
                                                        <label for="bpl_card" class="form-label">BPL Card <span
                                                                class="text-danger">*</span></label>
                                                                <select class="form-select form-select-sm @error('bpl_card') is-invalid @enderror" name="bpl_card" id="structure_holder_id">
                                                                    <option value="">Select BPL Card</option>
                                                                    <option value="Yes" {{ (old('bpl_card', $surveyScreen1Data['bpl_card'] ?? '') == 'Yes') ? 'selected' : '' }}>Yes</option>
                                                                    <option value="No" {{ (old('bpl_card', $surveyScreen1Data['bpl_card'] ?? '') == 'No') ? 'selected' : '' }}>No</option>
                                                                </select>

                                                                @error('bpl_card')
                                                                    <div class="invalid-feedback">
                                                                        {{ $message }}
                                                                    </div>
                                                                @enderror
                                                    </div>
                                                </div> --}}

                                                <div class="col-lg-6">
                                                <div class="mb-3">
                                                    <label for="no_of_household_members" class="form-label">No of HH Members <span
                                                            class="text-danger">*</span></label>
                                                            <input type="input" id="no_of_household_members" name="no_of_household_members"
                                                        class="form-control @error('no_of_household_members') is-invalid @enderror"
                                                        placeholder="Enter No of HH Members"
                                                        value="{{ old('no_of_household_members', $surveyScreen1Data['no_of_household_members'] ?? '') }}"
                                                        >

                                                            @error('no_of_household_members')
                                                                <div class="invalid-feedback">
                                                                    {{ $message }}
                                                                </div>
                                                            @enderror

                                                </div>
                                            </div>

                                        </div>
                                        <div class="row">
                                                <div class="col-lg-6">
                                                    <div class="mb-3">
                                                        <label for="total_area" class="form-label">Total Area (Sq.mtr) <span class="text-danger">*</span></label>
                                                        <input type="input" id="totalArea" name="total_area"
                                                        class="form-control @error('total_area') is-invalid @enderror"
                                                        placeholder="Enter Total Area (Sq.mtr)"
                                                        value="{{ old('total_area', isset($surveyScreen1Data['total_area']) ? (int) $surveyScreen1Data['total_area'] : '') }}">
                                                        @error('total_area')
                                                            <div class="invalid-feedback">
                                                                {{ $message }}
                                                            </div>
                                                        @enderror
                                                    </div>
                                                </div>

                                                <div class="col-lg-6">
                                                <div class="mb-3">
                                                    <label for="affected_area" class="form-label">Affected Area (Sq.mtr)<span class="text-danger">*</span></label>
                                                    <input type="input" id="affectedArea" name="affected_area"
                                                        class="form-control @error('affected_area') is-invalid @enderror"
                                                        placeholder="Enter Affected Area (Sq.mtr) "
                                                        value="{{ old('affected_area', isset($surveyScreen1Data['affected_area']) ? (int) $surveyScreen1Data['affected_area'] : '') }}">
                                                        @error('affected_area')
                                                            <div class="invalid-feedback">
                                                                {{ $message }}
                                                            </div>
                                                        @enderror

                                                </div>
                                            </div>

                                        </div>
                                        <div class="row">
                                            <div class="col-lg-6">
                                                <div class="mb-3">
                                                    <label for="percentage_area" class="form-label">% Area<span class="text-danger">*</span></label>
                                                    <input type="input" id="percentageArea" name="percentage_area"
                                                    class="form-control bg-light @error('percentage_area') is-invalid @enderror"
                                                    placeholder="Enter % Area"
                                                    value="{{ old('percentage_area', $surveyScreen1Data['percentage_area'] ?? '') }}" readonly>
                                                    @error('percentage_area')
                                                        <div class="invalid-feedback">
                                                            {{ $message }}
                                                        </div>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="mb-3">
                                                    <label for="balanced_area" class="form-label">Balance Area<span class="text-danger">*</span></label>
                                                    <input type="input" id="balanceArea" name="balanced_area"
                                                    class="form-control bg-light @error('balanced_area') is-invalid @enderror"
                                                    placeholder="Enter Balance Area"
                                                    value="{{ old('balanced_area', $surveyScreen1Data['balanced_area'] ?? '') }}" readonly>
                                                    @error('balanced_area')
                                                        <div class="invalid-feedback">
                                                            {{ $message }}
                                                        </div>
                                                    @enderror
                                                </div>
                                            </div>

                                        </div>

                                        <div class="row">
                                            <div class="col-lg-6">
                                                <div class="mb-3">
                                                    <label for="year_of_establishment" class="form-label">Year Of Establishment<span class="text-danger">*</span></label>
                                                    @php
                                                        $selectedYear = old('year_of_establishment', $surveyScreen1Data['year_of_establishment'] ?? '');
                                                    @endphp
                                                    <select class="form-select form-select-sm @error('year_of_establishment') is-invalid @enderror" name="year_of_establishment" id="year_of_establishment">
                                                        <option value="">Select Year Of Establishment</option>
                                                        @for ($year = 1950; $year <= 2025; $year++)
                                                            <option value="{{ $year }}" {{ $selectedYear == $year ? 'selected' : '' }}>{{ $year }}</option>
                                                        @endfor
                                                    </select>
                                                    @error('year_of_establishment')
                                                        <div class="invalid-feedback">
                                                            {{ $message }}
                                                        </div>
                                                    @enderror
                                                </div>
                                            </div>

                                        </div>

                                    </div>
                                    <div class="card-footer border-top border-light d-flex justify-content-between">
                                        <a href="{{ route('agencyUser.add.serveyDetails', ['project_id' => encrypt($projectId), 'survey_id' => encrypt($surveyId)]) }}" class="btn btn-secondary">Back</a>
                                        <button type="submit" class="btn btn-success" id="submitBtn">Save & Next</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            @include('layouts.footer')
        </div>
    </div>

    <!-- Vendor JS -->
    <script src="{{ asset('assets/js/vendor.min.js') }}"></script>
    <script src="{{ asset('assets/js/app.min.js') }}"></script>
    <!--  Select2 Plugin Js -->
    <script src="{{ asset('assets/vendor/select2/js/select2.min.js') }}"></script>

    <script>
        $(document).ready(function() {
            localStorage.removeItem('survey_documents');
            @if (session('success'))
                toastr.success("{{ session('success') }}");
            @endif

            @if (session('error'))
                toastr.error("{{ session('error') }}");
            @endif

function calculateAreaPercentage(totalArea, affectedArea, callback) {
    const total = parseFloat(totalArea.trim());
    const affected = parseFloat(affectedArea.trim());

    if (!isNaN(total) && total > 0 && !isNaN(affected)) {
        if (affected > total) {
            toastr.error("Affected area cannot be greater than total area.");
            callback({
                percentage: '',
                remaining: ''
            });
            return;
        }

        const percentage = (affected / total) * 100;
        const remaining = total - affected;

        callback({
            percentage: percentage.toFixed(2),
            remaining: remaining.toFixed(2)
        });
    } else {
        callback({
            percentage: '',
            remaining: ''
        });
    }
}

function updateAreaFields() {
    const totalVal = document.getElementById("totalArea").value;
    const affectedVal = document.getElementById("affectedArea").value;

    calculateAreaPercentage(totalVal, affectedVal, function (result) {
        document.getElementById("percentageArea").value = result.percentage;
        document.getElementById("balanceArea").value = result.remaining;
    });
}

document.getElementById("affectedArea").addEventListener("input", updateAreaFields);
document.getElementById("totalArea").addEventListener("input", updateAreaFields);


        });

    </script>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        const select = document.getElementById("structure_holder_id");
        const wrapper = document.getElementById("other_input_wrapper");

        function toggleOtherField() {
            if (select.value === "5") {
                wrapper.style.display = "block";
            } else {
                wrapper.style.display = "none";
                document.getElementById("other_structure_holder").value = '';
            }
        }

        // Run on page load (for old selected)
        toggleOtherField();

        // Run when user changes selection
        select.addEventListener("change", toggleOtherField);

        //Gender
        const genderSelect = document.getElementById("gender_id");
        const otherGenderWrapper = document.getElementById("gender_other_wrapper");

        function toggleGenderOtherField() {
            if (genderSelect.value === "3") {
                otherGenderWrapper.style.display = "block";
            } else {
                otherGenderWrapper.style.display = "none";
                document.getElementById("gender_other").value = '';
            }
        }

        toggleGenderOtherField();
        genderSelect.addEventListener("change", toggleGenderOtherField);
        //mother_tongue_other
        const motherTongueSelect = document.getElementById("mother_tongue_id");
        const motherTongueWrapper = document.getElementById("mother_tongue_other_wrapper");

        function toggleMotherTongueWrapperField() {
            if (motherTongueSelect.value === "12") {
                motherTongueWrapper.style.display = "block";
            } else {
                motherTongueWrapper.style.display = "none";
                document.getElementById("mother_tongue_other").value = '';
            }
        }

        toggleMotherTongueWrapperField();
        motherTongueSelect.addEventListener("change", toggleMotherTongueWrapperField);


        const religionSelect = document.getElementById("religion_id");
        const otherReligionWrapper = document.getElementById("religion_other_wrapper");

        function toggleReligionOtherField() {
            if (religionSelect.value === "7") {
                otherReligionWrapper.style.display = "block";
            } else {
                otherReligionWrapper.style.display = "none";
                document.getElementById("religion_other").value = '';
            }
        }

        toggleReligionOtherField();
        religionSelect.addEventListener("change", toggleReligionOtherField);

    });


</script>


</body>

</html>