{% extends 'dashboard/base.html' %}
{% 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">Invite Guest</h4>
          <div class="card-tools">
            <a href="{% url 'export_invites' %}" class="btn btn-primary btn-sm" {% if not guests %}style="pointer-events: none; opacity: 0.5;"{% endif %}>
              <i class="fas fa-download"></i> Export Data
            </a>
          </div>
        </div>
      </div>

      <div class="card-body">
        <div class="table-responsive">
          <table id="guestTable" class="display table table-striped table-hover">
            {% if guests %}
            <thead>
              <tr>
                <th>#</th>
                <th>Name/Organization & Email</th>
                <th>Phone</th>
                <th>Title/Organization</th>
                <!-- <th>Representative</th> -->
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              {% for guest in guests %}
              <tr>
                 <td><span style="font-size: 14px;">{{ forloop.counter }}</span></td>
                 <td>
                   <div style="font-size: 14px;"><strong>{{ guest.name }}</strong></div>
                   <div style="font-size: 12px; color: #666;">{{ guest.email|default:"-" }}</div>
                 </td>
                 <td>
                   <span style="font-size: 12px;">{{ guest.phone|default:"-" }}</span>
                 </td>
                 <td>
                   <span style="font-size: 12px;">{{ guest.organization|default:"-" }}</span>
                 </td>
                 <!-- <td>
                   <span style="font-size: 12px;">{{ guest.representative|default:"-" }}</span>
                 </td> -->

                 <td>
                   <div class="d-flex gap-2" style="flex-wrap: wrap;">
                     {% if not guest.is_sent %}
                     <button type="button" class="btn btn-primary btn-sm send-invite" data-guest-id="{{ guest.id }}" title="Send Invite">
                       <i class="fas fa-envelope"> </i>
                     </button>    
                     {% else %}
                     <button type="button" class="btn btn-light btn-sm text-success" title="Invite sent">
                       <i class="fas fa-check"></i>
                     </button>
                     {% endif %}
                     <button type="button" class="btn btn-danger btn-sm delete-guest" title="Delete" aria-label="Delete" data-guest-id="{{ guest.id }}" data-name="{{ guest.name }}">
                       <i class="fas fa-trash"></i>
                     </button>
                   </div>
                 </td>
              </tr>
              {% endfor %}
            </tbody>
            {% else %}
            <tbody style="height: 400px">
              <tr>
                <td colspan="6" class="text-center">No guests found</td>
              </tr>
            </tbody>
            {% endif %}
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

{% endblock %}

{% block js %}
<script>
$(document).ready(function() {
    function csrfToken() {
        return '{{ csrf_token }}';
    }

    // --- Send Invite ---
    $(document).on('click', '.send-invite', function() {
        const button = $(this);
        const guestId = button.data('guest-id');
        const originalText = button.html();

        button.html('<span class="spinner"></span> Sending...').prop('disabled', true);

        $.ajax({
            url: "{% url 'send_invite' %}",
            type: "POST",
            data: {
                'guest_id': guestId,
                'csrfmiddlewaretoken': csrfToken()
            },
            success: function(response) {
                if (response.status === 200) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Success',
                        text: response.message,
                        confirmButtonColor: '#003b65'
                    }).then(() => {
                        button.html(originalText).prop('disabled', false);
                        location.reload();
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: response.message,
                        confirmButtonColor: '#003b65'
                    }).then(() => {
                        button.html(originalText).prop('disabled', false);
                    });
                }
            },
            error: function(xhr, status, error) {
                console.error('Send QR error:', error);
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Failed to send QR code.',
                    confirmButtonColor: '#003b65'
                }).then(() => {
                    button.html(originalText).prop('disabled', false);
                });
            }
        });
    });

    // --- Delete Guest ---
    $(document).on('click', '.delete-guest', function() {
        const btn = $(this);
        const guestId = btn.data('guest-id');
        const name = btn.data('name') || 'this guest';

        Swal.fire({
            icon: 'warning',
            title: 'Delete guest?',
            text: `Are you sure you want to delete ${name}?`,
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Delete'
        }).then((result) => {
            if (!result.isConfirmed) return;

            $.ajax({
                url: "{% url 'delete_guest' %}",
                type: "POST",
                data: {
                    'guest_id': guestId,
                    'csrfmiddlewaretoken': csrfToken()
                },
                success: function(response) {
                    if (response.status === 200) {
                        Swal.fire({ icon: 'success', title: 'Deleted', text: response.message, confirmButtonColor: '#003b65' }).then(() => location.reload());
                    } else {
                        Swal.fire({ icon: 'error', title: 'Error', text: response.message, confirmButtonColor: '#003b65' });
                    }
                },
                error: function(xhr) {
                    const msg = xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : 'Failed to delete.';
                    Swal.fire({ icon: 'error', title: 'Error', text: msg, confirmButtonColor: '#003b65' });
                }
            });
        });
    });
});
</script>
{% endblock %}