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

{% block content %}
<!-- Boxicons CDN -->
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="{{ url_for('static', filename='css/dashboad.css') }}" />

<div class="dashboard-container p-4">
  <!-- Stat Cards - CLICKABLE + FULL TEXT HOVER GREEN -->
  <div class="row g-4 mb-4">

    <!-- Total Employee Contracts -->
    <div class="col-lg-3 col-md-6">
      <a href="{{ url_for('employees.index') }}" class="text-decoration-none d-block">
        <div class="stat-card position-relative">
          <div class="stat-info">
            <h3 class="mb-1 stat-value">{{ total_employee_contracts }}</h3>
            <span class="stat-label d-block">Total Employee Contracts</span>
          </div>
          <div class="stat-icon">
            <i class='bx bx-file fs-4 icon-contract'></i>
          </div>
        </div>
      </a>
    </div>

    <!-- Total Intern Contracts -->
    <div class="col-lg-3 col-md-6">
      <a href="{{ url_for('interns.index') }}" class="text-decoration-none d-block">
        <div class="stat-card position-relative">
          <div class="stat-info">
            <h3 class="mb-1 stat-value">{{ total_intern_contracts }}</h3>
            <span class="stat-label d-block">Total Intern Contracts</span>
          </div>
          <div class="stat-icon">
            <i class='bx bx-file fs-4 icon-contract'></i>
          </div>
        </div>
      </a>
    </div>

    <!-- Global Consultant Contracts -->
    <div class="col-lg-3 col-md-6">
      <a href="{{ url_for('contracts.index') }}" class="text-decoration-none d-block">
        <div class="stat-card position-relative">
          <div class="stat-info">
            <h3 class="mb-1 stat-value">{{ total_consultant_contracts }}</h3>
            <span class="stat-label d-block">Global Consultant Contracts</span>
          </div>
          <div class="stat-icon">
            <i class='bx bx-file fs-4 icon-contract'></i>
          </div>
        </div>
      </a>
    </div>

    <!-- Total Users -->
    <div class="col-lg-3 col-md-6">
      <a href="{{ url_for('users.index') }}" class="text-decoration-none d-block">
        <div class="stat-card position-relative">
          <div class="stat-info">
            <h3 class="mb-1 stat-value">{{ total_users }}</h3>
            <span class="stat-label d-block">Total Users</span>
          </div>
          <div class="stat-icon">
            <i class='bx bx-group icon-orange'></i>
          </div>
        </div>
      </a>
    </div>

  </div>

  <!-- Charts Section (unchanged) -->
  <div class="row g-4">
    <!-- Monthly Report -->
    <div class="col-lg-8">
      <div class="card card-1 h-100">
        <div class="card-header bg-light fw-bold">
          <i class='bx bx-bar-chart-alt-2 text-primary'></i> Monthly Report
        </div>
        <div class="card-body">
          <canvas id="monthlyBarChart" height="120"></canvas>
        </div>
      </div>
    </div>

    <!-- Right Column -->
    <div class="col-lg-4 d-flex flex-column gap-4">
      <!-- Weekly Consultant Contracts -->
      <div class="weekly-card card-1">
        <div class="card-top">
          <i class='bx bx-file'></i>
          <div>
            <div>Consultant Contracts</div>
            <h3>{{ total_consultant_contracts }}</h3>
          </div>
        </div>
        <div class="growth">
          Up 2.69% <br><small>Since last month</small>
        </div>
        <canvas id="consultantWeeklyChart"></canvas>
      </div>

      <!-- Department Pie Chart -->
      <div class="card card-1 flex-fill">
        <div class="card-header bg-light fw-bold">
          <i class='bx bx-pie-chart-alt-2 text-warning'></i> Department Programs
        </div>
        <div class="card-body d-flex justify-content-center align-items-center">
          <canvas id="departmentPieChart"></canvas>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  // Monthly Bar Chart
  const ctxBar = document.getElementById('monthlyBarChart').getContext('2d');
  new Chart(ctxBar, {
    type: 'bar',
    data: {
      labels: ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],
      datasets: [{
        label: 'Requests',
        data: [400, 450, 480, 500, 520, 550, 600, 650, 630, 610, 590, 620],
        backgroundColor: 'rgba(54, 162, 235, 0.7)',
        borderColor: 'rgba(54, 162, 235, 1)',
        borderWidth: 1,
        borderRadius: 5
      }]
    },
    options: {
      responsive: true,
      plugins: { legend: { display: false } },
      scales: { y: { beginAtZero: true } }
    }
  });

  // Weekly Consultant Chart
  const ctxConsultant = document.getElementById('consultantWeeklyChart').getContext('2d');
  new Chart(ctxConsultant, {
    type: 'bar',
    data: {
      labels: ["Mon","Tue","Wed","Thu","Fri","Sat","Sun"],
      datasets: [{
        label: "Contracts",
        data: [12, 18, 9, 15, 20, 25, 10],
        backgroundColor: ["#3498db","#e67e22","#9b59b6","#e74c3c","#2ecc71","#1abc9c","#f1c40f"],
        borderRadius: 4,
        barThickness: 18,
        maxBarThickness: 22
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      layout: { padding: 5 },
      plugins: {
        legend: { display: false },
        tooltip: {
          callbacks: {
            title: (items) => items[0].label,
            label: (context) => `${context.formattedValue} Contracts`
          }
        }
      },
      scales: {
        x: { grid: { display: false }, ticks: { color: "#fff" } },
        y: { display: false }
      }
    }
  });

  // Department Pie Chart
  const departmentData = {{ department_data|tojson }};
  const ctxPie = document.getElementById('departmentPieChart').getContext('2d');
  new Chart(ctxPie, {
    type: 'pie',
    data: {
      labels: {{ pie_labels|tojson }},
      datasets: [{
        data: {{ pie_data|tojson }},
        backgroundColor: [
          "rgba(54, 162, 235, 0.7)",
          "rgba(255, 206, 86, 0.7)",
          "rgba(153, 102, 255, 0.7)",
          "rgba(255, 99, 132, 0.7)",
          "rgba(75, 192, 192, 0.7)",
          "rgba(255, 159, 64, 0.7)"
        ],
        borderWidth: 2,
        borderColor: "#fff"
      }]
    },
    options: {
      responsive: true,
      plugins: {
        legend: { position: 'bottom', labels: { usePointStyle: true } },
        tooltip: {
          callbacks: {
            label: function(context) {
              const dept = departmentData[context.dataIndex] || {};
              const name = dept.name || 'No Departments';
              const userCount = dept.user_count || 0;
              const managers = dept.managers?.length ? dept.managers.join(', ') : 'None';
              const employees = dept.employees?.length ? dept.employees.join(', ') : 'None';
              return [`${name}`, `${name}: ${userCount} members`, `Managers: ${managers}`, `Employees: ${employees}`];
            }
          }
        }
      }
    }
  });
</script>

<!-- HOVER: BOTH NUMBER & LABEL TURN GREEN -->
<style>


  .stat-value,
  .stat-label {
    transition: color 0.25s ease;
  }

  .stat-card:hover .stat-value,
  .stat-card:hover .stat-label {
    color: #28a745 !important; /* GREEN ON HOVER */
  }

  /* Remove link underline */
  .text-decoration-none {
    color: inherit;
  }
</style>
{% endblock %}