@extends('admin.layouts.adminapp')
@section('style')
<link href='https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css' rel='stylesheet' type='text/css' />
@endsection
@section('content')
<!--start page wrapper -->
<div class="page-wrapper">
    <div class="page-content">
        <!--breadcrumb-->
        <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
            <div class="breadcrumb-title pe-3">Edit Property Surveyor </div>
            <div class="ps-3">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 p-0">
                        <li class="breadcrumb-item"><a href="javascript:;"><i class="bx bx-home-alt"></i></a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page"> Edit Property Surveyor </li>
                    </ol>
                </nav>
            </div>
            <div class="ms-auto">
                <div class="btn-group">
                </div>
            </div>
        </div>
        <!--end breadcrumb-->
        <div class="row"> 
            <div class="col-12">
                <!-- Displaying Success Message -->
                @if(session('success'))
                    <div class="alert alert-success">
                        {{ session('success') }}
                    </div>
                @endif

                <!-- Displaying Error Messages -->
                @if($errors->any())
                    <div class="alert alert-danger">
                        <ul>
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
            </div>
            
            <div class="col-lg-12 mx-auto">
                <form action="{{ route('properties.update',$property->id) }}" method="POST" enctype="multipart/form-data">  
                    <div class="card">
                        <div class="card-header radius-15 bg-primary">
                            <div class="d-flex align-items-center">
                                <h6 class="mb-0 text-white">Orner Details</h6>
                            </div>
                        </div>
                        <div class="card-body p-4 row">
                            @csrf
                            <div class="col-md-3 mb-3">
                                <label for="ulbNameCode" class="form-label">ULB's Name/Code</label>
                                <input type="text" class="form-control" id="ulbNameCode" name="ulbNameCode" value="{{ $property->ulbNameCode ?? '' }}" readonly required>
                                @error('ulbNameCode')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-3 mb-3">
                                <label for="status" class="form-label">Ward No</label>
                                <select class="form-select form-select-sm" id="wardNo" name="wardNo">
                                    <option value="">Select Ward No</option>
                                    @foreach($wards as $k=>$ward)
                                    <option value="{{ $ward->id }}" {{ $ward->id==$property->wardNo ? 'selected' : '' }} >{{ $ward->name }}</option>
                                    @endforeach
                                    @if($property->wardNo=='Other')
                                        <option value="Other" selected >Other</option>
                                    @endif
                                </select>
                            </div>
                            @if($property->wardNo=='Other')
                            <div class="col-md-3 mb-3">
                                <label for="ulbNameCode" class="form-label">Ward No Othere</label>
                                <input type="text" class="form-control" id="ulbNameCode" name="ulbNameCode" value="{{ $property->ulbNameCode ?? '' }}" required>
                                @error('ulbNameCode')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            @endif
                            <div class="col-md-3 mb-3">
                                <label for="nagarpalikaId" class="form-label">E-Nagarpalika Id</label>
                                <input type="text" class="form-control" id="nagarpalikaId" name="nagarpalikaId" value="{{ $property->nagarpalikaId ?? '' }}"  >
                                @error('nagarpalikaId')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-3 mb-3">
                                <label for="parcelNo" class="form-label">Parcel No</label>
                                <input type="text" class="form-control" id="parcelNo" name="parcelNo" value="{{ $property->parcelNo ?? '' }}"  >
                                @error('parcelNo')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-2 mb-3">
                                <label for="propertyNo" class="form-label">Property No</label>
                                <input type="text" class="form-control" id="propertyNo" name="propertyNo" value="{{ $property->propertyNo ?? '' }}"  >
                                @error('propertyNo')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-2 mb-3">
                                <label for="electricityId" class="form-label">Electricity Id</label>
                                <input type="text" class="form-control" id="electricityId" name="electricityId" value="{{ $property->electricityId ?? '' }}"  >
                                @error('electricityId')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-2 mb-3">
                                <label for="khasraNo" class="form-label">Khasra No</label>
                                <input type="text" class="form-control" id="khasraNo" name="khasraNo" value="{{ $property->khasraNo ?? '' }}"  >
                                @error('khasraNo')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-2 mb-3">
                                <label for="registryNo" class="form-label">Registry No</label>
                                <input type="text" class="form-control" id="registryNo" name="registryNo" value="{{ $property->registryNo ?? '' }}"  >
                                @error('registryNo')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-2 mb-3">
                                <label for="constructedDate" class="form-label">Constructed Date</label>
                                <input type="text" class="form-control" id="constructedDate" name="constructedDate" value="{{ $property->constructedDate ?? '' }}"  >
                                @error('constructedDate')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            
                            <div class="col-md-2 mb-3">
                                <label for="isSlum" class="form-label">Slum</label>
                                <select class="form-select form-select-sm" id="isSlum" name="isSlum">
                                    <option value="yes"  {{ $property->isSlum =='yes' ? 'selected' : '' }}>Yes</option>
                                    <option value="no"  {{ $property->isSlum=='no' ? 'selected' : '' }}>No</option>
                                </select>
                            </div> 
                            <div class="col-md-2 mb-3" style="display :{{ $property->isSlum=='yes' ? 'blank':'none'}}">
                                <label for="slumId" class="form-label">Slum Id</label>
                                <input type="text" class="form-control" id="slumId" name="slumId" value="{{ $property->slumId ?? '' }}"  >
                                @error('slumId')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div> 
                             
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-header radius-15 bg-primary">
                            <div class="d-flex align-items-center">
                                <h6 class="mb-0 text-white">Orner Details</h6>
                            </div>
                        </div>
                        <div class="card-body p-4 row"> 
                            <div class="col-md-3 mb-3">
                                <label for="respondentName" class="form-label">Name of Respondent</label>
                                <input type="text" class="form-control" id="respondentName" name="respondentName" value="{{ $property->respondentName ?? '' }}" required>
                                @error('respondentName')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-3 mb-3">
                                <label for="respondentRelationship" class="form-label">Respondent with Owner</label>
                                <select class="form-select form-select-sm" id="respondentRelationship" name="respondentRelationship">
                                    <option value="">Select Respondent with Owner</option>
                                    <option value="Self"  {{ $property->respondentRelationship =='Self' ? 'selected' : '' }}>Self</option>
                                    <option value="Daughte"  {{ $property->respondentRelationship=='Daughte' ? 'selected' : '' }}>Daughte</option> 
                                    <option value="Son"  {{ $property->respondentRelationship =='Son' ? 'selected' : '' }}>Son</option>
                                    <option value="Brother"  {{ $property->respondentRelationship=='Brother' ? 'selected' : '' }}>Brother</option> 
                                    <option value="Wife"  {{ $property->respondentRelationship =='Wife' ? 'selected' : '' }}>Wife</option>
                                    <option value="Mother"  {{ $property->respondentRelationship=='Mother' ? 'selected' : '' }}>Mother</option> 
                                    <option value="Father"  {{ $property->respondentRelationship =='Father' ? 'selected' : '' }}>Father</option>
                                    <option value="Other"  {{ $property->respondentRelationship=='Other' ? 'selected' : '' }}>Other</option> 
                                </select>
                            </div>
                            <div class="col-md-3 mb-3" style="display :{{ $property->respondentRelationship=='Other' ? 'blank':'none'}}">
                                <label for="respondentRelationshipOther" class="form-label">Respondent with Owner Other</label>
                                <input type="text" class="form-control" id="respondentRelationshipOther" name="respondentRelationshipOther" value="{{ $property->respondentRelationshipOther ?? '' }}"  >
                                @error('respondentRelationshipOther')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div> 
                            <div class="col-md-3 mb-3">
                                <label for="ownerAadhaarNumber" class="form-label">Owner Aadhar Number</label>
                                <input type="number" class="form-control" id="ownerAadhaarNumber" name="ownerAadhaarNumber" value="{{ $property->ownerAadhaarNumber ?? '' }}"  >
                                @error('ownerAadhaarNumber')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div> 
                            <div class="col-md-12 mb-3"> 
                                <label for="ownerDetails" class="form-label">Add Owner</label>
                                <table class="table" id="owner-table">
                                    <thead>
                                        <tr>
                                            <th>Owner Name</th>
                                            <th>Father/Husband Name</th>
                                            <th>Mobile No.</th>
                                            <th>Secondary Mobile No.</th>
                                            <th>Email</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach( ( (is_array($property->ownerDetails)? $property->ownerDetails : json_decode($property->ownerDetails)) ) as $k=>$owner)
                                        <tr class="owner-row" data-index="{{ $k }}">
                                            <td><input type="text" class="form-control" name="ownerDetails[{{ $k }}][name]" value="{{ $owner->name ?? '' }}" placeholder="Enter Owner Name" required></td>
                                            <td><input type="text" class="form-control" name="ownerDetails[{{ $k }}][fatherName]" value="{{ $owner->fatherName ?? '' }}" placeholder="Enter Father/Husband Name" required></td>
                                            <td><input type="number" class="form-control" name="ownerDetails[{{ $k }}][mobile]" value="{{ $owner->mobile ?? '' }}" placeholder="Enter Mobile" required></td>
                                            <td><input type="number" class="form-control" name="ownerDetails[{{ $k }}][secondaryPhone]" value="{{ $owner->secondaryPhone ?? '' }}" placeholder="Enter Secondary Mobile No."></td>
                                            <td><input type="email" class="form-control" name="ownerDetails[{{ $k }}][email]" value="{{ $owner->email ?? '' }}" placeholder="Enter email"></td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <td colspan="4"></td>
                                            <td>
                                                <button type="button" class="btn btn-primary" id="add-owner-btn">Add More Owner</button>
                                            </td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                            
                            
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-header radius-15 bg-primary">
                            <div class="d-flex align-items-center">
                                <h6 class="mb-0 text-white">Address Details</h6>
                            </div>
                        </div> 
                        <div class="card-body p-4 row">
                            <div class="col-md-2 mb-3">
                                <label for="houseNo" class="form-label">House No</label>
                                <input type="text" class="form-control" id="houseNo" name="houseNo" value="{{ $property->houseNo ?? '' }}" required>
                                @error('houseNo')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-2 mb-3">
                                <label for="streetNoName" class="form-label">Street No / Name</label>
                                <input type="text" class="form-control" id="streetNoName" name="streetNoName" value="{{ $property->streetNoName ?? '' }}" required>
                                @error('streetNoName')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-2 mb-3">
                                <label for="locality" class="form-label">Locality</label>
                                <input type="text" class="form-control" id="locality" name="locality" value="{{ $property->locality ?? '' }}" required>
                                @error('locality')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-2 mb-3">
                                <label for="colony" class="form-label">Colony</label>
                                <input type="text" class="form-control" id="colony" name="colony" value="{{ $property->colony ?? '' }}" required>
                                @error('colony')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-2 mb-3">
                                <label for="city" class="form-label">City</label>
                                <input type="text" class="form-control" id="city" name="city" value="{{ $property->city ?? '' }}" required>
                                @error('city')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-2 mb-3">
                                <label for="pincode" class="form-label">Pincode</label>
                                <input type="text" class="form-control" id="pincode" name="pincode" value="{{ $property->pincode ?? '' }}" required>
                                @error('pincode')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        
                            <div class="col-md-12 mb-3">
                                <label for="isSameAsProperty" class="form-label">Same As Property</label>
                                <input type="checkbox" class="form-checkbox" 
                                       id="isSameAsProperty" 
                                       name="isSameAsProperty" 
                                       {{ $property->isSameAsProperty == 'true' ? 'checked' : '' }}
                                       value="true" 
                                >
                                @error('isSameAsProperty')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        
                            <!-- Present Address Fields -->
                            <div class="col-md-2 mb-3">
                                <label for="presentHouseNo" class="form-label">Present House No</label>
                                <input type="text" class="form-control" id="presentHouseNo" name="presentHouseNo" value="{{ $property->presentHouseNo ?? '' }}" required>
                                @error('presentHouseNo')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-2 mb-3">
                                <label for="presentStreetNoName" class="form-label">Present Street No / Name</label>
                                <input type="text" class="form-control" id="presentStreetNoName" name="presentStreetNoName" value="{{ $property->presentStreetNoName ?? '' }}" required>
                                @error('presentStreetNoName')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-2 mb-3">
                                <label for="presentLocality" class="form-label">Present Locality</label>
                                <input type="text" class="form-control" id="presentLocality" name="presentLocality" value="{{ $property->presentLocality ?? '' }}" required>
                                @error('presentLocality')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-2 mb-3">
                                <label for="presentColony" class="form-label">Present Colony</label>
                                <input type="text" class="form-control" id="presentColony" name="presentColony" value="{{ $property->presentColony ?? '' }}" required>
                                @error('presentColony')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-2 mb-3">
                                <label for="presentCity" class="form-label">Present City</label>
                                <input type="text" class="form-control" id="presentCity" name="presentCity" value="{{ $property->presentCity ?? '' }}" required>
                                @error('presentCity')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-2 mb-3">
                                <label for="presentPincode" class="form-label">Present Pincode</label>
                                <input type="text" class="form-control" id="presentPincode" name="presentPincode" value="{{ $property->presentPincode ?? '' }}" required>
                                @error('presentPincode')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </div> 

                    </div>
                    <div class="card">
                        <div class="card-header radius-15 bg-primary">
                            <div class="d-flex align-items-center">
                                <h6 class="mb-0 text-white">Taxation Details</h6>
                            </div>
                        </div>
                        <div class="card-body p-4 row"> 
                            <div class="col-md-3 mb-3">
                                <label for="taxRateZone" class="form-label">Tax Rate Zone</label>
                                <select class="form-select form-select-sm" id="taxRateZone" name="taxRateZone">
                                    <option value="">Select Tax Rate Zone</option>
                                    @foreach($taxRateZones as $k=>$taxRateZone)
                                        <option value="{{ $taxRateZone->id }}" {{ $taxRateZone->id == $property->taxRateZone ? 'selected' : '' }}>{{ $taxRateZone->name }}</option>
                                    @endforeach 
                                    <option value="Other" {{ $property->taxRateZone == 'Other' ? 'selected' : '' }}>Other</option>
                                </select>
                                @error('taxRateZone')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div> 
                            
                            <div class="col-md-3 mb-3" id="taxRateZoneOtherField" style="display:{{ $property->taxRateZone == 'Other' ? 'block' : 'none' }}">
                                <label for="taxRateZoneOther" class="form-label">Tax Rate Zone Other</label>
                                <input type="text" class="form-control" id="taxRateZoneOther" name="taxRateZoneOther" value="{{ $property->taxRateZoneOther ?? '' }}"  >
                                @error('taxRateZoneOther')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>  
                            
                            <div class="col-md-3 mb-3">
                                <label for="propertyOwnership" class="form-label">Ownerships</label>
                                <select class="form-select form-select-sm" id="propertyOwnership" name="propertyOwnership">
                                    <option value="">Select Ownership</option>
                                    @foreach($ownerships as $k=>$ownership)
                                        <option value="{{ $ownership->id }}" {{ $ownership->id == $property->propertyOwnership ? 'selected' : '' }}>{{ $ownership->name }}</option>
                                    @endforeach 
                                    <option value="Other" {{ $property->propertyOwnership == 'Other' ? 'selected' : '' }}>Other</option>
                                </select>
                                @error('propertyOwnership')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div> 
                            
                            <div class="col-md-3 mb-3" id="propertyOwnershipOtherField" style="display:{{ $property->propertyOwnership == 'Other' ? 'block' : 'none' }}">
                                <label for="propertyOwnershipOther" class="form-label">Property Ownership Other</label>
                                <input type="text" class="form-control" id="propertyOwnershipOther" name="propertyOwnershipOther" value="{{ $property->propertyOwnershipOther ?? '' }}"  >
                                @error('propertyOwnershipOther')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            
                            <div class="col-md-3 mb-3">
                                <label for="situation" class="form-label">Situations</label>
                                <select class="form-select form-select-sm" id="situation" name="situation">
                                    <option value="">Select Situation</option>
                                    @foreach($situations as $k=>$situation)
                                        <option value="{{ $situation->id }}" {{ $situation->id ==  ($property->situation == '' ? '' : $property->situation->id ) ? 'selected' : '' }}>{{ $situation->name }}</option>
                                    @endforeach 
                                    <option value="Other" {{ $property->situation == '' ? 'selected' : '' }}>Other</option>
                                </select>
                                @error('situation')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div> 
                            
                            <div class="col-md-3 mb-3" id="situationOtherField" style="display:{{ $property->situation == 'Other' ? 'block' : 'none' }}">
                                <label for="situationOther" class="form-label">Situation Other</label>
                                <input type="text" class="form-control" id="situationOther" name="situationOther" value="{{ $property->situationOther ?? '' }}">
                                @error('situationOther')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            
                            <div class="col-md-3 mb-3">
                                <label for="propertyUse" class="form-label">Property Use</label>
                                <select class="form-select form-select-sm" id="propertyUse" name="propertyUse">
                                    <option value="">Select Property Use</option>
                                    @foreach($propertyUses as $k=>$propertyUse)
                                        <option value="{{ $propertyUse->id }}" {{ $propertyUse->id == $property->propertyUse ? 'selected' : '' }}>{{ $propertyUse->name }}</option>
                                    @endforeach 
                                    <option value="Other" {{ $property->propertyUse == 'Other' ? 'selected' : '' }}>Other</option>
                                </select>
                                @error('propertyUse')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div> 
                            
                            <div class="col-md-3 mb-3" id="propertyOtherField" style="display:{{ $property->propertyUse == 'Other' ? 'block' : 'none' }}">
                                <label for="propertyOther" class="form-label">Property Use Other</label>
                                <input type="text" class="form-control" id="propertyOther" name="propertyOther" value="{{ $property->propertyOther ?? '' }}">
                                @error('propertyOther')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            
                            <div class="col-md-3 mb-3">
                                <label for="commercial" class="form-label">Commercial Use</label> 
                                <select class="form-select form-select-sm" id="commercial" name="commercial">
                                    <option value="">Select Commercial Use</option>
                                    @foreach($commercialUses as $k=>$commercialUse)
                                        <option value="{{ $commercialUse->id }}" {{ $commercialUse->id == ($property->commercial == '' ? '' : $property->commercial->id ) ? 'selected' : '' }}>{{ $commercialUse->name }}</option>
                                    @endforeach 
                                    <option value="Other" {{ $property->commercial == '' ? 'selected' : '' }}>Other</option>
                                </select>
                                @error('commercial')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div> 
                            
                            <div class="col-md-3 mb-3" id="commercialOtherField" style="display:{{ $property->commercial == 'Other' ? 'block' : 'none' }}">
                                <label for="commercialOther" class="form-label">Commercial Use Other</label>
                                <input type="text" class="form-control" id="commercialOther" name="commercialOther" value="{{ $property->commercialOther ?? '' }}">
                                @error('commercialOther')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            
                            <div class="col-md-3 mb-3">
                                <label for="commercial" class="form-label">Road Type</label> 
                                <select class="form-select form-select-sm" id="roadType" name="roadType">
                                    <option value="">Select Road Type</option> 
                                    <option value="dambar road" {{ $property->roadType == 'dambar road' ? 'selected' : '' }}>Dambar Road </option> 
                                    <option value="Katcha road" {{ $property->roadType == 'Katcha road' ? 'selected' : '' }}>Katcha road </option> 
                                    <option value="RCC Road" {{ ($property->roadType == 'rcc road' || $property->roadType == 'RCC Road') ? 'selected' : '' }}>RCC Road </option> 
                                    <option value="Interlocking Road" {{ $property->roadType == 'Interlocking Road' ? 'selected' : '' }}>Interlocking Road </option> 
                                    <option value="Other" {{ $property->roadType == '' ? 'selected' : '' }}>Other</option>
                                </select>
                                @error('roadType')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div> 
                            
                            <div class="col-md-3 mb-3" id="roadTypeOtherField" style="display:{{ $property->roadType == 'Other' ? 'block' : 'none' }}">
                                <label for="roadTypeOther" class="form-label">Commercial Use Other</label>
                                <input type="text" class="form-control" id="roadTypeOther" name="roadTypeOther" value="{{ $property->roadTypeOther ?? '' }}">
                                @error('roadTypeOther')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            
                            <div class="col-md-3 mb-3">
                                <label for="yearOfConstruction" class="form-label">Year of Construction</label>
                                <select class="form-select form-select-sm" id="yearOfConstruction" name="yearOfConstruction">
                                    <option value="">Select Year of Construction</option>
                                    @foreach($yearOfConstructions as $k=>$yearOfConstruction)
                                        <option value="{{ $yearOfConstruction->id }}" {{ $yearOfConstruction->id == $property->yearOfConstruction ? 'selected' : '' }}>{{ $yearOfConstruction->name }}</option>
                                    @endforeach 
                                    <option value="Other" {{ $property->yearOfConstruction == 'Other' ? 'selected' : '' }}>Other</option>
                                </select>
                                @error('yearOfConstruction')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div> 
                            
                            <div class="col-md-3 mb-3" id="yearOfConstructionOtherField" style="display:{{ $property->yearOfConstruction == 'Other' ? 'block' : 'none' }}">
                                <label for="yearOfConstructionOther" class="form-label">Year of Construction Other</label>
                                <input type="text" class="form-control" id="yearOfConstructionOther" name="yearOfConstructionOther" value="{{ $property->yearOfConstructionOther ?? '' }}">
                                @error('yearOfConstructionOther')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            
                            <div class="col-md-3 mb-3">
                                <label for="isExemptionApplicable" class="form-label">Exemption Applicable</label>
                                <select class="form-select form-select-sm" id="isExemptionApplicable" name="isExemptionApplicable">
                                    <option value="yes" {{ $property->isExemptionApplicable == 'yes' ? 'selected' : '' }}>Yes</option>
                                    <option value="no" {{ $property->isExemptionApplicable == 'no' ? 'selected' : '' }}>No</option>
                                </select>
                            </div>
                            
                            <div class="col-md-3 mb-3" id="exemptionTypeField" style="display:{{ $property->isExemptionApplicable == 'yes' ? 'block' : 'none' }}">
                                <label for="exemptionType" class="form-label">Exemption Applicable Type</label>
                                <select class="form-select form-select-sm" id="exemptionType" name="exemptionType">
                                    <option value="">Select Exemption Type</option>
                                    @foreach($exemptionApplicables as $k=>$exemptionApplicable)
                                        <option value="{{ $exemptionApplicable->id }}" {{ $exemptionApplicable->id == $property->exemptionType ? 'selected' : '' }}>{{ $exemptionApplicable->name }}</option>
                                    @endforeach 
                                    <option value="Other" {{ $property->exemptionType == 'Other' ? 'selected' : '' }}>Other</option>
                                </select>
                                @error('exemptionType')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            
                            <div class="col-md-3 mb-3" id="exemptionTypeOtherField" style="display:{{ $property->exemptionType == 'Other' ? 'block' : 'none' }}">
                                <label for="exemptionTypeOther" class="form-label">Exemption Type Other</label>
                                <input type="text" class="form-control" id="exemptionTypeOther" name="exemptionTypeOther" value="{{ $property->exemptionTypeOther ?? '' }}">
                                @error('exemptionTypeOther')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>

                            
                        </div>
                    </div>
                    @php 
                        $floorData = json_decode($property->floorData);
                        if (!is_array($floorData)) {
                            $floorData = json_decode($floorData);
                        }
                    
                        $plinth = []; $plinthSm = [];
                    
                        foreach ($floorData as $floor) {
                            $type = $floor->floorType;
                            $area = $floor->areaSqFt ?? 0;
                            $areaSm = $floor->areaSqMt ?? 0;
                    
                            if (!isset($plinth[$type])) {
                                $plinth[$type] = 0;
                                $plinthSm[$type] = 0;
                            }
                    
                            $plinth[$type] += $area;
                            $plinthSm[$type] += $areaSm;
                        }
                    
                        //print_r($plinth); 
                        // echo reset($plinth);
                        // echo reset($plinthSm)
                    @endphp

                    <div class="card">
                        <div class="card-header radius-15 bg-primary">
                            <div class="d-flex align-items-center">
                                <h6 class="mb-0 text-white">Area Detail</h6>
                            </div>
                        </div>
                        <div class="card-body p-4 row">
                            <!-- Plot Area Inputs -->
                            <div class="col-md-3 mb-3">
                                <label for="plotAreaSqFt" class="form-label">Plot Area Unit(square feet)</label>
                                <input type="text" class="form-control" id="plotAreaSqFt" name="plotAreaSqFt" value="{{ $property->plotAreaSqFt ?? '' }}" oninput="convertPlotArea(this)" required>
                                @error('plotAreaSqFt')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-3 mb-3">
                                <label for="plotAreaSqMeter" class="form-label">Plot Area Unit(square meter)</label>
                                <input type="text" class="form-control" id="plotAreaSqMeter" name="plotAreaSqMeter" value="{{ $property->plotAreaSqMeter ?? '' }}" oninput="convertPlotArea(this)" required>
                                @error('plotAreaSqMeter')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-3 mb-3">
                                <label for="plinthAreaSqFt" class="form-label">Plinth Area Unit(square feet)</label>
                                <input type="text" class="form-control" id="plinthAreaSqFt" name="plinthAreaSqFt" value="{{ reset($plinth) ?? $property->plinthAreaSqFt ?? '' }}" oninput="convertPlinthArea(this)" required>
                                @error('plinthAreaSqFt')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-3 mb-3">
                                <label for="plinthAreaSqMeter" class="form-label">Plinth Area Unit(square meter)</label>
                                <input type="text" class="form-control" id="plinthAreaSqMeter" name="plinthAreaSqMeter" value="{{ reset($plinthSm) ??$property->plinthAreaSqMeter ?? '' }}" oninput="convertPlinthArea(this)" required>
                                @error('plinthAreaSqMeter')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        
                            <!-- Add Owner Section -->
                            <div class="col-md-12 mb-3">  
                                <table class="table" id="floor-table">
                                    <thead>
                                        <tr>
                                            <th>Floor No</th>
                                            <th>Area Unit(square-feet)</th>
                                            <th>Area Unit(square-meter)</th>
                                            <th>Usage Type</th>
                                            <th>Usage Factor</th>
                                            <th>Construction Type</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody id="floor-table-body">
                                         
                                        @foreach($floorData as $k=>$floor)
                                            <tr class="floor-row" data-index="{{ $k }}">
                                                <td>
                                                    <div class="row">
                                                        <div class="col-md-12 mb-3"> 
                                                            <select class="form-select form-select-sm" name="floors[{{$k}}][floorType]">
                                                                <option value="">Select Floor Type</option>
                                                                @foreach($floors as $fl)
                                                                    <option value="{{ $fl->id }}" {{ $fl->id == $floor->floorType ? 'selected' : '' }}>{{ $fl->name }}</option>
                                                                @endforeach 
                                                                <option value="Other" {{ $floor->floorType == 'Other' ? 'selected' : '' }}>Other</option>
                                                            </select>
                                                            @error('floors[{{$k}}][floorType]')
                                                                <div class="text-danger">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                        <div class="col-md-12 mb-3" id="floorTypeOtherField" style="display:{{ $floor->floorType == 'Other' ? 'block' : 'none' }}">
                                                            <input type="text" class="form-control" name="floors[{{$k}}][floorTypeOther]" value="{{ $floor->floorTypeOther ?? '' }}">
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control areaSqFt" name="floors[{{$k}}][areaSqFt]" value="{{ $floor->areaSqFt }}" oninput="convertToSqMeter(this)">
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control areaSqMeter" name="floors[{{$k}}][areaSqMt]" value="{{ $floor->areaSqMt }}" oninput="convertToSqFeet(this)">
                                                </td>
                                                <td>
                                                    <select class="form-select form-select-sm" name="floors[{{$k}}][usageType]">
                                                        <option value="">Select Usage Type</option>
                                                        @foreach($floorUsageType as $usageType)
                                                            <option value="{{ $usageType->id }}" {{ $usageType->id == $floor->usageType ? 'selected' : '' }}>{{ $usageType->type_name }}</option>
                                                        @endforeach 
                                                        <option value="Other" {{ $floor->usageType == 'Other' ? 'selected' : '' }}>Other</option>
                                                    </select>
                                                    <div class="col-md-12 mb-3" id="usageTypeOtherField" style="display:{{ $floor->usageType == 'Other' ? 'block' : 'none' }}">
                                                        <input type="text" class="form-control" name="floors[{{$k}}][usageTypeOther]" value="{{ $floor->usageTypeOther ?? '' }}">
                                                    </div>
                                                </td>
                                                <td>
                                                    <select class="form-select form-select-sm" name="floors[{{$k}}][usageFactor]">
                                                        <option value="">Select Usage Factor</option>
                                                        @foreach($usagsFactors as $usagsFactor)
                                                            <option value="{{ $usagsFactor->id }}" {{ $usagsFactor->id == $floor->usageFactor ? 'selected' : '' }}>{{ $usagsFactor->name }}</option>
                                                        @endforeach 
                                                        <option value="Other" {{ $floor->usageFactor == 'Other' ? 'selected' : '' }}>Other</option>
                                                    </select>
                                                    <div class="col-md-12 mb-3" id="usageFactorField" style="display:{{ $floor->usageFactor == 'Other' ? 'block' : 'none' }}">
                                                        <input type="text" class="form-control" name="floors[{{$k}}][usageFactorOther]" value="{{ $floor->usageFactorOther ?? '' }}">
                                                    </div>
                                                </td>
                                                <td>
                                                    <select class="form-select form-select-sm" name="floors[{{$k}}][constructionType]">
                                                        <option value="">Select Construction Type</option>
                                                        @foreach($natureOfConstructionLists as $natureOfConstructionList)
                                                            <option value="{{ $natureOfConstructionList->id }}" {{ $natureOfConstructionList->id == $floor->constructionType ? 'selected' : '' }}>{{ $natureOfConstructionList->name }}</option>
                                                        @endforeach 
                                                        <option value="Other" {{ $floor->constructionType == 'Other' ? 'selected' : '' }}>Other</option>
                                                    </select>
                                                    <div class="col-md-12 mb-3 constructionTypeOtherField" id="constructionTypeOtherField" style="display:{{ $floor->constructionType == 'Other' ? 'block' : 'none' }}">
                                                        <input type="text" class="form-control" name="floors[{{$k}}][constructionTypeOther]" value="{{ $floor->constructionTypeOther ?? '' }}">
                                                    </div>
                                                </td>
                                                <td> <button type="button" class="btn btn-danger btn-sm remove-floor-btn">Remove</button> </td>
                                            </tr>
                                            
                                        @endforeach
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <td colspan="5"></td>
                                            <td>
                                                <button type="button" class="btn btn-primary" id="add-floor-btn">Add More floor</button>
                                            </td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        
                            <!-- Total Built-Up Area Inputs -->
                            <div class="col-md-3 mb-3">
                                <label for="totalBuiltUpAreaSqFt" class="form-label">Total Built Up Area Unit(square feet)</label>
                                <input type="text" class="form-control" id="totalBuiltUpAreaSqFt" name="totalBuiltUpAreaSqFt" value="{{ $property->totalBuiltUpAreaSqFt ?? '' }}" required>
                                @error('totalBuiltUpAreaSqFt')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-3 mb-3">
                                <label for="totalBuiltUpAreaSqMeter" class="form-label">Total Built Up Area Unit(square meter)</label>
                                <input type="text" class="form-control" id="totalBuiltUpAreaSqMeter" name="totalBuiltUpAreaSqMeter" value="{{ $property->totalBuiltUpAreaSqMeter ?? '' }}" required>
                                @error('totalBuiltUpAreaSqMeter')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-header radius-15 bg-primary">
                            <div class="d-flex align-items-center">
                                <h6 class="mb-0 text-white">Muncipal Town Supply</h6>
                            </div>
                        </div>
                        <div class="card-body p-4 row"> 
                            <div class="col-md-3 mb-3">
                                <label for="isMuncipalWaterSupply" class="form-label">Munipal Water Supply Connection</label>
                                <select class="form-select form-select-sm" id="isMuncipalWaterSupply" name="isMuncipalWaterSupply">
                                    <option value="yes" {{ old('isMuncipalWaterSupply', $property->isMuncipalWaterSupply ?? '')=='yes' ? 'selected' : '' }} >Yes</option>
                                    <option value="no"  {{ old('isMuncipalWaterSupply', $property->isMuncipalWaterSupply ?? '')=='no' ? 'selected' : '' }}>No</option>
                                </select>
                            </div> 
                            @if($property->isMuncipalWaterSupply=='yes')
                            <div class="col-md-9 mb-3" > 
                                <div class="row">
                                    <div class="col-md-3 mb-3">
                                        <label for="status" class="form-label">No of Connection</label> 
                                        <input type="number" class="form-control" onInput="totalWaterConn(this)" name="totalWaterConnection" value="{{ $property->totalWaterConnection }}"> 
                                    </div>
                                    <div class="col-md-9"> 
                                        <table class="table" id="connection-table">
                                            <thead>
                                                <tr>
                                                    <th>SN</th>
                                                    <th>Enter Connection Id</th>
                                                    <th>Water Connection Type</th> 
                                                </tr>
                                            </thead>
                                            <tbody id="connection-table-body">
                                            @foreach((is_array($property->waterConnectionId)? $property->waterConnectionId : json_decode($property->waterConnectionId)) as $k=>$connection)
                                                <tr class="floor-row" data-index="{{ $k }}">
                                                        <td>
                                                            {{ $k+1 }}  
                                                        </td>
                                                        <td>
                                                            <input type="text" class="form-control" name="waterConnectionId[{{$k}}][connectionId]" value="{{ $connection->connectionId ?? '' }}" >
                                                        </td>
                                                        <td>
                                                            <div class="row">
                                                                <div class="col-md-12 mb-3"> 
                                                                    <select class="form-select form-select-sm" name="waterConnectionId[{{$k}}][waterConnectionType]">
                                                                        <option value="">Water Connection Type</option>
                                                                        @foreach($floorUsageType as $usageType)
                                                                            <option value="{{ $usageType->id }}" {{ $usageType->id == ($connection->waterConnectionType ?? '') ? 'selected' : '' }}>{{ $usageType->type_name }}</option>
                                                                        @endforeach 
                                                                         
                                                                        <option value="Other" {{ ($connection->waterConnectionType ?? '') == 'Other' ? 'selected' : '' }}>Other</option>
                                                                    </select> 
                                                                </div>
                                                                <div class="col-md-12 mb-3" id="waterConnectionTypeOther" style="display:{{ ($connection->waterConnectionType ?? '') == 'Other' ? 'block' : 'none' }}">
                                                                    <input type="text" class="form-control" name="waterConnectionId[{{$k}}][waterConnectionTypeOther]" value="{{ $connection->waterConnectionTypeOther ?? '' }}">
                                                                </div>
                                                            </div>
                                                        </td>
                                                         
                                                    </tr>
                                            @endforeach
                                            </tbody> 
                                        </table>
                                    </div>
                                </div>
                            </div>
                            @else
                            <div class="col-md-9 mb-3" id="isMuncipalWater" style="display: none;" >
                                <div id="connection-table"> <div id="connection-table-body"> </div></div>
                            </div>
                            @endif
                            
                            <div class="col-md-3 mb-3">
                                <label for="status" class="form-label">Source of Water</label>
                                <select class="form-select form-select-sm" id="sourceOfWater" name="sourceOfWater">
                                    <option value=""  {{ old('sourceOfWater', $property->toiletType ?? '')=='Connected to municipal sewage system' ? 'selected' : '' }}>Select Source of Water  </option>
                                    <option value="Government Tap"  {{ old('sourceOfWater', $property->sourceOfWater ?? '')=='Government Tap' ? 'selected' : '' }}>Government Tap</option>
                                    <option value="Dug well"  {{ old('sourceOfWater', $property->sourceOfWater ?? '')=='Dug well' ? 'selected' : '' }}>Dug well</option> 
                                    <option value="Borewell"  {{ old('toiletType', $property->sourceOfWater ?? '')=='Borewell' ? 'selected' : '' }}>Borewell</option> 
                                    <option value="Other"  {{ old('sourceOfWater', $property->sourceOfWater ?? '')=='Other' ? 'selected' : '' }}>Other</option>
                                </select>
                            </div> 
                            <div class="col-md-3 mb-3" id="sourceOfWaterOtherField" style="display:{{ $property->sourceOfWater == 'Other' ? 'block' : 'none' }}">
                                <label for="sourceOfWaterOther" class="form-label">Exemption Type Other</label>
                                <input type="text" class="form-control" id="sourceOfWaterOther" name="sourceOfWaterOther" value="{{ $property->sourceOfWaterOther ?? '' }}">
                                @error('sourceOfWaterOther')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-3 mb-3">
                                <label for="status" class="form-label">Sanitation</label>
                                <select class="form-select form-select-sm" id="toiletType" name="toiletType">
                                    <option value="Connected to municipal sewage system"  {{ old('toiletType', $property->toiletType ?? '')=='Connected to municipal sewage system' ? 'selected' : '' }}>Connected to municipal sewage system </option>
                                    <option value="Connected to specific tank"  {{ old('toiletType', $property->toiletType ?? '')=='Connected to specific tank' ? 'selected' : '' }}>Connected to specific tank</option>
                                    <option value="Connected to surface drains"  {{ old('toiletType', $property->toiletType ?? '')=='Connected to surface drains' ? 'selected' : '' }}>Connected to surface drains</option>
                                    <option value="Pour flish pit latrine"  {{ old('toiletType', $property->toiletType ?? '')=='Pour flish pit latrine' ? 'selected' : '' }}>Pour flish pit latrine</option>
                                    <option value="Dry/Bucket latrine"  {{ old('toiletType', $property->toiletType ?? '')=='Dry/Bucket latrine' ? 'selected' : '' }}>Dry/Bucket latrine</option>
                                    <option value="No toilet"  {{ old('toiletType', $property->toiletType ?? '')=='No toilet' ? 'selected' : '' }}>No toilet</option>
                                    <option value="Other"  {{ old('toiletType', $property->toiletType ?? '')=='Other' ? 'selected' : '' }}>Other</option>
                                </select>
                            </div> 
                            <div class="col-md-3 mb-3" id="toiletTypeOtherField" style="display:{{ $property->toiletType == 'Other' ? 'block' : 'none' }}">
                                <label for="exemptionTypeOther" class="form-label">Sanitation Other</label>
                                <input type="text" class="form-control" id="toiletTypeOther" name="toiletTypeOther" value="{{ $property->toiletTypeOther ?? '' }}">
                                @error('toiletTypeOther')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-3 mb-3">
                                <label for="isMuncipalWasteService" class="form-label">Solid Waste Mangement</label>
                                <select class="form-select form-select-sm" id="isMuncipalWasteService" name="isMuncipalWasteService">
                                    <option value="yes"  {{ old('isMuncipalWasteService', $property->isMuncipalWasteService ?? '')=='yes' ? 'selected' : '' }}>Yes</option>
                                    <option value="no"  {{ old('isMuncipalWasteService', $property->isMuncipalWasteService ?? '')=='yes' ? 'selected' : '' }}>No</option>
                                </select>
                            </div> 
                             
                        </div>
                    </div> 
                    <button type="submit" class="btn btn-primary">Save </button>
                    <a href="{{ url()->previous() }}" class="btn btn-secondary">Cancel</a>

                </form> 
            </div>
             
        </div>
    </div>
