{% extends 'dashboard/employee_dashboard/main.html' %}
{% load static %}
{% block content %}
<!-- Messages Section -->
{% if messages %}
    {% for message in messages %}
    <div class="alert {% if 'success' in message.tags %}alert-success{% elif 'danger' in message.tags %}alert-danger{% endif %}" role="alert" id="success-alert">
        {{ message }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
        </button>
    </div>
    {% endfor %}
{% endif %}
  <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 %}
                            <a href="{{IMAGEPATH}}{{ appointment.visitors_image }}"
                               data-fancybox
                               data-caption="{{ appointment.visitors_name }} {{ appointment.visitors_last_name }}">
                                <img src="{{IMAGEPATH}}{{ appointment.visitors_image }}"
                                     alt="Visitor Image"
                                     style="width:50px;height:50px;cursor:pointer;">
                            </a>
                        {% else %}
                            <a href="{{DEFAULT_IMAGE}}"
                               data-fancybox
                               data-caption="Default Image">
                                <img src="{{DEFAULT_IMAGE}}"
                                     alt="Visitor Image"
                                     style="width:50px;height:50px;cursor:pointer;">
                            </a>
                        {% 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>
                        {% if appointment.visitors_image %}
                            <a href="{{IMAGEPATH}}{{ appointment.visitors_image }}"
                               data-fancybox
                               data-caption="{{ appointment.visitors_name }} {{ appointment.visitors_last_name }}">
                                <img src="{{IMAGEPATH}}{{ appointment.visitors_image }}"
                                     alt="Visitor Image"
                                     style="width:50px;height:50px;cursor:pointer;">
                            </a>
                        {% else %}
                            <a href="{{DEFAULT_IMAGE}}"
                               data-fancybox
                               data-caption="Default Image">
                                <img src="{{DEFAULT_IMAGE}}"
                                     alt="Visitor Image"
                                     style="width:50px;height:50px;cursor:pointer;">
                            </a>
                        {% 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>
                      {% if appointment.status == 'meeting_completed' %}
                            <button class="btn btn-secondary ms-1" disabled>
                                <i class="bx bx-check-circle"></i> Completed
                            </button>
                        {% else %}
                            <button id="meeting-btn-{{ appointment.id }}"
                                    class="btn btn-warning ms-1"
                                    onclick="meetingOver('{{ appointment.id }}')">
                                <i class="bx bx-check-circle"></i> Meeting Over
                            </button>
                        {% endif %}
                    </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>
                        {% if appointment.visitors_image %}
                            <a href="{{IMAGEPATH}}{{ appointment.visitors_image }}"
                               data-fancybox
                               data-caption="{{ appointment.visitors_name }} {{ appointment.visitors_last_name }}">
                                <img src="{{IMAGEPATH}}{{ appointment.visitors_image }}"
                                     alt="Visitor Image"
                                     style="width:50px;height:50px;cursor:pointer;">
                            </a>
                        {% else %}
                            <a href="{{DEFAULT_IMAGE}}"
                               data-fancybox
                               data-caption="Default Image">
                                <img src="{{DEFAULT_IMAGE}}"
                                     alt="Visitor Image"
                                     style="width:50px;height:50px;cursor:pointer;">
                            </a>
                        {% 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>

<script>
function meetingOver(appointmentId) {

    Swal.fire({
        title: 'Meeting Completed?',
        text: 'Are you sure the meeting is over?',
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes, Complete'
    }).then((result) => {

        if (result.isConfirmed) {

            $.ajax({
                url: "{% url 'employee_meeting_over' %}",
                type: "POST",
                data: {
                    appointment_id: appointmentId,
                    csrfmiddlewaretoken: "{{ csrf_token }}"
                },
                success: function(response) {

                    if (response.status === "success") {

                        let btn = $("#meeting-btn-" + appointmentId);

                        btn.prop("disabled", true);
                        btn.removeClass("btn-warning");
                        btn.addClass("btn-secondary");
                        btn.html('<i class="bx bx-check-circle"></i>Meeting Completed');

                        Swal.fire({
                            icon: 'success',
                            title: 'Completed!',
                            text: 'Meeting completed successfully.',
                            timer: 1500,
                            showConfirmButton: false
                        });

                    } else {

                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: response.message
                        });

                    }
                },
                error: function() {

                    Swal.fire({
                        icon: 'error',
                        title: 'Oops...',
                        text: 'Something went wrong.'
                    });

                }
            });

        }

    });
}
</script>
{% endblock %}