{% extends 'base.html' %}
{% load i18n %}
{% load static %}

{% block home %}<a class="nav-link fw-bold">{% trans "home" %}</a>{% endblock %}

{% block content %}

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div class="d-flex flex-column min-vh-100">
  <div class="d-flex flex-column flex-grow-1 ms-sm-14 p-4">
    <main class="d-grid gap-4 p-1">
      <div class="row g-4">
        <!-- Numbers Card -->
        <div class="col-lg-4 col-xl-3">
          <div class="card h-100 rounded shadow">
            <div class="card-body">
              <ul class="list-group">
                  <li class="list-group-item list-group-item-primary d-flex justify-content-between align-items-center">
                  {% trans 'inventory'|capfirst %}
                  <span class="badge bg-primary rounded-pill">{{ total_cars }}</span>
                </li>
                <li class="list-group-item list-group-item-danger d-flex justify-content-between align-items-center">
                  {% trans "Reserved Cars" %}
                  <span class="badge bg-danger rounded-pill">{{ total_reservations }}</span>
                </li>
                <li class="list-group-item list-group-item-primary d-flex justify-content-between align-items-center">
                  {% trans 'purchase orders'|capfirst %}
                  <span class="badge bg-primary rounded-pill">0</span>
                </li>
                <li class="list-group-item list-group-item-primary d-flex justify-content-between align-items-center">
                  {% trans 'invoices'|capfirst %}
                  <span class="badge bg-primary rounded-pill">0</span>
                </li>
                <li class="list-group-item list-group-item-primary d-flex justify-content-between align-items-center">
                  {% trans 'sold'|capfirst %}
                  <span class="badge bg-primary rounded-pill">0</span>
                </li>
                
                <li class="list-group-item list-group-item-danger d-flex justify-content-between align-items-center">
                  {% trans 'notifications'|capfirst %}
                  <span class="badge bg-danger rounded-pill">0</span>
                </li>
                <li class="list-group-item list-group-item-warning d-flex justify-content-between align-items-center">
                  {% trans 'transfer request'|capfirst %}
                  <span class="badge bg-warning rounded-pill">0</span>
                </li>
              </ul>
            </div>
          </div>
        </div>

        <!-- Inventory Value Card -->
        <div class="col-lg-4 col-xl-3">
          <div class="card h-100 rounded shadow">
            <div class="card-body">
              <h4 class="card-title">{% trans 'inventory value' %}</h4>
              <p class="card-text fw-lighter">{% trans 'View the current value of your car inventory.' %}</p>
              <span class="display-5 text-center">{{ total_selling_price }} </span><span class="fw-lighter">{% trans 'SAR' %}</span>
                <div class="container mt-4">
                    <strong class="fs-6">{% trans "Profitability" %}: </strong>
                    <span class="text-center">{{ total_profit }} </span><span class="fw-lighter">{% trans 'SAR' %}</span>
                </div>
            </div>
            <div class="card-footer">
              <button class="btn btn-sm btn-primary rounded">{% trans 'sales analytics' %}</button>
            </div>
          </div>
        </div>
        <!-- Highest Customer Card -->
        <div class="col-lg-4 col-xl-3">
          <div class="card h-100 rounded shadow">
            <div class="card-body">
              <h4 class="card-title">{% trans 'top customers' %}</h4>
              <p class="card-text fw-lighter">{% trans 'View your highest spending customer.'%}</p>
              <div class="d-flex align-items-center">
                <div class="rounded-circle border bg-light d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">WB</div>
                <div class="ms-3">
                  <div class="fw-bold">Alwadi Albonni Showroom</div>
                  <div class="">1,500,000 <small class="fw-lighter">{% trans 'SAR' %}</small></div>
                </div>
              </div>
              <div class="d-flex align-items-center">
                <div class="rounded-circle border bg-light d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">MA</div>
                <div class="ms-3">
                  <div class="fw-bold">Marwan Alwali</div>
                  <div class="">640,000 <small class="fw-lighter">{% trans 'SAR' %}</small></div>
                </div>
              </div>
            </div>
            <div class="card-footer">
              <button class="btn btn-sm btn-primary rounded">{% trans 'view customer' %}</button>
            </div>
          </div>
        </div>
        <!-- Today's Pending Orders Card -->
        <div class="col-lg-4 col-xl-3">
          <div class="card h-100 rounded shadow">
            <div class="card-body">
              <h4 class="card-title">{% trans "Today's Pending Orders" %}</h4>
              <p class="card-text fw-lighter">{% trans 'View your pending orders for today.' %}</p>
              <div class="table-responsive">
                <table class="table table-sm table-hover">
                  <thead>
                    <tr>
                      <th>{% trans 'order'|capfirst %}</th>
                      <th>{% trans 'customer'|capfirst %}</th>
                      <th>{% trans 'amount'|capfirst %}</th>
                      <th>{% trans 'status'|capfirst %}</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>INV001</td>
                      <td>Othman</td>
                      <td>257,090 <small class="fw-lighter">{% trans 'SAR' %}</small></td>
                      <td><span class="badge rounded-pill bg-warning">{% trans 'pending'|capfirst %}</span></td>
                    </tr>
                    <tr>
                      <td>INV002</td>
                      <td>Ali</td>
                      <td>150,000 <small class="fw-lighter">{% trans 'SAR' %}</small></td>
                      <td><span class="badge rounded-pill bg-warning">{% trans 'pending'|capfirst %}</span></td>
                    </tr>
                    <tr>
                      <td>INV003</td>
                      <td>Mohammed</td>
                      <td>305,000 <small class="fw-lighter">{% trans 'SAR' %}</small></td>
                      <td><span class="badge rounded-pill bg-warning">{% trans 'pending'|capfirst %}</span></td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <div class="card-footer">
              <button class="btn btn-sm btn-primary rounded">{% trans 'view orders'|capfirst %}</button>
            </div>
          </div>
        </div>

        <!-- Top Performing Products Card -->
        <div class="col-lg-4 col-xl-3">
          <div class="card h-100 rounded shadow">
            <div class="card-body">
              <h4 class="card-title">{% trans 'top selling cars'|capfirst %}</h4>
              <p class="card-text fw-lighter">{% trans 'View your best-selling cars.' %}</p>
              <div class="table-responsive">
                <table class="table table-sm table-hover">
                  <thead>
                    <tr>
                      <th>{% trans 'model'|capfirst %}</th>
                      <th>{% trans 'sales'|capfirst %}</th>
                      <th>{% trans 'revenue'|capfirst %}</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>
                        <div class="fw-bold">Toyota</div>
                        <div class="">Camry</div>
                      </td>
                      <td>1,234</td>
                      <td>7,123,456 <small class="fw-lighter">{% trans 'SAR' %}</small></td>
                    </tr>
                    <tr>
                      <td>
                        <div class="fw-bold">Hyundai</div>
                        <div class="">Accent</div>
                      </td>
                      <td>987</td>
                      <td>980,765 <small class="fw-lighter">{% trans 'SAR' %}</small></td>
                    </tr>
                    <tr>
                      <td>
                        <div class="fw-bold">Toyota</div>
                        <div class="">FJ</div>
                      </td>
                      <td>654</td>
                      <td>9,765,432 <small class="fw-lighter">{% trans 'SAR' %}</small></td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <div class="card-footer">
              <a href="{% url 'inventory_stats' %}" class="btn btn-sm btn-primary rounded">{% trans 'view inventory'|capfirst %}</a>
            </div>
          </div>
        </div>
        <!-- Daily Sales Card -->
        <div class="col-lg-5 col-xl-4">
          <div class="card h-100 rounded shadow">
            <div class="card-body">
              <h4 class="card-title">{% trans 'Daily Sales' %}</h4>
              <p class="card-text fw-lighter">{% trans 'View your daily sales trends.' %}</p>
              <div class="chart-container">
                <canvas id="dailySalesChart"></canvas>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</div>

