@extends('admin.layouts.adminApp')

@section('content')
<div class="page-wrapper">
	<div class="page-content">
		<div>
			<h3>Ward Wise Survey Statistics</h3>
		</div>
		<div class="row row-cols-1 row-cols-md-2 row-cols-xl-4">

			<div class="col">
				<div class="card bg-gradient-burning">
					<div class="card-body ">
						<div class="d-flex gap-3 align-items-center ">
							<div class="widgets-icons-2 rounded-circle bg-danger  text-white "><i
									class="fs-1 bx bx-check-circle"></i>
							</div>
							<div class="pl-2">
								<p class="mb-0 text-white">Total Wards to be Surveyed</p>
								<h4 class="my-1 text-white" id="totalWards"> </h4>

							</div>

						</div>
					</div>
				</div>
			</div>
			<div class="col">
				<div class="card  bg-gradient-blues">
					<div class="card-body">
						<div class="d-flex  gap-3 align-items-center ">
							<div class="widgets-icons-2 rounded-circle bg-gradient-blues text-white"><i
									class="fs-1 bx bx-check-circle"></i>
							</div>
							<div class="pl-2">
								<p class="mb-0 text-white">Surveyed Completed In Ward</p>
								<h4 class="my-1 text-white" id="CompletedWards"> </h4>

							</div>

						</div>
					</div>
				</div>
			</div>
			<div class="col">
				<div class="card bg-gradient-orange">
					<div class="card-body">
						<div class="d-flex gap-3 align-items-center ">
							<div class="widgets-icons-2 rounded-circle bg-gradient-orange text-white"><i
									class="fs-1 bx bx-check-circle"></i>
							</div>
							<div class="pl-2">
								<p class="mb-0 text-white">Survey In Progress</p>
								<h4 class="my-1 text-white SurveyInProgress" id="SurveyInProgress"> </h4>

							</div>

						</div>
					</div>
				</div>
			</div>
			<div class="col">
				<div class="card bg-gradient-ohhappiness">
					<div class="card-body">
						<div class="d-flex gap-3 align-items-center ">
							<div class="widgets-icons-2 rounded-circle bg-gradient-ohhappiness text-white"><i
									class="fs-1 bx bx-check-circle"></i>
							</div>
							<div class="pl-2">
								<p class="mb-0 text-white">Surveyed Completed</p>
								<h4 class="my-1 text-white SurveyedCompleted" id="SurveyedCompleted"> </h4>

							</div>

						</div>
					</div>
				</div>
			</div>
			
		</div><!--end row-->
		
		<div>
			<h3>Property Wise Survey Statistics</h3>
		</div>
                 

		<div class="row">
			<div class="col-12 col-lg-12">
				<div class="row align-items-stretch ">
     <!--               <div class="col">-->
					<!--	<div class="card mb-3 bg-gradient-orange">-->
					<!--		<div class="card-body">-->
					<!--			<div class="row">-->
					<!--				<div class="col-4  d-flex align-items-center justify-content-start ">-->
					<!--					<div-->
					<!--						class="widgets-icons-2 rounded-circle bg-gradient-orange text-white ">-->
					<!--						<i class="fs-2 bx bx-building-house"></i>-->
					<!--					</div>-->
					<!--				</div>-->
					<!--				<div class="col-8">-->
					<!--					<div>-->
					<!--						<p class="mb-0 text-white">Survey In Prog.</p>-->
					<!--						<h6 class="my-1 text-white SurveyInProgress"> </h6>-->
					<!--						<button class="btn text-white" style="font-size: 10px;">View Details</button>-->
					<!--					</div>-->
					<!--				</div>-->
					<!--			</div>-->

					<!--		</div>-->
					<!--	</div>-->
					<!--</div>-->
					
					
     <!--               <div class="col">-->
					<!--	<div class="card mb-3 bg-gradient-moonlit">-->
					<!--		<div class="card-body">-->
					<!--			<div class="row">-->
					<!--				<div class="col-4  d-flex align-items-center justify-content-start ">-->
					<!--					<div-->
					<!--						class="widgets-icons-2 rounded-circle bg-gradient-moonlit  text-white ">-->
					<!--						<i class="fs-2 bx bx-check-shield"></i>-->
					<!--					</div>-->
					<!--				</div>-->
					<!--				<div class="col-8">-->
					<!--					<div>-->
					<!--						<p class="mb-0 text-white">QC Level-1</p>-->
					<!--						<h6 class="my-1 text-white qc_Level_1"> </h6>-->
					<!--						<button class="btn text-white" style="font-size: 10px;">View-->
					<!--							Details</button>-->
					<!--					</div>-->
					<!--				</div>-->
					<!--			</div>-->

					<!--		</div>-->
					<!--	</div>-->
					<!--</div>-->
     <!--               <div class="col">-->
					<!--	<div class="card mb-3 bg-gradient-moonlit">-->
					<!--		<div class="card-body">-->
					<!--			<div class="row">-->
					<!--				<div class="col-4  d-flex align-items-center justify-content-start ">-->
					<!--					<div-->
					<!--						class="widgets-icons-2 rounded-circle bg-gradient-moonlit  text-white ">-->
					<!--						<i class="fs-2 bx bx-check-shield"></i>-->
					<!--					</div>-->
					<!--				</div>-->
					<!--				<div class="col-8">-->
					<!--					<div>-->
					<!--						<p class="mb-0 text-white">QC Level-2</p>-->
					<!--						<h6 class="my-1 text-white qc_Level_2"> </h6>-->
					<!--						<button class="btn text-white" style="font-size: 10px;">View-->
					<!--							Details</button>-->
					<!--					</div>-->
					<!--				</div>-->
					<!--			</div>-->

					<!--		</div>-->
					<!--	</div>-->
					<!--</div>-->
     <!--               <div class="col">-->
					<!--	<div class="card mb-3 bg-gradient-moonlit">-->
					<!--		<div class="card-body">-->
					<!--			<div class="row">-->
					<!--				<div class="col-4  d-flex align-items-center justify-content-start ">-->
					<!--					<div-->
					<!--						class="widgets-icons-2 rounded-circle bg-gradient-moonlit  text-white ">-->
					<!--						<i class="fs-2 bx bx-check-shield"></i>-->
					<!--					</div>-->
					<!--				</div>-->
					<!--				<div class="col-8">-->
					<!--					<div>-->
					<!--						<p class="mb-0 text-white">QC Done  </p>-->
					<!--						<h6 class="my-1 text-white qc_Done"> </h6>-->
					<!--						<button class="btn text-white" style="font-size: 10px;">View-->
					<!--							Details</button>-->
					<!--					</div>-->
					<!--				</div>-->
					<!--			</div>-->

					<!--		</div>-->
					<!--	</div>-->
					<!--</div>-->
					<!--<div class="col">-->
					<!--	<div class="card mb-3 bg-gradient-lush">-->
					<!--		<div class="card-body">-->
					<!--			<div class="row">-->
					<!--				<div class="col-4  d-flex align-items-center justify-content-start ">-->
					<!--					<div-->
					<!--						class="widgets-icons-2 rounded-circle bg-gradient-lush  text-white ">-->
					<!--						<i class="fs-2 bx bx-bar-chart-alt"></i>-->
					<!--					</div>-->
					<!--				</div>-->
					<!--				<div class="col-8">-->
					<!--					<div>-->
					<!--						<p class="mb-0 text-white">Completed Surveyed .</p>-->
					<!--						<h6 class="my-1 text-white SurveyedCompleted"></h6>-->
					<!--						<button class="btn text-white" style="font-size: 10px;">View-->
					<!--							Details</button>-->
					<!--					</div>-->
					<!--				</div>-->
					<!--			</div>-->

					<!--		</div>-->
					<!--	</div>-->
					<!--</div>-->
					
					<!--<div class="col-12 col-md-6 col-lg-4">-->
					<!--	<div class="card mb-3 bg-gradient-cosmic">-->
					<!--		<div class="card-body">-->
					<!--			<div class="row">-->
					<!--				<div class="col-3  d-flex align-items-center justify-content-start ">-->
					<!--					<div-->
					<!--						class="widgets-icons-2 rounded-circle bg-gradient-cosmic  text-white ">-->
					<!--						<i class="fs-2 bx bx-check-circle"></i>-->
					<!--					</div>-->
					<!--				</div>-->
					<!--				<div class="col-9">-->
					<!--					<div>-->
					<!--						<p class="mb-0 text-white">Total Old Prop.</p>-->
					<!--						<h6 class="my-1 text-white ">0</h6>-->
					<!--						<button class="btn text-white" style="font-size: 10px;">View-->
					<!--							Details</button>-->
					<!--					</div>-->
					<!--				</div>-->
					<!--			</div>-->

					<!--		</div>-->
					<!--	</div>-->
					<!--</div>-->
				 
					<!--<div class="col-12 col-md-6 col-lg-4">-->
					<!--	<div class="card mb-3 bg-gradient-kyoto">-->
					<!--		<div class="card-body">-->
					<!--			<div class="row">-->
					<!--				<div class="col-3  d-flex align-items-center justify-content-start ">-->
					<!--					<div-->
					<!--						class="widgets-icons-2 rounded-circle bg-gradient-kyoto  text-white ">-->
					<!--						<i class="fs-2 bx bx-building-house"></i>-->
					<!--					</div>-->
					<!--				</div>-->
					<!--				<div class="col-9">-->
					<!--					<div>-->
					<!--						<p class="mb-0 text-white">Match Prop.</p>-->
					<!--						<h6 class="my-1 text-white ">0</h6>-->
					<!--						<button class="btn text-white" style="font-size: 10px;">View-->
					<!--							Details</button>-->
					<!--					</div>-->
					<!--				</div>-->
					<!--			</div>-->

					<!--		</div>-->
					<!--	</div>-->
					<!--</div>-->
					<!--<div class="col-12 col-md-6 col-lg-4">-->
					<!--	<div class="card mb-3 bg-gradient-blues">-->
					<!--		<div class="card-body">-->
					<!--			<div class="row">-->
					<!--				<div class="col-3  d-flex align-items-center justify-content-start ">-->
					<!--					<div-->
					<!--						class="widgets-icons-2 rounded-circle bg-gradient-blues  text-white ">-->
					<!--						<i class="fs-2 bx bx-check-shield"></i>-->
					<!--					</div>-->
					<!--				</div>-->
					<!--				<div class="col-9">-->
					<!--					<div>-->
					<!--						<p class="mb-0 text-white">New Property</p>-->
					<!--						<h6 class="my-1 text-white ">8654</h6>-->
					<!--						<button class="btn text-white" style="font-size: 10px;">View-->
					<!--							Details</button>-->
					<!--					</div>-->
					<!--				</div>-->
					<!--			</div>-->

					<!--		</div>-->
					<!--	</div>-->
					<!--</div>-->
					

				 
					<!--<div class="col-12 col-md-6 col-lg-4">-->
					<!--	<div class="card mb-3 bg-gradient-moonlit">-->
					<!--		<div class="card-body">-->
					<!--			<div class="row">-->
					<!--				<div class="col-3  d-flex align-items-center justify-content-start ">-->
					<!--					<div-->
					<!--						class="widgets-icons-2 rounded-circle bg-gradient-moonlit  text-white ">-->
					<!--						<i class="fs-2 bx bx-check-shield"></i>-->
					<!--					</div>-->
					<!--				</div>-->
					<!--				<div class="col-9">-->
					<!--					<div>-->
					<!--						<p class="mb-0 text-white">QC By Dept.(Level-1)</p>-->
					<!--						<h6 class="my-1 text-white ">8834</h6>-->
					<!--						<button class="btn text-white" style="font-size: 10px;">View-->
					<!--							Details</button>-->
					<!--					</div>-->
					<!--				</div>-->
					<!--			</div>-->

					<!--		</div>-->
					<!--	</div>-->
					<!--</div>-->
					<!--<div class="col-12 col-md-6 col-lg-4">-->
					<!--	<div class="card mb-3 bg-gradient-burning">-->
					<!--		<div class="card-body">-->
					<!--			<div class="row">-->
					<!--				<div class="col-3  d-flex align-items-center justify-content-start ">-->
					<!--					<div class="widgets-icons-2 rounded-circle bg-danger  text-white "><i-->
					<!--							class="fs-2 bx bx-check-shield"></i>-->
					<!--					</div>-->
					<!--				</div>-->
					<!--				<div class="col-9">-->
					<!--					<div>-->
					<!--						<p class="mb-0 text-white">QC By Dept.(Level-2)</p>-->
					<!--						<h6 class="my-1 text-white ">8320</h6>-->
					<!--						<button class="btn text-white" style="font-size: 10px;">View-->
					<!--							Details</button>-->
					<!--					</div>-->
					<!--				</div>-->
					<!--			</div>-->

					<!--		</div>-->
					<!--	</div>-->
					<!--</div>-->
					<!--<div class="col-12 col-md-6 col-lg-4">-->
					<!--	<div class="card mb-3 bg-gradient-bloody">-->
					<!--		<div class="card-body">-->
					<!--			<div class="row">-->
					<!--				<div class="col-3  d-flex align-items-center justify-content-start ">-->
					<!--					<div-->
					<!--						class="widgets-icons-2 rounded-circle bg-gradient-bloody  text-white ">-->
					<!--						<i class="fs-2 bx bx-check-shield"></i>-->
					<!--					</div>-->
					<!--				</div>-->
					<!--				<div class="col-9">-->
					<!--					<div>-->
					<!--						<p class="mb-0 text-white">QC By Dept.(Level-3)</p>-->
					<!--						<h6 class="my-1 text-white ">7194</h6>-->
					<!--						<button class="btn text-white" style="font-size: 10px;">View-->
					<!--							Details</button>-->
					<!--					</div>-->
					<!--				</div>-->
					<!--			</div>-->

					<!--		</div>-->
					<!--	</div>-->
					<!--</div>-->

				</div>
			</div>
			<!--<div class="col-12 col-lg-4">-->
			<!--	<div class="card radius-10 w-100">-->
			<!--		<div class="card-header bg-transparent">-->
			<!--			<div class="d-flex align-items-center">-->
			<!--				<div>-->
			<!--					<h6 class="mb-0">Top Selling Categories</h6>-->
			<!--				</div>-->
			<!--				<div class="dropdown ms-auto">-->
			<!--					<a class="dropdown-toggle dropdown-toggle-nocaret" href="#"-->
			<!--						data-bs-toggle="dropdown"><i class="fs-2 bx bx-check-shield"></i>-->
			<!--					</a>-->
			<!--					<ul class="dropdown-menu">-->
			<!--						<li><a class="dropdown-item" href="javascript:;">Action</a>-->
			<!--						</li>-->
			<!--						<li><a class="dropdown-item" href="javascript:;">Another action</a>-->
			<!--						</li>-->
			<!--						<li>-->
			<!--							<hr class="dropdown-divider">-->
			<!--						</li>-->
			<!--						<li><a class="dropdown-item" href="javascript:;">Something else here</a>-->
			<!--						</li>-->
			<!--					</ul>-->
			<!--				</div>-->
			<!--			</div>-->
			<!--		</div>-->
			<!--		<div class="card-body">-->
			<!--			<div class="chart-container-0">-->
			<!--				<canvas id="chart5"></canvas>-->
			<!--			</div>-->
			<!--		</div>-->
			<!--		<div class="row row-group border-top g-0">-->
			<!--			<div class="col">-->
			<!--				<div class="p-3 text-center">-->
			<!--					<h4 class="mb-0 text-danger">$45,216</h4>-->
			<!--					<p class="mb-0">Clothing</p>-->
			<!--				</div>-->
			<!--			</div>-->
			<!--			<div class="col">-->
			<!--				<div class="p-3 text-center">-->
			<!--					<h4 class="mb-0 text-success">$68,154</h4>-->
			<!--					<p class="mb-0">Electronic</p>-->
			<!--				</div>-->
			<!--			</div>-->
			<!--		</div>  
			<!--	</div>-->
			<!--</div>--> 
		</div>
		
		<!--<div class="row align-items-stretch ">-->

		<!--	<div>-->
		<!--		<h3>Increased Revenue Statistcs(After QA Done By US)</h3>-->
		<!--	</div>-->
		<!--	<div class="col-12 col-md-6 col-lg-2">-->
		<!--		<div class="card mb-3 bg-gradient-deepblue">-->
		<!--			<div class="card-body">-->
		<!--				<div class="row">-->
		<!--					<div-->
		<!--						class="col-3  d-flex flex-column align-items-center justify-content-start ">-->
		<!--						<div-->
		<!--							class="widgets-icons-2 rounded-circle bg-gradient-deepblue  text-white ">-->
		<!--							<i class="fs-2 bx bx-rupee"></i>-->
		<!--						</div>-->
		<!--						<button class="btn text-white" style="font-size: 10px;"> Details</button>-->
		<!--					</div>-->
		<!--					<div class="col-9">-->
		<!--						<div>-->
		<!--							<p class="mb-0 text-white border-bottom">ARV - No Change</p>-->
		<!--							<h6 class="my-1 text-white ">Prop. 0</h6>-->
		<!--							<h6 class="my-1 text-white ">Rs. 0</h6>-->

		<!--						</div>-->
		<!--					</div>-->
		<!--				</div>-->

		<!--			</div>-->
		<!--		</div>-->
		<!--	</div>-->
		<!--	<div class="col-12 col-md-6 col-lg-2">-->
		<!--		<div class="card mb-3 bg-gradient-ohhappiness">-->
		<!--			<div class="card-body">-->
		<!--				<div class="row">-->
		<!--					<div-->
		<!--						class="col-3  d-flex flex-column align-items-center justify-content-start ">-->
		<!--						<div-->
		<!--							class="widgets-icons-2 rounded-circle bg-gradient-ohhappiness  text-white ">-->
		<!--							<i class="fs-2 bx bx-rupee"></i>-->
		<!--						</div>-->
		<!--						<button class="btn text-white" style="font-size: 10px;">-->
		<!--							Details</button>-->
		<!--					</div>-->
		<!--					<div class="col-9">-->
		<!--						<div>-->
		<!--							<p class="mb-0 text-white border-bottom">ARV Inc.(>0-25%)</p>-->
		<!--							<h6 class="my-1 text-white ">Prop. 0</h6>-->
		<!--							<h6 class="my-1 text-white ">Rs. 0</h6>-->

		<!--						</div>-->
		<!--					</div>-->
		<!--				</div>-->

		<!--			</div>-->
		<!--		</div>-->
		<!--	</div>-->
		<!--	<div class="col-12 col-md-6 col-lg-2">-->
		<!--		<div class="card mb-3 bg-gradient-ibiza">-->
		<!--			<div class="card-body">-->
		<!--				<div class="row">-->
		<!--					<div-->
		<!--						class="col-3  d-flex flex-column align-items-center justify-content-start ">-->
		<!--						<div class="widgets-icons-2 rounded-circle bg-gradient-ibiza  text-white ">-->
		<!--							<i class="fs-2 bx bx-rupee"></i>-->
		<!--						</div>-->
		<!--						<button class="btn text-white" style="font-size: 10px;">-->
		<!--							Details</button>-->
		<!--					</div>-->
		<!--					<div class="col-9">-->
		<!--						<div>-->
		<!--							<p class="mb-0 text-white border-bottom">ARV Inc.(26%-50%)</p>-->
		<!--							<h6 class="my-1 text-white ">Prop. 0</h6>-->
		<!--							<h6 class="my-1 text-white ">Rs. 0</h6>-->

		<!--						</div>-->
		<!--					</div>-->
		<!--				</div>-->

		<!--			</div>-->
		<!--		</div>-->
		<!--	</div>-->
		<!--	<div class="col-12 col-md-6 col-lg-2">-->
		<!--		<div class="card mb-3 bg-gradient-blooker">-->
		<!--			<div class="card-body">-->
		<!--				<div class="row">-->
		<!--					<div-->
		<!--						class="col-3  d-flex flex-column align-items-center justify-content-start ">-->
		<!--						<div-->
		<!--							class="widgets-icons-2 rounded-circle bg-gradient-blooker  text-white ">-->
		<!--							<i class="fs-2 bx bx-rupee"></i>-->
		<!--						</div>-->
		<!--						<button class="btn text-white" style="font-size: 10px;">-->
		<!--							Details</button>-->
		<!--					</div>-->
		<!--					<div class="col-9">-->
		<!--						<div>-->
		<!--							<p class="mb-0 text-white border-bottom">ARV Inc.(>50%)</p>-->
		<!--							<h6 class="my-1 text-white ">Prop. 0</h6>-->
		<!--							<h6 class="my-1 text-white ">Rs. 0</h6>-->

		<!--						</div>-->
		<!--					</div>-->
		<!--				</div>-->

		<!--			</div>-->
		<!--		</div>-->
		<!--	</div>-->
		<!--	<div class="col-12 col-md-6 col-lg-2">-->
		<!--		<div class="card mb-3 bg-gradient-quepal">-->
		<!--			<div class="card-body">-->
		<!--				<div class="row">-->
		<!--					<div-->
		<!--						class="col-3  d-flex flex-column align-items-center justify-content-start ">-->
		<!--						<div class="widgets-icons-2 rounded-circle bg-gradient-quepal  text-white ">-->
		<!--							<i class="fs-2 bx bx-rupee"></i>-->
		<!--						</div>-->
		<!--						<button class="btn text-white" style="font-size: 10px;">-->
		<!--							Details</button>-->
		<!--					</div>-->
		<!--					<div class="col-9">-->
		<!--						<div>-->
		<!--							<p class="mb-0 text-white border-bottom">New Properties</p>-->
		<!--							<h6 class="my-1 text-white ">Prop. 0</h6>-->
		<!--							<h6 class="my-1 text-white ">Rs. 0</h6>-->

		<!--						</div>-->
		<!--					</div>-->
		<!--				</div>-->

		<!--			</div>-->
		<!--		</div>-->
		<!--	</div>-->
		<!--	<div class="col-12 col-md-6 col-lg-2">-->
		<!--		<div class="card mb-3 bg-gradient-moonlit">-->
		<!--			<div class="card-body">-->
		<!--				<div class="row">-->
		<!--					<div-->
		<!--						class="col-3  d-flex flex-column align-items-center justify-content-start ">-->
		<!--						<div-->
		<!--							class="widgets-icons-2 rounded-circle bg-gradient-moonlit  text-white ">-->
		<!--							<i class="fs-2 bx bx-rupee"></i>-->
		<!--						</div>-->
		<!--						<button class="btn text-white" style="font-size: 10px;">-->
		<!--							Details</button>-->
		<!--					</div>-->
		<!--					<div class="col-9">-->
		<!--						<div>-->
		<!--							<p class="mb-0 text-white border-bottom">Total Inc. Revenue</p>-->
		<!--							<h6 class="my-1 text-white "> Amount</h6>-->
		<!--							<h6 class="my-1 text-white ">0</h6>-->

		<!--						</div>-->
		<!--					</div>-->
		<!--				</div>-->

		<!--			</div>-->
		<!--		</div>-->
		<!--	</div>-->


		<!--</div>-->
	
		<div class="row">
		    <div class="col-md-9">
	        	<div class="row row-cols-1 row-cols-md-2 row-cols-xl-4 "> 
                    <div class="col">
            			 <div class="card radius-10 border-start border-0 border-4 border-info">
            				<div class="card-body">
            					<div class="d-flex align-items-center">
            						<div>
            						    <p class="mb-0 d-flex justify-content-between align-items-center">
                                            <span class="text-secondary">Today</span>
                                            <span class="text-info fw-bold Today"></span>
                                        </p>  
            							<p class="mb-0 font-13"> No of Recent Surveys </p>
            						</div>
            
            					</div>
            				</div>
            			 </div>
        		    </div>
        		    <div class="col">
            			<div class="card radius-10 border-start border-0 border-4 border-danger">
            			   <div class="card-body">
            				   <div class="d-flex align-items-center">
            					   <div>
            					        <p class="mb-0 d-flex justify-content-between align-items-center">
                                            <span class="text-secondary">In a Week</span>
                                            <span class="text-info fw-bold InAWeek"></span>
                                        </p> 
            						   <p class="mb-0 font-13">No of Active Surveyer </p>
            					   </div>
            
            				   </div>
            			   </div>
            			</div>
        		    </div>
        		    <div class="col">
            			<div class="card radius-10 border-start border-0 border-4 border-success">
            			   <div class="card-body">
            				   <div class="d-flex align-items-center">
            					   <div>
            					        <p class="mb-0 d-flex justify-content-between align-items-center">
                                            <span class="text-secondary">In a Month</span>
                                            <span class="text-info fw-bold InAMonth"></span>
                                        </p>   
            						   <p class="mb-0 font-13">No of Failed Survey</p>
            					   </div>
            
            				   </div>
            			   </div>
            			</div>
        		    </div>
        		    <div class="col">
            			<div class="card radius-10 border-start border-0 border-4 border-warning">
            			   <div class="card-body">
            				   <div class="d-flex align-items-center">
            					   <div>
            					        <p class="mb-0 d-flex justify-content-between align-items-center">
                                            <span class="text-secondary">Total</span>
                                            <span class="text-info fw-bold Total"></span>
                                        </p>  
            						   <p class="mb-0 font-13">No of Completed Surveyk</p>
            					   </div>
            				   </div>
            			   </div>
            			</div>
        		    </div> 
        		</div>
        		<div class="row ">
        		    <div class="col">
						<div class="card mb-3 bg-gradient-orange">
							<div class="card-body">
								<div class="row">
									<div class="col-4  d-flex align-items-center justify-content-start ">
										<div
											class="widgets-icons-2 rounded-circle bg-gradient-orange text-white ">
											<i class="fs-2 bx bx-building-house"></i>
										</div>
									</div>
									<div class="col-8">
										<div>
											<p class="mb-0 text-white">Survey In Prog.</p>
											<h6 class="my-1 text-white SurveyInProgress"> </h6>
											<!--<button class="btn text-white" style="font-size: 10px;">View Details</button>-->
										</div>
									</div>
								</div>

							</div>
						</div>
					</div>
					
					
                    <div class="col">
						<div class="card mb-3 bg-gradient-moonlit">
							<div class="card-body">
								<div class="row">
									<div class="col  d-flex align-items-center justify-content-start ">
										<div
											class="widgets-icons-2 rounded-circle bg-gradient-moonlit  text-white ">
											<i class="fs-2 bx bx-check-shield"></i>
										</div>
									</div>
									<div class="col">
										<div>
											<p class="mb-0 text-white">QC Level-1</p>
											<h6 class="my-1 text-white qc_Level_1"> </h6>
											<!--<button class="btn text-white" style="font-size: 10px;">View-->
											<!--	Details</button>-->
										</div>
									</div>
								</div>

							</div>
						</div>
					</div>
                    <div class="col">
						<div class="card mb-3 bg-gradient-moonlit">
							<div class="card-body">
								<div class="row">
									<div class="col  d-flex align-items-center justify-content-start ">
										<div
											class="widgets-icons-2 rounded-circle bg-gradient-moonlit  text-white ">
											<i class="fs-2 bx bx-check-shield"></i>
										</div>
									</div>
									<div class="col">
										<div>
											<p class="mb-0 text-white">QC Level-2</p>
											<h6 class="my-1 text-white qc_Level_2"> </h6>
											<!--<button class="btn text-white" style="font-size: 10px;">View-->
											<!--	Details</button>-->
										</div>
									</div>
								</div>

							</div>
						</div>
					</div>
                    <div class="col">
						<div class="card mb-3 bg-gradient-moonlit">
							<div class="card-body">
								<div class="row">
									<div class="col  d-flex align-items-center justify-content-start ">
										<div
											class="widgets-icons-2 rounded-circle bg-gradient-moonlit  text-white ">
											<i class="fs-2 bx bx-check-shield"></i>
										</div>
									</div>
									<div class="col">
										<div>
											<p class="mb-0 text-white">QC Done  </p>
											<h6 class="my-1 text-white qc_Done"> </h6>
											<!--<button class="btn text-white" style="font-size: 10px;">View-->
											<!--	Details</button>-->
										</div>
									</div>
								</div>

							</div>
						</div>
					</div>
					<div class="col">
						<div class="card mb-3 bg-gradient-lush">
							<div class="card-body">
								<div class="row">
									<div class="col-4  d-flex align-items-center justify-content-start ">
										<div
											class="widgets-icons-2 rounded-circle bg-gradient-lush  text-white ">
											<i class="fs-2 bx bx-bar-chart-alt"></i>
										</div>
									</div>
									<div class="col-8">
										<div>
											<p class="mb-0 text-white">Comp. Surveyed .</p><!--leted-->
											<h6 class="my-1 text-white SurveyedCompleted"></h6>
											<!--<button class="btn text-white" style="font-size: 10px;">View-->
											<!--	Details</button>-->
										</div>
									</div>
								</div>

							</div>
						</div>
					</div>
        		</div>
        		<div class="row row-cols-1 row-cols-md-2 row-cols-xl-4 ">
                    <div class="col">
                        <div class="card radius-10 border-start border-0 border-4 border-primary">
                            <div class="card-body text-center">
                                <p class="text-secondary mb-1">Total Property Tax</p>
                                <h5 class="fw-bold text-primary TotalPropertyTax"></h5>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card radius-10 border-start border-0 border-4 border-info">
                            <div class="card-body text-center">
                                <p class="text-secondary mb-1">Total Water Tax</p>
                                <h5 class="fw-bold text-info TotalWaterTax"></h5>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card radius-10 border-start border-0 border-4 border-success">
                            <div class="card-body text-center">
                                <p class="text-secondary mb-1">Total Drainage Tax</p>
                                <h5 class="fw-bold text-success TotalDrainageTax"></h5>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card radius-10 border-start border-0 border-4 border-warning">
                            <div class="card-body text-center">
                                <p class="text-secondary mb-1">Total All Tax</p>
                                <h5 class="fw-bold text-warning TotalAllTax"></h5>
                            </div>
                        </div>
                    </div>
                </div> 
		    </div>
		    <div class="col-md-3">
		        <div class="card radius-10 border-0 shadow-sm">
                    <div class="card-body">
                        <h5 class="card-title mb-3">Survey Summary Overview</h5>
                        <canvas id="surveyChart" ></canvas> 
                    </div>
                </div> 
		    </div>
		    <div class="col-md-4">
		        <div class="card radius-10 border-0 shadow-sm">
                    <div class="card-body">
                        <h5 class="card-title mb-3">Overall Tax Distribution</h5> 
                        <canvas id="taxChart"  ></canvas>
                    </div>
                </div>
	        </div>
	        <div class="col-md-8">
	            <div class="row ">
            	    <div class="card radius-10 border-0 shadow-sm ">
                        <div class="card-body">
                            <h5 class="card-title mb-3">Ward-wise Survey Overview</h5>
                            <canvas id="wardChart"></canvas>
                        </div>
                    </div>
            	</div> 
	       </div>
		</div> 
		

		<div> <h3>Ward Wise Survey Data</h3> </div>   
		<div class="row wardbypayment"></div>
		
		

	</div>
