{% extends 'core/base.html' %}
{% load static %}

{% block content %}
<style>
  #dashboard_nav:hover {
    color: #c51d21;
  }
  #dashboard-app {
    position: relative;
  }
  #dashboard-app.dashboard-loading {
    opacity: 0.72;
    pointer-events: none;
  }
  #dashboard-app.dashboard-loading::after {
    content: '';
    position: fixed;
    top: 50%;
    left: 50%;
    width: 2.5rem;
    height: 2.5rem;
    margin: -1.25rem 0 0 -1.25rem;
    border: 3px solid rgba(211, 127, 44, 0.25);
    border-top-color: #d37f2c;
    border-radius: 50%;
    animation: dashboard-spin 0.8s linear infinite;
    z-index: 50;
  }
  @keyframes dashboard-spin {
    to { transform: rotate(360deg); }
  }
  #dash-live-status {
    color: #fff;
  }
  #dash-refresh-btn {
    position: relative;
    top: -36px;
    right: -19px;
    margin-left: 1rem;
    padding: 0.25rem 0.75rem;
    border-radius: 0.375rem;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 0.875rem;
    border: 1px solid rgba(255, 255, 255, 0.35);
    cursor: pointer;
  }
  #dash-refresh-btn:disabled {
    opacity: 0.6;
    cursor: wait;
  }
  #dashboard-app > .flex > a.domino-effect {
    display: flex;
  }
  #dashboard-app > .flex > a.domino-effect > div {
    width: 100%;
    min-height: 5.75rem;
    height: auto;
  }
  #dashboard-app > .flex > a.domino-effect .flex-auto {
    flex: none;
    display: flex;
    align-items: center;
    width: 100%;
  }
  .dash-stat-circle {
    flex: 0 0 auto;
  }
  .dash-verify-stats {
    margin: 0.3rem 0 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
  }
  .dash-verify-line {
    margin: 0.3rem 0 0 1rem;
    font-size: 0.68rem;
    line-height: 1.25;
    font-weight: 500;
    color: #94a3b8;
    white-space: nowrap;
  }
  .dash-verify-stats .dash-verify-line {
    margin: 0;
  }
  .dash-verify-line .dash-verify-group-label {
    margin-right: 0.35rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #94a3b8;
  }
  .dash-verify-line .is-verified {
    color: #059669;
    font-weight: 700;
  }
  .dash-verify-line .is-unverified {
    color: #b45309;
    font-weight: 700;
  }
  .dash-verify-line .dash-verify-sep {
    margin: 0 0.3rem;
    color: #cbd5e1;
    font-weight: 400;
  }
  @media (min-width: 1200px) {
    #dashboard-app > .flex > a.domino-effect.dash-stat-card {
      width: 20%;
      flex: 0 0 20%;
      max-width: 20%;
      margin-bottom: 0;
    }
  }
</style>
<nav>
  <!-- breadcrumb -->
  <ol class="flex flex-wrap pt-1 mr-12 bg-transparent rounded-lg sm:mr-16"
    style="position: relative;top: -40px;right: -19px;">
    <li class="text-lg leading-normal">
      <a class="text-white " href="{% url 'core:dashboard' %}">Home</a>
    </li>
    <li class="text-lg pl-2 capitalize leading-normal text-white  before:pr-2 before:content-['/']" id="currentPage"
      aria-current="page">Dashboard</li>
  </ol>
  <div style="position: relative; top: -36px; right: -19px; display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem;">
    <p id="dash-live-status" class="text-sm m-0">Loading dashboard data…</p>
    <button type="button" id="dash-refresh-btn" title="Reload dashboard">Refresh</button>
  </div>
</nav>

