@extends('layouts.user')
@section('title') {{ __('contents.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>{{ __('contents.myRentals') }}</span>
						<div class="value fw-500">{{ $properties->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-chart-line text-white"></i></div>
					<div class="order-sm-0">
						<span>{{ __('contents.impressions') }}</span>
						<div class="value fw-500">{{ $properties->sum('impressions') }}</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"><img src='{{ asset("main/images/lazy.svg") }}' data-src="{{ asset('main/icon/icon_14.svg') }}" alt="" class="lazy-img"></div>
					<div class="order-sm-0">
						<span>{{ __('contents.totalViews') }}</span>
						<div class="value fw-500">{{ $properties->sum('views') }}</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"><img src='{{ asset("main/images/lazy.svg") }}' data-src="{{ asset('main/icon/icon_15.svg') }}" alt="" class="lazy-img"></div>
					<div class="order-sm-0">
						<span>{{ __('contents.wishlistItems') }}</span>
						<div class="value fw-500">{{ $wishlists->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">{{ __('contents.propertyStats') }}</h5>
				
			</div>
			<div class="plr mt-50">
				<div class="chart-wrapper">
					<canvas id="user-chart"></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>
    const apiUrl = @json(route('main.user-stats'));

    document.addEventListener("DOMContentLoaded", function () {
        fetch(apiUrl)
            .then(response => response.json())
            .then(data => {
                const labels = data.map(item => item.title_en);
                const views = data.map(item => item.views);
                const impressions = data.map(item => item.impressions);

                const ctx = document.getElementById("user-chart").getContext("2d");

                new Chart(ctx, {
                    type: "bar",
                    data: {
                        labels: labels,
                        datasets: [
                            {
                                label: "Views",
                                data: views,
                                backgroundColor: "#1d3a8c",
                                borderWidth: 1,
                                borderRadius: 30,
                                barThickness: 15
                            },
                            {
                                label: "Impressions",
                                data: impressions,
                                backgroundColor: "#000",
                                borderWidth: 1,
                                borderRadius: 30,
                                barThickness: 15
                            }
                        ],
                    },
                    options: {
                        animation: true,
                        responsive: true,
                        maintainAspectRatio: true,
                        scales: {
                            y: {
                                beginAtZero: true,
                                grid: {
                                    display: false
                                }
                            },
                            x: {
                                grid: {
                                    display: false
                                }
                            }
                        },
                        plugins: {
                            legend: {
                                display: true, 
                                position: 'top',
                                labels: {
                                    font: {
                                        size: 14
                                    }
                                }
                            }
                        }
                    }
                });
            });
    });
</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) {
                if(typeof toastr !== 'undefined') {
                    toastr.error("Oops! Please select a type to continue...");
                } else {
                    alert("Oops! Please select a type to continue...");
                }
                return;
            }
            
            // Redirect Logic - Points to USER routes now
            if(selectedType == 'post-rental'){
                // Updated to user route
                window.location.href = "{{ route('user.post-rental') }}"; 
            } else if(selectedType == 'post-other-rental'){
                // Updated to user route
                window.location.href = "{{ route('user.post-other-rental') }}";
            }
        });
    });
</script>
@endsection