</div>
  
@endsection
@section('script')

<script>
    document.getElementById('add-owner-btn').addEventListener('click', function () {
        var tableBody = document.querySelector('#owner-table tbody');
        var lastRow = tableBody.querySelector('tr:last-child');
        var newRow = lastRow.cloneNode(true); // Clone the last row

        // Update the inputs for the new row (clear the values and reset the name attributes)
        var inputs = newRow.querySelectorAll('input');
        inputs.forEach(function(input) {
            input.value = ''; // Clear the value
            var nameAttr = input.getAttribute('name');
            // Replace the current index in the name attribute
            var newName = nameAttr.replace(/\[\d+\]/, '[' + (tableBody.children.length) + ']');
            input.setAttribute('name', newName);
        });

        // Append the new row to the table body
        tableBody.appendChild(newRow);
    });
</script>

    <script>
        // Function to copy property address to present address fields
        function copyAddress() {
            if (document.getElementById("isSameAsProperty").checked) {
                document.getElementById("presentHouseNo").value = document.getElementById("houseNo").value;
                document.getElementById("presentStreetNoName").value = document.getElementById("streetNoName").value;
                document.getElementById("presentLocality").value = document.getElementById("locality").value;
                document.getElementById("presentColony").value = document.getElementById("colony").value;
                document.getElementById("presentCity").value = document.getElementById("city").value;
                document.getElementById("presentPincode").value = document.getElementById("pincode").value;
            } else {
                document.getElementById("presentHouseNo").value = '';
                document.getElementById("presentStreetNoName").value = '';
                document.getElementById("presentLocality").value = '';
                document.getElementById("presentColony").value = '';
                document.getElementById("presentCity").value = '';
                document.getElementById("presentPincode").value = '';
            }
        }
    
        // Event listener for checkbox change
        document.getElementById("isSameAsProperty").addEventListener("change", copyAddress);
    
        // Initial call to set values if the checkbox is already checked
        copyAddress();
    </script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
    // Function to toggle visibility based on selection
    function toggleOtherField(selectElement, otherFieldId) {
        const otherField = document.getElementById(otherFieldId);
        if (selectElement.value === 'Other') {
            otherField.style.display = 'block';
        } else {
            otherField.style.display = 'none';
        }
    }

    // Event listeners for each dropdown
    const taxRateZoneSelect = document.getElementById('taxRateZone');
    const propertyOwnershipSelect = document.getElementById('propertyOwnership');
    const situationSelect = document.getElementById('situation');
    const propertyUseSelect = document.getElementById('propertyUse');
    const commercialSelect = document.getElementById('commercial');
    const yearOfConstructionSelect = document.getElementById('yearOfConstruction');
    const exemptionApplicableSelect = document.getElementById('isExemptionApplicable');
    const exemptionTypeSelect = document.getElementById('exemptionType');

    // Add event listeners to dropdowns
    taxRateZoneSelect.addEventListener('change', function() {
        toggleOtherField(taxRateZoneSelect, 'taxRateZoneOtherField');
    });

    propertyOwnershipSelect.addEventListener('change', function() {
        toggleOtherField(propertyOwnershipSelect, 'propertyOwnershipOtherField');
    });

    situationSelect.addEventListener('change', function() {
        toggleOtherField(situationSelect, 'situationOtherField');
    });

    propertyUseSelect.addEventListener('change', function() {
        toggleOtherField(propertyUseSelect, 'propertyOtherField');
    });

    commercialSelect.addEventListener('change', function() {
        toggleOtherField(commercialSelect, 'commercialOtherField');
    });

    yearOfConstructionSelect.addEventListener('change', function() {
        toggleOtherField(yearOfConstructionSelect, 'yearOfConstructionOtherField');
    });

    exemptionApplicableSelect.addEventListener('change', function() {
        toggleOtherField(exemptionApplicableSelect, 'exemptionTypeField');
        toggleOtherField(exemptionTypeSelect, 'exemptionTypeOtherField');
    });

    // Initial check in case any "Other" field is already selected on page load
    toggleOtherField(taxRateZoneSelect, 'taxRateZoneOtherField');
    toggleOtherField(propertyOwnershipSelect, 'propertyOwnershipOtherField');
    toggleOtherField(situationSelect, 'situationOtherField');
    toggleOtherField(propertyUseSelect, 'propertyOtherField');
    toggleOtherField(commercialSelect, 'commercialOtherField');
    toggleOtherField(yearOfConstructionSelect, 'yearOfConstructionOtherField');
    toggleOtherField(exemptionApplicableSelect, 'exemptionTypeField');
    toggleOtherField(exemptionTypeSelect, 'exemptionTypeOtherField');
});


    </script>
    
    <!-- JavaScript for Conversion -->