<div id="dashboard-app" data-api-url="{% url 'core:dashboard_data' %}">
<div class="flex flex-wrap -mx-3">
  <!-- First Row - Cards -->
  <a href="{% url 'core:users' %}" class="domino-effect dash-stat-card w-full max-w-full px-3 mb-6 sm:w-1/2 sm:flex-none">
    <div
      class="relative flex flex-col min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border">
      <div class="flex-auto p-4">
        <div class="flex flex-row items-center -mx-3">
          <div class="flex-none w-2/3 max-w-full px-3">
            <div>
              <p
                class="mt-2 ml-4 mb-0 floating-label font-sans text-md font-semibold leading-normal uppercase dark:text-white dark:opacity-60">
                Users</p>
            </div>
          </div>
          <div class="px-3 text-right basis-1/3 dash-stat-circle">
            <div
              class="inline-block w-12 h-12 text-center rounded-circle bg-gradient-to-tl from-blue-500 to-orange-600">
              <h3 id="dash-count-users" class="mt-1 font-bold text-white">—</h3>
            </div>
          </div>
        </div>
      </div>
    </div>
  </a>
  <a href="{% url 'core:shipper' %}" class="domino-effect dash-stat-card w-full max-w-full px-3 mb-6 sm:w-1/2 sm:flex-none">
    <div
      class="relative flex flex-col min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border">
      <div class="flex-auto p-4">
        <div class="flex flex-row items-center -mx-3">
          <div class="flex-none w-2/3 max-w-full px-3">
            <div>
              <p
                class="mt-2 ml-4 mb-0 floating-label font-sans text-md font-semibold leading-normal uppercase dark:text-white dark:opacity-60">
                Shippers</p>
              <p class="dash-verify-line">
                <strong id="dash-shippers-verified" class="is-verified">—</strong> verified
                <span class="dash-verify-sep">·</span>
                <strong id="dash-shippers-unverified" class="is-unverified">—</strong> unverified
              </p>
            </div>
          </div>
          <div class="px-3 text-right basis-1/3 dash-stat-circle">
            <div
              class="inline-block w-12 h-12 text-center rounded-circle bg-gradient-to-tl from-orange-500 to-yellow-500">
              <h3 id="dash-count-shippers" class="mt-1 font-bold text-white">—</h3>
            </div>
          </div>
        </div>
      </div>
    </div>
  </a>
  <a href="{% url 'core:transporter' %}" class="domino-effect dash-stat-card w-full max-w-full px-3 mb-6 sm:w-1/2 sm:flex-none">
    <div
      class="relative flex flex-col min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border">
      <div class="flex-auto p-4">
        <div class="flex flex-row items-center -mx-3">
          <div class="flex-none w-2/3 max-w-full px-3">
            <div>
              <p
                class="mt-2 ml-4 mb-0 floating-label font-sans text-md font-semibold leading-normal uppercase dark:text-white dark:opacity-60">
                Transporters</p>
              <p class="dash-verify-line">
                <strong id="dash-transporters-verified" class="is-verified">—</strong> verified
                <span class="dash-verify-sep">·</span>
                <strong id="dash-transporters-unverified" class="is-unverified">—</strong> unverified
              </p>
            </div>
          </div>
          <div class="px-3 text-right basis-1/3 dash-stat-circle">
            <div
              class="inline-block w-12 h-12 text-center rounded-circle bg-gradient-to-tl from-emerald-500 to-teal-400">
              <h3 id="dash-count-transporters" class="mt-1 font-bold text-white">—</h3>
            </div>
          </div>
        </div>
      </div>
    </div>
  </a>
  <a href="{% url 'core:drivers' %}" class="domino-effect dash-stat-card w-full max-w-full px-3 mb-6 sm:w-1/2 sm:flex-none">
    <div
      class="relative flex flex-col min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border">
      <div class="flex-auto p-4">
        <div class="flex flex-row items-center -mx-3">
          <div class="flex-none w-2/3 max-w-full px-3">
            <div>
              <p
                class="mt-2 ml-4 mb-0 floating-label font-sans text-md font-semibold leading-normal uppercase dark:text-white dark:opacity-60">
                Drivers</p>
              <div class="dash-verify-stats">
                <p class="dash-verify-line" title="Individual drivers: verified / unverified">
                  <span class="dash-verify-group-label">Ind.</span>
                  <strong id="dash-drivers-individual-verified" class="is-verified">—</strong>
                  <span class="dash-verify-sep">/</span>
                  <strong id="dash-drivers-individual-unverified" class="is-unverified">—</strong>
                </p>
                <p class="dash-verify-line" title="Fleet drivers: verified / unverified">
                  <span class="dash-verify-group-label">Fleet</span>
                  <strong id="dash-drivers-fleet-verified" class="is-verified">—</strong>
                  <span class="dash-verify-sep">/</span>
                  <strong id="dash-drivers-fleet-unverified" class="is-unverified">—</strong>
                </p>
              </div>
            </div>
          </div>
          <div class="px-3 text-right basis-1/3 dash-stat-circle">
            <div class="inline-block w-12 h-12 text-center rounded-circle bg-gradient-to-tl from-red-600 to-violet-500">
              <h3 id="dash-count-drivers" class="mt-1 font-bold text-white">—</h3>
            </div>
          </div>
        </div>
      </div>
    </div>
  </a>
  <a href="{% url 'core:vehicles' %}" class="domino-effect dash-stat-card w-full max-w-full px-3 mb-6 sm:w-1/2 sm:flex-none">
    <div
      class="relative flex flex-col min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border">
      <div class="flex-auto p-4">
        <div class="flex flex-row items-center -mx-3">
          <div class="flex-none w-2/3 max-w-full px-3">
            <div>
              <p
                class="mt-2 ml-4 mb-0 floating-label font-sans text-md font-semibold leading-normal uppercase dark:text-white dark:opacity-60">
                Vehicles</p>
              <p class="dash-verify-line">
                <strong id="dash-vehicles-verified" class="is-verified">—</strong> verified
                <span class="dash-verify-sep">·</span>
                <strong id="dash-vehicles-unverified" class="is-unverified">—</strong> unverified
              </p>
            </div>
          </div>
          <div class="px-3 text-right basis-1/3 dash-stat-circle">
            <div
              class="inline-block w-12 h-12 text-center rounded-circle bg-gradient-to-tl from-blue-500 to-violet-500"
              style="background-image: linear-gradient(to top left, #8b5cf6, #3b82f6);">
              <h3 id="dash-count-vehicles" class="mt-1 font-bold text-white">—</h3>
            </div>
          </div>
        </div>
      </div>
    </div>
  </a>
