{% extends "base.html" %}
{% block title %}Dashboard{% endblock %}

{% block content %}
<div class="flex min-h-screen">

  <!-- Sidebar -->
  <aside class="w-64 bg-white shadow-md p-4">   
    <nav class="space-y-3 text-gray-700">
      <a href="{% url 'consultant_dashboard' %}" class="block px-4 py-2 rounded hover:bg-blue-100">Dashboard</a>
     <a href="{% url 'consultant_assigned_bookings' %}" class="block px-4 py-2 rounded hover:bg-blue-100">My Assigned Services</a>
	  <a href="{% url 'consultant_my_services' %}" class="block px-4 py-2 rounded hover:bg-blue-100">My Services</a>
	   <a href="{% url 'consultant_profile_update' %}" class="block px-4 py-2 rounded hover:bg-blue-100">Profile</a>
      <a href="{% url 'handlelogout' %}" class="block px-4 py-2 rounded hover:bg-red-100 text-red-600">Logout</a>
    </nav>
  </aside>

 
 <main class="flex-1 p-8">
    <h1 class="text-3xl font-semibold text-gray-800 mb-4">Welcome, {{ request.user.first_name|default:request.user.username }}</h1>

    <!-- Summary Boxes -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
      <div class="bg-white p-6 rounded-lg shadow text-center">
        <h3 class="text-sm text-gray-500">Total Assigned</h3>
        <p class="text-3xl font-semibold text-blue-600">{{ total_assigned }}</p>
      </div>
      <div class="bg-white p-6 rounded-lg shadow text-center">
        <h3 class="text-sm text-gray-500">In progress</h3>
        <p class="text-3xl font-semibold text-yellow-600">{{ total_in_progress }}</p>
      </div>     
	   <div class="bg-white p-6 rounded-lg shadow text-center">
        <h3 class="text-sm text-gray-500">Closed</h3>
        <p class="text-3xl font-semibold text-green-600">{{ total_closed }}</p>
      </div>
    </div>


    <!-- Assigned Services Table -->
    {% if total_bookings %}
    <div class="overflow-x-auto">
      <table class="min-w-full border border-gray-200 bg-white rounded-lg shadow-sm">
        <thead class="bg-gray-100 text-gray-700 text-sm uppercase">
          <tr>
            <th class="py-3 px-4 text-left border-b">#</th>
            <th class="py-3 px-4 text-left border-b">Customer</th>
            <th class="py-3 px-4 text-left border-b">Service</th>
            <th class="py-3 px-4 text-left border-b">Vertical</th>
            <th class="py-3 px-4 text-left border-b">Subcategory</th>
            <th class="py-3 px-4 text-left border-b">Comments</th>
            <th class="py-3 px-4 text-left border-b">Status</th>
            <th class="py-3 px-4 text-left border-b">Booked On</th>
          </tr>
        </thead>
        <tbody class="text-gray-800">
          {% for booking in total_bookings %}
          <tr class="hover:bg-gray-50 transition">
            <td class="py-3 px-4 border-b">{{ forloop.counter }}</td>
            <td class="py-3 px-4 border-b">{{ booking.customer.first_name }} {{ booking.customer.last_name }}</td>
            <td class="py-3 px-4 border-b">{{ booking.service.name }}</td>
            <td class="py-3 px-4 border-b">{{ booking.vertical.name }}</td>
            <td class="py-3 px-4 border-b">{{ booking.verticalsubcategory.name }}</td>
            <td class="py-3 px-4 border-b">{{ booking.comments|default:"-" }}</td>
            <td class="py-3 px-4 border-b">
              {% if booking.status == "In progress" %}
                <span class="bg-yellow-100 text-yellow-700 text-xs px-2 py-1 rounded">In progress</span>
              {% elif booking.status == "assigned" %}
                <span class="bg-blue-100 text-blue-700 text-xs px-2 py-1 rounded">Assigned</span>
              {% elif booking.status == "closed" %}
                <span class="bg-green-100 text-green-700 text-xs px-2 py-1 rounded">Closed</span>
              {% endif %}
            </td>
            <td class="py-3 px-4 border-b">{{ booking.booked_at|date:"d M Y, h:i A" }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}
    <p class="text-gray-600">No assigned services yet.</p>
    {% endif %}
	
    <!-- Chart Section -->
  <div class="bg-white p-6 rounded-lg shadow mb-8">
      <h2 class="text-lg font-semibold mb-4">Service Status Overview</h2>
      <canvas id="bookingStatusChart" height="60"></canvas>
    </div>
  </main>

</div>
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>

<script>
const ctx = document.getElementById('bookingStatusChart').getContext('2d');

// Register the plugin
Chart.register(ChartDataLabels);

new Chart(ctx, {
  type: 'doughnut',
  data: {
     labels: ['Assigned','In Progress','Closed'],
    datasets: [{
      data: [{{ total_assigned }}, {{ total_in_progress }}, {{ total_closed }}],
      backgroundColor: ['#FFC107', '#F44336', '#F55398'],
      borderWidth: 1
    }]
  },
  options: {
    responsive: true,
    plugins: {
      legend: {
        position: 'bottom'
      },
      datalabels: {
        color: '#fff',
        font: {
          weight: 'bold',
          size: 12
        },
        formatter: (value, ctx) => {
          // Just show the number
          return value;
          // Or percentage:
          // const dataArr = ctx.chart.data.datasets[0].data;
          // const total = dataArr.reduce((a, b) => a + b, 0);
          // return ((value / total) * 100).toFixed(1) + '%';
        }
      }
    },
    cutout: '60%' // thickness of the doughnut
  }
});
</script>

<style>
canvas {
  height: 400px !important;
  width: 400px !important;
}
</style>

{% endblock %}