{% extends 'adminapp/master.html' %}
{% block content %}

<style>
  .icon-animate {
    transition: transform 0.3s ease, color 0.3s ease;
  }

  .icon-animate:hover {
    transform: scale(1.15) rotate(2deg);
    color: #f0ad4e !important;
  }

  @media (max-width: 767px) {
    .responsive-icon {
      font-size: 1.5rem !important; /* fs-2 for small devices */
    }
  }

  @media (min-width: 768px) {
    .responsive-icon {
      font-size: 2rem !important; /* fs-1 for desktop */
    }
  }
</style>

<div class="page-content">
  <div class="container-fluid">

    <!-- Page Title -->
    <div class="row mb-4">
      <div class="col-12">
        <div class="page-title-box d-flex align-items-center justify-content-between">
          <h4 class="mb-0 fw-bold">Dashboard</h4>
          <ol class="breadcrumb m-0">
            <li class="breadcrumb-item"><a href="#">Menu</a></li>
            <li class="breadcrumb-item active text-primary">Dashboard</li>
          </ol>
        </div>
      </div>
    </div>

    <!-- Cards Grid -->
    <div class="row g-4">

      <div class="col-md-6 col-xl-4">
        <a href="{% url 'manageuser' %}" class="text-decoration-none">
          <div class="card shadow-sm border-0 h-100">
            <div class="card-body d-flex flex-column justify-content-between">
              <div class="d-flex align-items-center gap-3 ">
                <h4>
                  <i class="bx bxs-user-circle icon-animate responsive-icon "></i>
                </h4>
                <h5 class="text-dark fw-semibold">Users</h5>
              </div>
              <p class=" text-muted">Total Users: <strong class="text-dark">{{ total_users }}</strong></p>
            </div>
          </div>
        </a>
      </div>

      <div class="col-md-6 col-xl-4">
        <a href="{% url 'manageadtype' %}" class="text-decoration-none">
          <div class="card shadow-sm border-0 h-100">
            <div class="card-body d-flex flex-column justify-content-between">
              <div class="d-flex align-items-center gap-3">
                <h4>
                  <i class="bx bx-category icon-animate responsive-icon "></i>
                </h4>
                <h5 class=" text-dark fw-semibold">AdType</h5>
              </div>
              <p class="text-muted ">Total AdType: <strong class="text-dark">{{ total_adtype }}</strong></p>
            </div>
          </div>
        </a>
      </div>

      <div class="col-md-6 col-xl-4">
        <a href="{% url 'managecategory' %}" class="text-decoration-none">
          <div class="card shadow-sm border-0 h-100">
            <div class="card-body d-flex flex-column justify-content-between">
              <div class="d-flex align-items-center gap-3 ">
                <h4>
                  <i class="bx bx-category icon-animate responsive-icon"></i>
                </h4>
                <h5 class=" text-dark fw-semibold">Categories</h5>
              </div>
              <p class="text-muted ">Total Categories: <strong class="text-dark">{{ total_categories }}</strong></p>
            </div>
          </div>
        </a>
      </div>

      <div class="col-md-6 col-xl-4">
        <a href="{% url 'managetemplate' %}" class="text-decoration-none">
          <div class="card shadow-sm border-0 h-100">
            <div class="card-body d-flex flex-column justify-content-between">
              <div class="d-flex align-items-center gap-3 ">
                <h4>
                  <i class="bx bxs-layout icon-animate responsive-icon"></i>
                </h4>
                <h5 class=" text-dark fw-semibold">Ad Templates</h5>
              </div>
              <p class=" text-muted ">Total Ad Templates: <strong class="text-dark">{{ total_ads_templates }}</strong></p>
            </div>
          </div>
        </a>
      </div>

      <div class="col-md-6 col-xl-4">
        <a href="{% url 'manageorder' %}" class="text-decoration-none">
          <div class="card shadow-sm border-0 h-100">
            <div class="card-body d-flex flex-column justify-content-between">
              <div class="d-flex align-items-center gap-3 ">
                <h4>
                  <i class="bx bxs-cart icon-animate responsive-icon"></i>
                </h4>
                <h5 class=" text-dark fw-semibold">Orders</h5>
              </div>
              <p class=" text-muted ">Total Orders: <strong class="text-dark">{{ total_orders }}</strong></p>
            </div>
          </div>
        </a>
      </div>

      <div class="col-md-6 col-xl-4">
        <a href="{% url 'viewpayment' %}" class="text-decoration-none">
          <div class="card shadow-sm border-0 h-100">
            <div class="card-body d-flex flex-column justify-content-between">
              <div class="d-flex align-items-center gap-3">
                <h4>
                  <i class="bx bx-wallet icon-animate responsive-icon"></i>
                </h4>
                <h5 class=" text-dark fw-semibold">Payments</h5>
              </div>
              <p class=" text-muted ">Total Payments: <strong class="text-dark">{{ total_payment }}</strong></p>
            </div>
          </div>
        </a>
      </div>

      <div class="col-md-6 col-xl-4">
        <a href="{% url 'managefeedback' %}" class="text-decoration-none">
          <div class="card shadow-sm border-0 h-100">
            <div class="card-body d-flex flex-column justify-content-between">
              <div class="d-flex align-items-center gap-3">
                <h4>
                  <i class="bx bx-comment-dots icon-animate responsive-icon"></i>
                </h4>
                <h5 class=" text-dark fw-semibold">Feedback</h5>
              </div>
              <p class=" text-muted">Total Feedback: <strong class="text-dark">{{ total_feedback }}</strong></p>
            </div>
          </div>
        </a>
      </div>

      <div class="col-md-6 col-xl-4">
        <a href="{% url 'manageenquiries' %}" class="text-decoration-none">
          <div class="card shadow-sm border-0 h-100">
            <div class="card-body d-flex flex-column justify-content-between">
              <div class="d-flex align-items-center gap-3 ">
                <h4>
                  <i class="bx bx-message icon-animate responsive-icon"></i>
                </h4>
                <h5 class=" text-dark fw-semibold">Enquiries</h5>
              </div>
              <p class=" text-muted ">Total Enquiries: <strong class="text-dark">{{ total_enquiries }}</strong></p>
            </div>
          </div>
        </a>
      </div>

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

{% endblock %}