<script>
    // Conversion functions
    function convertToSqMeter(element) {
        const sqFt = parseFloat(element.value);
        const sqMeter = sqFt * 0.092903;
        const correspondingInput = element.closest('tr').querySelector('.areaSqMeter');
        correspondingInput.value = sqMeter.toFixed(2); // Round to 2 decimal places
        updateTotalAreas();
    }

    function convertToSqFeet(element) {
        const sqMeter = parseFloat(element.value);
        const sqFt = sqMeter * 10.7639;
        const correspondingInput = element.closest('tr').querySelector('.areaSqFt');
        correspondingInput.value = sqFt.toFixed(2); // Round to 2 decimal places
        updateTotalAreas();
    }

    // document.getElementById('add-floor-btn').addEventListener('click', function() {
    //     const floorTableBody = document.getElementById('floor-table-body');
    //     const rowTemplate = document.querySelector('.floor-row');
    //     const newRow = rowTemplate.cloneNode(true);
        
    //     // Update the name attributes to avoid collisions
    //     const index = floorTableBody.querySelectorAll('.floor-row').length;
    //     newRow.dataset.index = index;

    //     // Change the name attribute for all inputs in the row
    //     newRow.querySelectorAll('input, select').forEach(function(input) {
    //         input.value = ''; 
    //         const name = input.name;
    //         input.name = name.replace(/\[\d+\]/, `[${index}]`);
    //     });

    //     const constructionTypeOtherField = newRow.querySelector('.constructionTypeOtherField');
    //     if (constructionTypeOtherField) {
    //         constructionTypeOtherField.style.display = 'block';  // Ensure it is displayed
    //     }
         
        
    //     floorTableBody.appendChild(newRow);
        
    //     updateTotalAreas();
    // });
