@extends('layouts.app') @section('meta')
<title>Online House Tax Payment | Nagar Panchayat Govardhan</title>

<meta
  name="description"
  content="Pay your house tax online for Nagar Panchayat Govardhan, Mathura. Secure and citizen friendly property tax payment system."
/>

<link rel="canonical" href="{{ url()->current() }}" />

@endsection 
@section('content')

<style>
    .tab-content{
display:none;
}

.tab-content.active{
display:block;
}

.search-tabs{
display:flex;
gap:10px;
margin-bottom:20px;
}

.tab-btn{
padding:8px 15px;
border:1px solid #ccc;
background:#fff;
cursor:pointer;
font-weight:500;
}

.tab-btn.active{
background:#198754;
color:#fff;
border-color:#198754;
}

.property-search-card{
background:#fff;
border-radius:10px;
}

.dataTables_length{
margin-bottom:10px;
}

.dataTables_info{
margin-top:10px;
}

#propertyTable td{
vertical-align:middle;
}
</style>


<!-- PAGE HEADER -->

<section class="page-header text-white text-center d-flex align-items-center">
  <div class="container">
    <h1 class="fw-bold">Online House Tax Payment</h1>

    <p class="mb-0">Pay your property tax online in a simple and secure way</p>
  </div>
</section>

<!-- BREADCRUMB -->

<div class="breadcrumb-wrapper py-3">
  <div class="container">
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb mb-0">
        <li class="breadcrumb-item">
          <a href="{{ route('index') }}">Home</a>
        </li>

        <li class="breadcrumb-item active">House Tax Payment</li>
      </ol>
    </nav>
  </div>
</div>

<!-- SEARCH SECTION -->

<section class="py-5">
  <div class="container">
    <div class="property-search-card shadow-lg rounded-4 p-4">
      <h4 class="fw-bold mb-4">Find Your Property Details</h4>

      <!-- SEARCH TABS -->

      <div class="search-tabs mb-4">
        <button class="tab-btn active" data-tab="ward">Search by Ward</button>

        <button class="tab-btn" data-tab="property">
          Property ID / Parcel No.
        </button>

        <button class="tab-btn" data-tab="owner">Owner Name / Mobile</button>
      </div>

      <!-- SEARCH BY WARD -->

      <div class="tab-content active" id="tab-ward">
        <div class="row g-3 align-items-end">
          <div class="col-md-12">
            <label class="form-label fw-semibold"> Select Ward </label>

            <select
              class="form-select select2"
              id="wardNo"
              onchange="loadSurveys(1)"
            >
              <option value="">Search Ward No</option>

              @foreach($wardNames as $ward)

              <option value="{{ $ward->id }}">{{ $ward->name }}</option>

              @endforeach
            </select>
          </div> 
           
        </div>
      </div>

      <!-- SEARCH BY PROPERTY ID -->

      <div class="tab-content" id="tab-property">
        <div class="row g-3 align-items-end">
          <div class="col-md-10">
            <label class="form-label fw-semibold">
              Property ID / Parcel No.
            </label>

            <input
              type="text"
              class="form-control"
              id="propartyKey"
              placeholder="Enter Property ID"
            />
          </div>

          <div class="col-md-2 d-grid">
            <button class="btn btn-success btn-lg" onclick="findProperty()">
              Search
            </button>
          </div>
        </div> 
      </div>

      <!-- SEARCH BY OWNER -->

      <div class="tab-content" id="tab-owner">
        <div class="row g-3 align-items-end">
          <div class="col-md-10">
            <label class="form-label fw-semibold"> Owner Name / Mobile </label>

            <input
              type="text"
              class="form-control"
              id="propartyName"
              placeholder="Enter Owner Name"
            />
          </div>

          <div class="col-md-2 d-grid">
            <button
              class="btn btn-success btn-lg"
              onclick="findPropertyByName()"
            >
              Search
            </button>
          </div>
        </div>  
      </div>
      
        <div class="mt-4">
            <table id="propertyTable" class="table table-bordered table-hover">
                <thead class="table-light">
                    <tr>
                        <th width="60">#</th>
                        <th>Property Details</th>
                        <th width="120">Action</th>
                    </tr>
                </thead>
            
                <tbody></tbody>
            </table>
        </div>

    </div>
  </div>
</section>

@endsection 
@section('script')

<script>
  $(document).ready(function () {
    $(".select2").select2({
      placeholder: "Select option",
      allowClear: true,
      width: "100%",
    });
  });