</div>

<div class="flex flex-wrap -mx-3 mt-4">
  <div class="w-full px-3 mb-6">
    <div class="rounded-2xl bg-white p-6 shadow-xl dark:bg-slate-850">
      <h3 class="mb-4 text-lg font-semibold text-slate-800 dark:text-white">Operations Overview</h3>
      <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3 text-sm">
        <div class="overflow-hidden rounded-lg border border-gray-100">
          <h4 class="m-0 px-3 py-2 text-center text-[0.95rem] font-semibold text-white" style="background-color:#D37F2C;">Trips</h4>
          <div class="p-4">
            <p class="text-slate-600">Active: <strong id="kpi-active-trips">—</strong></p>
            <p class="mt-1 text-slate-600" title="En Route or In Transit with no update beyond the threshold">
              Overdue updates (&gt; <span id="kpi-stale-hours">—</span>h): <strong id="kpi-stale-trips">—</strong>
            </p>
          </div>
        </div>
        <div class="overflow-hidden rounded-lg border border-gray-100">
          <h4 class="m-0 px-3 py-2 text-center text-[0.95rem] font-semibold text-white" style="background-color:#D37F2C;">Revenue</h4>
          <div class="p-4">
            <p class="text-slate-600">Payments received: <strong id="kpi-payments-count">—</strong></p>
            <p class="mt-1 text-slate-600">Total amount: <strong id="kpi-payments-total">—</strong></p>
          </div>
        </div>
        <div class="overflow-hidden rounded-lg border border-gray-100">
          <h4 class="m-0 px-3 py-2 text-center text-[0.95rem] font-semibold text-white" style="background-color:#D37F2C;">Fleet</h4>
          <div class="p-4">
            <p class="text-slate-600">Verified vehicles: <strong id="kpi-vehicles-verified">—</strong> of <span id="kpi-vehicles-total">—</span></p>
            <p class="mt-1 text-slate-600">Documents verified: <strong id="kpi-transporters-docs">—</strong></p>
          </div>
        </div>
      </div>
      <div class="mt-4 flex flex-wrap gap-3 text-sm">
        <a class="text-orange-600 underline" href="{% url 'core:shipments' %}">Shipments</a>
        <a class="text-orange-600 underline" href="{% url 'core:trips' %}">Trips</a>
        <a class="text-orange-600 underline" href="{% url 'core:vehicle_documents' %}">Vehicle documents</a>
        <a class="text-orange-600 underline" href="{% url 'core:vehicles' %}">Vehicles</a>
        <a class="text-orange-600 underline" href="{% url 'core:kyc_documents' %}">KYC</a>
        <a class="text-orange-600 underline" href="{% url 'core:users' %}">Users</a>
      </div>
    </div>
  </div>