</script>

<!-- JavaScript for Conversion and Sum Calculation -->
<script>
    // Conversion for plot area
    function convertPlotArea() {
        const plotAreaSqFt = parseFloat(document.getElementById('plotAreaSqFt').value) || 0;
        const plotAreaSqMeter = parseFloat(document.getElementById('plotAreaSqMeter').value) || 0;

        if (plotAreaSqFt > 0) {
            document.getElementById('plotAreaSqMeter').value = (plotAreaSqFt * 0.092903).toFixed(2);
        } else if (plotAreaSqMeter > 0) {
            document.getElementById('plotAreaSqFt').value = (plotAreaSqMeter * 10.7639).toFixed(2);
        }
    }

    // Conversion for plinth area
    function convertPlinthArea() {
        const plinthAreaSqFt = parseFloat(document.getElementById('plinthAreaSqFt').value) || 0;
        const plinthAreaSqMeter = parseFloat(document.getElementById('plinthAreaSqMeter').value) || 0;

        if (plinthAreaSqFt > 0) {
            document.getElementById('plinthAreaSqMeter').value = (plinthAreaSqFt * 0.092903).toFixed(2);
        } else if (plinthAreaSqMeter > 0) {
            document.getElementById('plinthAreaSqFt').value = (plinthAreaSqMeter * 10.7639).toFixed(2);
        }
    }

    // Sum all AreaSqFt and AreaSqMeter
    function updateTotalAreas() {
        let totalSqFt = 0;
        let totalSqMeter = 0;

        document.querySelectorAll('.areaSqFt').forEach(function(input) {
            totalSqFt += parseFloat(input.value) || 0;
        });

        document.querySelectorAll('.areaSqMeter').forEach(function(input) {
            totalSqMeter += parseFloat(input.value) || 0;
        });

        // Update Total Built-Up Areas
        document.getElementById('totalBuiltUpAreaSqFt').value = totalSqFt.toFixed(2);
        document.getElementById('totalBuiltUpAreaSqMeter').value = totalSqMeter.toFixed(2);
    }
