{% load static %}
{% include 'dashboard/gate_keeper_dashboard/header.html' %}
{% include 'dashboard/gate_keeper_dashboard/body.html' %}
<!-- Right side column. Contains the navbar and content of the page -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        Dashboard
        <small>Control panel</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li class="active">Dashboard</li>
      </ol>
    </section>
 <!-- Main content -->
 <section class="content">
  <!-- Small boxes (Stat box) -->
  <div class="row">
    <div class="col-lg-3 col-xs-6">
      <!-- small box -->
      <div class="small-box bg-aqua">
        <div class="inner">
          <h3>{{total_visitors_count}}</h3>
          <p>Today Appointment</p>
        </div>
        <div class="icon">
          <i class="fa fa-calendar"></i>
        </div>
        {% comment %} <a href="{% url 'employee_visitore_all_page' %}" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a> {% endcomment %}
      </div>
    </div><!-- ./col -->
    <div class="col-lg-3 col-xs-6">
      <!-- small box -->
      <div class="small-box bg-aqua">
        <div class="inner">
          <h3>{{pending_count}}</h3>
          <p>Pending Request</p>
        </div>
        <div class="icon">
          <i class="fa fa-clock-o"></i>
        </div>
        {% comment %} <a href="{% url 'employee_visitore_all_page' %}" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a> {% endcomment %}
      </div>
    </div><!-- ./col -->

    
    <div class="col-lg-3 col-xs-6">
      <!-- small box -->
      <div class="small-box bg-aqua">
        <div class="inner">
          <h3>{{check_in_count}}</h3>
          <p>Total Check In</p>
        </div>
        <div class="icon">
          <i class="fa fa-sign-in"></i>
        </div>
        {% comment %} <a href="{% url 'employee_visitore_all_page' %}" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a> {% endcomment %}
      </div>
    </div><!-- ./col -->
    <div class="col-lg-3 col-xs-6">
      <!-- small box -->
      <div class="small-box bg-aqua">
        <div class="inner">
          <h3>{{check_out_count}}</h3>
          <p>Total Check Out</p>
        </div>
        <div class="icon">
          <i class="fa fa-sign-out"></i>
        </div>
        {% comment %} <a href="{% url 'employee_visitore_all_page' %}" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a> {% endcomment %}
      </div>
    </div><!-- ./col -->
  </div><!-- /.row -->
  
</section>
<section class="content">
  <div class="row">
  
    <!-- Visitor Check In Table -->
    <div class="col-xs-12">
      <div class="box">
        <div class="box-header">
          <h3 class="box-title">Visitor Check In</h3>
        </div>
        <div class="box-body">
          <div class="table-responsive">
            <table id="check_in_table" class="table table-bordered table-striped" style="width:100%">
              <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>
                {% 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 %}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Visitor Check Out Table -->
    <div class="col-xs-12">
      <div class="box">
        <div class="box-header">
          <h3 class="box-title">Visitor Check Out</h3>
        </div>
        <div class="box-body">
          <div class="table-responsive">
            <table id="check_out_table" class="table table-bordered table-striped" style="width:100%">
              <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>
                {% 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 %}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <!-- Visitor Pending Table -->
    <div class="col-xs-12">
      <div class="box">
        <div class="box-header">
          <h3 class="box-title">Visitor Pending</h3>
        </div>
        <div class="box-body">
          <div class="table-responsive">
            <table id="pending_table" class="table table-bordered table-striped" style="width:100%">
              <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>
                {% 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 %}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
</div>

{% include 'dashboard/visitors_dashboard/footer.html' %}