</script>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const tabs = document.querySelectorAll(".tab-btn");
    const contents = document.querySelectorAll(".tab-content");

    tabs.forEach((tab) => {
      tab.addEventListener("click", function () {
        tabs.forEach((t) => t.classList.remove("active"));
        contents.forEach((c) => c.classList.remove("active"));

        this.classList.add("active");

        const tabName = this.getAttribute("data-tab");

        document.getElementById("tab-" + tabName).classList.add("active");
      });
    });
  });
 

 
    var propertyTable;

    $(document).ready(function () {
    
        propertyTable = $('#propertyTable').DataTable({
            paging: true,
            searching: false,
            ordering: false,
            info: true
        });
    
    });
       
    function loadSurveys(page)
    {
        let wardNo = $("#wardNo").val();
        let perPage = 150000;
    
        $.ajax({
    
            url: '{{ route("properties-search") }}?page='+page+'&perPage='+perPage+'&wardNo='+wardNo,
            type: 'GET',
            dataType: 'json',
    
            success: function(response)
            {
                //console.log(response);
    
                propertyTable.clear();
    
                if(response.data.length > 0)
                {
                    $.each(response.data,function(index,property){
    
                        let ownerDetails = property.ownerDetails;
    
                        if(typeof ownerDetails === 'string'){
                            ownerDetails = JSON.parse(ownerDetails);
                        }
    
                        let ownerName = ownerDetails.length ? ownerDetails[0].name : 'N/A';
                        let fatherName = ownerDetails.length ? ownerDetails[0].fatherName : 'N/A';
    
                        propertyTable.row.add([
                            index + 1,
    
                            property.nagarpalikaId + " || " +
                            ownerName + " S/o " + fatherName + " || " +
                            property.houseNo + " || " +
                            property.streetNoName + " || " +
                            property.locality,
    
                            `<form method="post" action="{{ route('properties-info') }}">
                                @csrf
                                <input type="hidden" name="proparty_id" value="${property.id}">
                                <button class="btn btn-info btn-sm">View</button>
                            </form>`
                        ]);
    
                    });
    
                    propertyTable.draw();
                }
            },
    
            error:function(){
                alert("Error loading property data");
            }
    
        });
    
    }

    function findProperty()
    {
        let propartyKey = $("#propartyKey").val();
    
        $.ajax({
    
            url: '{{ route("properties-search") }}?page=1&perPage=3000&nagarpalikaId='+propartyKey+'&parcelNo='+propartyKey+'&filters=1',
            type: 'GET',
            dataType: 'json',
    
            success: function(response)
            {
    
                //console.log(response);
    
                propertyTable.clear();
    
                if(response.data.length > 0)
                {
    
                    $.each(response.data,function(index,property){
    
                        let ownerDetails = property.ownerDetails;
    
                        if(typeof ownerDetails === 'string'){
                            ownerDetails = JSON.parse(ownerDetails);
                        }
    
                        let ownerName = ownerDetails.length ? ownerDetails[0].name : 'N/A';
                        let fatherName = ownerDetails.length ? ownerDetails[0].fatherName : 'N/A';
    
                        propertyTable.row.add([
                            index + 1,
    
                            property.nagarpalikaId + " || " +
                            property.parcelNo + " || " +
                            ownerName + " S/o " + fatherName + " || " +
                            property.houseNo + " || " +
                            property.streetNoName + " || " +
                            property.locality,
    
                            `<form method="post" action="{{ route('properties-info') }}">
                                @csrf
                                <input type="hidden" name="proparty_id" value="${property.id}">
                                <button class="btn btn-info btn-sm">View</button>
                            </form>`
                        ]);
    
                    });
    
                    propertyTable.draw();
    
                }
                else
                {
    
                    propertyTable.row.add([
                        '',
                        'No property found',
                        ''
                    ]).draw();
    
                }
    
            },
    
            error:function(){
                alert("Error loading survey data.");
            }
    
        });
    }

    function findPropertyByName()
    {
        let propartyName = $("#propartyName").val();
    
        $.ajax({
    
            url: '{{ route("properties-search") }}?page=1&perPage=3000&ownerDetails='+propartyName+'&filterByName=1',
            type: 'GET',
            dataType: 'json',
    
            success: function(response)
            {
    
                //console.log(response);
    
                propertyTable.clear();
    
                if(response.data.length > 0)
                {
    
                    $.each(response.data,function(index,property){
    
                        let ownerDetails = property.ownerDetails;
    
                        if(typeof ownerDetails === 'string'){
                            ownerDetails = JSON.parse(ownerDetails);
                        }
    
                        let ownerName = ownerDetails.length ? ownerDetails[0].name : 'N/A';
                        let fatherName = ownerDetails.length ? ownerDetails[0].fatherName : 'N/A';
    
                        propertyTable.row.add([
                            index + 1,
    
                            property.nagarpalikaId + " || " +
                            ownerName + " S/o " + fatherName + " || " +
                            property.houseNo + " || " +
                            property.streetNoName + " || " +
                            property.locality,
    
                            `<form method="post" action="{{ route('properties-info') }}">
                                @csrf
                                <input type="hidden" name="proparty_id" value="${property.id}">
                                <button class="btn btn-info btn-sm">View</button>
                            </form>`
                        ]);
    
                    });
    
                    propertyTable.draw();
    
                }
                else
                {
    
                    propertyTable.row.add([
                        '',
                        'No property found',
                        ''
                    ]).draw();
    
                }
    
            },
    
            error:function(){
                alert("Error loading survey data.");
            }
    
        });
    }
    
    </script>
@endsection