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

{% block content %}
<div class="min-h-screen bg-gradient-to-br from-indigo-50 to-purple-50 py-10 px-4 sm:px-6 lg:px-8">
  <div class="max-w-4xl mx-auto">
    <div class="text-center mb-8">
      <h1 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
        {% if form.instance.pk %}Update{% else %}Create{% endif %} Magazine Issue
      </h1>
      <p class="mt-3 text-xl text-gray-600">
        {% if form.instance.pk %}Update the details of your existing issue{% else %}Fill in the details to create a new magazine issue{% endif %}
      </p>
    </div>
    
    <div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-100 hover:shadow-lg transition-shadow duration-300">
      <div class="p-6 sm:p-8">
        <form method="post" enctype="multipart/form-data" class="space-y-8">
          {% csrf_token %}
          
          {% if form.non_field_errors %}
            <div class="p-4 rounded-lg bg-red-50 border-l-4 border-red-500">
              <div class="flex">
                <div class="flex-shrink-0">
                  <svg class="h-5 w-5 text-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
                  </svg>
                </div>
                <div class="ml-3">
                  <h3 class="text-sm font-medium text-red-800">
                    There were errors with your submission
                  </h3>
                  <div class="mt-2 text-sm text-red-700">
                    {{ form.non_field_errors }}
                  </div>
                </div>
              </div>
            </div>
          {% endif %}
          
          <div class="grid grid-cols-1 gap-8 md:grid-cols-2">
            <!-- Left Column -->
            <div class="space-y-6">
              <!-- Name Field -->
              <div class="relative">
                <input 
                  type="text" 
                  id="{{ form.name.id_for_label }}" 
                  name="{{ form.name.name }}" 
                  value="{{ form.name.value|default:'' }}"
                  class="w-full px-3 pt-6 pb-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors duration-200"
                  placeholder=" "
                  required
                >
                <label for="{{ form.name.id_for_label }}" class="absolute top-2 left-3 text-xs font-medium text-indigo-600 transition-all duration-200">
                  {{ form.name.label }}
                </label>
                {% if form.name.errors %}
                  <p class="mt-1 text-sm text-red-600">{{ form.name.errors.0 }}</p>
                {% endif %}
              </div>
              
              <!-- Issue Number Field -->
              <div class="relative">
                <input 
                  type="number" 
                  id="{{ form.issue_number.id_for_label }}" 
                  name="{{ form.issue_number.name }}" 
                  value="{{ form.issue_number.value|default:'' }}"
                  class="w-full px-3 pt-6 pb-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors duration-200"
                  placeholder=" "
                  required
                >
                <label for="{{ form.issue_number.id_for_label }}" class="absolute top-2 left-3 text-xs font-medium text-indigo-600 transition-all duration-200">
                  {{ form.issue_number.label }}
                </label>
                {% if form.issue_number.errors %}
                  <p class="mt-1 text-sm text-red-600">{{ form.issue_number.errors.0 }}</p>
                {% endif %}
              </div>
              
              <!-- Status Field -->
              <div class="relative">
                <select 
                  id="{{ form.status.id_for_label }}" 
                  name="{{ form.status.name }}"
                  class="w-full px-3 pt-6 pb-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 appearance-none bg-no-repeat bg-right-4 transition-colors duration-200"
                  style="background-image: url('data:image/svg+xml;charset=US-ASCII,<svg width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 10l5 5 5-5z\" fill=\"%236B7280\"/></svg>'); background-position: right 0.5rem center; background-size: 1.5em 1.5em;"
                  required
                >
                  {% for value, label in form.status.field.choices %}
                    <option value="{{ value }}" {% if form.status.value == value %}selected{% endif %}>{{ label }}</option>
                  {% endfor %}
                </select>
                <label for="{{ form.status.id_for_label }}" class="absolute top-2 left-3 text-xs font-medium text-indigo-600 transition-all duration-200">
                  {{ form.status.label }}
                </label>
                {% if form.status.errors %}
                  <p class="mt-1 text-sm text-red-600">{{ form.status.errors.0 }}</p>
                {% endif %}
              </div>
              
              <!-- Publication Date Field -->
              <div id="publication-date-container" class="relative {% if form.status.value != '1' and form.status.value != '3' %}hidden{% endif %}">
                <input 
                  type="date" 
                  id="{{ form.publication_date.id_for_label }}" 
                  name="{{ form.publication_date.name }}" 
                  value="{{ form.publication_date.value|default:'' }}"
                  class="w-full px-3 pt-6 pb-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors duration-200"
                  placeholder=" "
                  {% if form.status.value == '1' or form.status.value == '3' %}required{% endif %}
                >
                <label for="{{ form.publication_date.id_for_label }}" class="absolute top-2 left-3 text-xs font-medium text-indigo-600 transition-all duration-200">
                  {{ form.publication_date.label }}
                </label>
                {% if form.publication_date.errors %}
                  <p class="mt-1 text-sm text-red-600">{{ form.publication_date.errors.0 }}</p>
                {% endif %}
              </div>
              
              <!-- Description Field -->
              <div class="relative">
                <textarea 
                  id="{{ form.description.id_for_label }}" 
                  name="{{ form.description.name }}"
                  rows="4"
                  class="w-full px-3 pt-6 pb-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors duration-200"
                  placeholder=" "
                >{{ form.description.value|default:'' }}</textarea>
                <label for="{{ form.description.id_for_label }}" class="absolute top-2 left-3 text-xs font-medium text-indigo-600 transition-all duration-200">
                  {{ form.description.label }}
                </label>
                {% if form.description.errors %}
                  <p class="mt-1 text-sm text-red-600">{{ form.description.errors.0 }}</p>
                {% endif %}
              </div>
            </div>
            
            <!-- Right Column -->
            <div class="space-y-6">
              <!-- Cover Image Field -->
              <div class="bg-gray-50 p-6 rounded-lg">
                <label class="block text-sm font-medium text-gray-700 mb-2">
                  {{ form.cover_image.label }}
                </label>
                
                <div class="mt-1">
                  <div class="relative">
                    <input 
                      type="file" 
                      id="{{ form.cover_image.id_for_label }}" 
                      name="{{ form.cover_image.name }}"
                      class="absolute inset-0 w-full h-full opacity-0 z-10 cursor-pointer"
                      accept="image/*"
                    >
                    <div class="w-full flex flex-col items-center px-4 py-6 bg-white rounded-lg border-2 border-dashed border-gray-300 text-center hover:border-indigo-500 transition-colors duration-200">
                      <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
                        <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                      </svg>
                      <span class="mt-2 block text-sm font-medium text-gray-900">
                        {% if form.instance.cover_image %}
                          Change cover image
                        {% else %}
                          Upload a cover image
                        {% endif %}
                      </span>
                      <span class="mt-1 text-xs text-gray-500">
                        PNG, JPG, GIF up to 5MB
                      </span>
                    </div>
                  </div>
                  
                  {% if form.cover_image.errors %}
                    <p class="mt-1 text-sm text-red-600">{{ form.cover_image.errors.0 }}</p>
                  {% endif %}
                  
                  {% if form.instance.cover_image %}
                    <div class="mt-4 flex flex-col items-center">
                      <div class="relative group overflow-hidden rounded-lg transform transition-transform duration-300 hover:scale-105">
                        <img src="{{ form.instance.cover_image.url }}" alt="Current cover" class="h-48 w-auto object-cover rounded-lg shadow-md">
                        <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg">
                          <span class="text-white font-medium">Current Cover</span>
                        </div>
                      </div>
                      <label class="mt-3 inline-flex items-center">
                        <input type="checkbox" name="cover_image-clear" id="cover_image-clear_id" class="h-4 w-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500">
                        <span class="ml-2 text-sm text-gray-600">Remove current cover image</span>
                      </label>
                    </div>
                  {% endif %}
                </div>
              </div>
              
              <!-- Preview section for new cover image -->
              <div id="image-preview-container" class="hidden mt-4 flex flex-col items-center">
                <!-- JavaScript will fill this -->
              </div>
              
              <!-- Additional info or tips -->
              <div class="bg-blue-50 p-4 rounded-lg">
                <h4 class="font-medium text-blue-700 flex items-center">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2h-1V9a1 1 0 00-1-1z" clip-rule="evenodd" />
                  </svg>
                  Tips
                </h4>
                <ul class="mt-2 text-sm text-blue-700 space-y-1">
                  <li>• Status "Published" or "Scheduled" requires a publication date</li>
                  <li>• Cover images improve visibility and engagement</li>
                  <li>• Detailed descriptions help readers understand the issue content</li>
                </ul>
              </div>
            </div>
          </div>
          
          <!-- Form Actions -->
          <div class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-4 mt-8 pt-4 border-t border-gray-200">
            <a href="{% if form.instance.pk %}{% url 'mimansha_main:issue_detail' slug=form.instance.slug %}{% else %}{% url 'mimansha_main:issue_list' %}{% endif %}"
               class="relative overflow-hidden mt-3 sm:mt-0 inline-flex justify-center items-center px-6 py-3 border border-gray-300 shadow-sm text-base font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-all duration-200">
              <svg class="-ml-1 mr-2 h-5 w-5 text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd" />
              </svg>
              Cancel
            </a>
            <button type="submit" class="relative overflow-hidden inline-flex justify-center items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transform hover:-translate-y-0.5 transition-all duration-200">
              <svg class="-ml-1 mr-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
              </svg>
              {% if form.instance.pk %}Update Issue{% else %}Create Issue{% endif %}
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/browser-image-compression@2.0.2/dist/browser-image-compression.min.js"></script>
<script src="{% static 'js/image_processor.js' %}"></script>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Set today's date as default if publication date is empty
    const dateInput = document.querySelector('input[type="date"]');
    if (dateInput && !dateInput.value) {
      const today = new Date();
      const year = today.getFullYear();
      const month = String(today.getMonth() + 1).padStart(2, '0');
      const day = String(today.getDate()).padStart(2, '0');
      dateInput.value = `${year}-${month}-${day}`;
    }

    // Handle status change to show/hide publication date
    const statusField = document.getElementById('{{ form.status.id_for_label }}');
    const publicationDateContainer = document.getElementById('publication-date-container');
    const publicationDateInput = document.getElementById('{{ form.publication_date.id_for_label }}');

    function togglePublicationDate() {
      const status = statusField.value;
      if (status === '1' || status === '3') { // Published or Scheduled
        publicationDateContainer.classList.remove('hidden');
        publicationDateInput.required = true;
      } else {
        publicationDateContainer.classList.add('hidden');
        publicationDateInput.required = false;
      }
    }

    if (statusField) {
      statusField.addEventListener('change', togglePublicationDate);
      // Initial check
      togglePublicationDate();
    }
  });
</script>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    new ImageUploader({
      inputSelector: '#{{ form.cover_image.id_for_label }}',
      previewSelector: '#image-preview-container',
      slugifyFrom: '#{{ form.name.id_for_label }}', // Optional
      maxSizeMB: 1,                   // Optional
      maxWidth: 1200                  // Optional
    });
  });
</script>
{% endblock %}