{% extends 'admin_base_layout.html' %}
{% load static %}
{% block content %}
<!-- html code -->
<title>Seer | User Report Details</title>
	    <div class="main-content pt-0">
	    	<div class="content-wrapper">
	    		<div class="row">
	    			<div class="col-12">
	    				<h2 class="topHead">User Report</h2>
	    			</div>
	    		</div>
                <div class="user-report-file">
                    <div class="card dashboard-card">
                        <div class="row">
                            <div class="col-12">
                             <div class="col-12">
									<canvas id="userReportGraph"></canvas>
								</div>
                            </div>
                        </div>
                    </div>
                </div>
	    		
	    		<div class="row new-user-table bookings mt-3">
	    			<div class="tab-content" id="myTabContent">
					  <div class="tab-pane fade show active" id="upcoming" role="tabpanel" aria-labelledby="upcoming-tab">
					 			<div class="col-12 col-md-12">
			    				<div class="card dashboard-card">
			    					<div class="top-card">
			    						<p class="f-18">Appointment</p>
			    					</div>
			    					<div class="table-users">
			    						<div class="table-responsive w-100">          
							              <table class="table w-100">
							                <thead>
							                  <tr>
							                    <th>Appointment Id</th>
							                    <th>Fortune Teller Name</th>
							                    <th>Date & Time</th>
							                    <th>Services</th>
							                    <th>Payment</th>
							                    <th>Status</th>
							                  </tr>
							                </thead>
							                <tbody>
											{% for booking in booking_data %}
							                <tr>
											 	<td>{{booking.appointment_id}}</td>
							                    <td>
							                    	<div class="table-users">								                    		
							                    		<h6 class="f-14">{{booking.fortune_teller.first_name}} {{booking.fortune_teller.first_name}}</h6>
							                    	</div>
							                    </td>
							                    <td>{{booking.appointment_date}}<br><span>( {{booking.appointment_date}} )</span></td>
							                    <td>{{booking.service.service_name}}</td>
							                    <td>${{booking.price}}</td>
							                    <td>
				                    				<span class="complete relative d-block">
					                       			{{ booking.appointment_status}}
				                      			</span>
				                    			</td>
							                </tr>  
											{% endfor %}
							                </tbody>
							              </table>        
							            </div>
			    					</div>
			    				</div>
    					</div>
					  </div>
					</div>	    			
	    		</div>
	    	</div>
	    </div>

<!-- end of html code -->
{%endblock%}

{%block js%}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>// Get the canvas element
let bookings_data = '{{ bookings }}'
console.log(bookings_data)
user_count1 = JSON.parse(bookings_data)
const canvas = document.getElementById('userReportGraph');

// Prepare the data for the graph
const labels = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
const data = {
  labels: labels,
  datasets: [
    {
      label: 'User Reports',
      data:user_count1,
      borderColor: 'rgba(217, 58, 140, 0.8)', // Customize the color as needed
      fill: false,
    },
  ],
};

// Create the chart
const chart = new Chart(canvas, {
  type: 'line',
  data: data,
  options: {
    responsive: true,
    plugins: {
      title: {
        display: true,
        text: 'User Reports',
      },
    },
  },
});

</script>

<!-- end of js -->
{% endblock %}