@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')

    @php 
         
        $floorData = json_decode($property->floorData);
            if(!is_array($floorData))
                $floorData = json_decode($floorData);
    @endphp 

<!--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"> Property Surveyors </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">View  Property Surveyors </li>
                    </ol>
                </nav>
            </div>
            <div class="ms-auto">
                <div class="btn-group">
                    <a href="{{ route('gis.property.index') }}" class="btn btn-primary" > Surveyors List</a>
                </div>
            </div>
        </div>
        
        <div class="row">
            <div class="col-lg-12 mx-auto">
                <div class="card">
                    <div class="card-header radius-15 bg-primary">
                        <div class="d-flex align-items-center">
                            <h6 class="mb-0 text-white">Basic Details</h6>
                        </div>
                    </div>
                    <div class="card-body p-4 row"> 
                        <style> table { text-transform: capitalize; } </style>
						<table class="table mb-0 table-striped">
					    	<tbody> 
					    	    <tr>
                                    <th>Assessment Year</th>
                                    <td>{{ $property->period }} </td> 
                                 
                                    <th>ULB Name/Code</th>
                                    <td>{{ $property->ulbNameCode }}</td>
                                    <th>E-Nagar Panchayat Id</th>
                                    <td>{{ $property->nagarpalikaId }} </td>
                                </tr>
                                 
                                <tr>
                                    <th>Ward Number</th>
                                    <td>{{ $property->ward->name ?? '' }}</td>
                                 
                                    <th>Parcel No.</th>
                                    <td>{{ $property->parcelNo }}</td>
                                 
                                    <th>Property No./Unit No.</th>
                                    <td>{{ $property->propertyNo }}</td>
                                </tr>
                                <tr>
                                    <th>Electricity Id.</th>
                                    <td>{{ $property->electricityId }}</td>
                                
                                    <th>Khasra No.</th>
                                    <td>{{ $property->khasraNo }}</td>
                                
                                    <th>Registry No.</th>
                                    <td>{{ $property->registryNo }}</td>
                                </tr>
                                <tr>
                                    <th>Construction Date</th>
                                    <td>{{ $property->constructedDate }}</td>
                                
                                    <th>Latitude / Longitude</th>
                                    <td>{{ $property->latitude }} / {{ $property->longitude }}</td>
                                 
                                    <th>Slum Status</th>
                                    <td>{{ $property->isSlum }} {{ $property->isSlum == 'Yes' ? 'Slum ID : '.$property->slumId : ''}}</td>
                                </tr>
                        	</tbody>
                        </table>
                    </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">Owner Details</h6>
                        </div>
                    </div>
                    <div class="card-body p-4 row">  
						<table class="table mb-0 table-striped"> 
                            <tbody>
					    	    <tr>
                                    <th>Name of the Respondent:</th> 
                                    <td> {{ $property->respondentName }} </td>
                                 
                                    <th>Relationship of Respondent with Owner :</th> 
                                    <td>{{ $property->respondentRelationData?->name }}</td>
                                    <th>Aadhar No :</th> 
                                    <td>{{  $property->ownerAadhaarNumber  }}
                                    @if(!empty($property->ownerAadhaarNumber)) <br>
                                        <small class="form-text text-muted">
                                            Current file: 
                                            <a href="{{ asset('storage/' . $property->aadhaarPhoto) }}" target="_blank">View PDF</a>
                                        </small>
                                    @endif
                                    </td>
                                    <th>Number of Famliy Members :</th> 
                                    <td>{{ $property->number_of_members  }}</td>
                                </tr>
                                <tr>
                                    <td colspan="8"> 
						                <table class="table mb-0 table-striped"> 
                                            <tr  class="table-dark">
                                                <th>SN</th>
                                                <th>Owner Name</th>
                                                <th>Father/Husband Name</th>
                                                <th>Mobile</th>
                                                <th>Email</th>
                                                <th>Secondary Mobile</th>
                                                
                                            </tr> 
                                            @foreach((is_array($property->ownerDetails)? $property->ownerDetails : json_decode($property->ownerDetails)) as $k=>$owner)
                                            <tr> 
                                                <td>{{ $k+1 }}</td>
                                                <td>{{ $owner->name ?? '' }}</td>
                                                <td>{{ $owner->fatherName ?? ''  }}</td>
                                                <td>{{ $owner->mobile ?? ''  }}</td>
                                                <td>{{ $owner->email ?? ''   }}</td> 
                                                <td>{{ $owner->secondaryPhone ?? ''   }}</td>
                                            </tr> 
                                            @endforeach  
						                </table> 
                                    </td>    
                                </tr>
                            </tbody>
                        </table>
                    </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">  
						<table class="table mb-0 table-striped"> 
                            <tbody> 
                                <tr><th>Address :</th> <td>{{ $property->houseNo  }}  {{ $property->streetNoName }} {{ $property->locality }} {{ $property->colony }} {{ $property->city }} {{ $property->pincode }} </td></tr>
                                <tr><th>Present Address :</th> <td> {{ $property->presentHouseNo }}  {{ $property->presentStreetNoName }} {{ $property->presentLocality }} {{ $property->presentColony }} {{ $property->presentCity }} {{ $property->presentPincode }}</td></tr>  
			                
                            </tbody>
                        </table>
                    </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/General Details of the Property</h6>
                        </div>
                    </div>
                    <div class="card-body p-4 row">  
						<table class="table mb-0 table-striped"> 
                            <tbody> 
                                <tr>
                                    <th>Current Tax Rate :</th> <td> {{ $property->taxRateZoneData?->name ?? '-' }}  </td> 
                                    <th>Property Ownership :</th>
                                    <td> {{ $property->propertyOwnershipData?->name ?? '-' }} </td>  
                                    <th>Situation :</th>
                                    <td> {{ $property->situationData?->name ?? '-' }} </td> 
                                </tr>
                                <tr>
                                    <th>Property Type :</th>
                                    <td> {{ $property->propertyTypeData?->type_name }} </td> 
                                    <th>Property Use :</th>
                                    <td> {{ $property->propertyUseData?->name ?? '-' }} </td> 
                                    <th>Road Type :</th>
                                    <td> {{ $property->roadTypeData?->name ?? '-' }} </td> 
                                </tr>
                                <tr> 
                                    <th>Year of Construction :</th>
                                    <td> {{ $property->yearOfConstructionData?->name ?? '-' }} </td>
                                    
                                </tr>
                            </tbody>
                        </table>
                    </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">Floor Details</h6>
                        </div>
                    </div>
                     
                    <div class="card-body p-4 row">  
						<table class="table mb-0 table-striped"> 
                            <tbody> 
                                <tr>
                                    <th>Plot Area :</th> <td>{{  number_format($property->plotAreaSqFt, 2)  }} SqFt /{{ number_format( $property->plotAreaSqMeter, 2)  }} SqMeter  </td>
                                    <th>Plinth Area :</th> <td> {{  number_format($property->plinthAreaSqFt, 2)  }} SqFt /{{  number_format($property->plinthAreaSqMeter, 2)  }} SqMeter  </td>
                                    <th>Total Built-Up Area  :</th> <td> {{  number_format($property->totalBuiltUpAreaSqFt, 2)  }} SqFt /{{ number_format( $property->totalBuiltUpAreaSqMeter, 2)    }} SqMeter  </td>
                                </tr>  
                                <td colspan="6"> 
					                <table class="table mb-0 table-striped">
					                    <thead>
                                            <tr class="table-dark">
                                                <th>Floor Type</th>
                                                <th>Area (Sq Ft)</th>
                                                <th>Area (Sq Meter)</th>
                                                <th>Usage Type</th>
                                                <th>Usage Factor</th>
                                                <th>Construction Type</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tbody>  
                                                @foreach( $floorData as $k=>$floor) 
                                                <tr>
                                                    <td> {{ floorType($floor->floorType, $allInOne['floorType'])  }} </td> 
                                                    <td> {{ $floor->areaSqFt }} SqFt </td>  
                                                    <td> {{ $floor->areaSqMt }} SqM</td> 
                                                    <td> {{ usageType($floor->usageType, $allInOne['propertyType'])  }} </td> 
                                                    <td> {{ usageFactors($floor->usageFactor, $allInOne['usagsFactor'])  }} </td> 
                                                    <td> {{ yearOfConstructions($floor->constructionType, $allInOne['natureOfConstruction']) }} </td> 
                                                </tr>
                                                @endforeach

                                        </tbody>
                                        </tbody>
                                    </table> 
                                </td>
                            </tbody>
                        </table>
                    </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">  
						<table class="table mb-0 table-striped"> 
                            <tbody> 
                                <tr>
                                    <th>Muncipal Water Supply Connection :</th> <td>{{ $property->isMuncipalWaterSupply  }}   </td>
                                </tr>
                                    @if($property->isMuncipalWaterSupply=='yes') 
                                <tr>
                                    <th>Water Connection</th>
                                    <td> 
                                        <table class="table mb-0 table-striped"> 
                                            <tr  class="table-dark">
                                                <th>SN</th>
                                                <th>Connection Id</th>
                                                <th>Connection Type</th>   
                                            </tr> 
                                            @foreach((is_array($property->waterConnectionId)? $property->waterConnectionId : json_decode($property->waterConnectionId)) as $k=>$connection)
                                            <tr> 
                                                <td> {{ $k+1 }}</td>
                                                <td> {{ $connection->id ?? '' }}</td>
                                                <td> {{ usageType($connection->connectionType, $allInOne['propertyType'])  }} </td> 
                                            </tr> 
                                            @endforeach  
						                </table>  
                                    </td>
                                </tr>
                                    @endif 
                                
                                <tr>
                                    <th>Source of Water  :</th> <td> {{ $property->sourceOfWaterData?->name }}  </td>
                                </tr>
                                <tr>
                                    <th>Toilet Type   :</th> <td> {{  $property->toiletTypeData?->name }}  </td>
                                </tr>
  
                            </tbody>
                        </table>
                    </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">Property Location/Image</h6>
                        </div>
                    </div>
                    <div class="card-body p-4 row">  
						<table class="table mb-0 table-striped"> 
                            <tbody> 
                                <tr>
                                    <th>Latitude/longitude</th>
                                    <th>Map</th>
                                    <th>Property First Image</th>
                                    <th>Property Second Image</th>
                                    <th>Aadhar Image</th>
                                    <th>Owner Image</th>
                                </tr>
                                <tr>
                                    
                                    <th>Latitude : {{ $property->latitude  }}   </th> 
                                    <th rowspan='2'>
                                        <style>
                                            #map {
                                                height: 180px;
                                                width: 350px;
                                            }
                                        </style>
                                        <div id="map"></div> 
                                    </th>
                                    <th rowspan="2">  
                                        <img style="width: 180px; height: 180px;"  src="{{ asset('storage/' . $property->propertyFirstImage) }}" onerror="this.onerror=null;this.src='{{ asset('images/no-image.png') }}';" alt="Property Image 1"> 
                                    </th>
                                    <th rowspan="2">
                                        <img style="width: 180px; height: 180px;" src="{{ asset('storage/' . $property->propertySecondImage) }}" alt="Property Image 2" onerror="this.onerror=null;this.src='{{ asset('images/no-image.png') }}';">
                                    </th>
                                    <th rowspan="2">
                                        @if($property->aadhaarPhoto)
                                        <img style="width: 180px; height: 180px;" src="{{ asset('storage/' . $property->aadhaarPhoto) }}" alt="Property Image 2" onerror="this.onerror=null;this.src='{{ asset('images/no-image.png') }}';">
                                         @endif
                                    </th>
                                    <th rowspan="2">
                                        @if($property->ownerImage)
                                        <img style="width: 180px; height: 180px;" src="{{ asset('storage/' . $property->ownerImage) }}" alt="Property Image 2" onerror="this.onerror=null;this.src='{{ asset('images/no-image.png') }}';">
                                        @endif
                                    </th>
                                </tr>
                                <tr><th>longitude  :  {{ $property->longitude }}  </th></tr> 
                                
                            </tbody>
                        </table>
                    </div>
                </div> 
                 
                </div>
            </div>
        </div> 
    </div>
</div>
@endsection
@section('script') 
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDgFcTmfanz9rxx1l0Hl9-cMTNJF8jpgQE&callback=initMap" async defer></script>
    <script>
        function initMap() {
            // Set the location for the map
            var location = { lat: {{ $property->latitude  }}, lng: {{$property->longitude }} };

            // Create a new map centered at the location
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 15,  // Adjust the zoom level
                center: location,  // Center the map at the given location
            });

            // Add a marker at the location
            var marker = new google.maps.Marker({
                position: location,
                map: map,
                title: "This is the location"
            });
        }
    </script>    

@endsection