{% extends 'dashboard/gate_keeper_dashboard/main.html' %}
{% load static %}
{% block content %}
  <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">Today Appointment</span>
              <h3 class="card-title mb-2">{{total_visitors_count}}</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="Credit Card" class="rounded">
                </div>
              </div>
              <span class="fw-semibold d-block mb-1">Pending Request</span>
              <h3 class="card-title text-nowrap mb-1">{{pending_count}}</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="Credit Card" class="rounded">
                </div>
              </div>
              <span class="fw-semibold d-block mb-1">Total Check In</span>
              <h3 class="card-title text-nowrap mb-1">{{check_in_count}}</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="Credit Card" class="rounded">
                </div>
              </div>
              <span class="fw-semibold d-block mb-1">Total Check Out</span>
              <h3 class="card-title text-nowrap mb-1">{{check_out_count}}</h3>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-12 col-md-12 order-1">
      <div class="card">
        <h5 class="card-header">Visitor Pending</h5>
        <div class="table-responsive text-nowrap">
          <table class="table">
            <thead>
              <tr>
                <th>ID</th>
                  <th>Visitor Name</th>
                  <th>Visitor Mobile</th>
                  <th>Visitor Email</th>
                  <th>Visitor UNI ID</th>
                  <th>Visitor Image</th>
                  <th>Employee Name</th>
                  <th>Appointment Status</th>
                  <th>Check-In Time</th>
                  <th>Check-Out Time</th>
              </tr>
            </thead>
            <tbody class="table-border-bottom-0">
              {% if all_pending_list %}
                  {% for appointment in all_pending_list %}
                  <tr>
                    <td>{{ appointment.id }}</td>
                    <td>{{ appointment.visitors_name }} {{ appointment.visitors_last_name }}</td>
                    <td>{{ appointment.visitors_mobile }}</td>
                    <td>{{ appointment.visitors_email }}</td>
                    <td>{{ appointment.visitors_uni_id }}</td>
                    <td>
                      {% if appointment.visitors_image %}
                        <img src="{{IMAGEPATH}}{{ appointment.visitors_image }}" alt="Visitor Image" style="width: 50px; height: 50px;">
                      {% else %}
                        <img src="{{DEFAULT_IMAGE}}" alt="Visitor Image" style="width: 50px; height: 50px;">
                      {% endif %}
                    </td>
                    <td>{{ appointment.employee_name }} {{ appointment.employee_last_name }}</td>
                    <td>{{ appointment.status }}</td>
                    <td>{{ appointment.start_time }}</td>
                    <td>{{ appointment.stop_time }}</td>
                  </tr>
                  {% endfor %}
                {% else %}
                  <tr>
                    <td colspan="9">No pending visitors today.</td>
                  </tr>
                {% endif %}
              <tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  <br>
  <div class="row">
    <div class="col-lg-12 col-md-12 order-1">
      <div class="card">
        <h5 class="card-header">Visitor Check In</h5>
        <div class="table-responsive text-nowrap">
          <table class="table">
            <thead>
              <tr>
                <th>ID</th>
                  <th>Visitor Name</th>
                  <th>Visitor Mobile</th>
                  <th>Visitor Email</th>
                  <th>Visitor UNI ID</th>
                  <th>Visitor Image</th>
                  <th>Employee Name</th>
                  <th>Check-In Time</th>
                  <th>Meeting status</th>
                  <th>Check-Out Time</th>
              </tr>
            </thead>
            <tbody class="table-border-bottom-0">
              {% if all_check_in_dtl %}
                  {% for appointment in all_check_in_dtl %}
                  <tr>
                    <td>{{ appointment.id }}</td>
                    <td>{{ appointment.visitors_name }} {{ appointment.visitors_last_name }}</td>
                    <td>{{ appointment.visitors_mobile }}</td>
                    <td>{{ appointment.visitors_email }}</td>
                    <td>{{ appointment.visitors_uni_id }}</td>
                    <td>
                      {% if appointment.visitors_image %}
                        <img src="{{IMAGEPATH}}{{ appointment.visitors_image }}" alt="Visitor Image" style="width: 50px; height: 50px;">
                      {% else %}
                        <img src="{{DEFAULT_IMAGE}}" alt="Visitor Image" style="width: 50px; height: 50px;">
                      {% endif %}
                    </td>
                    <td>{{ appointment.employee_name }} {{ appointment.employee_last_name }}</td>
                    <td>{{ appointment.start_time }}</td>
                    <td>Meeting in</td>
                    <td>{{ appointment.stop_time }}</td>
                  </tr>
                  {% endfor %}
                {% else %}
                  <tr>
                    <td colspan="9">No visitors have checked in today.</td>
                  </tr>
                {% endif %}
              <tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  <br>
  <div class="row">
    <div class="col-lg-12 col-md-12 order-1">
      <div class="card">
        <h5 class="card-header">Visitor Check Out</h5>
        <div class="table-responsive text-nowrap">
          <table class="table">
            <thead>
              <tr>
                <th>ID</th>
                <th>Visitor Name</th>
                <th>Visitor Mobile</th>
                <th>Visitor Email</th>
                <th>Visitor UNI ID</th>
                <th>Visitor Image</th>
                <th>Employee Name</th>
                <th>Check-In Time</th>
                <th>Meeting status</th>
                <th>Check-Out Time</th>
              </tr>
            </thead>
            <tbody class="table-border-bottom-0">
              {% if all_check_out_dtl %}
                  {% for appointment in all_check_out_dtl %}
                  <tr>
                    <td>{{ appointment.id }}</td>
                    <td>{{ appointment.visitors_name }} {{ appointment.visitors_last_name }}</td>
                    <td>{{ appointment.visitors_mobile }}</td>
                    <td>{{ appointment.visitors_email }}</td>
                    <td>{{ appointment.visitors_uni_id }}</td>
                    <td>
                      {% if appointment.visitors_image %}
                        <img src="{{IMAGEPATH}}{{ appointment.visitors_image }}" alt="Visitor Image" style="width: 50px; height: 50px;">
                      {% else %}
                        <img src="{{DEFAULT_IMAGE}}" alt="Visitor Image" style="width: 50px; height: 50px;">
                      {% endif %}
                    </td>
                    <td>{{ appointment.employee_name }} {{ appointment.employee_last_name }}</td>
                    <td>{{ appointment.start_time }}</td>
                     <td>Meeting out</td>
                    <td>{{ appointment.stop_time }}</td>
                  </tr>
                  {% endfor %}
                {% else %}
                  <tr>
                    <td colspan="9">No visitors have checked out today.</td>
                  </tr>
                {% endif %}
              <tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>


{% endblock %}