</div>
@endsection
@section('script')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
$(document).ready(function() {
    $.ajax({
        url: '{{ route("gis.dashboard-data") }}',
        type: 'GET',
        dataType: 'json',
        success: function (response) {
            console.log(response);

            // ✅ Update dashboard numbers
            $("#totalWards").text(response.totalWards);
            $("#CompletedWards").text(response.CompletedWards);
            $(".SurveyInProgress").text(response.SurveyInProgress);
            $(".SurveyedCompleted").text(response.SurveyedCompleted);
            $(".qc_Level_1").text(response.qc_Level_1);
            $(".qc_Level_2").text(response.qc_Level_2);
            $(".qc_Done").text(response.qc_Done);
            $(".wardbypayment").html(response.wardbypayment);
            $(".Today").text(response.Today);
            $(".InAWeek").text(response.InAWeek);
            $(".InAMonth").text(response.InAMonth);
            $(".Total").text(response.Total);

            // 💰 Total tax cards
            $(".TotalPropertyTax").text('₹' + new Intl.NumberFormat().format(response.TotalPropertyTax));
            $(".TotalWaterTax").text('₹' + new Intl.NumberFormat().format(response.TotalWaterTax));
            $(".TotalDrainageTax").text('₹' + new Intl.NumberFormat().format(response.TotalDrainageTax));
            $(".TotalAllTax").text('₹' + new Intl.NumberFormat().format(response.TotalAllTax));

            // -------------------------------
            // 📊 CHART 1: Survey Summary (Today / Week / Month / Total)
            // -------------------------------
            const ctx1 = document.getElementById('surveyChart').getContext('2d');
            new Chart(ctx1, {
                type: 'bar',
                data: {
                    labels: ['Today', 'In a Week', 'In a Month', 'Total'],
                    datasets: [{
                        label: 'Number of Surveys',
                        data: [
                            response.Today,
                            response.InAWeek,
                            response.InAMonth,
                            response.Total
                        ],
                        backgroundColor: [
                            'rgba(13, 202, 240, 0.6)',
                            'rgba(220, 53, 69, 0.6)',
                            'rgba(25, 135, 84, 0.6)',
                            'rgba(255, 193, 7, 0.6)'
                        ],
                        borderColor: [
                            'rgba(13, 202, 240, 1)',
                            'rgba(220, 53, 69, 1)',
                            'rgba(25, 135, 84, 1)',
                            'rgba(255, 193, 7, 1)'
                        ],
                        borderWidth: 2,
                        borderRadius: 8
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: { display: false },
                        tooltip: {
                            backgroundColor: '#fff',
                            titleColor: '#000',
                            bodyColor: '#000',
                            borderColor: '#ccc',
                            borderWidth: 1
                        }
                    },
                    scales: {
                        y: { beginAtZero: true }
                    }
                }
            });

            // -------------------------------
            // 🏙️ CHART 2: Ward-wise Properties
            // -------------------------------
            const ctx2 = document.getElementById('wardChart').getContext('2d');
            new Chart(ctx2, {
                type: 'bar',
                data: {
                    labels: response.wardNames,
                    datasets: [{
                        label: 'Properties per Ward',
                        data: response.wardCounts,
                        backgroundColor: 'rgba(54, 162, 235, 0.6)',
                        borderColor: 'rgba(54, 162, 235, 1)',
                        borderWidth: 2,
                        borderRadius: 5
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: { display: false },
                        tooltip: {
                            backgroundColor: '#fff',
                            titleColor: '#000',
                            bodyColor: '#000',
                            borderColor: '#ccc',
                            borderWidth: 1
                        }
                    },
                    scales: {
                        x: {
                            ticks: { autoSkip: false, maxRotation: 45, minRotation: 45 }
                        },
                        y: { beginAtZero: true }
                    }
                }
            });

            // -------------------------------
            // 💰 CHART 3: Total Tax Breakdown
            // -------------------------------
            const ctx3 = document.getElementById('taxChart').getContext('2d');
            new Chart(ctx3, {
                type: 'doughnut',
                data: {
                    labels: ['Property Tax', 'Water Tax', 'Drainage Tax', 'All Tax Total'],
                    datasets: [{
                        label: 'Tax Breakdown',
                        data: [
                            response.TotalPropertyTax,
                            response.TotalWaterTax,
                            response.TotalDrainageTax,
                            response.TotalAllTax
                        ],
                        backgroundColor: [
                            'rgba(13, 202, 240, 0.6)',   // Property
                            'rgba(25, 135, 84, 0.6)',   // Water
                            'rgba(255, 193, 7, 0.6)',   // Drainage
                            'rgba(220, 53, 69, 0.6)'    // Total
                        ],
                        borderColor: '#fff',
                        borderWidth: 2
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: { position: 'bottom' },
                        tooltip: {
                            backgroundColor: '#fff',
                            titleColor: '#000',
                            bodyColor: '#000',
                            borderColor: '#ccc',
                            borderWidth: 1
                        }
                    }
                }
            });
        },
        error: function () {
            alert('❌ Error loading survey data.');
        }
    });
});
</script>

@endsection