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

{% block extra_css %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.css">
<style>
  /* Base Styles */
  .sortable-ghost {
    opacity: 0.5;
    background: #dbeafe;
  }
  .sortable-drag {
    opacity: 0;
  }
  
  .transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
  }
  
  .hover-shadow:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
  }
  
  .bg-gradient-blue {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
  }
  
  /* Scrollbar Styles */
  .custom-scrollbar::-webkit-scrollbar {
    width: 6px;
  }
  .custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
  }
  .custom-scrollbar::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
  }
  
  /* Badge Styles */
  .badge {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
  }
  
  /* Modal Styles */
  .modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
  }
  
  .modal-content {
    background: white;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.3s ease;
  }
  
  .modal-overlay.active {
    display: flex;
  }
  
  .modal-overlay.active .modal-content {
    transform: translateY(0);
    opacity: 1;
  }
  
  /* Checkbox Styles */
  .checkbox-container {
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  .checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }
  
  .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #fff;
    border: 2px solid #d1d5db;
    border-radius: 4px;
  }
  
  .checkbox-container:hover input ~ .checkmark {
    background-color: #f3f4f6;
  }
  
  .checkbox-container input:checked ~ .checkmark {
    background-color: #2563eb;
    border-color: #2563eb;
  }
  
  .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }
  
  .checkbox-container input:checked ~ .checkmark:after {
    display: block;
  }
  
  .checkbox-container .checkmark:after {
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  
  /* Error Message Styles */
  .error-message {
    color: #dc2626;
    font-size: 0.875rem;
    margin-top: 0.25rem;
  }
  
  /* Form Input Styles */
  .form-input {
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    width: 100%;
  }
  
  .form-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  }
  
  /* Responsive Adjustments */
  @media (max-width: 640px) {
    .modal-content {
      width: 95%;
    }
  }
</style>
{% endblock %}

