@extends('layouts.admin')
@section('title') Dashboard @endsection
@section('style')
<style>
	div.radio-with-Icon p.type {
	    width: 100% !important;
	}
</style>
@endsection
@section('content')
<div class="row mb-20">
	<div class="col-md-4">
		<div class="d-grid">
			<a class="btn-two" type="button" data-bs-toggle="modal" data-bs-target="#listingModal"><i class="fa-regular fa-plus"></i>&nbsp;&nbsp;Create a new listing</a>
		</div>
	</div>
</div>
<div class="bg-white border-20">
	<div class="row">
		<div class="col-lg-3 col-6">
			<div class="dash-card-one bg-white border-30 position-relative mb-15 skew-none">
				<div class="d-sm-flex align-items-center justify-content-between">
					<div class="icon rounded-circle d-flex align-items-center justify-content-center order-sm-1"><img src='{{ asset("main/images/lazy.svg") }}' data-src="{{ asset('main/icon/icon_12.svg') }}" alt="" class="lazy-img"></div>
					<div class="order-sm-0">
						<span>Total Users</span>
						<div class="value fw-500">{{ $users->count() }}</div>
					</div>
				</div>
			</div>
			<!-- /.dash-card-one -->
		</div>
		<div class="col-lg-3 col-6">
			<div class="dash-card-one bg-white border-30 position-relative mb-15">
				<div class="d-sm-flex align-items-center justify-content-between">
					<div class="icon rounded-circle d-flex align-items-center justify-content-center order-sm-1"><i class="fa-regular fa-home text-white"></i></div>
					<div class="order-sm-0">
						<span>Listed Rentals</span>
						<div class="value fw-500">{{ $rentals->count() }}</div>
					</div>
				</div>
			</div>
			<!-- /.dash-card-one -->
		</div>
		<div class="col-lg-3 col-6">
			<div class="dash-card-one bg-white border-30 position-relative mb-15">
				<div class="d-sm-flex align-items-center justify-content-between">
					<div class="icon rounded-circle d-flex align-items-center justify-content-center order-sm-1"><i class="fa-regular fa-dollar text-white"></i></div>
					<div class="order-sm-0">
						<span>Active Subscripitons</span>
						<div class="value fw-500">{{ $subscriptions->where('status','active')->count() }}</div>
					</div>
				</div>
			</div>
			<!-- /.dash-card-one -->
		</div>
		<div class="col-lg-3 col-6">
			<div class="dash-card-one bg-white border-30 position-relative mb-15">
				<div class="d-sm-flex align-items-center justify-content-between">
					<div class="icon rounded-circle d-flex align-items-center justify-content-center order-sm-1"><i class="fa-regular fa-dollar text-white"></i></div>
					<div class="order-sm-0">
						<span>Total Subscriptions</span>
						<div class="value fw-500">{{ $subscriptions->count() }}</div>
					</div>
				</div>
			</div>
			<!-- /.dash-card-one -->
		</div>
	</div>
</div>
<div class="row gx-xxl-5 d-flex pt-15 lg-pt-10">
	<div class="col-xl-12 col-lg-12 d-flex flex-column">
		<div class="user-activity-chart bg-white border-20 mt-30 h-100">
			<div class="d-flex align-items-center justify-content-between plr">
				<h5 class="dash-title-two">Revenue Chart</h5>
				
			</div>
			<div class="plr mt-50">
				<div class="chart-wrapper">
					<canvas id="revenueChart"></canvas>
				</div>
			</div>
		</div>
	</div>
</div>
@endsection
@section('script')
<div class="modal fade" id="listingModal" tabindex="-1" aria-labelledby="propertyTypeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content border-20">
      <div class="modal-header">
        <h5 class="modal-title" id="propertyTypeModalLabel">Create a new Listing</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ __('contents.close') }}"></button>
      </div>
      <div class="modal-body">
        <div class="row justify-content-center bring-top mb-25">
          <div class="col-sm-12 mb-3">
            <div class="radio-with-Icon text-center">
              <p class="radioOption-Item type">
                <input type="radio" name="type" id="post-rental" value="post-rental"
                  class="PType" style="">
                <label for="post-rental">
                  <i class="fa-regular fa-home fa-2x"></i><br>
                  Post Rental
                </label>
              </p>
            </div>
          </div>
          <div class="col-sm-12 mb-3">
            <div class="radio-with-Icon text-center">
              <p class="radioOption-Item type">
                <input type="radio" name="type" id="post-other-rental" value="post-other-rental"
                  class="PType" style="">
                <label for="post-other-rental">
                  <i class="fa-regular fa-car-on fa-2x"></i><br>
                  Post Other Rental
                </label>
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
      	<div class="d-grid">
        	<button id="next" class="btn btn-two" disabled>Get Started</button>
      	</div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript" src="{{ asset('main/vendor/chart.js') }}"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
    fetch("{{ route('main.revenue-chart') }}")
        .then(response => response.json())
        .then(data => {
            const ctx = document.getElementById("revenueChart").getContext("2d");
            new Chart(ctx, {
                type: "bar",
                data: {
                    labels: data.labels,
                    datasets: [{
                        label: "Revenue",
                        data: data.data,
                        backgroundColor: "#1d3a8c",
                        borderRadius: 30,
                        barThickness: 15,
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        tooltip: {
                            callbacks: {
                                label: function (tooltipItem) {
                                    return data.hoverData[tooltipItem.dataIndex];
                                }
                            }
                        }
                    }
                }
            });
        });
});
</script>
<script type="text/javascript">
	$(document).ready(function () {
		// Disable Next button by default
		$('#next').prop('disabled', true);

		// On radio button change
		$('.PType').change(function () {
			$('#next').prop('disabled', false);
		});

		// On click Next
		$('#next').click(function () {
			const selectedType = $('input[name="type"]:checked').val();
			if (!selectedType) {
				toastr.error("Oops! Please select a type to continue...");
				return;
			}
			else if(selectedType == 'post-rental'){
				const route = `{{ route("admin.post-rental") }}`;
				window.location.href = route;
			}else if(selectedType == 'post-other-rental'){
				const route = `{{ route("admin.post-other-rental") }}`;
				window.location.href = route;
			}
			
		});
	});
</script>
@endsection