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

{% block content %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>


<div class="px-3 mb-6">
  <div class="row justify-content-between">
    <div class="col-12 text-start pb-4 my-3"></div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4 text-center pb-4 pb-xxl-0 align-content-center">
      <h1 class="fs-5 pt-3">{{ dealer.get_local_name }}</h1>
    </div>
    <div class="col-2 text-center border-translucent border-start-xxl border-end-xxl-0 border-bottom-xxl-0 border-end border-bottom pb-4 pb-xxl-0 align-content-center">
      <span class="uil fs-5 lh-1 uil-car text-primary"></span>
      <h1 class="fs-5 pt-3">{{ total_cars }}</h1>
      <p class="fs-9 mb-0">{% trans "Total Cars in Inventory" %}</p>
    </div>
    <div class="col-2 text-center border-translucent border-start-xxl border-end-xxl-0 border-bottom-xxl-0 border-end-md border-bottom pb-4 pb-xxl-0 align-content-center">
      <span class="uil fs-5 lh-1 uil-lock-alt text-info"></span>
      <h1 class="fs-5 pt-3">{{ total_reservations }}</h1>
      <p class="fs-9 mb-0">{{ _("Reserved")}}</p>
    </div>
    <div class="col-2 text-center border-translucent border-start-xxl border-bottom-xxl-0 border-bottom border-end border-end-md-0 pb-4 pb-xxl-0 pt-4 pt-md-0 align-content-center">
      <span class="uil fs-5 lh-1 uil-car-wash text-success-dark"></span>
      <h1 class="fs-5 pt-3">{{ cars_in_house}}</h1>
      <p class="fs-9 mb-0">{{ _("In Our Showroom")}}</p>
    </div>
    <div class="col-2 text-center border-translucent border-start-xxl border-end-md border-end-xxl-0 border-bottom border-bottom-md-0 pb-4 pb-xxl-0 pt-4 pt-xxl-0 align-content-center">
      <span class="uil fs-5 lh-1 uil-car-slash text-danger-dark"></span>
      <h1 class="fs-5 pt-3">{{ cars_outside }}</h1>
      <p class="fs-9 mb-0">{{ _("Outside Showroom")}}</p>
    </div>
  </div>
</div>
<div class="row gx-3">
  <div class="col-xxl-6">
    <div class="row gx-7 pe-xxl-3">
      <div class="col-12 col-xl-7 col-xxl-12">
        <div class="row g-3 mb-3">
          <div class="col-sm-6 col-md-4 col-xl-3 col-xxl-4 align-content-center">
            <div class="card h-75">
              <div class="card-body">

                <div class="d-flex d-sm-block justify-content-between">
                  <div class="border-translucent mb-sm-4">
                    <div class="d-flex align-items-center">
                      <div class="d-flex align-items-center icon-wrapper-sm shadow-primary-100" style="transform: rotate(-7.45deg);">
                          <div class="icon icon-shape bg-gradient-info text-white rounded-circle shadow"></div>
                      </div>
                      <p class="text-body-tertiary fs-9 mb-0 ms-2 mt-3">Outgoing call</p>
                    </div>
                    <p class="text-primary mt-2 fs-6 fw-bold mb-0 mb-sm-4">3 <span class="fs-8 text-body lh-lg">Leads Today</span></p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-md-4 col-xl-3 col-xxl-4 align-content-center">
            <div class="card h-75">
              <div class="card-body">
                <div class="d-flex d-sm-block justify-content-between">
                  <div class="border-translucent mb-sm-4">
                    <div class="d-flex align-items-center">
                      <div class="d-flex align-items-center icon-wrapper-sm shadow-info-100" style="transform: rotate(-7.45deg);"><span class="fa-solid fa-calendar text-info fs-7 z-1 ms-2"></span></div>
                      <p class="text-body-tertiary fs-9 mb-0 ms-2 mt-3">Outgoing meeting</p>
                    </div>
                    <p class="text-info mt-2 fs-6 fw-bold mb-0 mb-sm-4">12 <span class="fs-8 text-body lh-lg">This Week</span></p>
                  </div>
                </div>
              </div>
            </div>
          </div>
            <div class="col-sm-6 col-md-4 col-xl-3 col-xxl-4 align-content-center">

            </div>
        </div>
          <div class="row g-3 mb-3">
              <canvas id="pnlChart"></canvas>
          </div>
      </div>
    </div>
  </div>
  <div class="col-xxl-6 align-content-center">
    <div class="row g-0">
      <div class="card mb-3">
        <div class="bg-holder bg-card" style="background-image: url({% static 'images/spot-illustrations/39.png' %}); background-position: bottom right 0px; background-size: auto;"></div>

        <div class="card-body">
          <div>
            <div class="col-6 col-xl-12 col-xxl-6 py-4 ps-4 ps-sm-5 ps-xl-0 ps-xxl-5">
              <h5 class="text-body mb-4">{% trans 'inventory value'|capfirst %}</h5>
              <div class="d-md-flex flex-between-center">
                <div class="d-md-flex align-items-center gap-2 order-sm-0 order-md-1">
                  <span class="fa-solid fa-money-bill-trend-up fs-5 text-warning-light dark__text-opacity-75" data-bs-theme="light"></span>
                  <div class="d-flex d-md-block gap-2 align-items-center mt-1 mt-md-0">
                    <p class="fs-9 mb-0 mb-md-2 text-body-tertiary text-nowrap">{% trans "Profits"|upper %}</p>
                    <h4 class="text-body-highlight mb-0">{{ total_profit|floatformat }} {% trans 'SAR' %}</h4>
                  </div>
                </div>
                <div class="mt-3 mt-md-0">
                  <h3 class="text-body-highlight mb-2">{{ total_selling_price|floatformat }} {% trans 'SAR' %}</h3>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
    const url = "{% url 'django_ledger:entity-json-pnl' dealer.entity.slug %}"
        async function fetchPnLData() {
            try {
                const response = await fetch(url); // Update with your API URL
                const jsonResponse = await response.json();
                const pnlData = jsonResponse.results.pnl_data;
                console.log(pnlData);

                const labels = Object.keys(pnlData);
                const profits = labels.map(label => pnlData[label].GROUP_NET_PROFIT);
                const sales = labels.map(label => pnlData[label].GROUP_NET_SALES);

                renderChart(labels, profits, sales);
            } catch (error) {
                console.error("Error fetching PnL data:", error);
            }
        }

        function renderChart(labels, profits, sales) {
            const ctx = document.getElementById("pnlChart").getContext("2d");
            new Chart(ctx, {
                type: "bar",
                data: {
                    labels: labels,
                    datasets: [
                        {
                            label: "Net Profit",
                            data: profits,
                            backgroundColor: "green"
                        },
                        {
                            label: "Net Sales",
                            data: sales,
                            backgroundColor: "blue"
                        }
                    ]
                },
                options: {
                    responsive: true,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        }

        fetchPnLData();
    </script>
{% endblock %}