{% extends 'base.html' %}
{% block title %}Customer Dashboard{% endblock %}

{% block content %}
<style>
.dashboard-container {
  display: flex;
  height: 100%;
}
.sidebar {
  width: 220px;
  background: #1e1e2d;
  color: #fff;
  padding: 20px;
}
.sidebar a {
  display: block;
  color: #fff;
  margin: 10px 0;
  text-decoration: none;
}
.sidebar a:hover { color: #ff9800; }
.main-content {
  flex-grow: 1;
  padding: 30px;
  background: #f7f7f7;
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}
.card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  text-align: center;
}
.chart-container {
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  margin-bottom: 40px;
}
.admin-table-section {
  background: #fff;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.admin-table-section table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}
.admin-table-section caption {
  font-weight: bold;
  background: #ececec;
  padding: 8px;
  border-radius: 6px;
  margin-top: 15px;
}
.admin-table-section th, .admin-table-section td {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}
.admin-table-section a {
  text-decoration: none;
  color: #007bff;
}
.admin-table-section a:hover { text-decoration: underline; }
</style>
<style>
.chart-container {
    width: 350px;
    margin: 20px auto;
}

.chart-center-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 22px;
    font-weight: bold;
    pointer-events: none;
}
.chart-wrapper {
    position: relative;
}
</style>
<div class="flex min-h-screen bg-gray-100">

  <!-- Sidebar -->
  <aside class="w-64 bg-white shadow-md p-6">
    <h2 class="text-xl font-bold mb-6">Welcome, {{ request.user.first_name }}</h2>
    <nav class="space-y-3">
      <a href="#" class="block px-4 py-2 rounded hover:bg-blue-100 text-gray-700">Dashboard Home</a>
      <a href="{% url 'my_bookings' %}" class="block px-4 py-2 rounded hover:bg-blue-100 text-gray-700">My Bookings</a>
	  <a href="{% url 'book_services' %}" class="block px-4 py-2 rounded hover:bg-blue-100 text-gray-700">Book Services</a>
      <a href="{% url 'customer_profile_update' %}" class="block px-4 py-2 rounded hover:bg-blue-100 text-gray-700">Profile</a>
      <a href="{% url 'handlelogout' %}" class="block px-4 py-2 rounded text-red-600 hover:bg-red-100">Logout</a>
    </nav>
  </aside>

  <!-- Main Content -->
  <main class="flex-1 p-8">
    <h1 class="text-2xl font-bold mb-6">Customer Dashboard</h1>
    <p class="text-gray-700 mb-8">Overview of your booked, assigned, and completed services.</p>

    <!-- Dashboard Cards -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-10">
      <!-- Total Booked -->
	  <a href="{% url 'my_bookings' %}" class="block px-4 py-2 rounded hover:bg-blue-100 text-gray-700">
      <div class="bg-white shadow rounded-lg p-6 text-center hover:shadow-lg transition">
        <div class="flex justify-center mb-2">
          <svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" stroke-width="2"
               viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round"
               d="M12 8v4l3 3m6 1a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
        </div>
        <h2 class="text-gray-600 text-sm uppercase">Total Booked</h2>
        <p class="text-3xl font-bold text-blue-600">{{ total_booked }}</p>
      </div>
	  </a>

      <!-- Assigned -->
      <div class="bg-white shadow rounded-lg p-6 text-center hover:shadow-lg transition">
        <div class="flex justify-center mb-2">
          <svg class="w-8 h-8 text-indigo-500" fill="none" stroke="currentColor" stroke-width="2"
               viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round"
               d="M5 13l4 4L19 7" /></svg>
        </div>
        <h2 class="text-gray-600 text-sm uppercase">Assigned</h2>
        <p class="text-3xl font-bold text-indigo-600">{{ total_assigned }}</p>
      </div>

      <!-- Processing -->
      <div class="bg-white shadow rounded-lg p-6 text-center hover:shadow-lg transition">
        <div class="flex justify-center mb-2">
          <svg class="w-8 h-8 text-yellow-500" fill="none" stroke="currentColor" stroke-width="2"
               viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round"
               d="M12 8v4l3 3m6 1a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
        </div>
        <h2 class="text-gray-600 text-sm uppercase">In Progress</h2>
        <p class="text-3xl font-bold text-yellow-500">{{ total_in_progress }}</p>
      </div>

      <!-- Completed -->
      <div class="bg-white shadow rounded-lg p-6 text-center hover:shadow-lg transition">
        <div class="flex justify-center mb-2">
          <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" stroke-width="2"
               viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round"
               d="M5 13l4 4L19 7" /></svg>
        </div>
        <h2 class="text-gray-600 text-sm uppercase">Closed</h2>
        <p class="text-3xl font-bold text-green-600">{{ total_closed }}</p>
      </div>
    </div>
	<div style="display:flex; gap:10px; flex-wrap:wrap; justify-content:center;">

    <div class="chart-container" style="width:480px; height:auto;">
        <h3>Vertical Engagement</h3>
        <canvas id="verticalChart"></canvas>
        <p id="maxVertical" style="text-align:center; font-weight:bold; color:#1e40af"></p>
    </div>

    <div class="chart-container" style="width:480px; height:auto;">
        <h3>Subcategories</h3>
        <canvas id="subcategoryChart"></canvas>
    </div>

    <div class="chart-container" style="width:480px; height:auto;">
        <h3>Services</h3>
        <canvas id="serviceChart"></canvas>
    </div>

    <div class="chart-container" style="width:480px; height:auto;">
        <h3>Your Booking Status</h3>
    <canvas id="bookingStatusChart"></canvas>
    </div>

