{% extends 'admin_base_layout.html' %}
{% load static %}
{% block content %}
<title>Manimaran | Reports</title>
<div class="main-content pt-0">
	<div class="content-wrapper">
		<h2 class="topHead">Reports</h2>
		<!-- <p class="gray f-14 mb-2">Welcome to Admin!</p> -->
		<div class="row">
			<div class="col-12">
				<div class="row dashboard-users mt-3 mb-2">
					<div class="col-12 col-md-6 col-lg-3" onclick="location.href='/get-customer-listing' " style="cursor: pointer;">
						<div class="dash-total-users relative">
							<div class="user-total-right">
								<p class="gray f-14 mb-0">Total Users</p>
								<h5 class="bold f-20 mb-0">{{total_user_count}}</h5>
							</div>
							<div class="usericons pink">
								<img class="total-lefticon" src="{% static 'admin/images/users.svg' %}">
							</div>
						</div>
					</div>
					<div class="col-12 col-md-6 col-lg-3" onclick="location.href='/get-worker-listing' " style="cursor: pointer;">
						<div class="dash-total-users relative">
							<div class="user-total-right">
								<p class="gray f-14 mb-0">Service Provider</p>
								<h5 class="bold f-20 mb-0">{{total_provider_count}}</h5>
							</div>
							<div class="usericons purple">
								<img class="total-lefticon" src="{% static 'admin/images/consultation.svg' %}">
							</div>
						</div>
					</div>
					<div class="col-12 col-md-6 col-lg-3" onclick="location.href='/payment-listing' " style="cursor: pointer;">
						<div class="dash-total-users relative">
							<div class="user-total-right">
								<p class="gray f-14 mb-0">Payment</p>
								<h5 class="bold f-20 mb-0">£{{total_payments}}</h5>
							</div>
							<div class="usericons blue">
								<img class="total-lefticon" src="{% static 'admin/images/revenue.svg' %}">
							</div>
						</div>
					</div>
					<div class="col-12 col-md-6 col-lg-3" onclick="location.href='/booking-listing' " style="cursor: pointer;">
						<div class="dash-total-users relative">
							<div class="user-total-right">
								<p class="gray f-14 mb-0">Total Booking</p>
								<h5 class="bold f-20 mb-0">{{total_booking}}</h5>
							</div>
							<div class="usericons blue">
								<img class="total-lefticon" src="{% static 'admin/images/booking.svg' %}">
							</div>
						</div>
					</div>
				</div>
			</div>
            <div class="col-12">
				<div class="row dashboard-users mb-3">
					<div class="col-12 col-md-6 col-lg-3" onclick="location.href='/get-customer-listing' " style="cursor: pointer;">
						<div class="dash-total-users relative">
							<div class="user-total-right">
								<p class="gray f-14 mb-0">New Users</p>
								<h5 class="bold f-20 mb-0">{{new_user_count}}</h5>
							</div>
							<div class="usericons pink">
								<img class="total-lefticon" src="{% static 'admin/images/users.svg' %}">
							</div>
						</div>
					</div>
					<div class="col-12 col-md-6 col-lg-3" onclick="location.href='/get-worker-listing' " style="cursor: pointer;">
						<div class="dash-total-users relative">
							<div class="user-total-right">
								<p class="gray f-14 mb-0">New Service Provider</p>
								<h5 class="bold f-20 mb-0">{{new_worker_count}}</h5>
							</div>
							<div class="usericons purple">
								<img class="total-lefticon" src="{% static 'admin/images/consultation.svg' %}">
							</div>
						</div>
					</div>
					{% comment %} <div class="col-12 col-md-6 col-lg-3" onclick="location.href='/booking-listing' " style="cursor: pointer;">
						<div class="dash-total-users relative">
							<div class="user-total-right">
								<p class="gray f-14 mb-0">Rescheduled</p>
								<h5 class="bold f-20 mb-0">$23.56k</h5>
							</div>
							<div class="usericons blue">
								<img class="total-lefticon" src="{% static 'admin/images/revenue.svg' %}">
							</div>
						</div>
					</div> {% endcomment %}
					<div class="col-12 col-md-6 col-lg-3" onclick="location.href='/booking-listing' " style="cursor: pointer;">
						<div class="dash-total-users relative">
							<div class="user-total-right">
								<p class="gray f-14 mb-0">Cancelled Booking</p>
								<h5 class="bold f-20 mb-0">{{cancelled_booking}}</h5>
							</div>
							<div class="usericons blue">
								<img class="total-lefticon" src="{% static 'admin/images/booking.svg' %}">
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-12 col-md-12 col-lg-6">
				<div class="card dashboard-card">
					<div class="top-card d-flex justify-content-between">
						<div class="book-card">
							<p class="f-15"><strong>Total Earnings</strong></p>
						</div>
					</div>
					
					<figure class="highcharts-figure">
						<div id="myearning"></div>
					</figure>
				</div>
			</div>
			<div class="col-12 col-md-12 col-lg-6">
				<div class="card user-card p-3">
					<div class="top-card d-flex justify-content-between">
						<p class="f-15"><strong>Bookings</strong></p>
					</div>
					<figure class="highcharts-figure">
						<div id="allBooking"></div>
					</figure>
				</div>
			</div>
		</div>

		<!-- services chart -->
		<div class="manage-user-data charts mt-4">
            <div class="row">
                <div class="col-12 col-md-6">
                    <div class="card px-0">
                        <figure class="highcharts-figure">
                            <div id="cancelServices"></div>                         
                        </figure>                        
                    </div>
                </div>
                <div class="col-12 col-md-6">
                    <div class="card px-0">
                        <figure class="highcharts-figure">
                            <div id="totalusers"></div>                         
                        </figure>                        
                    </div>
                </div>
                 <div class="col-12 col-md-6 mt-4">
                    <div class="card px-0">
                        <figure class="highcharts-figure">
                            <div id="totalworkers"></div>                         
                        </figure>                        
                    </div>
                </div>
                <div class="col-12 col-md-6 mt-4">
                    <div class="card px-0">
                        <figure class="highcharts-figure">
                            <div id="pieChartContainer"></div>                         
                        </figure>                        
                    </div>
                </div>
            </div>
		 </div>
	</div>