<script>
  const ctx = document.getElementById("dailySalesChart").getContext("2d");
  const gradient = ctx.createLinearGradient(0, 0, 0, 400);
  gradient.addColorStop(0, "rgba(40,54,67, 1)");
  gradient.addColorStop(1, "rgba(0, 210, 255, 0.2)");

  const dailySalesChart = new Chart(ctx, {
    type: "bar",
    data: {
      labels: [
          "{% trans 'Sun' %}", 
          "{% trans 'Mon' %}", 
          "{% trans 'Tue' %}", 
          "{% trans 'Wed' %}", 
          "{% trans 'Thu' %}", 
          "{% trans 'Fri' %}", 
          "{% trans 'Sat' %}"
      ],
      datasets: [
        {
          label: "{% trans 'sales'|upper %}",
          data: [120, 190, 300, 250, 200, 300, 400],
          backgroundColor: gradient,
          borderColor: "rgba(40,54,67, 1)",
          borderWidth: 1,
          borderRadius: 12,
          borderSkipped: false,
        },
      ],
    },
    options: {
      layout: {
        padding: {
          left: 5,
          right: 5,
          top: 5,
          bottom: 5,
        },
      },
      scales: {
        x: {
          grid: {
            display: false,
          },
          ticks: {
            font: {
              family: "Arial",
              size: 14,
              weight: "bold",
            },
          },
        },
        y: {
          grid: {
            display: false,
          },
          ticks: {
            font: {
              family: "Arial",
              size: 14,
              weight: "bold",
            },
          },
          beginAtZero: true,
        },
      },
      plugins: {
        legend: {
          display: true,
          labels: {
            font: {
              family: "Source Sans Pro",
              size: 12,
              weight: "regular",
            },
            usePointStyle: true,
            pointStyle: "rectRounded",
          },
        },
        tooltip: {
          backgroundColor: "rgba(40,54,67, 0.8)",
          titleFont: {
            family: "Source Sans Pro",
            size: 16,
            weight: "bold",
          },
          bodyFont: {
            family: "Source Sans Pro",
            size: 14,
          },
          xPadding: 12,
          yPadding: 12,
          cornerRadius: 10,
          displayColors: true,
        },
      },
      elements: {
        bar: {
          hoverBackgroundColor: "rgba(17,46,64, 0.8)",
          hoverBorderColor: "rgba(17,46,64, 0.8)",
          hoverBorderWidth: 2,
        },
      },
      responsive: true,
      maintainAspectRatio: true,
    },
  });
</script>

{% endblock %}