@extends('layouts.webhome')
@section('content')
  
    <div class="breadcrumbarea aos-init aos-animate" data-aos="fade-up" style="background-color: aliceblue;">
        <div class="container mb-2">
            <div class="row">
                <div class="col-xl-12">
                    <div class="breadcrumb__content__wraper">
                        <div class="breadcrumb__title">
                            <h2 class="heading">   ऑनलाइन हाउस टैक्स भुगतान </h2>
                        </div>
                        <div class="breadcrumb__inner">
                            <ul>
                                <li><a href="{{ route('index') }}">होम</a></li>
                                <li>  ऑनलाइन हाउस टैक्स भुगतान </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    
        <div class="shape__icon__2">
            <img loading="lazy" class="shape__icon__img shape__icon__img__2" src="{{ asset('assets/img/herobanner/herobanner__2.png')}}" alt="photo" />
            <img loading="lazy" class="shape__icon__img shape__icon__img__3" src="{{ asset('assets/img/herobanner/herobanner__3.png')}}" alt="photo" />
            <img loading="lazy" class="shape__icon__img shape__icon__img__4" src="{{ asset('assets/img/herobanner/herobanner__5.png')}}" alt="photo" />
        </div>
    </div>
 
    <div class="container mt-5">
         <div class="card">
            <div class="card-body">
                <h3>Find Your Details</h3>
                <ul class="nav nav-tabs" id="tabMenu" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link bg-dark text-white active" id="tab1-tab" data-toggle="tab" href="#tab1" role="tab">Search Property</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link bg-dark text-white" id="tab2-tab" data-toggle="tab" href="#tab2" role="tab">Search Property By Property ID || Parcel No.  </a>
                    </li>
                     <li class="nav-item">
                        <a class="nav-link bg-dark text-white " id="tab3-tab" data-toggle="tab" href="#tab3" role="tab">Search Property By   Owner Name || Mobile No</a>
                    </li>
                </ul>
            
                <div class="tab-content border p-3 mb-3" id="tabContent" style="height: 446px;">
                    <div class="tab-pane fade show active" id="tab1" role="tabpanel">
                        <form method="post" action="{{ route('properties.data') }}" style="margin-top: 10px;"> 
                            @csrf
                            <table class="table" role="presentation">
                                <tbody>
                                    <tr>
                                         
                                        <td> <label  >Select Zone (Ward):</label> </td>
                                        <td> <label >Select Building ||House ||Plot:</label> </td>
                                        <td>  </td>
                                        <td>  </td>
                                    </tr>
                                    <tr>     
                                        <td> 
                                            <select name="ward_id" id="wardNo" class="form-control" style="font-family: Verdana; padding: 6px; margin-top: 10px;" onChange="changeBlockH(this.value)">
                                                <option value="">=Zone=</option>
                                                @foreach(wardlists() as $wardlist)
                                                @if($wardlist->status==1)
                                                <option value="{{ $wardlist->id}}">{{ $wardlist->name }}</option>
                                                @endif
                                                @endforeach 
                                            </select>
                                            @error('ward_id')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                        </td>
                                        <td> 
                                            <select name="proparty_id" id="proparty_id" class="form-control" style="font-family: Verdana; font-size: 10pt; padding: 4px; margin-top: 10px;" >
                                            </select>
                                            @error('proparty_id')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                        </td>
                                        <td> 
                                            <input type="submit" class="btn btn-primary"  value="Search"  />
                                        </td>
                                        <td> 
                                            <input type="submit" class="btn btn-danger"   value="Reset"   />
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </form>
                    </div>
                    <div class="tab-pane fade" id="tab2" role="tabpanel"> 
                        <div class="row"> 
                            <div class="col-md-12 filter-section">
                                <div id="ContentPlaceHolder_Body_dvFilter" class="table-responsive">
                                    <div class="table-responsive"> 
                                        <table class="table mb-0 table-striped" role="presentation">
                                            <tbody>
                                                <tr> 
                                                    <td> <label> Enter Property ID || Parcel No.:</label> </td> 
                                                    <td> </td> 
                                                </tr>
                                                <tr>  
                                                    <td>  <input type="text" class="form-control" name="propartyKey" id="propartyKey" placeholder="Property ID || Parcel No."  /> </td> 
                                                    <td> <input type="submit" onclick="findProperty()" class="btn btn-primary"  value="Search"  /> </td> 
                                                </tr>
                                            </tbody>
                                        </table> 
                                    </div> 
                                </div> 
                            </div>
                              
                            <div class="table-responsive m-3 filter-section"  style="display: block; box-sizing: border-box; max-height: 310px;  overflow-y: auto; padding: auto;  ">
                                <table class="table mb-0 table-striped"   >
                                    <thead><tr><td>SN</td><td>Propertie List</td><td>Action</td></tr></thead>
                                    <tbody  id="propertieList"> </tbody>
                                </table>
                            </div> 
                        </div>
                    </div>
                    <div class="tab-pane fade" id="tab3" role="tabpanel"> 
                        <div class="row">
                            <div class="col-md-12 filter-section">
                                <div id="ContentPlaceHolder_Body_dvFilter" class="table-responsive">
                                    <div class="table-responsive"> 
                                        <table class="table table-striped" role="presentation">
                                            <tbody>
                                                <tr> 
                                                    <td> <label> Enter  Owner Name || Mobile No.:</label> </td> 
                                                    <td>  </td> 
                                                </tr>
                                                <tr> 
                                                    <td> <input type="text" class="form-control" name="propartyName" id="propartyName" placeholder=" Owner Name || Mobile No."> </td> 
                                                    <td> <input type="submit" onclick="findPropertyByName()" class="btn btn-primary"  value="Search"> </td> 
                                                </tr>
                                            </tbody>
                                        </table> 
                                    </div>
                                    
                                </div>
                            </div> 
                            <div class="table-responsive m-3 filter-section" style="display: block; box-sizing: border-box; max-height: 310px;  overflow-y: auto; padding: auto;  ">
                                <table class="table mb-0 table-striped">
                                    <thead><tr><td>SN</td><td>Propertie List</td><td>Action</td></tr></thead>
                                    <tbody id="propertieNameList"> </tbody>
                                </table>
                            </div> 
                        </div>
                    </div>
                </div>
            </div>
        </div>
       
    </div>


