{% extends "admin_base.html" %}
{% load custom_filters %}
{% load static %}

{% block content %}
<script src="https://cdn.tailwindcss.com"></script>
<!-- New Font Awesome CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" referrerpolicy="no-referrer" />

<style>
  /* Add smooth transition to progress bars */
  .progress-bar {
    transition: width 6s ease-in-out;
  }
  
  /* Style for popup overlay */
  #popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 40;
  }
</style>

<div class="container mx-auto mb-10">
  <!-- Search Bar with FontAwesome Plus Icon -->
  <div class="flex justify-between items-center mt-8 mb-8">
    <div class="flex items-center w-full space-x-4">
      <!-- Search input -->
      <form method="get" action="{% url 'mimansha_main:team_list' %}" class="w-full">
        <input 
          type="text" 
          id="searchInput" 
          name="search"
          value="{{ search_query }}" 
          placeholder="Search team members..." 
          class="flex-1 p-4 w-96 border border-gray-300 rounded-lg shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
        >
      </form>
      <!-- Add Button -->
      <a href="{% url 'mimansha_main:create_team_member' %}" class="inline-flex items-center justify-center p-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors duration-300">
        <i class="fas fa-plus fa-lg"></i>
      </a>
    </div>
  </div>

  <hr class="mb-5" style="border: 3px solid black;">

  <!-- Team Members Container with Grid Layout -->
  <div id="teamContainer" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
    {% for member in team_members %}
      <!-- Team Member Card -->
      <div id="team-{{ member.id }}" class="relative bg-white p-6 rounded-lg shadow-lg hover:shadow-2xl transition-shadow duration-300">
        <img class="mx-auto w-36 h-36 rounded-full object-cover" src="{{ member.image.url }}" alt="{{ member.name }} Avatar">
        <h3 class="mt-4 text-2xl font-bold text-gray-800 text-center">{{ member.name }}</h3>
        <p class="mt-2 text-gray-600 text-center">{{ member.role }}</p>
        
        <!-- Edit and Delete Buttons -->
        <div class="flex justify-center space-x-4 mt-4">
          <!-- Edit Button -->
          <a href="{% url 'mimansha_main:update_team_member' member.id %}" class="text-yellow-500 hover:text-yellow-700 transition">
            <i class="fas fa-edit fa-lg"></i>
          </a>
          <!-- Delete Button -->
          <a href="javascript:void(0);" onclick="showDeleteForm({{ member.id }})" class="text-red-500 hover:text-red-700 transition">
            <i class="fas fa-trash-alt fa-lg"></i>
          </a>
        </div>
      </div>
    {% endfor %}
  </div>

  <!-- Pagination Controls (if needed) -->
  {% if team_members.has_other_pages %}
    <div class="mt-6 flex justify-center">
      <div class="flex space-x-4">
        {% if team_members.has_previous %}
          <a href="?page=1{% if search_query %}&search={{ search_query }}{% endif %}" class="bg-blue-500 text-white p-2 rounded hover:bg-blue-600">First</a>
          <a href="?page={{ team_members.previous_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}" class="bg-blue-500 text-white p-2 rounded hover:bg-blue-600">Previous</a>
        {% endif %}
        
        <span class="self-center">Page {{ team_members.number }} of {{ team_members.paginator.num_pages }}</span>
  
        {% if team_members.has_next %}
          <a href="?page={{ team_members.next_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}" class="bg-blue-500 text-white p-2 rounded hover:bg-blue-600">Next</a>
          <a href="?page={{ team_members.paginator.num_pages }}{% if search_query %}&search={{ search_query }}{% endif %}" class="bg-blue-500 text-white p-2 rounded hover:bg-blue-600">Last</a>
        {% endif %}
      </div>
    </div>
  {% endif %}
</div>

<!-- Delete Form (Hidden by default) -->
<form id="delete-form" method="POST" style="display:none;">
  {% csrf_token %}
  <input type="hidden" name="id" id="delete-id">
</form>

<!-- Popup Overlay for Delete Confirmation -->
<div id="popup-overlay" style="display:none;"></div>

<!-- Stylish Delete Confirmation Popup -->
<div id="delete-form-popup" class="fixed inset-0 flex justify-center items-center z-50" style="display:none;">
  <div class="bg-white p-8 rounded-xl shadow-xl max-w-sm w-full">
    <div class="text-center">
      <h3 class="text-2xl font-bold text-gray-800 mb-4">Are you sure you want to delete this team member?</h3>
      <p class="text-gray-600 mb-6">This action cannot be undone. Please confirm your choice.</p>

      <!-- Buttons -->
      <div class="flex justify-center space-x-4">
        <button onclick="submitDeleteForm()" class="bg-red-500 text-white py-2 px-6 rounded-lg hover:bg-red-600 transition duration-300">
          Yes, Delete
        </button>
        <button onclick="hideForm('delete-form-popup')" class="bg-gray-300 text-gray-800 py-2 px-6 rounded-lg hover:bg-gray-400 transition duration-300">
          Cancel
        </button>
      </div>
    </div>
  </div>
</div>

<script>
  // Show the delete form popup
  function showDeleteForm(memberId) {
      var deleteForm = document.getElementById('delete-form');
      deleteForm.action = "{% url 'mimansha_main:team_delete' 1 %}".replace('1', memberId);
      document.getElementById('delete-id').value = memberId;
      showForm('delete-form-popup');
  }

  // Submit the delete form via AJAX
  function submitDeleteForm() {
      var deleteForm = document.getElementById('delete-form');
      var xhr = new XMLHttpRequest();
      xhr.open("POST", deleteForm.action, true);
      xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
      
      // CSRF token is already in the form
      var formData = new FormData(deleteForm);
      xhr.onload = function () {
          if (xhr.status >= 200 && xhr.status < 400) {
              // On success, remove the team member card from the DOM
              var memberId = document.getElementById('delete-id').value;
              var memberCard = document.getElementById('team-' + memberId);
              if (memberCard) {
                  memberCard.remove();
              }
              hideForm('delete-form-popup');
          } else {
              console.error('Error details:', xhr.responseText);
              alert("There was an error deleting the team member.");
          }
      };
      xhr.onerror = function () {
          console.error('Network error occurred.');
          alert("Network error. Please try again.");
      };
      xhr.send(formData);
  }

  // Show the popup form
  function showForm(formId) {
      document.getElementById('popup-overlay').style.display = 'block';
      document.getElementById('popup-overlay').classList.add('backdrop-blur-sm'); // Add blur to the background
      document.getElementById(formId).style.display = 'flex';
      document.getElementById(formId).style.alignItems = 'center';  // Center vertically
      document.getElementById(formId).style.justifyContent = 'center'; // Center horizontally
  }

  // Hide the popup form
  function hideForm(formId) {
      document.getElementById('popup-overlay').style.display = 'none';
      document.getElementById('popup-overlay').classList.remove('backdrop-blur-sm'); // Remove blur
      document.getElementById(formId).style.display = 'none';
  }

  // Close the form when clicking outside of it
  document.getElementById('popup-overlay').onclick = function() {
      hideForm('delete-form-popup');
  };
</script>
{% endblock %}