{% extends 'dashboard.html' %}
{% block hero %}{% endblock hero %}
{% block guests %}
    
    <div class="row">

        <div class="col-md-12">
        <div class="card card-round">
            <div class="card-header">
            <div class="card-head-row card-tools-still-right">
                <h4 class="card-title">Guests List</h4>

                <div class="card-tools" style="display: flex; align-items: center;">
                    <button
                      class="btn btn-icon btn-link btn-primary btn-xs btn-refresh-card"
                      onclick=`window.location.href="{% url 'checkedin_guests' %}"`;
                    >
                      <span class="fa fa-sync-alt"></span>
                    </button>
                    <div class="dropdown">
                    <button
                        class="btn btn-icon btn-clean me-0"
                        type="button"
                        id="dropdownMenuButton"
                        data-bs-toggle="dropdown"
                        aria-haspopup="true"
                        aria-expanded="false"
                    >
                        <i class="fas fa-ellipsis-h"></i>
                    </button>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                        <a class="dropdown-item" href="{% url 'export_checkedin_to_excel' %}">Export to EXCEL</a>
                    </div>
                    </div>
                </div>

            </div>

            <p class="card-category"> List of all Guests that have checked in.</p>
            </div>
            <div class="card-body p-0 pb-3">
                <div class="table-responsive">
                {% if checkedin_guests %}
                    
                <div class="container-fluid">       
                    <table class="table bg-light myTable" id="guestTable">
                        <thead class="thead-light">
                            <tr>
                                <th scope="col">#</th>
                                <th scope="col">First Name</th>
                                <th scope="col">Last Name</th>
                                <th scope="col">Email</th>
                                <th scope="col">Ticket</th>
                                <th scope="col">Checked</th>
                                <th scope="col">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                        {% for guest in checkedin_guests %}
                            <tr>
                                <td>{{ forloop.counter }}</td>
                                <td>{{ guest.first_name }}</td>
                                <td>{{ guest.last_name }}</td>
                                <td>{{ guest.email }}</td>
                                {% if guest.ticket == 'Gold' %}
                                    <td><span class="badge badge-gold">Gold</span></td>
                                {% elif guest.ticket == 'Silver' %}
                                    <td><span class="badge badge-silver">Silver</span></td>
                                {% else %}
                                    <td><span class="badge badge-bronze">Bronze</span></td>
                                {% endif %}
                                <td><span class="badge badge-success">YES</span></td>
                                <td><button class="btn btn-dark btn-sm" disabled> Checked </button></td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
                    
                {% else %}
                <div class="row my-5" style="padding: 50px 0">
                    <h5 class="text-center">This list is empty.</h5>
                </div>
                {% endif %}
            </div>
        </div>
        </div>
        </div>

    </div>
    
{% endblock guests %}