{% extends 'base.html' %}
{% load static %}
{% block content %}

<div class="content-wrapper">



  <div class="container-xxl flex-grow-1 container-p-y">

    <div class="card mb-4">
      <div class="d-flex align-items-end row">
        <div class="col-12">
          <div class="card-body">
            <h5 class="card-title mb-1 text-nowrap"><a href="javascript:void(0)">Welcome {{request.user.user_type}}</a>
              🎉</h5>
            <p class="card-subtitle text-nowrap mt-1 mb-0">to Navya Bakers</p>
          </div>
        </div>
      </div>
    </div>

    <div class="row">

      <div class="col-md-6 col-lg-6 col-xl-6 order-0 mb-4">
        <div class="card h-100">
          <div class="card-header d-flex align-items-center justify-content-between pb-0">
            <div class="card-title mb-0">
              <h5 class="m-0 me-2">Today's sale</h5>
            </div>
          </div>
          <hr>
          <div class="card-body">
            <div class="d-flex justify-content-between">

              <div>
                <span class="d-block fw-medium mb-1">Revenue</span>
                <h4 class="card-title mb-2">{{today_revenue}}</h4>
                <small class="fw-medium">
                  {% if today_revenue_percent_with_week.flag == 'increase' %} <i class="text-success icon-base bx bx-up-arrow-alt"></i> {% else %} <i class="text-danger icon-base bx bx-down-arrow-alt"></i>
                    {% endif %}{{today_revenue_percent_with_week.today_revenue_percent_with_week}}%
                  </small>
                <small class="d-block"> vs last week</small>
              </div>
              
              <div>
                <span class="d-block fw-medium mb-1">No of sales</span>
                <h4 class="card-title mb-2">{{orders_today}}</h4>
                <small class="fw-medium">
                  {% if today_count_percent_with_week.flag == 'increase' %} <i class="text-success icon-base bx bx-up-arrow-alt"></i> {% else %} <i class="text-danger icon-base bx bx-down-arrow-alt"></i> {% endif %}
                   {{today_count_percent_with_week.today_count_percent_with_week}}% 
                </small>
                <small class="d-block"> vs last week</small>
              </div>

            </div>

          </div>
        </div>
      </div>
      <!--/ todays slae -->

      <div class="col-md-6 col-lg-6 col-xl-6 order-0 mb-4">
        <div class="card h-100">
          <div class="card-header d-flex align-items-center justify-content-between pb-0">
            <div class="card-title mb-0">
              <h5 class="m-0 me-2">Today's performance</h5>
            </div>
          </div>
          <hr>
          <div class="card-body">
            <div class="d-flex justify-content-between align-items-center">
              <div>
                <div class="avatar flex-shrink-0 me-4">
                  <span class="avatar-initial rounded bg-label-success"><i class="icon-base bx bx-check icon-lg"></i></span>
                </div>
                 <p class="mt-2 mb-0">Delivery Success</p>
                <h4 class="card-title mb-3">{{delivery_success_percentage}}</h4>
              </div>
              <div>
                <div class="avatar flex-shrink-0 me-4">
                  <span class="avatar-initial rounded bg-label-info"><i class="icon-base bx bx-check icon-lg"></i></span>
                </div>
                <p class="mt-2 mb-0">Avg Order Value</p>
                <h4 class="card-title mb-3">{{avg_today_revenue}}</h4>
              </div>
              <div>
                <div class="avatar flex-shrink-0 me-4">
                  <span class="avatar-initial rounded bg-label-danger"><i class="icon-base bx bx-check icon-lg"></i></span>
                </div>
                <p class="mt-2 mb-0">Avg Failed Value</p>
                <h4 class="card-title mb-3">{{avg_failed_order}}</h4>
              </div>
            </div>

          </div>
        </div>
      </div>
      <!--/ Today's performance-->
      
    </div>


    <div class="row">

      <!-- Today's leaderboard -->
      <div class="col-md-6 col-lg-4 col-xl-4 order-0 mb-4">
        <div class="card h-100" style="background: darkblue;color: #fff;">
          <div class="card-header d-flex align-items-center justify-content-between pb-0">
            <div class="card-title mb-0">
              <h5 class="m-0 me-2" style="color: #fff;">Today's Leaderboard</h5>
            </div>
          </div>
          <hr style="color: cornflowerblue;">

          <div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-3">
              <div class="d-flex flex-column align-items-center gap-1">
              </div>
            </div>
            {% if grand_total_by_store %}
            {% for i in grand_total_by_store %}
            <div>
              <small class="d-block mb-0">{% if i.store_uuid__unit_name %}{{i.store_uuid__unit_name}} {% else %} Untitled {% endif %}</small>
              <div class="row justify-content-between align-items-center mb-2">
                <div class="col-8 pe-0">
                  <div class="progress w-100 me-2" style="height: 8px;">
                    <div class="progress-bar bg-info shadow-none" style="width: 78%" role="progressbar" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100"></div>
                  </div> 
                </div>
                <div class="col-4 text-end">
                  <small>{% if i.total_amount %}{{i.total_amount}} {% else %} 0.00 {% endif %}</small>
                </div>
              </div>
            </div>
            {% endfor %}
            {% else %}
             {% for i in grand_total_by_pu %}
            <div>
              <small class="d-block mb-0">{{i.pu_uuid__pu_name}}</small>
              <div class="row justify-content-between align-items-center mb-2">
                <div class="col-8 pe-0">
                  <div class="progress w-100 me-2" style="height: 8px;">
                    <div class="progress-bar bg-info shadow-none" style="width: 78%" role="progressbar" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100"></div>
                  </div>
                </div>
                <div class="col-4 text-end">
                  <small>{{i.total_amount}}</small>
                </div>
              </div>
            </div>
            {% endfor %}
            {% endif %}
            
          </div>
        </div>
      </div>
      <!--/ Today's leaderboard -->

      <div class="col-md-6 col-lg-4 col-xl-4 order-0 mb-4">
        <div class="card h-100">
          <div class="card-header d-flex align-items-center justify-content-between pb-0">
            <div class="card-title mb-0">
              <h5 class="m-0 me-2">Revenue - Aug 2024</h5>
            </div>
          </div>
          <hr>
          <div class="card-body">
            <div class="card-body d-flex justify-content-center align-items-center">
              <!-- Your content here -->
              <div class="text-center height: 200px;">
                <h6 style="font-size: 30px; color: firebrick;">₹ {{month_revenue.month_revenue}}</h6>
                <h6>This Week</h6>
                <h6>{% if revenue_difference_output.flag == 'increase' %} <svg width="10" height="10"
                    viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 2L22 20H2L12 2Z" fill="green" />
                  </svg> {% else %} <svg width="10" height="10" viewBox="0 0 24 24" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 22L2 4H22L12 22Z" fill="red" />
                  </svg> {% endif %}{{revenue_difference_output.revenue_difference}} vs last week </h6>

              </div>

            </div>


          </div>
        </div>
      </div>



      <!-- Transactions -->
      <div class="col-md-6 col-lg-4 col-xl-4 order-0 mb-4">
        <div class="card h-100">
          <div class="card-header d-flex align-items-center justify-content-between pb-0">
            <div class="card-title mb-0">
              <h5 class="m-0 me-2">Today's Orders</h5>

            </div>

          </div>
          <hr>
          <div class="card-body">

            <div class="row">
              <div class="col-6 d-flex">
                <div class="me-3">
                  <span class="badge rounded-2 bg-label-success p-2"><i class="icon-base bx bxs-note icon-lg text-success" style="color: #71dd37 !important;"></i></span>
                </div>
                <div>
                  <h6 class="mb-0">{{new_order_today}}</h6>
                  <small>New</small>
                </div>
              </div>
              <div class="col-6 d-flex">
                <div class="me-3">
                  <span class="badge rounded-2 bg-label-secondary p-2"><i class="icon-base bx bx-dollar icon-lg text-secondary"></i></span>
                </div>
                <div>
                  <h6 class="mb-0">{{fulfiled_order}}</h6>
                  <small>Fulfilled</small>
                </div>
              </div>
            </div>
            <div class="row mt-5">
              <div class="col-6 d-flex">
                <div class="me-3">
                  <span class="badge rounded-2 bg-label-warning p-2"><i class="icon-base bx bxs-pyramid icon-lg text-warning"></i></span>
                </div>
                <div>
                  <h6 class="mb-0">{{currently_unassigned_order}}</h6>
                  <small>Unassigned</small>
                </div>
              </div>
              <div class="col-6 d-flex">
                <div class="me-3">
                  <span class="badge rounded-2 bg-label-info p-2"><i class="icon-base bx bxs-add-to-queue icon-lg text-info"></i></span>
                </div>
                <div>
                  <h6 class="mb-0">{{failed_order}}</h6>
                  <small>Failed</small>
                </div>
              </div>
            </div>
            
          </div>
        </div>
      </div>
      <!--/ Transactions -->





    </div>


  </div>

</div>



<style>
  .circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-weight: bold;
  }

  .red {
    background-color: #696cff;
    color: white;
  }

  .blue {
    background-color: blue;
    color: white;
  }

  .green {
    background-color: #696cff;
    color: white;
  }

  svg {
    vertical-align: middle;
    /* Aligns with the middle of the text line */
  }
</style>
{% endblock %}