{% extends "admin_base.html" %}

{% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
  <!-- Header Section -->
  <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4">
    <div>
      <h1 class="text-2xl md:text-3xl font-bold text-gray-800">Issue Management</h1>
      <p class="text-sm text-gray-500 mt-1">Manage all magazine issues and their content</p>
    </div>
    <a href="{% url 'mimansha_main:issue_create' %}" 
       class="flex items-center px-4 py-2 bg-gradient-to-r from-blue-600 to-blue-500 text-white rounded-lg hover:from-blue-700 hover:to-blue-600 shadow-md transition-all duration-200">
      <i class="fas fa-plus-circle mr-2"></i>
      Create New Issue
    </a>
  </div>
  


  <!-- Issues List -->
  <div class="bg-white shadow-lg rounded-xl overflow-hidden border border-gray-100">
    <div class="overflow-x-auto">
      <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
          <tr>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Issue</th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider hidden md:table-cell">Number</th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider hidden lg:table-cell">Publish Date</th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider hidden sm:table-cell">Blogs</th>
            <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
          </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
          {% for issue in issues %}
          <tr class="hover:bg-gray-50 transition-colors duration-150">
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="flex items-center">
                {% if issue.cover_image %}
                <div class="flex-shrink-0 h-12 w-12 rounded-lg overflow-hidden shadow-sm border border-gray-200">
                  <img class="h-full w-full object-cover" src="{{ issue.cover_image.url }}" alt="{{ issue.name }}">
                </div>
                {% else %}
                <div class="flex-shrink-0 h-12 w-12 rounded-lg bg-gray-100 flex items-center justify-center text-gray-400">
                  <i class="fas fa-image text-xl"></i>
                </div>
                {% endif %}
                <div class="ml-4">
                  <div class="text-sm font-semibold text-gray-900">
                    <a href="{% url 'mimansha_main:issue_detail' slug=issue.slug %}" class="hover:text-blue-600 transition-colors">{{ issue.name }}</a>
                  </div>
                  <div class="text-xs text-gray-500 md:hidden">#{{ issue.issue_number }}</div>
                </div>
              </div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 hidden md:table-cell">
              {{ issue.issue_number }}
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <span class="px-3 py-1 text-xs font-semibold rounded-full inline-flex items-center 
                {% if issue.status == 1 %}bg-green-50 text-green-800
                {% elif issue.status == 2 %}bg-yellow-50 text-yellow-800
                {% elif issue.status == 3 %}bg-blue-50 text-blue-800
                {% else %}bg-gray-100 text-gray-800{% endif %}">
                {% if issue.status == 1 %}
                  <i class="fas fa-check-circle mr-1.5 text-green-500"></i>
                {% elif issue.status == 2 %}
                  <i class="fas fa-exclamation-circle mr-1.5 text-yellow-500"></i>
                {% elif issue.status == 3 %}
                  <i class="fas fa-clock mr-1.5 text-blue-500"></i>
                {% else %}
                  <i class="fas fa-question-circle mr-1.5 text-gray-500"></i>
                {% endif %}
                {{ issue.get_status_display }}
              </span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 hidden lg:table-cell">
              {% if issue.publication_date %}
                <div class="flex items-center">
                  <i class="fas fa-calendar-day mr-2 text-gray-400 text-xs"></i>
                  {{ issue.publication_date|date:"M j, Y" }}
                </div>
              {% else %}
                —
              {% endif %}
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 hidden sm:table-cell">
              <div class="flex items-center">
                <i class="fas fa-file-alt mr-2 text-gray-400 text-xs"></i>
                {{ issue.blogs.count }}
              </div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
              <div class="flex justify-end space-x-2">
                <a href="{% url 'mimansha_main:issue_update' slug=issue.slug %}" 
                   class="text-blue-500 hover:text-blue-700 p-2 rounded-full hover:bg-blue-50 transition-colors"
                   data-tooltip="Edit" data-tooltip-position="top">
                  <i class="fas fa-pencil-alt"></i>
                </a>
                <button onclick="openDeleteModal('{{ issue.name }}', '{% url 'mimansha_main:issue_delete' slug=issue.slug %}')"
                   class="text-red-500 hover:text-red-700 p-2 rounded-full hover:bg-red-50 transition-colors"
                   data-tooltip="Delete" data-tooltip-position="top">
                  <i class="fas fa-trash-alt"></i>
                </button>
              </div>
            </td>
          </tr>
          {% empty %}
          <tr>
            <td colspan="6" class="px-6 py-12 text-center">
              <div class="flex flex-col items-center justify-center text-gray-400">
                <i class="fas fa-inbox text-4xl mb-3"></i>
                <p class="text-lg font-medium text-gray-500">No issues found</p>
                <p class="text-sm mt-1">Get started by <a href="{% url 'mimansha_main:issue_create' %}" class="text-blue-600 hover:text-blue-800 font-medium">creating a new issue</a></p>
              </div>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    
    <!-- Pagination -->
    {% if is_paginated %}
    <div class="px-6 py-4 border-t border-gray-200 flex items-center justify-between bg-gray-50">
      <div class="flex-1 flex justify-between sm:hidden">
        {% if page_obj.has_previous %}
        <a href="?page={{ page_obj.previous_page_number }}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}" 
           class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
          <i class="fas fa-chevron-left mr-1"></i> Previous
        </a>
        {% endif %}
        {% if page_obj.has_next %}
        <a href="?page={{ page_obj.next_page_number }}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}" 
           class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
          Next <i class="fas fa-chevron-right ml-1"></i>
        </a>
        {% endif %}
      </div>
      <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
        <div>
          <p class="text-sm text-gray-700">
            Showing <span class="font-medium">{{ page_obj.start_index }}</span> to <span class="font-medium">{{ page_obj.end_index }}</span> of <span class="font-medium">{{ page_obj.paginator.count }}</span> results
          </p>
        </div>
        <div>
          <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
            {% if page_obj.has_previous %}
            <a href="?page={{ page_obj.previous_page_number }}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}" 
               class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
              <span class="sr-only">Previous</span>
              <i class="fas fa-chevron-left"></i>
            </a>
            {% endif %}
            
            {% for num in page_obj.paginator.page_range %}
              {% if page_obj.number == num %}
              <a href="#" aria-current="page" 
                 class="z-10 bg-blue-50 border-blue-500 text-blue-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
                {{ num }}
              </a>
              {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
              <a href="?page={{ num }}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}" 
                 class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
                {{ num }}
              </a>
              {% endif %}
            {% endfor %}
            
            {% if page_obj.has_next %}
            <a href="?page={{ page_obj.next_page_number }}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}" 
               class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
              <span class="sr-only">Next</span>
              <i class="fas fa-chevron-right"></i>
            </a>
            {% endif %}
          </nav>
        </div>
      </div>
    </div>
    {% endif %}
  </div>
</div>

<!-- Delete Confirmation Modal -->
<div id="deleteModal" class="fixed inset-2 z-50 overflow-y-auto hidden" aria-labelledby="modal-title" role="dialog" aria-modal="true">
  <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
    <!-- Background overlay -->
    <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>

    <!-- Modal panel -->
    <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
      <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
        <div class="sm:flex sm:items-start">
          <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
            <i class="fas fa-exclamation-triangle text-red-600"></i>
          </div>
          <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
            <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
              Delete Issue
            </h3>
            <div class="mt-2">
              <p class="text-sm text-gray-500">
                Are you sure you want to delete <span id="issueNameToDelete" class="font-semibold"></span>? This action cannot be undone.
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
        <form id="deleteForm" method="post" action="">
          {% csrf_token %}
          <button type="submit" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">
            Delete
          </button>
        </form>
        <button type="button" onclick="closeDeleteModal()" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
          Cancel
        </button>
      </div>
    </div>
  </div>
</div>

<!-- Font Awesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

<style>
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  [data-tooltip] {
    position: relative;
  }
  [data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    pointer-events: none;
  }
  [data-tooltip-position="top"]::after {
    bottom: 100%;
    top: auto;
  }
  [data-tooltip-position="bottom"]::after {
    bottom: auto;
    top: 100%;
  }
  [data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
    margin-bottom: 5px;
  }
</style>

<script>
  // Delete modal functions
  function openDeleteModal(issueName, deleteUrl) {
    document.getElementById('issueNameToDelete').textContent = issueName;
    document.getElementById('deleteForm').action = deleteUrl;
    document.getElementById('deleteModal').classList.remove('hidden');
    document.body.classList.add('overflow-hidden');
  }

  function closeDeleteModal() {
    document.getElementById('deleteModal').classList.add('hidden');
    document.body.classList.remove('overflow-hidden');
  }

  // Close modal when clicking outside
  window.onclick = function(event) {
    const modal = document.getElementById('deleteModal');
    if (event.target === modal) {
      closeDeleteModal();
    }
  }

  // Close modal with Escape key
  document.addEventListener('keydown', function(event) {
    if (event.key === 'Escape') {
      closeDeleteModal();
    }
  });
</script>
{% endblock %}