{% extends 'admin/base.html' %}
{% load static %}

{% block title %}Kelola Gallery - {{ post.judul }}{% endblock %}
{% block page_title %}Kelola Gallery{% endblock %}

{% block extra_css %}
<style>
    .gallery-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 1.5rem;
    }
    
    .gallery-item {
        position: relative;
        border-radius: 8px;
        overflow: hidden;
        border: 2px solid #e5e7eb;
        background: white;
    }
    
    .gallery-item img {
        width: 100%;
        height: 150px;
        object-fit: cover;
    }
    
    .gallery-item-actions {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        display: flex;
        space-x: 0.25rem;
    }
    
    .gallery-item-info {
        padding: 1rem;
    }
    
    .gallery-item-caption {
        font-size: 0.875rem;
        color: #6b7280;
        margin-top: 0.5rem;
    }
    
    .upload-area {
        border: 2px dashed #d1d5db;
        border-radius: 8px;
        padding: 2rem;
        text-align: center;
        background: #f9fafb;
        transition: all 0.3s ease;
    }
    
    .upload-area:hover {
        border-color: #3b82f6;
        background: #eff6ff;
    }
    
    .upload-area.dragover {
        border-color: #3b82f6;
        background: #eff6ff;
    }
    
    .image-preview {
        max-width: 100%;
        max-height: 200px;
        border-radius: 8px;
        margin-top: 1rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="space-y-6">
    <!-- Header -->
    <div class="flex justify-between items-center">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">Kelola Gallery</h1>
            <p class="text-gray-600 mt-1">{{ post.judul }}</p>
        </div>
        <div class="flex space-x-3">
            <a href="{% url 'admin_panel:blog_detail' post.pk %}" 
               class="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-arrow-left mr-2"></i>
                Kembali ke Detail
            </a>
            <button onclick="openAddImageModal()" 
                    class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700">
                <i class="fas fa-plus mr-2"></i>
                Tambah Gambar
            </button>
        </div>
    </div>

    <!-- Upload Form Modal -->
    <div id="addImageModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden z-50">
        <div class="flex items-center justify-center min-h-screen p-4">
            <div class="bg-white rounded-lg shadow-xl max-w-md w-full">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-medium text-gray-900">Tambah Gambar ke Gallery</h3>
                </div>
                <form method="post" enctype="multipart/form-data" id="imageForm">
                    {% csrf_token %}
                    <div class="px-6 py-4 space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Gambar</label>
                            <div class="upload-area" id="uploadArea">
                                <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-2"></i>
                                <p class="text-sm text-gray-600">Drag & drop gambar atau klik untuk memilih</p>
                                <input type="file" name="gambar" id="id_gambar" accept="image/*" class="hidden" required>
                            </div>
                            <img id="imagePreview" class="image-preview hidden" alt="Preview">
                        </div>
                        <div>
                            <label for="id_caption" class="block text-sm font-medium text-gray-700 mb-2">Caption</label>
                            <input type="text" name="caption" id="id_caption" 
                                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                   placeholder="Masukkan caption gambar">
                        </div>
                        <div>
                            <label for="id_alt_text" class="block text-sm font-medium text-gray-700 mb-2">Alt Text</label>
                            <input type="text" name="alt_text" id="id_alt_text" 
                                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                   placeholder="Masukkan alt text untuk aksesibilitas">
                        </div>
                        <div>
                            <label for="id_order" class="block text-sm font-medium text-gray-700 mb-2">Urutan</label>
                            <input type="number" name="order" id="id_order" value="0" min="0"
                                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                        </div>
                    </div>
                    <div class="px-6 py-4 bg-gray-50 flex justify-end space-x-3">
                        <button type="button" onclick="closeAddImageModal()" 
                                class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50">
                            Batal
                        </button>
                        <button type="submit" 
                                class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700">
                            Simpan
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Gallery Grid -->
    {% if images %}
    <div class="gallery-grid">
        {% for image in images %}
        <div class="gallery-item">
            <img src="{{ image.gambar.url }}" alt="{{ image.alt_text|default:image.caption }}">
            <div class="gallery-item-actions">
                <button onclick="editImage({{ image.pk }}, '{{ image.caption }}', '{{ image.alt_text }}', {{ image.order }})" 
                        class="p-1 text-blue-600 hover:text-blue-800 bg-white rounded-full shadow-sm">
                    <i class="fas fa-edit text-xs"></i>
                </button>
                <form method="post" action="{% url 'admin_panel:blog_gallery_delete' image.pk %}" class="inline">
                    {% csrf_token %}
                    <button type="submit" onclick="return confirm('Hapus gambar ini?')" 
                            class="p-1 text-red-600 hover:text-red-800 bg-white rounded-full shadow-sm">
                        <i class="fas fa-trash text-xs"></i>
                    </button>
                </form>
            </div>
            <div class="gallery-item-info">
                {% if image.caption %}
                <div class="gallery-item-caption">{{ image.caption }}</div>
                {% endif %}
                <div class="text-xs text-gray-500 mt-1">
                    Urutan: {{ image.order }}
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="text-center py-12">
        <i class="fas fa-images text-6xl text-gray-300 mb-4"></i>
        <h3 class="text-lg font-medium text-gray-900 mb-2">Belum ada gambar</h3>
        <p class="text-gray-500 mb-4">Tambahkan gambar untuk membuat gallery yang menarik</p>
        <button onclick="openAddImageModal()" 
                class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700">
            <i class="fas fa-plus mr-2"></i>
            Tambah Gambar Pertama
        </button>
    </div>
    {% endif %}
</div>

<!-- Edit Image Modal -->
<div id="editImageModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden z-50">
    <div class="flex items-center justify-center min-h-screen p-4">
        <div class="bg-white rounded-lg shadow-xl max-w-md w-full">
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-medium text-gray-900">Edit Gambar</h3>
            </div>
            <form method="post" action="" id="editImageForm">
                {% csrf_token %}
                <div class="px-6 py-4 space-y-4">
                    <div>
                        <label for="edit_caption" class="block text-sm font-medium text-gray-700 mb-2">Caption</label>
                        <input type="text" name="caption" id="edit_caption" 
                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label for="edit_alt_text" class="block text-sm font-medium text-gray-700 mb-2">Alt Text</label>
                        <input type="text" name="alt_text" id="edit_alt_text" 
                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label for="edit_order" class="block text-sm font-medium text-gray-700 mb-2">Urutan</label>
                        <input type="number" name="order" id="edit_order" min="0"
                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                </div>
                <div class="px-6 py-4 bg-gray-50 flex justify-end space-x-3">
                    <button type="button" onclick="closeEditImageModal()" 
                            class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50">
                        Batal
                    </button>
                    <button type="submit" 
                            class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700">
                        Update
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function openAddImageModal() {
    document.getElementById('addImageModal').classList.remove('hidden');
}

function closeAddImageModal() {
    document.getElementById('addImageModal').classList.add('hidden');
    document.getElementById('imageForm').reset();
    document.getElementById('imagePreview').classList.add('hidden');
}

function openEditImageModal() {
    document.getElementById('editImageModal').classList.remove('hidden');
}

function closeEditImageModal() {
    document.getElementById('editImageModal').classList.add('hidden');
}

function editImage(pk, caption, altText, order) {
    document.getElementById('edit_caption').value = caption || '';
    document.getElementById('edit_alt_text').value = altText || '';
    document.getElementById('edit_order').value = order || 0;
    document.getElementById('editImageForm').action = `/admin/blog/gallery/${pk}/edit/`;
    openEditImageModal();
}

// Upload area functionality
const uploadArea = document.getElementById('uploadArea');
const fileInput = document.getElementById('id_gambar');
const imagePreview = document.getElementById('imagePreview');

uploadArea.addEventListener('click', () => fileInput.click());

uploadArea.addEventListener('dragover', (e) => {
    e.preventDefault();
    uploadArea.classList.add('dragover');
});

uploadArea.addEventListener('dragleave', () => {
    uploadArea.classList.remove('dragover');
});

uploadArea.addEventListener('drop', (e) => {
    e.preventDefault();
    uploadArea.classList.remove('dragover');
    const files = e.dataTransfer.files;
    if (files.length > 0) {
        fileInput.files = files;
        previewImage(files[0]);
    }
});

fileInput.addEventListener('change', (e) => {
    if (e.target.files.length > 0) {
        previewImage(e.target.files[0]);
    }
});

function previewImage(file) {
    const reader = new FileReader();
    reader.onload = (e) => {
        imagePreview.src = e.target.result;
        imagePreview.classList.remove('hidden');
    };
    reader.readAsDataURL(file);
}

// Close modals when clicking outside
document.addEventListener('click', (e) => {
    if (e.target.id === 'addImageModal') {
        closeAddImageModal();
    }
    if (e.target.id === 'editImageModal') {
        closeEditImageModal();
    }
});
</script>
{% endblock %}