@endsection
@section('script')
<!-- jQuery + Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script> 
<script>
    function changeBlockH(wardId) 
    {
        loadSurveys(1);
    }
   
    function loadSurveys(page) 
    {
        let no_of_row = $("#no_of_row").val();
        let wardNo = $("#wardNo").val(); 
        let userId = $("#userId").val();
        let startDate = $("#startDate").val(); // Get the search query from the input
        let endDate = $("#endDate").val(); // Get the search query from the input

        $.ajax({
            url: '{{ route("properties-online") }}?page=' + page + '&perPage=' + no_of_row + '&wardNo=' + wardNo + '&userId=' + userId + '&startDate=' + startDate + '&endDate=' + endDate,  
            type: 'GET',
            dataType: 'json',
            success: function (response) {
                console.log(response); 
                $('#proparty_id').empty();
                $('#proparty_id').append('<option value="">=Property=</option>'); 
                if ((response.surveyForms.data).length > 0) 
                {
                    $.each(response.surveyForms.data, function (index, property) 
                    {
                        let ownerDetails = null;
                        if (typeof property.ownerDetails === 'string') 
                        {    
                            ownerDetails = JSON.parse(property.ownerDetails);
                        } 
                        else 
                        {
                            ownerDetails = property.ownerDetails; 
                        } 
                        let ownerName = ownerDetails.length > 0 ? ownerDetails[0].name : 'N/A';
                        let fatherName = ownerDetails.length > 0 ? ownerDetails[0].fatherName : 'N/A';
                        let mobile = ownerDetails.length > 0 ? ownerDetails[0].mobile : 'N/A';
                        //console.log(property);
                            $('#proparty_id').append('<option value="' + property.id + '">' + property.nagarpalikaId + ' || ' + ownerName +' S/o '+ fatherName + ' || ' + property.houseNo + ' || ' + property.streetNoName + ' || ' + property.locality + '</option>');

                    });
                } 
                else 
                {
                    $('#proparty_id').append('<option value="">No properties available</option>');
                }
  
            },
            error: function () {
                alert('Error loading survey data.');
            }
        });
    }
 
    function findProperty() {
        let propertyKey = $("#propartyKey").val();
        $.ajax({
            url: '{{ route("properties-online") }}?page=1&perPage=3000&nagarpalikaId=' + propertyKey + '&parcelNo=' + propertyKey + '&filters=1',
            type: 'GET',
            dataType: 'json',
            success: function (response) {
                console.log(response); 
                $('#propertieList').empty();  
    
                if ((response.surveyForms.data).length > 0) {
                    $.each(response.surveyForms.data, function (index, property) {
                        let ownerDetails = typeof property.ownerDetails === 'string'
                            ? JSON.parse(property.ownerDetails)
                            : property.ownerDetails;
    
                        let ownerName = (ownerDetails && ownerDetails[0]) ? ownerDetails[0].name : 'N/A';
                        let fatherName = (ownerDetails && ownerDetails[0]) ? ownerDetails[0].fatherName : 'N/A';
                        let mobile = (ownerDetails && ownerDetails[0]) ? ownerDetails[0].mobile : 'N/A';
    
                        $('#propertieList').append(`
                            <tr>
                                <td>${index + 1}</td>
                                <td>${property.nagarpalikaId} || ${property.parcelNo} || ${ownerName} S/o ${fatherName} || ${property.houseNo} || ${property.streetNoName} || ${property.locality}</td>
                                <td>
                                    <form method="post" action="{{ route('properties.data') }}" style="margin-top: 1px;">
                                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                        <input type="hidden" value="${property.id}" name="proparty_id" />
                                        <input type="submit" class="btn btn-xs btn-dark" value="View" />
                                    </form>
                                </td>
                            </tr>`);
                    });
                }
            },
            error: function () {
                alert('Error loading survey data.');
            }
        });
    }


    function findPropertyByName()
    {
        let propartyName = $("#propartyName").val();
        $.ajax({
            url: '{{ route("properties-online") }}?page=' + 1 + '&perPage=' + 3000 + '&ownerDetails=' + propartyName  +'&filterByName=1' ,  
            type: 'GET',
            dataType: 'json',
            success: function (response) {
                console.log(response); 
                $('#propertieNameList').empty(); 
                if ((response.surveyForms.data).length > 0) 
                {
                    $.each(response.surveyForms.data, function (index, property) 
                    {
                        let ownerDetails = null;
                        if (typeof property.ownerDetails === 'string') 
                        {    
                            ownerDetails = JSON.parse(property.ownerDetails);
                        } 
                        else 
                        {
                            ownerDetails = property.ownerDetails; 
                        } 
                        let ownerName = ownerDetails.length > 0 ? ownerDetails[0].name : 'N/A';
                        let fatherName = ownerDetails.length > 0 ? ownerDetails[0].fatherName : 'N/A';
                        let mobile = ownerDetails.length > 0 ? ownerDetails[0].mobile : 'N/A';
                        //console.log(property);
                        $('#propertieNameList').append(`
                        <tr>
                            <td>${index +1}</td>
                            <td>`+ property.nagarpalikaId + ` || ` + ownerName +` S/o `+ fatherName + ` || ` + property.houseNo + ` || ` + property.streetNoName + ` || ` + property.locality +` </td>
                            <td> 
                                <form method="post" action="{{ route('properties.data') }}" style="margin-top: 1px;"> 
                                <input type="hidden" name="_token" value="{{ csrf_token() }}" autocomplete="off"> 
                                <input type="hidden" value="${ property.id}" name="proparty_id" />
                                <input type="submit" class="btn btn-xs btn-dark"   value="View"  /> 
                                </form> 
                            </td> 
                        </tr> `);

                    });
                }  
                 
  
            },
            error: function () {
                alert('Error loading survey data.');
            }
        });
    }
</script>
@endsection