</div>

<div class="flex flex-wrap -mx-3 mt-4">

  <!-- User Registrations -->
  <div class="w-full lg:w-1/3 px-3 mb-6">
    <div class="flex flex-col bg-white shadow-xl rounded-2xl h-[650px]">

      <div class="flex justify-between items-center p-4 border-b">
        <h6 class="ribbon">User Registrations</h6>
        <select id="timeFilter" class="border rounded px-2 py-1">
          <option>Last Week</option>
          <option>Last Month</option>
          <option selected>Last 6 Months</option>
        </select>
      </div>

      <div class="flex-1 p-4">
        <canvas id="line-chart" class="w-full h-full"></canvas>
      </div>
    </div>
  </div>

  <div class="w-full lg:w-1/3 px-3 mb-6">
    <div class="relative flex flex-col bg-white shadow-xl rounded-2xl h-[650px]">

      <!-- Header with Filter -->
      <div class="flex justify-between items-center p-4 border-b border-gray-200">
        <h6 class="ribbon">Trip History</h6>
        <select id="tripHistoryFilter"
          class="border border-gray-300 rounded px-3 py-1 text-gray-700 bg-white focus:outline-none focus:ring-2 focus:ring-orange-400">
          <option value="week">Last Week</option>
          <option value="month">Last Month</option>
          <option value="sixmonths" selected>Last 6 Months</option>
        </select>
      </div>

      <!-- Chart Container -->
      <div class="flex-auto p-4" style="height:100%;">
        <canvas id="trip-history-chart" class="w-full h-full" style="max-height: 240px;"></canvas>
      </div>

    </div>
  </div>

  <!-- Transporters (Pie Chart) -->
  <div class="w-full lg:w-1/3 px-3 mb-6">
    <div class="flex flex-col bg-white shadow-xl rounded-2xl h-[320px]">
      <div class="flex justify-between items-center p-4 border-b">
        <h6 class="ribbon">Transporters</h6>
        <select id="ordersFilter" class="border rounded px-2 py-1">
          <option>Last Week</option>
          <option>Last Month</option>
          <option selected>Last 6 Months</option>
        </select>
      </div>
      <div class="flex-1 p-4 flex items-center justify-center">
        <canvas id="orders-chart" class="w-full h-full" style="max-height: 240px;"></canvas>
      </div>
    </div>
  </div>

</div>

