{% extends 'dashboard/employee_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">
          <table class="table" style="width: 100%;">
            <thead>
              <tr>
                <th>ID</th>
                  <th>Name</th>
                  <th>Mobile</th>
                  <th>Email</th>
                  <th>UNI ID</th>
                  <th>Image</th>
                  <th>Employee Name</th>
                  <th>Status</th>
                  <th>Check-In Time</th>
                  <th>Check-Out Time</th>
                  <th>Action</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>
                    <td>
                      <button class="btn btn-success" data-appointment-id="{{ appointment.id }}" onclick="changeStatus('{{ appointment.id }}', 'accepted')" ><i class="bx bx-show" title='View'></i></button>
                  </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">
          <table class="table" style="width: 100%;">
            <thead>
              <tr>
                <th>ID</th>
                  <th>Name</th>
                  <th>Mobile</th>
                  <th>Email</th>
                  <th>UNI ID</th>
                  <th>Image</th>
                  <th>Employee Name</th>
                  <th>Check-In Time</th>
                  <th>Meeting status</th>
                  <th>Check-Out Time</th>
                  <th>Action</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>In the Meeting</td>
                    <td>{{ appointment.stop_time }}</td>
                    <td>
                      <button class="btn btn-success" data-appointment-id="{{ appointment.id }}" onclick="changeStatus('{{ appointment.id }}', 'accepted')" ><i class="bx bx-show" title='View'></i></button>
                    </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">
          <table class="table" style="width: 100%;">
            <thead>
              <tr>
                <th>ID</th>
                  <th>Name</th>
                  <th>Mobile</th>
                  <th>Email</th>
                  <th>UNI ID</th>
                  <th>Image</th>
                  <th>Employee Name</th>
                  <th>Check-In Time</th>
                  <th>Meeting status</th>
                  <th>Check-Out Time</th>
                  <th>Action</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>
                    <td>
                      <button class="btn btn-success" data-appointment-id="{{ appointment.id }}" onclick="changeStatus('{{ appointment.id }}', 'accepted')" ><i class="bx bx-show" title='View'></i></button>
                  </td>
                  </tr>
                  {% endfor %}
                {% else %}
                  <tr>
                    <td colspan="9">No visitors have checked out today.</td>
                  </tr>
                {% endif %}
              <tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
<div class="modal fade" id="visitorModal" tabindex="-1" role="dialog" aria-labelledby="visitorModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
      <div class="modal-content">
          <div class="modal-header">
              <h5 class="modal-title" id="visitorModalLabel">Visitor Details</h5>

            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
              <table class="table table-bordered">
                  <tbody id="visitor-details-body">
                      <!-- Dynamic content will be injected here by JavaScript -->
                  </tbody>
              </table>
          </div>
          <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          </div>
      </div>
  </div>
</div>


{% endblock %}