</div>

{%endblock%}

{%block js%}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<script>
    document.addEventListener('DOMContentLoaded', function () {
      Highcharts.chart('myearning', {
        chart: {
          type: 'column'
        },
        title: {
          text: '',
          align: 'left'
        },
        subtitle: {
          text: '',
          align: 'left'
        },
		xAxis: {
			 title: {
				text: 'Months'
			},
			categories: {{ categories|safe }},
			crosshair: true,
			accessibility: {
				description: 'Months'
			}
		},
        yAxis: {
          min: 0,
          title: {
            text: ''
          }
        },
      
        plotOptions: {
          column: {
            pointPadding: 0.2,
            borderWidth: 0
          }
        },
        colors: ['#B06B1A', '#efe1d1'],
        series: {{ series_data|safe }}
      });
    });
  </script>
<!-- earnings chart -->
<script>
    document.addEventListener('DOMContentLoaded', function () {
      Highcharts.chart('allBooking', {
        chart: {
          type: 'line'
        },
        title: {
          text: ''
        },
        subtitle: {
          text: ''
        },
        xAxis: {
          categories: {{ months|safe }}
        },
        yAxis: {
          title: {
            text: ''
          }
        },
        colors: ['#B06B1A', '#efe1d1'],
        plotOptions: {
          line: {
            dataLabels: {
              enabled: false
            },
            enableMouseTracking: false
          }
        },
        series: [{
          name: 'This Year',
          data: {{ bookings_this_year_data|safe }}
        }, {
          name: 'Last Year',
          data: {{ bookings_last_year_data|safe }}
        }]
      });
    });
  </script>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        Highcharts.chart('cancelServices', {
            chart: {
                type: 'bar'
            },
            title: {
                text: ''
            },
            xAxis: {
                categories: {{ months|safe }}
            },
            yAxis: {
                min: 0,
                title: {
                    text: ''
                },
                labels: {
                    enabled: false
                }
            },
            legend: {
                reversed: true
            },
            plotOptions: {
                series: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: false
                    }
                }
            },
            colors: ['#B06B1A', '#EFE1D1'],
            series: [{
                name: 'Cancelled services',
                data: {{ cancelled_series|safe }}
            }, {
                name: 'Completed services',
                data: {{ completed_series|safe }}
            }]
        });
    });
</script>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    Highcharts.chart('totalusers', {
      chart: {
        type: 'column'
      },
      title: {
        text: '',
        align: 'left'
      },
      subtitle: {
        text: '',
        align: 'left'
      },
      xAxis: {
        title: {
          text: 'Months'
        },
        categories: {{ categories|safe }},
        crosshair: true,
        accessibility: {
          description: 'Months'
        }
      },
      yAxis: {
        min: 0,
        title: {
          text: 'User Count'
        }
      },
      tooltip: {
        valueSuffix: ' users'
      },
      plotOptions: {
        column: {
          pointPadding: 0.2,
          borderWidth: 0
        }
      },
      colors: ['#B06B1A'],
      series: {{ user_series_data|safe }},
    });
  });
</script>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    Highcharts.chart('totalworkers', {
      chart: {
        type: 'column'
      },
      title: {
        text: '',
        align: 'left'
      },
      subtitle: {
        text: '',
        align: 'left'
      },
      xAxis: {
        title: {
          text: 'Months'
        },
        categories: {{ categories|safe }},
        crosshair: true,
        accessibility: {
          description: 'Months'
        }
      },
      yAxis: {
        min: 0,
        title: {
          text: 'User Count'
        }
      },
      tooltip: {
        valueSuffix: ' users'
      },
      plotOptions: {
        column: {
          pointPadding: 0.2,
          borderWidth: 0
        }
      },
      colors: ['#B06B1A'],
      series: {{ worker_series_data|safe }},
    });
  });
</script>

<script>
// Fetch the total user and provider counts from Django queries
var totalUserCount = {{ total_user_count }};
var totalProviderCount = {{ total_provider_count }};

// Define custom colors
var userColor = '#007bff'; // blue
var providerColor = '#28a745'; // green

// Create the pie chart
Highcharts.chart('pieChartContainer', {
  chart: {
    type: 'pie'
  },
  title: {
    text: 'user and service provider distribution'
  },
  plotOptions: {
    pie: {
      colors: ['#efe1d1', "#ad6525"] // Set custom colors here
    }
  },
  series: [{
    name: 'Count',
    colorByPoint: true,
    data: [{
      name: 'Users',
      y: totalUserCount
    }, {
      name: 'Providers',
      y: totalProviderCount
    }]
  }]
});
</script>

{% endblock %}