</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: ['Booked','Assigned','In Progress','Closed'],
    datasets: [{
      data: [{{ total_booked }},{{ total_assigned }}, {{ total_in_progress }}, {{ total_closed }}],
      backgroundColor: ['#4CAF50', '#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>
<script>
document.addEventListener("DOMContentLoaded", function () {

    let verticalChart, subcategoryChart, serviceChart, consultantChart;

    function resetChart(chart) {
        if (chart) chart.destroy();
    }

    function randomColors(n) {
        return Array.from({ length: n }, () =>
            `hsl(${Math.floor(Math.random() * 360)}, 70%, 60%)`
        );
    }

    // 1️⃣ Load Vertical chart (entry point)
    function loadVertical() {
        fetch("/api/customer-bookings-by-vertical/")
            .then(res => res.json())
            .then(data => {
                resetChart(verticalChart);

                const ctx = document.getElementById("verticalChart").getContext("2d");

                // Show most engaged vertical (if any)
                if (data.max_vertical) {
                    document.getElementById("maxVertical").innerHTML =
                        `🔥 Most Engaged: <b>${data.max_vertical.name}</b> (${data.max_vertical.count} bookings)`;
                } else {
                    document.getElementById("maxVertical").innerHTML = "No data yet";
                }

                verticalChart = new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: data.labels,
                        datasets: [{
                            data: data.values,
                            backgroundColor: randomColors(data.labels.length)
                        }]
                    },
                    options: {
						indexAxis: "y", 
                        onClick: (_, elements) => {
                            if (elements.length > 0) {
                                const index = elements[0].index;
                                const verticalId = data.ids[index];
                                loadSubCategory(verticalId);
                                resetChart(serviceChart); // clear services when vertical changes
                            }
                        },
                        plugins: { legend: { display: false } }
                    }
                });
            });
    }

    // 2️⃣ Load Subcategories for selected vertical
    function loadSubCategory(verticalId) {
        fetch(`/api/customer-bookings-by-subcategory/?vertical=${verticalId}`)
            .then(res => res.json())
            .then(data => {
                resetChart(subcategoryChart);

                const ctx = document.getElementById("subcategoryChart").getContext("2d");

                subcategoryChart = new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: data.labels,
                        datasets: [{
                            data: data.values,
                            backgroundColor: randomColors(data.labels.length)
                        }]
                    },
                    options: {
						indexAxis: "y",
                        onClick: (_, elements) => {
                            if (elements.length > 0) {
                                const index = elements[0].index;
                                const subcatId = data.ids[index];
                                loadService(subcatId);
                            }
                        },
                        plugins: { legend: { display: false } }
                    }
                });
            });
    }

    // 3️⃣ Load Services for selected subcategory
    function loadService(subcatId) {
        fetch(`/api/customer-bookings-by-service/?subcategory=${subcatId}`)
            .then(res => res.json())
            .then(data => {
                resetChart(serviceChart);

                const ctx = document.getElementById("serviceChart").getContext("2d");

                serviceChart = new Chart(ctx, {
					indexAxis: "y",
                    type: 'bar',
                    data: {
                        labels: data.labels,
                        datasets: [{
                            data: data.values,
                            backgroundColor: randomColors(data.labels.length)
                        }]
                    },
                    options: {
                        plugins: { legend: { display: false } }
                    }
                });
            });
    }

   

    // INITIAL LOAD
    loadVertical();
   

});
</script>


{% endblock %}