{% extends '@EasyAdmin/layout.html.twig' %}

{% block content %}
<section class="dashboard">
    <form action="{{ path('admin', {'routeName': 'app_stats'}) }}" method="post">
      <div class="row mb-4">
        <div class="col-12">
          <div class="alert alert-primary mb-3" role="alert">
            Selectionner une année :
          </div>
        </div>
        <div class="col-12">
          <select id="year" class="form-select mb-3" name="year">
              {% for y in ("now"|date('Y')-10)..("now"|date('Y')) %}
                  <option value="{{ y }}" {% if y == year %}selected{% endif %}>{{ y }}</option>
              {% endfor %}
          </select>
          <div class="col-12">
            <select id="month" class="form-select" name="month">
                {% for y in 1..12 %}
                    <option value="{{ y }}" {% if y == month %}selected{% endif %}>{{ months[y-1] }}</option>
                {% endfor %}
            </select>
          </div>
        </div>
        <div class="col-12 mt-3">
          <button type="submit" class="btn btn-primary">recherche</button>
        </div>
      </div>
    </form>
    <div class="row">
      <!-- Chiffre d'affaire -->
      <div class="col-xxl-6 col-md-6">
        <div class="">
          <div class="card">
              {{ render_chart(chart) }}
          </div>
        </div>
      </div>
      <div class="col-xxl-3 col-md-6">
        <div class="card info-card sales-card">

          <div class="card-body">
            <h5 class="card-title fw-bold">Chiffre d'affaire</h5>

            <div class="d-flex align-items-center">
              <div class="card-icon rounded-circle d-flex align-items-center justify-content-center">
                <i class="bi bi-cart"></i>
              </div>
              <div class="ps-3">
                <h6>{{ ordersHT|number_format(2, '.', ',') }} € HT</h6>
                <span class="small pt-1 fw-bold">{{ ordersTTC|number_format(2, '.', ',') }} € TTC</span>
                {# <h6>{{ ordersTTC }} € TTC</h6>
                <span class="small pt-1 fw-bold">Test</span> #}
              </div>
            </div>
          </div>
        </div>
        <!-- End Chiffre d'affaire  -->
        <!-- Chiffre d'affaire mensuel -->
        <div class="card info-card sales-card">

          <div class="card-body">
            <h5 class="card-title fw-bold">Chiffre d'affaire <span class="fw-bold">/ Mensuel</span></h5>

            <div class="d-flex align-items-center">
              <div class="card-icon rounded-circle d-flex align-items-center justify-content-center">
                <i class="bi bi-cart"></i>
              </div>
              <div class="ps-3">
                <h6>{{ ordersHTMonth|number_format(2, '.', ',') }} € HT</h6>
                <span class="small pt-1 fw-bold">{{ ordersTTCMonth|number_format(2, '.', ',') }} € TTC</span>
                {# <h6>{{ ordersTTCMonth }} € TTC</h6>
                <span class="small pt-1 fw-bold">Test</span> #}
              </div>
            </div>
          </div>
        </div>
        <!-- End Chiffre d'affaire mensuel -->
      </div>
      <!-- Chiffre d'affaire annuel -->
      <div class="col-xxl-3 col-md-6">
        <div class="card info-card sales-card">

          <div class="card-body">
            <h5 class="card-title fw-bold">Chiffre d'affaire <span class="fw-bold">/ Annuel</span></h5>

            <div class="d-flex align-items-center">
              <div class="card-icon rounded-circle d-flex align-items-center justify-content-center">
                <i class="bi bi-cart"></i>
              </div>
              <div class="ps-3">
                <h6>{{ ordersHTYear|number_format(2, '.', ',') }} € HT</h6>
                <span class="small pt-1 fw-bold">{{ ordersTTCYear|number_format(2, '.', ',') }} € TTC</span>
                {# <h6>{{ ordersTTC }} € TTC</h6>
                <span class="small pt-1 fw-bold">Test</span> #}
              </div>
            </div>
          </div>
        </div>
        <!-- End Chiffre d'affaire annuel -->
        <!-- taux de rebond Card -->
        <div class="card info-card sales-card">
          <div class="card-body">
            <h5 class="card-title fw-bold">Taux de conversion des commandes</h5>

            <div class="d-flex align-items-center">
              <div class="card-icon rounded-circle d-flex align-items-center justify-content-center">
                <i class="bi bi-cart"></i>
              </div>
              <div class="ps-3">
                <h6>{{ tcc|number_format(2, '.', ',') }} %</h6>
              </div>
            </div>
          </div>
        </div>
        <!-- End taux de rebond -->
      </div>
      <!-- top 3 produits -->
      <div class="col-xxl-6 col-md-6">
        <div class="card info-card sales-card">
          <div class="card-body">
            <h5 class="card-title fw-bold">Les 3 produits les plus vendu <span class="fw-bold">/ Annuel</span></h5>
            <div class="d-flex align-items-center">
              <div class="ps-3 d-flex">
                  {% for topProduit in topProduits %}
                    <div class="w-33"><a class="d-block hover-zoom" href="{{ path('app_produit', {'_locale': app.request.locale, 'slug':topProduit[0].produit.translations[app.request.locale].slug|default('produit'), 'id':topProduit[0].produit.id}) }}"><img class="w-100" src="{{ asset(produitImg ~ topProduit[0].produit.imageProduits[0].name) }}" alt=""> <div class="text-center text-light bg-dark p-2">{{ topProduit[0].productName }}</div> </a></div>
                {% endfor %}
              </div>
            </div>
          </div>
        </div>
      </div><!-- End top 3 produits -->
      <!-- panier moyen -->
      <div class="col-xxl-3 col-md-6">
        <div class="card info-card sales-card">
          <div class="card-body">
            <h5 class="card-title fw-bold">Prix panier moyen</h5>

            <div class="d-flex align-items-center">
              <div class="card-icon rounded-circle d-flex align-items-center justify-content-center">
                <i class="bi bi-cart"></i>
              </div>
              <div class="ps-3">
                <h6>{{ cartAverage|number_format(2, '.', ',') }} € HT</h6>
              </div>
            </div>
          </div>
        </div>
      </div><!-- End panier moyen -->
      <!-- panier lost -->
      <div class="col-xxl-3 col-md-6">
        <div class="card info-card sales-card">
          <div class="card-body">
            <h5 class="card-title fw-bold">Nombre de panier abandonné</h5>

            <div class="d-flex align-items-center">
              <div class="card-icon rounded-circle d-flex align-items-center justify-content-center">
                <i class="bi bi-cart"></i>
              </div>
              <div class="ps-3">
                <h6>{{ (totalCartLost / totalCart) * 100 }}%</h6>
                <span class="small pt-1 fw-bold">{{ totalCartLost }} / {{ totalCart }}</span>
              </div>
            </div>
          </div>
        </div>
      </div><!-- End panier lost -->
    </div>
</section>
{% endblock %}