{% extends 'dashboard/visitors_dashboard/main.html' %}
{% load static %}
{% block content %}
<style>
  .btn-today-reset {
    color: #000 !important;
    border-color: #000000 !important;
  }

  .btn-today-reset:hover {
    color: #ffffff !important;
    background-color: #000000 !important;
    border-color: #000 !important;
  }
</style>
<!-- Modern Date Filter Header Component -->
<div class="card border-0 shadow-sm mb-4">
  <div class="card-body p-3">
    <form method="GET" action="" class="row g-3 align-items-center justify-content-between">
      <div class="col-md-6 col-12 d-flex align-items-center">
        {% if is_today %}
        <div class="badge bg-label-primary p-2 rounded me-3 d-flex align-items-center justify-content-center">
          <i class="bx bx-calendar fs-4"></i>
        </div>
        <div>
          <h5 class="mb-0 fw-bold text-dark">Visitor Overview</h5>
          <small class="text-muted">Showing statistics for <span class="badge bg-label-primary ms-1"><i
                class="bx bx-check-circle me-1"></i> Today ({{ selected_date }})</span></small>
        </div>
        {% else %}
        <div class="badge bg-label-warning p-2 rounded me-3 d-flex align-items-center justify-content-center">
          <i class="bx bx-time-five fs-4 text-warning"></i>
        </div>
        <div>
          <h5 class="mb-0 fw-bold text-dark">Visitor Overview</h5>
          <small class="text-muted">Showing statistics for <span class="badge bg-warning text-dark ms-1 shadow-sm"><i
                class="bx bx-calendar-exclamation me-1"></i> Custom Date: {{ selected_date }}</span></small>
        </div>
        {% endif %}
      </div>

      <div class="col-md-6 col-12 d-flex align-items-center justify-content-md-end gap-2 flex-wrap mt-2 mt-md-0">
        <div class="input-group input-group-merge" style="max-width: 220px;">
          <span class="input-group-text {% if not is_today %}border-warning text-warning{% endif %}"><i
              class="bx bx-calendar-event"></i></span>
          <input type="date" id="selected_date" name="selected_date"
            class="form-control {% if not is_today %}border-warning fw-bold text-dark{% endif %}"
            value="{{ selected_date }}" max="{{ real_today }}" onchange="this.form.submit()">
        </div>
        <button type="submit"
          class="btn {% if not is_today %}btn-warning text-dark{% else %}btn-primary{% endif %} d-inline-flex align-items-center gap-1 shadow-sm">
          <i class="bx bx-filter-alt"></i> <span>Filter</span>
        </button>
        <a href="?" class="btn btn-outline-dark btn-today-reset d-inline-flex align-items-center gap-1">
          <i class="bx bx-refresh"></i> <span>Today</span>
        </a>
      </div>
    </form>
  </div>
</div>

<div class="row">
  <div class="col-lg-12 col-md-12 order-1">
    <div class="row">
      <div class="col-lg-3 col-md-3 col-6 mb-4">
        <div class="card">
          <div class="card-body">
            <div class="card-title d-flex align-items-start justify-content-between">
              <div class="avatar flex-shrink-0">
                <img src="{% static '/assets/img/icons/unicons/chart-success.png'%}" alt="chart success"
                  class="rounded">
              </div>
            </div>
            <span class="fw-semibold d-block mb-1">Total Appointments</span>
            <h3 class="card-title mb-2">{{all_appointment}}</h3>
          </div>
        </div>
      </div>
      <div class="col-lg-3 col-md-3 col-6 mb-4">
        <div class="card">
          <div class="card-body">
            <div class="card-title d-flex align-items-start justify-content-between">
              <div class="avatar flex-shrink-0">
                <img src="{% static '/assets/img/icons/unicons/wallet-info.png'%}" alt="chart success" class="rounded">
              </div>
            </div>
            <span class="fw-semibold d-block mb-1">Upcoming Appointments</span>
            <h3 class="card-title mb-2">{{Upcoming_appointment}}</h3>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

{% endblock %}