<div style="margin-top: 30px;" class="mx-auto px-4 mt-16">
  <div class="bg-white shadow-lg rounded-lg p-6 mb-6">
    <div class="flex items-center justify-between mb-4">
      <h3 class="text-2xl font-semibold text-gray-800">Active trips <span class="text-sm font-normal text-gray-500">(live)</span></h3>
      <span id="dash-active-trips-count" class="text-sm text-orange-600 font-medium">—</span>
    </div>
    <div class="overflow-x-auto">
      <table id="active-trips-table" class="w-full min-w-[900px] text-sm">
        <thead>
          <tr class="border-b text-left text-gray-600">
            <th class="py-2 pr-3">Trip ID</th>
            <th class="py-2 pr-3">Shipment</th>
            <th class="py-2 pr-3">Status</th>
            <th class="py-2 pr-3">Driver</th>
            <th class="py-2 pr-3">Pickup</th>
            <th class="py-2 pr-3">Delivery</th>
            <th class="py-2 pr-3">Location</th>
            <th class="py-2">Updated</th>
          </tr>
        </thead>
        <tbody id="active-trips-body"></tbody>
      </table>
    </div>
  </div>

  <div class="bg-white shadow-lg rounded-lg p-6">
    <div class="flex items-center justify-between mb-6">
      <h3 class="text-2xl font-semibold text-gray-800">Published loads</h3>
    </div>
    <div class="overflow-x-auto">
      <table id="shippers-table" class="w-full min-w-[700px]">
      </table>
    </div>
  </div>
</div>

<div
  style="width: 100%; padding: 20px; border-radius: 10px; display: flex; justify-content: space-between; gap: 20px;">
  <div id="driverCard"
    style="flex: 2; background-color: #ffffff; padding: 15px; border-radius: 8px;
            text-align: left; box-shadow: 0 2px 5px rgba(0,0,0,0.1); display: flex; flex-direction: column; height: 550px;">
    <h3 id="driverHeading"
      style="margin-bottom: 10px; text-align: center; background-color: #d37f2c; color: white; border-radius: 10px; padding: 5px; font-size: 0.95rem; font-weight: 600;">
      Drivers &amp; Vehicles (0)
    </h3>
    <div id="driverList" style="flex: 1; overflow-y: auto;">
      <div style="display: flex; font-weight: bold; border-bottom: 1px solid #ccc; padding: 5px 0;">
        <div style="flex: 1;">Driver Name</div>
        <div style="flex: 1;">Status</div>
        <div style="flex: 1;">Vehicle Model</div>
        <div style="flex: 1;">Vehicle No</div>
      </div>
    </div>
  </div>

  <div id="vehicleCard" style="flex: 2.5; background-color: #ffffff; padding: 15px; border-radius: 8px;
text-align: center; box-shadow: 0 2px 5px rgba(0,0,0,0.1);
display: flex; flex-direction: column; height: 550px;">
    <h3 style="margin-bottom: 10px; background-color: #d37f2c;
  color: white; border-radius: 10px; padding: 5px; font-size: 0.95rem; font-weight: 600;">
      Revenue Trends
    </h3>
    <div style="display:flex; justify-content: space-between; margin-bottom:15px;">
      <select id="periodSelect">
        <option value="weekly">Weekly</option>
        <option value="monthly" selected>Monthly</option>
        <option value="yearly">Yearly</option>
      </select>
      <select id="yearSelect"></select>
    </div>
    <div style="flex:1;">
      <canvas id="trendChart"></canvas>
    </div>
  </div>

  <div
    style="flex: 1.5; background-color: #ffffff; padding: 15px; border-radius: 8px; text-align: center; box-shadow: 0 2px 5px rgba(0,0,0,0.1); display: flex; flex-direction: column; height: 550px;">
    <h3 style="margin-bottom: 10px; background-color: #d37f2c; color: white; border-radius: 10px; padding: 5px; font-size: 0.95rem; font-weight: 600;">Alerts</h3>
    <div id="dash-alerts" style="flex: 1; overflow-y: auto; text-align: left;"></div>
  </div>
</div>

</div>

{% include 'core/includes/dashboard_live_script.html' %}
{% endblock %}