</script>

<script>
    function totalWaterConn(event) 
    {
        const value = event.value;
        console.log("Total Water Connections:", value); 
        var numberOfConnections = event.value;
        var tableBody = document.getElementById('connection-table-body');
        tableBody.innerHTML = ''; // Clear the table first
        
        for (var i = 0; i < numberOfConnections; i++) {
            var row = document.createElement('tr');
            row.classList.add('connection-row');
            row.dataset.index = i;
            
            row.innerHTML = `
                <td>${i + 1}</td>
                <td><input type="text" class="form-control" name="waterConnectionId[${i}][connectionId]" value="" required></td>
                <td>
                    <div class="row">
                        <div class="col-md-12 mb-3">
                            <select class="form-select form-select-sm" name="waterConnectionId[${i}][waterConnectionType]" required>
                                <option value="">Water Connection Type</option>
                                @foreach($floorUsageType as $usageType)
                                    <option value="{{ $usageType->id }}" {{ $usageType->id == ($connection->connectionType ?? '') ? 'selected' : '' }}>{{ $usageType->type_name }}</option>
                                @endforeach
                                <option value="Other">Other</option>
                            </select>
                        </div>
                        <div class="col-md-12 mb-3" id="waterConnectionTypeOtherField${i}" style="display:none">
                            <input type="text" class="form-control" name="waterConnectionId[${i}][waterConnectionTypeOther]" required>
                        </div>
                    </div>
                </td>
            `;
            tableBody.appendChild(row);
        }
    };   
    document.getElementById('connection-table-body').addEventListener('change', function(event) {
        if (event.target.name.includes('waterConnectionType')) {
            var rowIndex = event.target.closest('tr').dataset.index;
            var otherField = document.getElementById('waterConnectionTypeOtherField' + rowIndex);
            if (event.target.value === 'Other') {
                otherField.style.display = 'block';
            } else {
                otherField.style.display = 'none';
            }
        }
    });
    document.addEventListener('DOMContentLoaded', function () {
        const isMuncipalWaterSupply = document.getElementById('isMuncipalWaterSupply');
        const isMuncipalWater = document.getElementById('isMuncipalWater');
        
        // Function to toggle the visibility based on the selection
        function toggleMunicipalWaterField() 
        {
            if (isMuncipalWaterSupply.value === 'yes') {
                isMuncipalWater.style.display = 'block'; // Show the field
                isMuncipalWater.innerHTML = `
                    <div class="row">
                        <div class="col-md-3 mb-3">
                            <label for="status" class="form-label">No of Connection</label> 
                            <input type="number" class="form-control" id="totalWaterConnectionInput" name="totalWaterConnection" value="{{ $property->totalWaterConnection }}" required>  
                        </div>
                        <div class="col-md-9"> 
                            <table class="table" id="connection-table">
                                <thead>
                                    <tr>
                                        <th>SN</th>
                                        <th>Enter Connection Id</th>
                                        <th>Water Connection Type</th> 
                                    </tr>
                                </thead>
                                <tbody id="connection-table-body">
                                    <!-- Dynamic rows will go here -->
                                </tbody> 
                            </table>
                        </div>
                    </div>`;
                    const totalWaterConnectionInput = document.getElementById('totalWaterConnectionInput');
                    totalWaterConnectionInput.addEventListener('input', totalWaterConnection);
            } else {
                isMuncipalWater.style.display = 'none'; // Hide the field
                isMuncipalWater.innerHTML = `<div id="connection-table"> <div id="connection-table-body"> </div></div>`;
            }
        }
        
        // Function to handle input change for totalWaterConnection (if necessary)
        function totalWaterConnection(event) {
            const value = event.target.value;
            console.log("Total Water Connections:", value);  // You can perform your logic here (like updating other elements or calculations)
            // For example, you could update a display or trigger further calculations.
            var numberOfConnections = event.target.value;
            var tableBody = document.getElementById('connection-table-body');
            tableBody.innerHTML = ''; // Clear the table first
            
            for (var i = 0; i < numberOfConnections; i++) {
                var row = document.createElement('tr');
                row.classList.add('connection-row');
                row.dataset.index = i;
                
                row.innerHTML = `
                    <td>${i + 1}</td>
                    <td><input type="text" class="form-control" name="waterConnectionId[${i}][connectionId]" value="" required></td>
                    <td>
                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <select class="form-select form-select-sm" name="waterConnectionId[${i}][waterConnectionType]" required>
                                    <option value="">Water Connection Type</option>
                                    @foreach($floorUsageType as $usageType)
                                        <option value="{{ $usageType->id }}" {{ $usageType->id == ($connection->connectionType ?? '') ? 'selected' : '' }}>{{ $usageType->type_name }}</option>
                                    @endforeach
                                    <option value="Other">Other</option>
                                </select>
                            </div>
                            <div class="col-md-12 mb-3" id="waterConnectionTypeOtherField${i}" style="display:none">
                                <input type="text" class="form-control" name="waterConnectionId[${i}][waterConnectionTypeOther]"  >
                            </div>
                        </div>
                    </td>
                `;
                tableBody.appendChild(row);
            }
        }
        
        
        
        // Initial check to set the field visibility on page load
        toggleMunicipalWaterField();
        
        // Event listener for changes in the dropdown
        isMuncipalWaterSupply.addEventListener('change', toggleMunicipalWaterField);
    });

    const totalWaterConnectionInput = document.getElementById('totalWaterConnectionInput');
    //totalWaterConnectionInput.addEventListener('input', totalWaterConnection);
    
    document.addEventListener('DOMContentLoaded', function () {
        const floorTableBody = document.getElementById('floor-table-body');
        const addFloorBtn = document.getElementById('add-floor-btn');
    
        // Function to update all row indices & name attributes
        function updateRows() {
            const rows = floorTableBody.querySelectorAll('tr.floor-row');
            rows.forEach((row, index) => {
                row.dataset.index = index;
    
                // Update floorType select
                const floorTypeSelect = row.querySelector('select[name^="floors"][name$="[floorType]"]');
                if (floorTypeSelect) floorTypeSelect.name = `floors[${index}][floorType]`;
    
                // FloorTypeOther input
                const floorTypeOtherInput = row.querySelector('input[name^="floors"][name$="[floorTypeOther]"]');
                if (floorTypeOtherInput) floorTypeOtherInput.name = `floors[${index}][floorTypeOther]`;
    
                // areaSqFt input
                const areaSqFtInput = row.querySelector('input.areaSqFt');
                if (areaSqFtInput) areaSqFtInput.name = `floors[${index}][areaSqFt]`;
    
                // areaSqMt input
                const areaSqMeterInput = row.querySelector('input.areaSqMeter');
                if (areaSqMeterInput) areaSqMeterInput.name = `floors[${index}][areaSqMt]`;
    
                // usageType select
                const usageTypeSelect = row.querySelector('select[name^="floors"][name$="[usageType]"]');
                if (usageTypeSelect) usageTypeSelect.name = `floors[${index}][usageType]`;
    
                // usageTypeOther input
                const usageTypeOtherInput = row.querySelector('input[name^="floors"][name$="[usageTypeOther]"]');
                if (usageTypeOtherInput) usageTypeOtherInput.name = `floors[${index}][usageTypeOther]`;
    
                // usageFactor select
                const usageFactorSelect = row.querySelector('select[name^="floors"][name$="[usageFactor]"]');
                if (usageFactorSelect) usageFactorSelect.name = `floors[${index}][usageFactor]`;
    
                // usageFactorOther input
                const usageFactorOtherInput = row.querySelector('input[name^="floors"][name$="[usageFactorOther]"]');
                if (usageFactorOtherInput) usageFactorOtherInput.name = `floors[${index}][usageFactorOther]`;
    
                // constructionType select
                const constructionTypeSelect = row.querySelector('select[name^="floors"][name$="[constructionType]"]');
                if (constructionTypeSelect) constructionTypeSelect.name = `floors[${index}][constructionType]`;
    
                // constructionTypeOther input
                const constructionTypeOtherInput = row.querySelector('input[name^="floors"][name$="[constructionTypeOther]"]');
                if (constructionTypeOtherInput) constructionTypeOtherInput.name = `floors[${index}][constructionTypeOther]`;
            });
        }
    
        // Add Floor row
        addFloorBtn.addEventListener('click', function () {
            const rows = floorTableBody.querySelectorAll('tr.floor-row');
            const lastRow = rows[rows.length - 1];
            const newIndex = rows.length;
    
            // Clone last row or create new blank row template
            let newRow;
            if (lastRow) {
                newRow = lastRow.cloneNode(true);
                // Clear all input/select values
                newRow.querySelectorAll('input, select').forEach(input => {
                    input.value = '';
                });
                newRow.dataset.index = newIndex;
            } else {
                // If no row exists, create new one (basic structure)
                newRow = document.createElement('tr');
                newRow.classList.add('floor-row');
                newRow.dataset.index = newIndex;
                // You can add your row HTML here if needed or clone from a hidden template
                // For simplicity, clone from a template is better, but omitted here
                alert('No existing rows to clone! Please add a template row.');
                return;
            }
    
            floorTableBody.appendChild(newRow);
            updateRows();
        });
    
        // Remove Floor row on clicking remove button
        floorTableBody.addEventListener('click', function (e) {
            if (e.target.classList.contains('remove-floor-btn')) {
                const row = e.target.closest('tr.floor-row');
                if (row) {
                    row.remove();
                    updateRows();
                }
            }
        });
    
        // Initialize names on page load
        updateRows();
    });

</script>


@endsection