{% block content %}
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
  <div class="bg-white shadow-lg rounded-lg overflow-hidden border border-gray-100">
    <!-- Header Section -->
    <div class="px-6 py-6 bg-gradient-blue text-white flex flex-col sm:flex-row justify-between items-start sm:items-center">
      <div class="mb-4 sm:mb-0">
        <h2 class="text-2xl md:text-3xl font-bold">{{ issue.name }}</h2>
        <p class="text-blue-100 mt-1 flex items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14" />
          </svg>
          <span>{{ issue.issue_number }}</span>
        </p>
      </div>
      <div class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2 w-full sm:w-auto">
        <a href="{% url 'mimansha_main:issue_update' slug=issue.slug %}" 
           class="px-4 py-2 bg-white text-blue-700 font-medium rounded-md text-sm hover:bg-blue-50 transition-colors duration-200 shadow-sm text-center">
          Edit Issue
        </a>
        <button id="delete-issue-btn" 
           class="px-4 py-2 bg-red-600 text-white font-medium rounded-md text-sm hover:bg-red-700 transition-colors duration-200 shadow-sm">
          Delete Issue
        </button>
        <a href="{% url 'mimansha_main:issue_list' %}" 
           class="px-4 py-2 bg-blue-800 text-white rounded-md text-sm hover:bg-blue-900 transition-colors duration-200 shadow-sm text-center">
          Back to List
        </a>
      </div>
    </div>
    
    <!-- Messages Display -->
    {% if messages %}
    <div class="px-6 pt-4">
      {% for message in messages %}
      <div class="alert alert-{{ message.tags }} mb-4 p-4 rounded-md {% if message.tags == 'success' %}bg-green-100 text-green-800{% elif message.tags == 'error' %}bg-red-100 text-red-800{% else %}bg-blue-100 text-blue-800{% endif %}">
        {{ message }}
      </div>
      {% endfor %}
    </div>
    {% endif %}

        <!-- Issue Info Section -->
        <div class="p-6 grid grid-cols-1 md:grid-cols-3 gap-6">
            <!-- Left Column -->
            <div class="md:col-span-2 space-y-6">
              <!-- Status Card -->
              <div class="bg-gray-50 rounded-lg p-4 shadow-sm hover-shadow">
                <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wider">Status</h3>
                <div class="mt-2 flex flex-col sm:flex-row sm:items-center space-y-2 sm:space-y-0 sm:space-x-4">
                  <span class="px-3 py-1 text-xs font-semibold rounded-full 
                    {% if issue.status == 1 %}bg-green-100 text-green-800 border border-green-200
                    {% elif issue.status == 2 %}bg-yellow-100 text-yellow-800 border border-yellow-200
                    {% elif issue.status == 3 %}bg-blue-100 text-blue-800 border border-blue-200
                    {% else %}bg-gray-100 text-gray-800 border border-gray-200{% endif %}">
                    {{ issue.get_status_display }}
                  </span>
                  <form method="post" action="{% url 'mimansha_main:update_issue_status' slug=issue.slug %}" class="flex flex-1 items-center">
                    {% csrf_token %}
                    <select name="status" class="block w-full py-2 pl-3 pr-10 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
                      {% for value, label in status_form.fields.status.choices %}
                        <option value="{{ value }}" {% if value == issue.status %}selected{% endif %}>{{ label }}</option>
                      {% endfor %}
                    </select>
                    <button type="submit" class="ml-2 px-3 py-2 bg-blue-600 text-white rounded-md text-sm hover:bg-blue-700 transition-colors duration-200 shadow-sm">
                      Update
                    </button>
                  </form>
                </div>
              </div>
              
              <!-- Publication Date Card -->
              <div class="bg-gray-50 rounded-lg p-4 shadow-sm hover-shadow">
                <div class="flex justify-between items-center">
                  <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wider">Publication Date</h3>
                  
                </div>
                <p class="mt-2 text-sm text-gray-900 font-medium">
                  {% if issue.publication_date %}
                    {{ issue.publication_date|date:"F j, Y" }}
                  {% else %}
                    Not set
                  {% endif %}
                </p>
              </div>
              
              <!-- Description Card -->
              <div class="bg-gray-50 rounded-lg p-4 shadow-sm hover-shadow">
                <div class="flex justify-between items-center">
                  <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wider">Description</h3>
                  
                </div>
                <div class="mt-2 text-sm text-gray-900 prose max-w-none">
                  {% if issue.description %}
                    {{ issue.description|linebreaks }}
                  {% else %}
                    <p class="text-gray-400">No description provided</p>
                  {% endif %}
                </div>
              </div>
            </div>

                    <!-- Right Column -->
        <div class="space-y-6">
            <!-- Cover Image Card -->
            <div class="bg-gray-50 rounded-lg p-4 shadow-sm hover-shadow">
              <div class="flex justify-between items-center">
                <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wider">Cover Image</h3>
               
              </div>
              <div class="mt-2 relative rounded-lg overflow-hidden shadow-md">
                {% if issue.cover_image %}
                  <img src="{{ issue.cover_image.url }}" alt="Cover Image" class="w-full h-auto object-cover">
                {% else %}
                  <div class="w-full h-48 bg-gray-200 flex items-center justify-center text-gray-400">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                    </svg>
                  </div>
                {% endif %}
              </div>
            </div>
            
            <!-- Issue Metadata -->
            <div class="bg-gray-50 rounded-lg p-4 shadow-sm hover-shadow">
              <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wider">Details</h3>
              <div class="mt-4 space-y-3">
                <div class="flex justify-between">
                  <span class="text-sm text-gray-600">Created</span>
                  <span class="text-sm text-gray-900 font-medium">{{ issue.created_at|date:"M j, Y" }}</span>
                </div>
                <div class="flex justify-between">
                  <span class="text-sm text-gray-600">Last Updated</span>
                  <span class="text-sm text-gray-900 font-medium">{{ issue.ldm|date:"M j, Y" }}</span>
                </div>
                <div class="flex justify-between">
                  <span class="text-sm text-gray-600">Total Blogs</span>
                  <span class="text-sm text-gray-900 font-medium">{{ issue.blogs.count }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

<!-- Blogs Section -->
<div class="border-t border-gray-200 px-6 py-6 bg-gray-50">
    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-4 space-y-3 sm:space-y-0">
      <h3 class="text-lg font-medium text-gray-900">Blogs in this Issue</h3>
      <div class="flex space-x-2">
        <button id="add-blogs-button" class="px-4 py-2 bg-blue-600 text-white rounded-md text-sm hover:bg-blue-700 transition-colors duration-200 shadow-sm">
          Add Blogs
        </button>
        <button id="reorder-blogs-btn" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md text-sm hover:bg-gray-300 transition-colors duration-200 shadow-sm">
          Reorder Blogs
        </button>
      </div>
    </div>
    
    {% if issue.blogs.exists %}
    <div id="blogs-list" class="space-y-3">
      {% for item in issue.issue_items.all %}
      <div data-id="{{ item.id }}" class="group flex items-center justify-between p-4 bg-white border border-gray-200 rounded-lg hover:bg-blue-50 sortable-item blog-item shadow-sm hover:shadow-md transition-all">
        <div class="flex items-center space-x-4 flex-grow overflow-hidden">
          <span class="handle cursor-move text-gray-400 hover:text-gray-600 flex-shrink-0">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
            </svg>
          </span>
          <div class="min-w-0 flex-grow">
            <h4 class="text-sm font-medium text-gray-900 truncate">{{ item.blog.title }}</h4>
            <div class="flex flex-wrap items-center gap-2 mt-1">
              {% if item.blog.authors.exists %}
              <div class="flex items-center text-xs text-gray-500">
                {% for author in item.blog.authors.all %}
                  {{ author.name }}{% if not forloop.last %}, {% endif %}
                {% endfor %}
              </div>
              {% endif %}
              
              {% if item.blog.topic %}
              <span class="badge bg-indigo-100 text-indigo-800 border border-indigo-200">
                {{ item.blog.topic }}
              </span>
              {% endif %}
            </div>
          </div>
        </div>
        <div class="flex items-center space-x-3 opacity-0 group-hover:opacity-100 transition-opacity ml-4 flex-shrink-0">
       
          <button onclick="confirmDelete('{{ item.blog.title }}', '{% url 'mimansha_main:remove_blog_from_issue' issue_slug=issue.slug blog_id=item.blog.id %}')" 
                  class="fas fa-delete tracking-wider text-red-600 hover:text-red-800 text-sm font-medium">
            Remove
          </button>
        </div>
      </div>
      {% endfor %}
    </div>
    {% else %}
    <div class="text-center py-12 bg-white rounded-lg border border-gray-200 shadow-sm">
      <svg xmlns="http://www.w3.org/2000/svg" class="mx-auto h-16 w-16 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
      </svg>
      <h3 class="mt-4 text-lg font-medium text-gray-900">No blogs added yet</h3>
      <p class="mt-2 text-gray-500">Add blogs to this issue to get started.</p>
      <button id="empty-add-blogs-button" class="mt-4 px-4 py-2 bg-blue-600 text-white rounded-md text-sm hover:bg-blue-700 transition-colors duration-200 shadow-sm">
        Add your first blog
      </button>
    </div>
    {% endif %}
</div>

<!-- Delete Confirmation Modal -->
<div id="delete-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
  <div class="bg-white rounded-lg p-6 max-w-md w-full">
    <h3 class="text-lg font-medium text-gray-900">Confirm Removal</h3>
    <p class="mt-2 text-gray-600">Are you sure you want to remove "<span id="blog-title-to-delete"></span>" from this issue?</p>
    <div class="mt-6 flex justify-end space-x-3">
      <button onclick="document.getElementById('delete-modal').classList.add('hidden')" 
              class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md text-sm hover:bg-gray-300 transition-colors duration-200 shadow-sm">
        Cancel
      </button>
      <form id="delete-form" method="post" action="">
        {% csrf_token %}
        <button type="submit" 
                class="px-4 py-2 bg-red-600 text-white rounded-md text-sm hover:bg-red-700 transition-colors duration-200 shadow-sm">
          Remove Blog
        </button>
      </form>
    </div>
  </div>
</div>

<script>
function confirmDelete(title, deleteUrl) {
  const modal = document.getElementById('delete-modal');
  const titleSpan = document.getElementById('blog-title-to-delete');
  const form = document.getElementById('delete-form');
  
  titleSpan.textContent = title;
  form.action = deleteUrl;
  modal.classList.remove('hidden');
}
</script>
    </div>
  </div>

    <!-- Add Blogs Modal -->
    <div id="add-blogs-modal" class="modal-overlay">
        <div class="modal-content">
          <div class="bg-gradient-blue text-white px-6 py-4 flex justify-between items-center">
            <h3 class="text-lg font-medium">Add Blogs to Issue</h3>
            <button id="close-modal-btn" class="text-white hover:text-blue-100 transition-colors">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>
          
          <form method="post" action="{% url 'mimansha_main:add_blogs_to_issue' slug=issue.slug %}" class="p-6">
            {% csrf_token %}
            <div class="mb-4">
              <div class="relative">
                <input type="text" id="blog-search" placeholder="Search blogs..." class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                  </svg>
                </div>
              </div>
            </div>
            
            <div class="max-h-96 overflow-y-auto custom-scrollbar border border-gray-200 rounded-lg bg-gray-50">
              <div class="blogs-selection-container p-4 space-y-4">
                {% for blog in add_blogs_form.blogs %}
                <label class="checkbox-container block w-full">
                  <div class="flex items-start p-4 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 transition-colors cursor-pointer">
                    <div class="mt-1 mr-3 flex items-center">
                      {{ blog.tag }}
                      <span class="checkmark"></span>
                    </div>
                    <div class="flex-1 min-w-0">
                      <h3 class="text-lg font-semibold text-gray-900 truncate">{{ blog.choice_label }}</h3>
                      
                      {% if blog.instance.authors.exists %}
                      <div class="mt-1 flex flex-wrap items-center text-sm text-gray-600">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                        </svg>
                        <span>
                          {% for author in blog.instance.authors.all %}{{ author.name }}{% if not forloop.last %}, {% endif %}{% endfor %}
                        </span>
                      </div>
                      {% endif %}
                      
                      <div class="mt-2 flex flex-wrap gap-2">
                        {% if blog.instance.category %}
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">
                          {{ blog.instance.category.title }}
                        </span>
                        {% endif %}
                        
                        {% if blog.instance.topic %}
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                          {{ blog.instance.topic.title }}
                        </span>
                        {% endif %}
                      </div>
                      
                      {% if blog.instance.published_date %}
                      <div class="mt-2 text-xs text-gray-500">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 inline mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                        </svg>
                        Published on {{ blog.instance.published_date|date:"M d, Y" }}
                      </div>
                      {% endif %}
                    </div>
                  </div>
                </label>
                {% endfor %}
              </div>
            </div>
            
            <div class="mt-6 flex justify-end space-x-3">
              <button type="button" id="cancel-btn" class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 transition-colors">
                Cancel
              </button>
              <button type="submit" class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 transition-colors">
                Add Selected Blogs
              </button>
            </div>
          </form>
        </div>
      </div>



  

    <!-- Delete Confirmation Modal -->
    <div id="delete-confirm-modal" class="modal-overlay">
        <div class="modal-content w-full max-w-md">
          <div class="bg-gradient-to-r from-red-500 to-red-600 text-white px-6 py-4 flex justify-between items-center">
            <h3 class="text-lg font-medium">Confirm Deletion</h3>
            <button id="close-delete-modal-btn" class="text-white hover:text-red-200 transition-colors">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>
          
          <div class="p-6">
            <div class="flex items-center justify-center mb-4">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
              </svg>
            </div>
            
            <p class="text-center text-gray-700 mb-6">
              Are you sure you want to delete this issue? This action cannot be undone and all associated content will be removed.
            </p>
            
            <div class="flex justify-center space-x-4">
              <button id="cancel-delete-btn" class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 transition-colors">
                Cancel
              </button>
              <form id="delete-issue-form" method="post" action="{% url 'mimansha_main:issue_delete' slug=issue.slug %}" class="inline">
                {% csrf_token %}
                <button type="submit" class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-red-600 hover:bg-red-700 transition-colors">
                  Delete Issue
                </button>
              </form>
            </div>
          </div>
        </div>      
</div>  

{% endblock %}

{% block extra_js %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
  // ==================== UTILITY FUNCTIONS ====================
  function displayFlashMessage(type, message) {
    const flashContainer = document.createElement('div');
    flashContainer.className = `fixed top-4 right-4 p-4 rounded-md shadow-lg z-50 ${type === 'error' ? 'bg-red-100 text-red-800' : 'bg-green-100 text-green-800'}`;
    flashContainer.textContent = message;
    document.body.appendChild(flashContainer);
    
    setTimeout(() => {
      flashContainer.remove();
    }, 5000);
  }

  function getCSRFToken() {
    const csrfInput = document.querySelector('[name=csrfmiddlewaretoken]');
    if (!csrfInput) {
      console.error('CSRF token input not found in the DOM');
      displayFlashMessage('error', 'Security token missing. Please refresh the page.');
      return null;
    }
    return csrfInput.value;
  }

  // ==================== INITIAL SETUP ====================
  // Display Django messages if they exist
  const djangoMessages = document.querySelector('.messages');
  if (djangoMessages) {
    const messages = djangoMessages.querySelectorAll('li');
    messages.forEach(msg => {
      const isError = msg.classList.contains('error');
      displayFlashMessage(isError ? 'error' : 'success', msg.textContent);
    });
    djangoMessages.remove();
  }

  // ==================== MODAL HANDLING ====================
  const modals = {
    addBlogs: {
      openBtn: document.getElementById('add-blogs-button') || document.getElementById('empty-add-blogs-button'),
      modal: document.getElementById('add-blogs-modal'),
      closeBtn: document.getElementById('close-modal-btn'),
      cancelBtn: document.getElementById('cancel-btn')
    },
    deleteConfirm: {
      openBtn: document.getElementById('delete-issue-btn'),
      modal: document.getElementById('delete-confirm-modal'),
      closeBtn: document.getElementById('close-delete-modal-btn'),
      cancelBtn: document.getElementById('cancel-delete-btn')
    }
  };

  // Initialize all modals
  Object.values(modals).forEach(modal => {
    if (!modal.modal) return;

    if (modal.openBtn) {
      modal.openBtn.addEventListener('click', () => {
        modal.modal.classList.add('active');
      });
    }

    if (modal.closeBtn) {
      modal.closeBtn.addEventListener('click', () => {
        modal.modal.classList.remove('active');
      });
    }

    if (modal.cancelBtn) {
      modal.cancelBtn.addEventListener('click', () => {
        modal.modal.classList.remove('active');
      });
    }

    // Close when clicking outside
    modal.modal.addEventListener('click', (e) => {
      if (e.target === modal.modal) {
        modal.modal.classList.remove('active');
      }
    });
  });

  // ==================== BLOG SEARCH ====================
  const blogSearch = document.getElementById('blog-search');
  if (blogSearch) {
    blogSearch.addEventListener('input', function() {
      const searchTerm = this.value.toLowerCase().trim();
      const blogItems = document.querySelectorAll('.blogs-selection-container label');

      blogItems.forEach(item => {
        const blogTitle = item.querySelector('h3')?.textContent.toLowerCase() || '';
        item.style.display = blogTitle.includes(searchTerm) ? 'block' : 'none';
      });
    });
  }

  // ==================== DELETE CONFIRMATION ====================
  const deleteIssueBtn = document.getElementById('delete-issue-btn');
  if (deleteIssueBtn) {
    deleteIssueBtn.addEventListener('click', function(e) {
      e.preventDefault();
      const confirmModal = document.getElementById('delete-confirm-modal');
      if (confirmModal) {
        confirmModal.classList.add('active');
      }
    });
  }

  // ==================== BLOG REORDERING ====================
  const reorderBlogsBtn = document.getElementById('reorder-blogs-btn');
  const blogsList = document.getElementById('blogs-list');
  
  if (reorderBlogsBtn && blogsList) {
    let sortableInstance = null;
    let isReordering = false;

    reorderBlogsBtn.addEventListener('click', async function() {
      isReordering = !isReordering;
      const blogItems = document.querySelectorAll('.blog-item');
      
      if (isReordering) {
        // Enter reorder mode
        try {
          this.textContent = 'Save Order';
          this.classList.remove('bg-gray-200', 'text-gray-700');
          this.classList.add('bg-blue-600', 'text-white');
          
          // Show drag handles and hide action buttons
          blogItems.forEach(item => {
            const handle = item.querySelector('.handle');
            const editBtn = item.querySelector('.edit-blog-item-btn');
            const form = item.querySelector('form');
            
            if (handle) handle.classList.remove('opacity-0');
            if (editBtn) editBtn.classList.add('hidden');
            if (form) form.classList.add('hidden');
          });

          // Initialize SortableJS
          sortableInstance = new Sortable(blogsList, {
            animation: 150,
            ghostClass: 'sortable-ghost',
            dragClass: 'sortable-drag',
            handle: '.handle',
            onEnd: function() {
              // Optional: Add visual feedback during drag if needed
            }
          });
        } catch (error) {
          console.error('Error entering reorder mode:', error);
          displayFlashMessage('error', 'Failed to enter reorder mode. Please try again.');
          resetReorderState();
        }
      } else {
        // Exit reorder mode and save order
        // In your reordering code, replace the fetch block with this:

try {
  const csrfToken = getCSRFToken();
  if (!csrfToken) return;

  // Get the new order (1-based index)
  const order = Array.from(document.querySelectorAll('.blog-item')).map(item => item.dataset.id);
  
  console.log('Sending order:', order);

  const response = await fetch("{% url 'mimansha_main:update_issue_item_order' slug=issue.slug %}", {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-CSRFToken': csrfToken,
      'X-Requested-With': 'XMLHttpRequest'
    },
    body: JSON.stringify({ order: order })
  });

  const data = await response.json();
  
  if (!response.ok) {
    throw new Error(data.error || `Server returned ${response.status}`);
  }

  if (!data.success) {
    throw new Error(data.error || 'Failed to save order');
  }

  displayFlashMessage('success', 'Order updated successfully!');
  resetReorderState();
} catch (error) {
  console.error('Error saving order:', error);
  displayFlashMessage('error', 
    error.message.includes('already exists') 
      ? 'Please try reordering again' 
      : error.message || 'Failed to save order'
  );
}      
}

      function resetReorderState() {
        isReordering = false;
        reorderBlogsBtn.textContent = 'Reorder Blogs';
        reorderBlogsBtn.classList.remove('bg-blue-600', 'text-white');
        reorderBlogsBtn.classList.add('bg-gray-200', 'text-gray-700');
        
        blogItems.forEach(item => {
          const handle = item.querySelector('.handle');
          const editBtn = item.querySelector('.edit-blog-item-btn');
          const form = item.querySelector('form');
          
          if (handle) handle.classList.add('opacity-0');
          if (editBtn) editBtn.classList.remove('hidden');
          if (form) form.classList.remove('hidden');
        });

        if (sortableInstance) {
          sortableInstance.destroy();
          sortableInstance = null;
        }
      }
    });

    // Cleanup when leaving the page
    window.addEventListener('beforeunload', function() {
      if (sortableInstance) {
        sortableInstance.destroy();
      }
    });
  }

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