@extends('layouts.app')

@section('content')
<style>
.form-step {
    display: none;
}

.form-step.active {
    display: block;
}

.nav-step-wrapper {
    display: inline-block;
    text-align: center;
    margin-right: 5px;
}

.nav-step {
    cursor: pointer;
    padding: 0px 12px;
    background-color: #f0f0f0;
    border-radius: 50%; /* Makes the step circular */
    margin-bottom: 5px;
    width: 30px; /* Adjust width to make it round */
    height: 30px; /* Adjust height to make it round */
    line-height: 30px; /* Vertically center the text */
    font-size: 14px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.nav-step.active {
    background-color: #007bff;
    color: #FFC107;
}

.nav-step.completed {
    background-color: #FFC107;
    color: #212529;
}

.step-number {
    display: block;
}

.step-label {
    font-size: 12px;
    margin-top: 5px;
    display: block;
}

.step-nav-container {
    position: fixed; /* Fixed position to make the steps stay in place while scrolling */
    top: 15px; /* Adjust the top margin for better positioning */
    left: 15%;
    transform: translateX(-5%); /* Center the navigation horizontally */
    z-index: 1000;  Ensure it stays above other content */
}

.step-nav-container .nav-step-wrapper:last-child {
    margin-right: 0; /* Remove right margin on the last step */
}

.page-content-wrapper {
     /*position: fixed; Fixed position to make the content stay in place while scrolling */
    /* top: 385px;  Adjust the top margin for better positioning */
    
    height: 540px;
    width: 100%; /* Ensure it takes up the full width of the viewport */
    z-index: 1000; /* Ensure it stays above other content */
    margin-top: 125px;
    overflow-y: auto; /* Enable vertical scrollbar if content exceeds height */
}


</style>


<!-- Header Area -->
<div class="header-area" id="headerArea">
    <div class="container">
        <div class="header-content position-relative d-flex align-items-center justify-content-between">
            <div class="back-button">
                <a href="elements.html">
                    <i class="bi bi-arrow-left-short"></i>
                </a>
            </div>

            <div class="page-heading">
                <h6 class="mb-0"> Survey Form </h6>
            </div>

            <div class="setting-wrapper">
                <div class="setting-trigger-btn" id="settingTriggerBtn">
                    <i class="bi bi-gear"></i>
                    <span></span>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Step Navigation Bar -->
<!-- Step Navigation Bar -->
<div class="container step-nav-container mt-5">
    <div class="step-nav mb-1">
        <div class="nav-step-wrapper">
            <span class="nav-step active" onclick="goToStep(1)">
                <span class="step-number">1</span>
                <span class="step-label">Step</span>
            </span>
        </div>
        <div class="nav-step-wrapper">
            <span class="nav-step" onclick="goToStep(2)">
                <span class="step-number">2</span>
                <span class="step-label">Step</span>
            </span>
        </div>
        <div class="nav-step-wrapper">
            <span class="nav-step" onclick="goToStep(3)">
                <span class="step-number">3</span>
                <span class="step-label">Step</span>
            </span>
        </div>
        <div class="nav-step-wrapper">
            <span class="nav-step" onclick="goToStep(4)">
                <span class="step-number">4</span>
                <span class="step-label">Step</span>
            </span>
        </div>
        <div class="nav-step-wrapper">
            <span class="nav-step" onclick="goToStep(5)">
                <span class="step-number">5</span>
                <span class="step-label">Step</span>
            </span>
        </div>
        <div class="nav-step-wrapper">
            <span class="nav-step" onclick="goToStep(6)">
                <span class="step-number">6</span>
                <span class="step-label">Step</span>
            </span>
        </div>
        <div class="nav-step-wrapper">
            <span class="nav-step" onclick="goToStep(7)">
                <span class="step-number">7</span>
                <span class="step-label">Step</span>
            </span>
        </div>
        <!--<div class="nav-step-wrapper">-->
        <!--    <span class="nav-step" onclick="goToStep(8)">-->
        <!--        <span class="step-number">8</span>-->
        <!--        <span class="step-label">Step</span>-->
        <!--    </span>-->
        <!--</div>-->
    </div>
</div>


<!-- Form Content -->
<div class="page-content-wrapper ">
    <div class="container">
        <div class="card">
            <div class="card-body">
                <form class="was-validated"  action="{{ route('survey-properties.store') }}" method="POST" enctype="multipart/form-data" novalidate>
                    @csrf 
                    <!-- Step 1 -->
                    <div id="step1" class="form-step active">
                        <h6>Step 1: Property Details </h6>
                        <div class="form-group">
                            <label class="form-label" for="ulb"> ULB's Name/Code* </label>
                            <input class="form-control form-control-sm" type="text" name="ulb" id="ulb" placeholder="ULB's Name/Code*" required />
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="ward_id"> Ward No* </label>
                            <select class="form-select form-select-sm" name="ward_id" id="ward_id" aria-label="Default select Ward No"> </select>
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="e_nagarpalika_id"> E-nagarpalika id </label>
                            <input class="form-control form-control-sm" type="text" name="e_nagarpalika_id" id="e_nagarpalika_id" placeholder="E-nagarpalika id" required />
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="parcel_no"> Parcel No* </label>
                            <input class="form-control form-control-sm" type="text" name="parcel_no" id="parcel_no" placeholder="Parcel No*" required />
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="property_no"> Property No* </label>
                            <input class="form-control form-control-sm" type="text" placeholder="Property No*" name="property_no" id="property_no" required />
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="exampleInputText"> Electricity id </label>
                            <input class="form-control form-control-sm" type="text" placeholder="Electricity id" name="electricity_id" id="electricity_id"  />
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="exampleInputText"> Khasra No </label>
                            <input class="form-control form-control-sm" type="text" placeholder="khasra no" name="khasra_no" id="khasra_no" />
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="exampleInputText"> Registry No </label>
                            <input class="form-control form-control-sm" type="text" placeholder="Registry No" name="registry_no" id="registry_no" />
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="exampleInputText"> Constructed Date </label>
                            <input class="form-control form-control-sm" type="month" placeholder="Constructed Date" name="constructed_date" id="constructed_date" />
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="defaultSelect"> Slum </label>
                            <select class="form-select form-select-sm" id="slum" name="slum" aria-label="Default select example">
                                <option value="Yes" >Yes</option>
                                <option selected value="No">No</option> 
                            </select> 
                            
                            <input class="form-control form-control-sm mt-2" type="text" name="slum_other" style="display :none " id="slum_other" placeholder="Enter Slum id"    />
                        </div>
 

                        <div class="step-buttons">
                            <button class="btn btn-sm btn-primary" type="button" onclick="nextStep(1)">Next</button>
                        </div> <br><br>
                    </div>

                    <!-- Step 2 -->
                    <div id="step2" class="form-step">
                    <h6>Step 2: Owner Details </h6> <hr>
                        <div class="form-group">
                            <label class="form-label"> Name of Respondent* </label>
                            <input class="form-control form-control-sm" type="text" name="name_of_respondent" id="name_of_respondent" required />
                        </div>

                        <div class="form-group">
                            <label class="form-label"> Relationship of Respondent With Owner* </label>
                            <select class="form-select form-select-sm" name="relationship_of_respondent_with_owner" id="relationship_of_respondent_with_owner" aria-label="Default select example">
                                <option value="0" > Select Relationship </option>
                                <option value="Self" > Self </option>
                                <option value="Daughter"> Daughter </option>
                                <option value="Son"> Son </option>
                                <option value="Brother" > Brother </option>
                                <option value="Wife"> Wife </option>
                                <option value="Mother"> Mother </option>
                                <option value="Father" > Father </option>
                                <option value="Other"> Other </option> 
                            </select>
                            <input class="form-control form-control-sm mt-2" type="hidden" name="other_relationship_of_respondent_with_owner" id="other_relationship_of_respondent_with_owner" placeholder="Relationship of Respondent With Owner*" />
                        </div>

                        <div class="form-group">
                            <label class="form-label"> Owner Samagra ID </label>
                            <input class="form-control form-control-sm" type="text" name="owner_samagra_id" id="owner_samagra_id" />
                        </div>

                        <div class="form-group">
                            <label class="form-label"> Owner Aadhaar Number </label>
                            <input class="form-control form-control-sm" type="number" name="owner_aadhaar_number" id="owner_aadhaar_number" />
                        </div>

                        <div class="form-group">
                            <label class="form-label"> Capture Aadhaar Photo </label> 
                            <div class="mb-3 captured_image_take_aadhar row"> </div>
                            <div class="mb-3">  
                                <div style="margin-left: -32px;" id="take_aadhar" class="pre_capture_frame" ></div>   
                            </div>
                            <div class="mb-3">   
                                <input type="button" class="btn btn-info btn-sm btn-round btn-file take_aadhar" value="Take Aadhar Front Photo" onClick="take_snapshot('take_aadhar')">
                                <input type="button" class="btn btn-info btn-sm btn-round btn-file _take_aadhar" value="Take Photo" onClick="_take_snapshot('take_aadhar')"> 
                                <input type="button" class="btn btn-info btn-sm btn-round btn-file _take_aadhar_" value="Stop Photo" onClick="_take_snapshot_('take_aadhar')">
                            </div>
                            <!--<input class="form-control form-control-sm" type="file" name="capture_aadhaar_photo" id="capture_aadhaar_photo" />-->
                        </div>

                        <!-- Element Heading -->
                        <table class="table mb-0 table-striped">
                            <thead>
                            <tr> 
                                <th scope="col"> Owner Name </th>
                                <th scope="col"> Father/Husband Name</th>
                                <th scope="col"> Mobile No. </th>
                                <th scope="col"> Email Id. </th>
                                <th scope="col"> Delete </th>
                                
                            </tr>
                            </thead>
                            <tbody id="ownerTableBody">
                                <!-- Data rows will be inserted here dynamically -->
                            </tbody>
                        </table> <br>            
                        <input type="hidden" id="hiddenInput" value="Some hidden data" />

                        <div class="container">
                            <div class="card direction-rtl">
                                <div class="card-body"> 
                                    <button class="btn btn-sm btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#bootstrapBasicModal"> + Add </button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="step-buttons">
                            <button class="btn btn-sm btn-secondary" type="button" onclick="prevStep(2)">Previous</button>
                            <button class="btn btn-sm btn-primary" type="button" onclick="nextStep(2)">Next</button>
                        </div><br><br>
                    </div>

                    <!-- Step 3 -->
                    <div id="step3" class="form-step">
                        <h6>Step 3: Address Details </h6>
                        <div class="form-group">
                            <label class="form-label"> House No./Plot/Building/ Apartment No.* </label>
                            <input class="form-control form-control-sm" type="text" name="house_no_plot_building" id="house_no_plot_building"  placeholder="House No./Plot/Building/ Apartment No.*" required />
                        </div>

                        <div class="form-group">
                            <label class="form-label"> Street No./Name* </label>
                            <input class="form-control form-control-sm" type="text" name="street_no_name" id="street_no_name" required />
                        </div>

                        <div class="form-group">
                            <label class="form-label"> Locality* </label>
                            <input class="form-control form-control-sm" type="text" name="locality" id="locality" required />
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="defaultSelect"> Colony* </label> 
                            <input class="form-control form-control-sm" type="text" name="colony" id="colony" placeholder="Enter" required />
                        </div>

                        <div class="form-group"> 
                            <input class="form-control form-control-sm" type="text" name="" id="" placeholder="Enter" required />
                        </div>

                        <div class="form-group">
                            <label class="form-label"> City* </label>
                            <input class="form-control form-control-sm" type="text" name="city" id="city" placeholder="City*" required />
                        </div>

                        <div class="form-group">
                            <label class="form-label"> Pincode* </label>
                            <input class="form-control form-control-sm" type="number" name="pincode" id="pincode" placeholder="Pincode*" required />
                        </div>
                        
                        <div class="form-check">
                            <input class="form-check-input" id="present_address" name="present_address" type="checkbox" value="">
                            <label class="form-check-label" for="present_address" >Present address :(Same as property address)</label>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label"> House No./Plot/Building/ Apartment No.* </label>
                            <input class="form-control form-control-sm" type="text" name="p_house_no_plot_building" id="p_house_no_plot_building"  placeholder="House No./Plot/Building/ Apartment No.*" required />
                        </div>

                        <div class="form-group">
                            <label class="form-label"> Street No./Name* </label>
                            <input class="form-control form-control-sm" type="text" name="p_street_no_name" id="p_street_no_name" required />
                        </div>

                        <div class="form-group">
                            <label class="form-label"> Locality* </label>
                            <input class="form-control form-control-sm" type="text" name="p_locality" id="p_locality" required />
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="defaultSelect"> Colony* </label>
                            <input class="form-control form-control-sm" type="text" id="p_colony" name="p_colony" placeholder="Enter" required /> 
                        </div>

                        <div class="form-group"> 
                        </div>

                        <div class="form-group">
                            <label class="form-label"> City* </label>
                            <input class="form-control form-control-sm" type="text" name="p_city" id="p_city" placeholder="City*" required />
                        </div>

                        <div class="form-group">
                            <label class="form-label"> Pincode* </label>
                            <input class="form-control form-control-sm" type="number" name="p_pincode" id="p_pincode" placeholder="Pincode*" required />
                        </div>
                        
                        <div class="step-buttons">
                            <button class="btn btn-sm btn-secondary" type="button" onclick="prevStep(3)">Previous</button>
                            <button class="btn btn-sm btn-primary" type="button" onclick="nextStep(3)">Next</button>
                        </div><br><br>
                    </div>

                    <!-- Step 4 -->
                    <div id="step4" class="form-step">
                        <h6>Step 4: Taxation Details </h6> <hr>
                        <div class="form-group">
                            <label class="form-label" for="defaultSelect"> Current tax rate zone*  </label>
                            <select class="form-select form-select-sm" name="current_tax_rate_zone" id="current_tax_rate_zone" aria-label="Default select example">
                                <option value="----" > ----- </option>
                                <option selected value="Others"> Others </option> 
                            </select>
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="defaultSelect"> Property ownership* </label>
                            <select class="form-select form-select-sm" name="property_ownership" id="property_ownership" aria-label="Default select example">
                                <option value="----" > ----- </option>
                                <option selected value="Others"> Others </option> 
                            </select>
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="defaultSelect"> Situation* </label>
                            <select class="form-select form-select-sm" id="situation" name="situation" aria-label="Default select example">
                                <option value="----" > ----- </option>
                                <option selected value="Others"> Others </option> 
                            </select>
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="defaultSelect"> Property use* </label>
                            <select class="form-select form-select-sm" name="property_use" id="property_use" aria-label="Default select example">
                                <option value="----" > ----- </option>
                                <option selected value="Others"> Others </option> 
                            </select>
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="defaultSelect"> Commercial </label>
                            <select class="form-select form-select-sm" name="property_commercial_uses" id="property_commercial_uses" aria-label="Default select example">
                                <option value="----" > ----- </option>
                                <option selected value="Others"> Others </option> 
                            </select>
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="defaultSelect"> Year of construction* </label>
                            <select class="form-select form-select-sm" name="property_year_of_construction" id="property_year_of_construction" aria-label="Default select example">
                                <option value="----" > ----- </option>
                                <option selected value="Others"> Others </option> 
                            </select>
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="defaultSelect"> Exemption Applicable (Are you as a property owner entitled to any Concession (section 136)) </label>
                            <select class="form-select form-select-sm" name="exemption_applicable" id="exemption_applicable" aria-label="Default select example">
                                <option value="Yes"> Yes </option>
                                <option selected value="No"> No </option>
                            </select>
                        
                            <select class="form-select form-select-sm mt-2" name="property_owner_section" id="property_owner_section" style="display :none " aria-label="Default select example"> </select>
                        </div>
                        


                        <div class="step-buttons">
                            <button class="btn btn-sm btn-secondary" type="button" onclick="prevStep(4)">Previous</button>
                            <button class="btn btn-sm btn-primary" type="button" onclick="nextStep(4)">Next</button>
                        </div><br><br>
                    </div>

                    <!-- Step 5 -->
                    <div id="step5" class="form-step">
                        <h6>Step 5: Property Area Details </h6>
                        
                        <div class="form-group">
                            <label class="form-label"> Plot Area* </label> 
                        </div>

                        <div class="form-group">
                            <label class="form-label"> Unit (Square feet) </label>
                            <input class="form-control form-control-sm" type="text" name="plot_area_square_feet" id="plot_area_square_feet" placeholder="Unit (Square feet)" required />
                        </div>

                        <div class="form-group">
                            <label class="form-label"> Unit (Square Meter) </label>
                            <input class="form-control form-control-sm" type="text" name="plot_area_square_meter" id="plot_area_square_meter" placeholder="Unit (Square Meter)" required />
                        </div>

                        <table class="table mb-0 table-striped">
                            <thead>
                                <tr> 
                                    <th scope="col"> Floor No. </th>
                                    <th scope="col"> Area Unit (Square feet)</th>
                                    <th scope="col"> Area Unit (Square meter)</th>
                                    <th scope="col"> Usage Type </th>
                                    <th scope="col"> Usage Factor </th>
                                    <th scope="col"> Constrution Type </th>
                                    <th scope="col"> Action </th>
                                </tr>
                            </thead>
                            <tbody id="areaTableBody"> </tbody>
                        </table> <br>

                        <div class="container">
                            <div class="card direction-rtl">
                                <div class="card-body"> 
                                    <button class="btn btn-sm btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#area"> + Add </button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">  Plinth Area* </label> 
                        </div>

                        <div class="form-group">
                            <label class="form-label"> Unit (Square feet) </label>
                            <input class="form-control form-control-sm" type="text" name="plinth_area_square_feet" id="plinth_area_square_feet" placeholder="Unit (Square feet)" required />
                        </div>

                        <div class="form-group">
                            <label class="form-label"> Unit (Square Meter) </label>
                            <input class="form-control form-control-sm" type="text" name="plinth_area_square_meter" id="plinth_area_square_meter" placeholder="Unit (Square Meter)" required />
                        </div>


                        <div class="form-group">
                            <label class="form-label"> Total Built Up Area* </label> 
                        </div>

                        <div class="form-group">
                            <label class="form-label"> Unit (Square feet) </label>
                            <input class="form-control form-control-sm" type="text" name="built_area_square_feet" id="built_area_square_feet" placeholder="Unit (Square feet)" required />
                        </div>

                        <div class="form-group">
                            <label class="form-label"> Unit (Square Meter) </label>
                            <input class="form-control form-control-sm" type="text" name="built_area_square_meter" id="built_area_square_meter" placeholder="Unit (Square Meter)" required />
                        </div>
                        
                        
                        
                        <div class="step-buttons">
                            <button class="btn btn-sm btn-secondary" type="button" onclick="prevStep(5)">Previous</button>
                            <button class="btn btn-sm btn-primary" type="button" onclick="nextStep(5)">Next</button>
                        </div><br><br>
                    </div>

                    <!-- Step 6 -->
                    <div id="step6" class="form-step">
                        <h6>Step 6: Municipal Supply </h6> <hr>

                        <div class="form-group">
                            <label class="form-label"> Municipal Water Supply </label>
                            <select class="form-select form-select-sm" name="municipal_water_supply" id="municipal_water_supply" aria-label="Default select example">
                                <option value="Yes" > Yes </option>
                                <option selected value="No"> No </option> 
                            </select>
                        </div>
                        
                        <div class="form-group" id="connection-group" style="display:none">
                            <label class="form-label"> No of Connection* </label>
                            <input class="form-control form-control-sm" type="text" name="no_of_connection" id="no_of_connection" placeholder="No of Connection*" required />
                        </div>
                        
                        <div class="form-group" id="connection-id-group" style="display:none">
                            <label class="form-label"> Water Supply Connection id* </label>
                            <input class="form-control form-control-sm" type="text" name="water_supply_connection_id" id="water_supply_connection_id" placeholder="Water Supply Connection id*" required />
                        </div>

                        <div class="form-group">
                            <label class="form-label"> Source of Water* </label>
                            <select class="form-select form-select-sm" name="source_of_water" id="source_of_water" aria-label="Default select example">
                                <option value="Goverment Tab" > Goverment Tab </option>
                                <option   value="Dug Well"> Dug Well  </option>> 
                                <option   value="Borewell"> Borewell </option>> 
                                <option   value="Other"> Other </option>> 
                            </select>
                        </div>

                        

                        <div class="form-group">
                            <label class="form-label"> Type of Use* </label>
                            <select class="form-select form-select-sm" name="type_of_use" id="type_of_use" aria-label="Default select example">
                                <option value="-----Select-----" > -----Select----- </option>
                                <option selected value="No"> No </option> 
                            </select>
                        </div>

                        <h6> Sanitation </h6> <hr>

                        <div class="form-group">
                            <label class="form-label"> If you hove a toilet in the house, what kind is it* </label>
                            <select class="form-select form-select-sm" name="sanitation" id="sanitation" aria-label="Default select example">
                                <option value="" > -----Select----- </option>
                                <option selected value="Connected to Municipal sewage system"> Connected to Municipal sewage system </option> 
                                <option selected value="Connected to septic tank"> Connected to septic tank </option> 
                                <option selected value="Connected to surface drains"> Connected to surface drains </option> 
                                <option selected value="Pour flush pit latrine"> Pour flush pit latrine </option> 
                                <option selected value="Dry/Bucket latrine"> Dry/Bucket latrine </option> 
                                <option selected value="No Toilet"> No Toilet </option> 
                                
                            </select>
                        </div>

                        <h6> Solid Waste Management </h6> <hr>

                        <div class="form-group">
                            <label class="form-label"> If you hove a toilet in the house, what kind is it* </label>
                            <select class="form-select form-select-sm" name="solid_waste_management" id="solid_waste_management" aria-label="Default select example">
                                <option  value="Yes"> Yes </option> 
                                <option selected value="No"> No </option> 
                            </select>
                        </div>

                        <div class="step-buttons">
                            <button class="btn btn-sm btn-secondary" type="button" onclick="prevStep(6)">Previous</button>
                            <button class="btn btn-sm btn-primary" type="button" onclick="nextStep(6)">Next</button>
                        </div><br><br>
                    </div>

                    <!-- Step 7 -->
                    <div id="step7" class="form-step">
                        <h6>Step 7: Property Photo </h6> <hr> 
                         
                        <div class="form-group">
                            <label class="form-label"> Capture First Photo * </label>   
                            <div class="mb-3 captured_image_first_photo row">    </div>
                            <div class="mb-3">  
                                <div style="margin-left: -32px;" id="first_photo" class="pre_capture_frame" ></div>   
                            </div>
                            <div class="mb-3">   
                                <input type="button" class="btn btn-info btn-sm btn-round btn-file first_photo" value="Take Capture First Photo" onClick="take_snapshot('first_photo')">
                                <input type="button" class="btn btn-info btn-sm btn-round btn-file _first_photo" value="Take Photo" onClick="_take_snapshot('first_photo')"> 
                                <input type="button" class="btn btn-info btn-sm btn-round btn-file _first_photo_" value="Stop Photo" onClick="_take_snapshot_('first_photo')">
                            </div>
                            <!--<input class="form-control form-control-sm" type="file" name="capture_aadhaar_photo" id="capture_aadhaar_photo" />-->
                        </div>
                        <hr>

                        <div class="form-file">
                            <input class="form-control d-none form-control-clicked" id="capture_second_photo" id="capture_second_photo" type="file" />
                            <label class="form-file-label justify-content-center" for="customFile">
                                <span class="form-file-button btn btn btn-sm btn-danger d-flex align-items-center justify-content-center shadow-lg"> <i class="bi bi-plus-circle me-2 fz-16"></i> Capture Second Photo * </span>
                            </label>
                        </div> 
                        <div class="form-group">
                            <label class="form-label"> Capture Second Photo *  </label>  
                            <div class="mb-3 captured_image_second_photo row">    </div>
                            <div class="mb-3">  
                                <div style="margin-left: -32px;" id="second_photo" class="pre_capture_frame" ></div>   
                            </div>
                            <div class="mb-3">   
                                <input type="button" class="btn btn-info btn-sm btn-round btn-file second_photo" value="Take Capture Second Photoo" onClick="take_snapshot('second_photo')">
                                <input type="button" class="btn btn-info btn-sm btn-round btn-file _second_photo" value="Take Photo" onClick="_take_snapshot('second_photo')"> 
                                <input type="button" class="btn btn-info btn-sm btn-round btn-file _second_photo_" value="Stop Photo" onClick="_take_snapshot_('second_photo')">
                            </div>
                            <!--<input class="form-control form-control-sm" type="file" name="capture_aadhaar_photo" id="capture_aadhaar_photo" />-->
                        </div>
                        <hr>

                        <div class="form-group">
                            <label class="form-label" for="defaultSelect"> Upload Supporting Documents </label>
                            <input class="form-control form-control-sm" type="file" name="upload_supporting_documents" id="upload_supporting_documents" required />
                        </div>

                        <div class="form-group">
                            <label class="form-label"> Remark </label>
                            <textarea class="form-control" id="remark" name="remark" cols="3" rows="5" placeholder="Review details" required></textarea>
                        </div>
                        <div class="step-buttons">
                            <button class="btn btn-sm btn-secondary" type="button" onclick="prevStep(7)">Previous</button> 
                            <button class="btn btn-sm btn-success" type="submit" >Save </button>
                            <!--<button class="btn btn-sm btn-primary" type="button" onclick="nextStep(7)">Next</button>-->
                        </div><br><br>
                    </div>

                    <!-- Step 8 -->
                    <!--<div id="step8" class="form-step"> -->
                    <!--    <h6>Step 8: Review All Details</h6>-->
                    <!--    <hr>-->
            
                    <!--    <h6>Property Details</h6>-->
                    <!--    <div class="review-details">-->
                    <!--        <p><strong>ULB Name:</strong> <span id="review_ulb_name">[ULB Name]</span></p>-->
                    <!--        <p><strong>Ward No:</strong> <span id="review_ward_no">[Ward Number]</span></p>-->
                    <!--        <p><strong>Property No:</strong> <span id="review_property_no">[Property Number]</span></p>-->
                    <!--        <p><strong>Electricity ID:</strong> <span id="review_electricity_id">[Electricity ID]</span></p>-->
                    <!--    </div>-->
            
                    <!--    <h6>Owner Details</h6>-->
                    <!--    <div class="review-details">-->
                    <!--        <p><strong>Owner Name:</strong> <span id="review_owner_name">[Owner Name]</span></p>-->
                    <!--        <p><strong>Relationship with Owner:</strong> <span id="review_relationship_with_owner">[Relationship]</span></p>-->
                    <!--        <p><strong>Aadhaar Number:</strong> <span id="review_aadhaar_number">[Aadhaar Number]</span></p>-->
                    <!--    </div>-->
            
                    <!--    <h6>Address Details</h6>-->
                    <!--    <div class="review-details">-->
                    <!--        <p><strong>Property Address:</strong> <span id="review_property_address">[Property Address]</span></p>-->
                    <!--        <p><strong>Owner Address:</strong> <span id="review_owner_address">[Owner Address]</span></p>-->
                    <!--        <p><strong>Same Address for Both:</strong> <span id="review_same_address">[Yes/No]</span></p>-->
                    <!--    </div>-->
            
                    <!--    <h6>Taxation Details</h6>-->
                    <!--    <div class="review-details">-->
                    <!--        <p><strong>Tax Rate Zone:</strong> <span id="review_tax_rate_zone">[Tax Rate Zone]</span></p>-->
                    <!--        <p><strong>Property Ownership Type:</strong> <span id="review_property_ownership_type">[Ownership Type]</span></p>-->
                    <!--        <p><strong>Tax Exemption:</strong> <span id="review_tax_exemption">[Yes/No]</span></p>-->
                    <!--    </div>-->
            
                    <!--    <h6>Property Area Details</h6>-->
                    <!--    <div class="review-details">-->
                    <!--        <p><strong>Plot Area (Square Feet):</strong> <span id="review_plot_area_square_feet">[Plot Area in Sq Ft]</span></p>-->
                    <!--        <p><strong>Plot Area (Square Meter):</strong> <span id="review_plot_area_square_meter">[Plot Area in Sq M]</span></p>-->
                    <!--        <p><strong>Plinth Area (Square Feet):</strong> <span id="review_plinth_area_square_feet">[Plinth Area in Sq Ft]</span></p>-->
                    <!--        <p><strong>Plinth Area (Square Meter):</strong> <span id="review_plinth_area_square_meter">[Plinth Area in Sq M]</span></p>-->
                    <!--        <p><strong>Total Built-Up Area (Square Feet):</strong> <span id="review_built_area_square_feet">[Built-Up Area in Sq Ft]</span></p>-->
                    <!--        <p><strong>Total Built-Up Area (Square Meter):</strong> <span id="review_built_area_square_meter">[Built-Up Area in Sq M]</span></p>-->
                    <!--    </div>-->
            
                    <!--    <h6>Municipal Supply</h6>-->
                    <!--    <div class="review-details">-->
                    <!--        <p><strong>Municipal Water Supply:</strong> <span id="review_municipal_water_supply">[Yes/No]</span></p>-->
                    <!--        <p><strong>No of Connections:</strong> <span id="review_no_of_connection">[Number of Connections]</span></p>-->
                    <!--        <p><strong>Water Supply Connection ID:</strong> <span id="review_water_supply_connection_id">[Connection ID]</span></p>-->
                    <!--        <p><strong>Source of Water:</strong> <span id="review_source_of_water">[Source]</span></p>-->
                    <!--        <p><strong>Type of Use:</strong> <span id="review_type_of_use">[Use Type]</span></p>-->
                    <!--    </div>-->
            
                    <!--    <h6>Sanitation</h6>-->
                    <!--    <div class="review-details">-->
                    <!--        <p><strong>Toilet Type:</strong> <span id="review_sanitation">[Sanitation Type]</span></p>-->
                    <!--    </div>-->
            
                    <!--    <h6>Solid Waste Management</h6>-->
                    <!--    <div class="review-details">-->
                    <!--        <p><strong>Solid Waste Management:</strong> <span id="review_solid_waste_management">[Yes/No]</span></p>-->
                    <!--    </div>-->
            
                    <!--    <h6>Property Photos</h6>-->
                    <!--    <div class="review-details">-->
                    <!--        <p><strong>First Photo:</strong> <span id="review_first_photo">[Uploaded Photo]</span></p>-->
                    <!--        <p><strong>Second Photo:</strong> <span id="review_second_photo">[Uploaded Photo]</span></p>-->
                    <!--    </div>-->
            
                    <!--    <h6>Supporting Documents</h6>-->
                    <!--    <div class="review-details">-->
                    <!--        <p><strong>Uploaded Documents:</strong> <span id="review_uploaded_documents">[Uploaded Documents]</span></p>-->
                    <!--    </div>-->
            
                    <!--    <h6>Remark</h6>-->
                    <!--    <div class="review-details">-->
                    <!--        <p><strong>Remark:</strong> <span id="review_remark">[Remark Text]</span></p>-->
                    <!--    </div>-->
            
                    <!--    <div class="step-buttons">-->
                    <!--        <button class="btn btn-sm btn-secondary" type="button" onclick="prevStep(8)">Previous</button>-->
                    <!--        <button class="btn btn-sm btn-primary" type="button" onclick="submitForm()">Submit</button>-->
                    <!--    </div><br><br> -->
                    <!--</div>-->

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

<!-- Bootstrap Basic Modal -->
<div class="modal fade" id="bootstrapBasicModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="exampleModalLabel">Owner Details</h6>
                <button class="btn btn-close p-1 ms-auto" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label class="form-label"> Owner Name* </label>
                    <input class="form-control form-control-sm" type="text" id="m_owner_name" required />
                </div>

                <div class="form-group">
                    <label class="form-label"> Father/Husband Name* </label>
                    <input class="form-control form-control-sm" type="text" id="m_father_husband_name" required />
                </div>

                <div class="form-group">
                    <label class="form-label"> Mobile No.* </label>
                    <input class="form-control form-control-sm" type="number" id="m_mobile_no" required />
                </div>

                <div class="form-group">
                    <label class="form-label"> Email </label>
                    <input class="form-control form-control-sm" type="email" id="m_email" required />
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-sm btn-secondary" type="button" data-bs-dismiss="modal">Close</button>
                <button class="btn btn-sm btn-success" type="button" onclick="saveOwnerDetails()">Save</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="area" tabindex="-1" aria-labelledby="#area" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="exampleModalLabel">Owner Details</h6>
                <button class="btn btn-close p-1 ms-auto" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label class="form-label" for="defaultSelect"> Floor No* </label>
                    <select class="form-select form-select-sm" name="floor_type" id="floor_type" aria-label="Default select example">
                        <option value="----" > ----- </option>
                        <option selected value="Others"> Others </option> 
                    </select>
                </div>

                <div class="form-group">
                    <label class="form-label"> Plot Area* </label> 
                </div>

                <div class="form-group">
                    <label class="form-label"> Unit (Square feet) </label>
                    <input class="form-control form-control-sm" type="text" name="unit_square_feet" id="unit_square_feet" placeholder="Unit (Square feet)" required />
                </div>

                <div class="form-group">
                    <label class="form-label"> Unit (Square Meter) </label>
                    <input class="form-control form-control-sm" type="text" name="unit_square_meter" id="unit_square_meter" placeholder="Unit (Square Meter)" required />
                </div>

                <div class="form-group">
                    <label class="form-label" for="defaultSelect"> Usage Type* </label>
                    <select class="form-select form-select-sm" name="usage_type" id="usage_type" aria-label="Default select example">
                        <option value="----" > ----- </option>
                        <option selected value="Others"> Others </option> 
                    </select>
                </div>

                <div class="form-group">
                    <label class="form-label" for="defaultSelect"> Usare Factor* </label>
                    <select class="form-select form-select-sm" name="usare_factor" id="usare_factor" aria-label="Default select example">
                        <option value="----" > ----- </option>
                        <option selected value="Others"> Others </option> 
                    </select>
                </div>

                <div class="form-group">
                    <label class="form-label" for="defaultSelect"> Construction Type* </label>
                    <select class="form-select form-select-sm" name="nature_of_construction" id="nature_of_construction" aria-label="Default select example">
                        <option value="----" > ----- </option>
                        <option selected value="Others"> Others </option> 
                    </select>
                </div>
                 
            </div>
            <div class="modal-footer">
                <button class="btn btn-sm btn-secondary" type="button" data-bs-dismiss="modal">Close</button>
                <button class="btn btn-sm btn-success" type="button" onclick="saveAreaDetails()">Save</button>
            </div>
        </div>
    </div>
</div>


@endsection

@section('script')
<script>
    let currentStep = 1;
    const totalSteps = 8;

    // Function to show the current step
    function goToStep(step) {
        if (step < 1 || step > totalSteps) return; // Prevent out of bounds navigation

        // Hide all steps
        for (let i = 1; i <= totalSteps; i++) {
            const stepElement = document.getElementById('step' + i);
            if (stepElement) {
                stepElement.classList.remove('active');
            }
        }

        // Show the selected step
        const stepElement = document.getElementById('step' + step);
        if (stepElement) {
            if(step==8)
            {
                populateReviewDetails();    
            }
            stepElement.classList.add('active');
        }

        // Update the navbar to reflect the active step
        updateNav(step);

        currentStep = step;
    }

    // Function to update the navigation bar
    function updateNav(step) {
        const navItems = document.querySelectorAll('.nav-step');
        if (!navItems) return; // Ensure navItems are found

        navItems.forEach((item, index) => {
            if (index + 1 < step) {
                item.classList.add('completed');
                item.classList.remove('active');
            } else if (index + 1 === step) {
                item.classList.add('active');
                item.classList.remove('completed');
            } else {
                item.classList.remove('active', 'completed');
            }
        });
    }

    // Function to move to the next step
    function nextStep(step) {
        const currentStepElement = document.getElementById('step' + step);
        const inputs = currentStepElement.querySelectorAll('input, textarea');
        let isValid = true;

        // inputs.forEach(input => {
        //     if (!input.checkValidity()) {
        //         isValid = false;
        //     }
        // });

        if (isValid) {
            goToStep(step + 1);
        } else {
            currentStepElement.classList.add('was-validated');
        }
    }

    // Function to move to the previous step
    function prevStep(step) {
        goToStep(step - 1);
    }

    document.addEventListener('DOMContentLoaded', () => {
        goToStep(1); // Start on step 1
    });
</script>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="{{ asset('app/webcam.js')}}"></script> 


<script>
    // Listen for changes on the relationship select element
    document.getElementById('relationship_of_respondent_with_owner').addEventListener('change', function() {
        var otherOption = this.value === 'Other';
        var otherInput = document.getElementById('other_relationship_of_respondent_with_owner');  
        if (otherOption) { otherInput.type = 'text';   } else { otherInput.type = 'hidden';  }
    });
</script>


<script>
    // Function to toggle visibility of the property_owner_section dropdown
    document.getElementById('slum').addEventListener('change', function() { 
        var slum = this.value;
        var slum_other = document.getElementById('slum_other'); 
        if (slum === 'Yes') { slum_other.style.display = 'block';  } else { slum_other.style.display = 'none';  }
    });

    // Initial check for the selected option when the page loads
    window.onload = function() {
        var slum = document.getElementById('slum').value;
        var slum_other = document.getElementById('slum_other'); 
        if (slum === 'Yes') { slum_other.style.display = 'block'; } else { slum_other.style.display = 'none'; }
    };
</script>

<script>
    // Function to toggle visibility of the property_owner_section dropdown
    document.getElementById('exemption_applicable').addEventListener('change', function() { 
        var exemptionValue = this.value;
        var propertyOwnerSection = document.getElementById('property_owner_section'); 
        if (exemptionValue === 'Yes') { propertyOwnerSection.style.display = 'block';  } else { propertyOwnerSection.style.display = 'none';  }
    });

    // Initial check for the selected option when the page loads
    window.onload = function() {
        var exemptionValue = document.getElementById('exemption_applicable').value;
        var propertyOwnerSection = document.getElementById('property_owner_section'); 
        if (exemptionValue === 'Yes') { propertyOwnerSection.style.display = 'block'; } else { propertyOwnerSection.style.display = 'none'; }
    };
</script>


<script>
    // Function to toggle visibility of connection fields
    document.getElementById('municipal_water_supply').addEventListener('change', function() { 
        var municipalWaterSupplyValue = this.value;
        var connectionGroup = document.getElementById('connection-group');
        var connectionIdGroup = document.getElementById('connection-id-group'); 
        
        if (municipalWaterSupplyValue === 'Yes') {
            connectionGroup.style.display = 'block';
            connectionIdGroup.style.display = 'block';
        } else {
            connectionGroup.style.display = 'none';
            connectionIdGroup.style.display = 'none';
        }
    });

    // Initial check for the selected option when the page loads
    window.onload = function() {
        var municipalWaterSupplyValue = document.getElementById('municipal_water_supply').value;
        var connectionGroup = document.getElementById('connection-group');
        var connectionIdGroup = document.getElementById('connection-id-group'); 
        
        if (municipalWaterSupplyValue === 'Yes') {
            connectionGroup.style.display = 'block';
            connectionIdGroup.style.display = 'block';
        } else {
            connectionGroup.style.display = 'none';
            connectionIdGroup.style.display = 'none';
        }
    };
</script>

<script language="JavaScript">
    // Configure a few settings and attach camera 250x187
    Webcam.set({ width: 400, height: 320, image_format: 'jpeg', jpeg_quality: 90, constraints: {facingMode: 'environment' } }); 
    $('._take_aadhar').hide();
    $('._take_aadhar_').hide();
	    
	function take_snapshot(id) 
	{
	    Webcam.attach( '#'+id ); 
	    // play sound effect
	    //shutter.play();
	    // take snapshot and get image data
	    $('._'+id).show();  
	    $('._'+id+'_').show(); 
	    $('.'+id).hide();
	}
	
	function _take_snapshot_(id) 
	{
	    Webcam.off( '#'+id );
	    // play sound effect
	    //shutter.play();
	    // take snapshot and get image data
	    $('._'+id).hide(); 
	    $('._'+id+'_').hide();  
	    $('.'+id).show();
	}
	
	function _take_snapshot(id) 
	{
	    Webcam.snap( function(data_uri) 
	    {
	        var numItems = ($('.captured_image_data'+id).length);  
            $('.captured_image_'+id).append(`
                <div  class="col divimg">
                    <img style="width: 100%;" id="DeleteImg"  src="`+data_uri+`"/> 
                    <input class="captured_image_data`+id+`" type="hidden" name="captured_image_data[`+id+`][`+(numItems)+`]" id="captured_image_data`+(numItems)+`"> 
                    <span style="position: absolute; transform: translate(-85%, -15%); -ms-transform: translate(-85%, -15%); background-color: #ff0000; color: white; font-size: 16px; padding: 1px 5px; border: none; cursor: pointer; border-radius: 50px; text-align: center;"> <span class="bi bi-trash"></span> </span>
                </div> `);
            $("#captured_image_data"+numItems).val(data_uri); 
            //$("#pic_count").html('Add More') ; 
	    });	 
	}
	
	$("body").on("click", "#DeleteImg", function () 
    { 
        $(this).parents(".divimg").remove();
    })
</script>


<script>

    $(document).ready(function() {
        // When the page loads, send an AJAX request to get the wards
        $.ajax({
            url: '{{ url('api/auth/ward-list') }}',  // The URL of the 'ward-list' route
            type: 'GET',
            success: function(response) {
                // Check if the response is an array
                if (Array.isArray(response)) {
                    // Loop through the wards and append them as options to the select dropdown
                    $('#ward_id').empty(); // Clear any existing options
                    $('#ward_id').append('<option value="">Select Ward</option>'); // Default option
                    
                    response.forEach(function(ward) {
                        $('#ward_id').append('<option value="' + ward.id + '">' + ward.name + '</option>');
                    });
                } else {
                    alert('Failed to load wards!');
                }
            },
            error: function() {
                alert('Error loading ward data.');
            }
        });
        
        $.ajax({
            url: '{{ url('api/auth/current-tax-rate-zone-list') }}',  // URL for 'current-tax-rate-zone' route
            type: 'GET',
            success: function(response) {
                if (Array.isArray(response)) {
                    $('#current_tax_rate_zone').empty();
                    $('#current_tax_rate_zone').append('<option value="">Select Tax Rate Zone</option>'); // Default option
                    
                    response.forEach(function(zone) {
                        $('#current_tax_rate_zone').append('<option value="' + zone.id + '">' + zone.name + '</option>');
                    });
                } else {
                    alert('Failed to load tax rate zones!');
                }
            },
            error: function() {
                alert('Error loading tax rate zone data.');
            }
        });
        
        $.ajax({
            url: '{{ url('api/auth/property-commercial-uses-list') }}',  // URL for 'property-commercial-uses' route
            type: 'GET',
            success: function(response) {
                if (Array.isArray(response)) {
                    $('#property_commercial_uses').empty();
                    $('#property_commercial_uses').append('<option value="">Select Commercial Use</option>'); // Default option
                    
                    response.forEach(function(use) {
                        $('#property_commercial_uses').append('<option value="' + use.id + '">' + use.name + '</option>');
                    });
                } else {
                    alert('Failed to load property commercial uses!');
                }
            },
            error: function() {
                alert('Error loading commercial use data.');
            }
        });
        
        $.ajax({
            url: '{{ url('api/auth/property-ownerships-list') }}',  // URL for 'property-ownerships' route
            type: 'GET',
            success: function(response) {
                if (Array.isArray(response)) {
                    $('#property_ownership').empty();
                    $('#property_ownership').append('<option value="">Select Ownership</option>'); // Default option
                    
                    response.forEach(function(ownership) {
                        $('#property_ownership').append('<option value="' + ownership.id + '">' + ownership.name + '</option>');
                    });
                } else {
                    alert('Failed to load property ownerships!');
                }
            },
            error: function() {
                alert('Error loading property ownership data.');
            }
        });
        
        $.ajax({
            url: '{{ url('api/auth/property-uses-list') }}',  // URL for 'property-uses' route
            type: 'GET',
            success: function(response) {
                if (Array.isArray(response)) {
                    $('#property_use').empty();
                    $('#property_use').append('<option value="">Select Property Use</option>'); // Default option
                    
                    response.forEach(function(use) {
                        $('#property_use').append('<option value="' + use.id + '">' + use.name + '</option>');
                    });
                } else {
                    alert('Failed to load property uses!');
                }
            },
            error: function() {
                alert('Error loading property use data.');
            }
        });
        
        $.ajax({
            url: '{{ url('api/auth/property-year-of-constructions-list') }}',  // URL for 'property-year-of-constructions' route
            type: 'GET',
            success: function(response) {
                if (Array.isArray(response)) {
                    $('#property_year_of_construction').empty();
                    $('#property_year_of_construction').append('<option value="">Select Year of Construction</option>'); // Default option
                    
                    response.forEach(function(year) {
                        $('#property_year_of_construction').append('<option value="' + year.id + '">' + year.name + '</option>');
                    });
                } else {
                    alert('Failed to load property years of construction!');
                }
            },
            error: function() {
                alert('Error loading property year of construction data.');
            }
        });
        
        $.ajax({
            url: '{{ url('api/auth/property-owner-sections-list') }}',  // URL for 'property-owner-sections' route
            type: 'GET',
            success: function(response) {
                if (Array.isArray(response)) {
                    $('#property_owner_section').empty();
                    $('#property_owner_section').append('<option value="">Select Owner Section</option>'); // Default option
                    
                    response.forEach(function(section) {
                        $('#property_owner_section').append('<option value="' + section.id + '">' + section.name + '</option>');
                    });
                } else {
                    alert('Failed to load property owner sections!');
                }
            },
            error: function() {
                alert('Error loading property owner section data.');
            }
        });
        
        $.ajax({
            url: '{{ url('api/auth/situations-list') }}',  // URL for 'situations' route
            type: 'GET',
            success: function(response) {
                if (Array.isArray(response)) {
                    $('#situation').empty();
                    $('#situation').append('<option value="">Select Situation</option>'); // Default option
                    
                    response.forEach(function(situation) {
                        $('#situation').append('<option value="' + situation.id + '">' + situation.name + '</option>');
                    });
                } else {
                    alert('Failed to load situations!');
                }
            },
            error: function() {
                alert('Error loading situation data.');
            }
        });
        
        $.ajax({
            url: '{{ url('api/auth/floor-type-list') }}',  // URL for 'floor-type' route
            type: 'GET',
            success: function(response) {
                if (Array.isArray(response)) {
                    $('#floor_type').empty();
                    $('#floor_type').append('<option value="">Select Floor Type</option>'); // Default option
                    
                    response.forEach(function(floorType) {
                        $('#floor_type').append('<option value="' + floorType.id + '">' + floorType.name + '</option>');
                    });
                } else {
                    alert('Failed to load floor types!');
                }
            },
            error: function() {
                alert('Error loading floor type data.');
            }
        }); 
        
        $.ajax({
            url: '{{ url('api/auth/nature-of-construction-list') }}',  // URL for 'nature-of-construction-list' route
            type: 'GET',
            success: function(response) {
                if (Array.isArray(response)) {
                    $('#nature_of_construction').empty();
                    $('#nature_of_construction').append('<option value="">Select Nature of Construction</option>'); // Default option
                    
                    response.forEach(function(construction) {
                        $('#nature_of_construction').append('<option value="' + construction.id + '">' + construction.name + '</option>');
                    });
                } else {
                    alert('Failed to load nature of construction data!');
                }
            },
            error: function() {
                alert('Error loading nature of construction data.');
            }
        });
        
        $.ajax({
            url: '{{ url('api/auth/property-types-list') }}',  // URL for 'building-occupies' route
            type: 'GET',
            success: function(response) {
                if (Array.isArray(response)) {
                    $('#usage_type').empty();
                    $('#usage_type').append('<option value="">Select Building Occupy Type</option>'); // Default option
                    
                    response.forEach(function(occupy) {
                        $('#usage_type').append('<option value="' + occupy.id + '">' + occupy.type_name + '</option>');
                        
                    });
                     $('#type_of_use').empty();
                    $('#type_of_use').append('<option value="">Select Type of Use</option>'); // Default option
                    
                    response.forEach(function(occupy) {
                        $('#type_of_use').append('<option value="' + occupy.id + '">' + occupy.type_name + '</option>'); 
                    });
                } else {
                    alert('Failed to load building occupy types!');
                }
            },
            error: function() {
                alert('Error loading building occupy data.');
            }
        });
        
        $.ajax({
            url: '{{ url('api/auth/building-occupies-list') }}',  // URL for 'building-occupies' route
            type: 'GET',
            success: function(response) {
                if (Array.isArray(response)) {
                    $('#usare_factor').empty();
                    $('#usare_factor').append('<option value="">Select Building Occupy Type</option>'); // Default option
                    
                    response.forEach(function(occupy) {
                        $('#usare_factor').append('<option value="' + occupy.id + '">' + occupy.name + '</option>');
                    });
                } else {
                    alert('Failed to load building occupy types!');
                }
            },
            error: function() {
                alert('Error loading building occupy data.');
            }
        });




    });

    let rowIndex = 0;  // A counter to keep track of the row index
    
    // Function to handle form submission
    function saveOwnerDetails() {
        // Get the input field values
        const ownerName = document.getElementById('m_owner_name').value;
        const fatherHusbandName = document.getElementById('m_father_husband_name').value;
        const mobileNo = document.getElementById('m_mobile_no').value;
        const email = document.getElementById('m_email').value;
    
        // Validation: Ensure required fields are not empty
        if (!ownerName || !fatherHusbandName || !mobileNo) {
            alert("Please fill out all required fields.");
            return;
        }
    
        // Create a new row in the table
        const tableBody = document.getElementById('ownerTableBody');
        const newRow = document.createElement('tr');
    
        // Create table cells for each data field
        const ownerNameCell = document.createElement('td');
        ownerNameCell.textContent = ownerName;
        newRow.appendChild(ownerNameCell);
    
        const fatherHusbandNameCell = document.createElement('td');
        fatherHusbandNameCell.textContent = fatherHusbandName;
        newRow.appendChild(fatherHusbandNameCell);
    
        const mobileNoCell = document.createElement('td');
        mobileNoCell.textContent = mobileNo;
        newRow.appendChild(mobileNoCell);
    
        const emailCell = document.createElement('td');
        emailCell.textContent = email;
        newRow.appendChild(emailCell);
    
        
        // Add a button or link to remove the row (optional)
        const actionsCell = document.createElement('td');
        const deleteButton = document.createElement('button');
        deleteButton.classList.add('btn', 'btn-danger', 'btn-sm');
        deleteButton.textContent = 'Delete';
        deleteButton.onclick = function() {
            newRow.remove();
        };
        actionsCell.appendChild(deleteButton);
        
        
        // Create hidden inputs for each field and append them to separate cells 
        const NameInput = document.createElement('input');
        NameInput.type = 'hidden';
        NameInput.name = `owner[${rowIndex}][ownerName]`;  // Use dynamic index for uniqueness
        NameInput.value = ownerName;
        actionsCell.appendChild(NameInput); 
        
        const fatherHusbandInput = document.createElement('input');
        fatherHusbandInput.type = 'hidden';
        fatherHusbandInput.name = `owner[${rowIndex}][fatherHusbandName]`;  // Use dynamic index
        fatherHusbandInput.value = fatherHusbandName;
        actionsCell.appendChild(fatherHusbandInput); 
        
        const mobileNoInput = document.createElement('input');
        mobileNoInput.type = 'hidden';
        mobileNoInput.name = `owner[${rowIndex}][mobileNo]`;  // Use dynamic index
        mobileNoInput.value = mobileNo;
        actionsCell.appendChild(mobileNoInput); 
     
        const emailInput = document.createElement('input');
        emailInput.type = 'hidden';
        emailInput.name = `owner[${rowIndex}][email]`;  // Use dynamic index
        emailInput.value = email;
        actionsCell.appendChild(emailInput); 
        
        newRow.appendChild(actionsCell);
        
        
    
        // Append the new row to the table
        tableBody.appendChild(newRow);
    
        // Reset the form fields
        document.getElementById('m_owner_name').value = '';
        document.getElementById('m_father_husband_name').value = '';
        document.getElementById('m_mobile_no').value = '';
        document.getElementById('m_email').value = '';
    
        // Close the modal
        var modal = new bootstrap.Modal(document.getElementById('bootstrapBasicModal'));
        modal.hide();
    
        // Increment the row index for next row
        rowIndex++;
    } 
    
    
</script>
<script>
    document.getElementById('present_address').addEventListener('change', function() {
        // Check if checkbox is checked
        if (this.checked) {
            // Copy values from the property address fields to the present address fields
            document.getElementById('p_house_no_plot_building').value = document.getElementById('house_no_plot_building').value;
            document.getElementById('p_street_no_name').value = document.getElementById('street_no_name').value;
            document.getElementById('p_locality').value = document.getElementById('locality').value;
            document.getElementById('p_colony').value = document.getElementById('colony').value;
            document.getElementById('p_city').value = document.getElementById('city').value;
            document.getElementById('p_pincode').value = document.getElementById('pincode').value;
        } else {
            // Clear the present address fields if checkbox is unchecked
            document.getElementById('p_house_no_plot_building').value = '';
            document.getElementById('p_street_no_name').value = '';
            document.getElementById('p_locality').value = '';
            document.getElementById('p_colony').value = '';
            document.getElementById('p_city').value = '';
            document.getElementById('p_pincode').value = '';
        }
    });
</script>

<script>
    let rowArea = 0;  // A counter to keep track of the row index
    
    // Conversion function: Converts square feet to square meters
    function convertToSquareMeters() {
        const squareFeet = document.getElementById('plot_area_square_feet').value;
        if (squareFeet) {
            const squareMeter = (parseFloat(squareFeet) * 0.092903).toFixed(2);  // Conversion
            document.getElementById('plot_area_square_meter').value = squareMeter;  // Update square meter field
        }
    } 
    // Add an event listener to the unit_square_feet_4 input field for real-time conversion
    document.getElementById('plot_area_square_feet').addEventListener('input', convertToSquareMeters);
    
    function convertToSquareMeters2() {
        const squareFeet = document.getElementById('unit_square_feet').value;
        if (squareFeet) {
            const squareMeter = (parseFloat(squareFeet) * 0.092903).toFixed(2);  // Conversion
            document.getElementById('unit_square_meter').value = squareMeter;  // Update square meter field
        }
    } 
    // Add an event listener to the unit_square_feet_4 input field for real-time conversion
    document.getElementById('unit_square_feet').addEventListener('input', convertToSquareMeters2);

    function convertToSquareMeters3() {
        const squareFeet = document.getElementById('plinth_area_square_feet').value;
        if (squareFeet) {
            const squareMeter = (parseFloat(squareFeet) * 0.092903).toFixed(2);  // Conversion
            document.getElementById('plinth_area_square_meter').value = squareMeter;  // Update square meter field
        }
    } 
    // Add an event listener to the unit_square_feet_4 input field for real-time conversion
    document.getElementById('plinth_area_square_feet').addEventListener('input', convertToSquareMeters3);


    // Conversion function: Converts square feet to square meters
    function convertToSquareMeters4() {
        const squareFeet = document.getElementById('built_area_square_feet').value;
        if (squareFeet) 
        {
            const squareMeter = (parseFloat(squareFeet) * 0.092903).toFixed(2);  // Conversion
            document.getElementById('built_area_square_meter').value = squareMeter;  // Update square meter field
        }
    } 
    // Add an event listener to the unit_square_feet_4 input field for real-time conversion
    document.getElementById('built_area_square_feet').addEventListener('input', convertToSquareMeters4);

    // Function to handle form submission
    // Initialize the total sum of unit_square_feet
let totalUnitSquareFeet = 0;

    // Function to handle form submission
    function saveAreaDetails() { 
        // Get the input field values
        const floorNo = document.getElementById('floor_type');
        const unitSquareFeet = parseFloat(document.getElementById('unit_square_feet').value);
        const unitSquareMeter = document.getElementById('unit_square_meter').value;
        const usageType = document.getElementById('usage_type').value;
        const usageFactor = document.getElementById('usare_factor').value; 
        const constructionType = document.getElementById('nature_of_construction').value;
    
        // Validation: Ensure required fields are not empty
        if (!floorNo.value || !unitSquareFeet || !unitSquareMeter || !usageType || !usageFactor || !constructionType) {
            alert("Please fill out all required fields.");
            return;
        }
    
        // Create a new row in the table 
        const tableBody = document.getElementById('areaTableBody');
        const newRow = document.createElement('tr');
    
        // Create table cells for each data field
        const floorNoCell = document.createElement('td');
        floorNoCell.textContent = floorNo.text;
        newRow.appendChild(floorNoCell);
    
        const unitSquareFeetCell = document.createElement('td');
        unitSquareFeetCell.textContent = unitSquareFeet;
        newRow.appendChild(unitSquareFeetCell);
    
        const unitSquareMeterCell = document.createElement('td');
        unitSquareMeterCell.textContent = unitSquareMeter;
        newRow.appendChild(unitSquareMeterCell);
    
        const usageTypeCell = document.createElement('td');
        usageTypeCell.textContent = usageType;
        newRow.appendChild(usageTypeCell);
    
        const usageFactorCell = document.createElement('td');
        usageFactorCell.textContent = usageFactor;
        newRow.appendChild(usageFactorCell);
        
        const usageConstructionType = document.createElement('td');
        usageConstructionType.textContent = constructionType;
        newRow.appendChild(usageConstructionType);
    
        // Add a button or link to remove the row (optional)
        const actionsCell = document.createElement('td');
        const deleteButton = document.createElement('button');
        deleteButton.classList.add('btn', 'btn-danger', 'btn-sm');
        deleteButton.textContent = 'Delete';
        deleteButton.onclick = function() {
            newRow.remove();
            updateTotalSquareFeet(); // Recalculate total when a row is removed
        };
        actionsCell.appendChild(deleteButton);
    
        // Create hidden inputs for each field and append them to the actions cell
        const floorNoInput = document.createElement('input');
        floorNoInput.type = 'hidden';
        floorNoInput.name = `area[${rowArea}][floorNo]`;  
        floorNoInput.value = floorNo.value;
        actionsCell.appendChild(floorNoInput);
    
        const unitSquareFeetInput = document.createElement('input');
        unitSquareFeetInput.type = 'hidden';
        unitSquareFeetInput.name = `area[${rowArea}][unitSquareFeet]`;  
        unitSquareFeetInput.value = unitSquareFeet;
        actionsCell.appendChild(unitSquareFeetInput);
    
        const unitSquareMeterInput = document.createElement('input');
        unitSquareMeterInput.type = 'hidden';
        unitSquareMeterInput.name = `area[${rowArea}][unitSquareMeter]`;  
        unitSquareMeterInput.value = unitSquareMeter;
        actionsCell.appendChild(unitSquareMeterInput);
    
        const usageTypeInput = document.createElement('input');
        usageTypeInput.type = 'hidden';
        usageTypeInput.name = `area[${rowArea}][usageType]`;  
        usageTypeInput.value = usageType;
        actionsCell.appendChild(usageTypeInput);
    
        const usageFactorInput = document.createElement('input');
        usageFactorInput.type = 'hidden';
        usageFactorInput.name = `area[${rowArea}][usageFactor]`;  
        usageFactorInput.value = usageFactor;
        actionsCell.appendChild(usageFactorInput);
    
        const constructionTypeInput = document.createElement('input');
        constructionTypeInput.type = 'hidden';
        constructionTypeInput.name = `area[${rowArea}][constructionType]`;  
        constructionTypeInput.value = constructionType;
        actionsCell.appendChild(constructionTypeInput);
    
        // Append the actions cell to the new row
        newRow.appendChild(actionsCell);
    
        // Append the new row to the table
        tableBody.appendChild(newRow);
    
        // Update total square feet
        totalUnitSquareFeet += unitSquareFeet;
        updateTotalSquareFeet();
    
        // Reset the form fields
        document.getElementById('floor_type').value = '----';
        document.getElementById('unit_square_feet').value = '';
        document.getElementById('unit_square_meter').value = '';
        document.getElementById('usage_type').value = '----';
        document.getElementById('usare_factor').value = '----';
        document.getElementById('nature_of_construction').value = '----';
    
        // Close the modal
        var modal = new bootstrap.Modal(document.getElementById('area'));
        modal.hide();
    
        // Increment the row index for the next row
        rowIndex++;
    }
    
    // Function to update the built area total
    function updateTotalSquareFeet() {
        const totalAreaField = document.getElementById('built_area_square_feet');
        if (totalAreaField) {
            totalAreaField.value = totalUnitSquareFeet;
            const squareMeter = (parseFloat(totalUnitSquareFeet) * 0.092903).toFixed(2);  // Conversion
            document.getElementById('built_area_square_meter').value = squareMeter;  // Update square meter field
        }
    }

</script>

<script>
        // Simulating collecting form data from previous steps
       function getFormData() {
            return {
                ulb_name: document.getElementById('ulb').value,
                ward_no: document.getElementById('ward_id').value,
                property_no: document.getElementById('property_no').value,
                electricity_id: document.getElementById('electricity_id').value,
                owner_name: document.getElementById('owner_name').value,
                relationship_with_owner: document.getElementById('relationship_with_owner').value,
                aadhaar_number: document.getElementById('aadhaar_number').value,
                property_address: document.getElementById('property_address').value,
                owner_address: document.getElementById('owner_address').value,
                same_address: document.getElementById('same_address').value,
                tax_rate_zone: document.getElementById('tax_rate_zone').value,
                property_ownership_type: document.getElementById('property_ownership').value,
                tax_exemption: document.getElementById('tax_exemption').value,
                plot_area_square_feet: document.getElementById('plot_area_square_feet').value,
                plot_area_square_meter: document.getElementById('plot_area_square_meter').value,
                plinth_area_square_feet: document.getElementById('plinth_area_square_feet').value,
                plinth_area_square_meter: document.getElementById('plinth_area_square_meter').value,
                built_area_square_feet: document.getElementById('built_area_square_feet').value,
                built_area_square_meter: document.getElementById('built_area_square_meter').value,
                municipal_water_supply: document.getElementById('municipal_water_supply').value,
                no_of_connection: document.getElementById('no_of_connection').value,
                water_supply_connection_id: document.getElementById('water_supply_connection_id').value,
                source_of_water: document.getElementById('source_of_water').value,
                type_of_use: document.getElementById('type_of_use').value,
                sanitation: document.getElementById('sanitation').value,
                solid_waste_management: document.getElementById('solid_waste_management').value,
                remark: document.getElementById('remark').value,
                first_photo: document.getElementById('capture_first_photo').files[0]?.name,  // Get the name of the first photo file
                second_photo: document.getElementById('capture_second_photo').files[0]?.name, // Get the name of the second photo file
                supporting_documents: document.getElementById('upload_supporting_documents').files[0]?.name // Get the name of the supporting document
            };
        }
         


        // Populate the review details dynamically
        function populateReviewDetails() {
            const formData = getFormData();

            // Example of populating the fields with the form data
            document.getElementById('review_ulb_name').innerText = formData.ulb_name;
            document.getElementById('review_ward_no').innerText = formData.ward_no;
            document.getElementById('review_property_no').innerText = formData.property_no;
            document.getElementById('review_electricity_id').innerText = formData.electricity_id;

            document.getElementById('review_owner_name').innerText = formData.owner_name;
            document.getElementById('review_relationship_with_owner').innerText = formData.relationship_with_owner;
            document.getElementById('review_aadhaar_number').innerText = formData.aadhaar_number;

            document.getElementById('review_property_address').innerText = formData.property_address;
            document.getElementById('review_owner_address').innerText = formData.owner_address;
            document.getElementById('review_same_address').innerText = formData.same_address;

            document.getElementById('review_tax_rate_zone').innerText = formData.tax_rate_zone;
            document.getElementById('review_property_ownership_type').innerText = formData.property_ownership_type;
            document.getElementById('review_tax_exemption').innerText = formData.tax_exemption;

            document.getElementById('review_plot_area_square_feet').innerText = formData.plot_area_square_feet;
            document.getElementById('review_plot_area_square_meter').innerText = formData.plot_area_square_meter;
            document.getElementById('review_plinth_area_square_feet').innerText = formData.plinth_area_square_feet;
            document.getElementById('review_plinth_area_square_meter').innerText = formData.plinth_area_square_meter;
            document.getElementById('review_built_area_square_feet').innerText = formData.built_area_square_feet;
            document.getElementById('review_built_area_square_meter').innerText = formData.built_area_square_meter;

            document.getElementById('review_municipal_water_supply').innerText = formData.municipal_water_supply;
            document.getElementById('review_no_of_connection').innerText = formData.no_of_connection;
            document.getElementById('review_water_supply_connection_id').innerText = formData.water_supply_connection_id;
            document.getElementById('review_source_of_water').innerText = formData.source_of_water;
            document.getElementById('review_type_of_use').innerText = formData.type_of_use;

            document.getElementById('review_sanitation').innerText = formData.sanitation;
            document.getElementById('review_solid_waste_management').innerText = formData.solid_waste_management;

            document.getElementById('review_first_photo').innerText = formData.first_photo;
            document.getElementById('review_second_photo').innerText = formData.second_photo;

            document.getElementById('review_uploaded_documents').innerText = formData.supporting_documents;

            document.getElementById('review_remark').innerText = formData.remark;
        }

        // Call this function when Step 8 is shown
        populateReviewDetails();

        function prevStep(step) {
            console.log("Going to previous step:", step);
            // Logic for previous step
        }

        function submitForm() {
            alert("Form Submitted!");
        }
    </script>



@endsection