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

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

{% block extra_css %}
<style>
    .video-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 1.5rem;
    }
    
    .video-item {
        position: relative;
        border-radius: 8px;
        overflow: hidden;
        border: 2px solid #e5e7eb;
        background: white;
    }
    
    .video-item video {
        width: 100%;
        height: 200px;
        object-fit: cover;
    }
    
    .video-item-actions {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        display: flex;
        space-x: 0.25rem;
    }
    
    .video-item-info {
        padding: 1rem;
    }
    
    .video-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;
    }
    
    .video-preview {
        max-width: 100%;
        max-height: 200px;
        border-radius: 8px;
        margin-top: 1rem;
    }
    
    .video-type-badge {
        display: inline-block;
        padding: 0.25rem 0.75rem;
        border-radius: 9999px;
        font-size: 0.75rem;
        font-weight: 500;
        margin-bottom: 0.5rem;
    }
    
    .type-upload { background: #dbeafe; color: #1e40af; }
    .type-youtube { background: #fecaca; color: #dc2626; }
    .type-vimeo { background: #c7d2fe; color: #4338ca; }
    .type-embed { background: #d1fae5; color: #065f46; }
</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 Video</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="openAddVideoModal()" 
                    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 Video
            </button>
        </div>
    </div>

    <!-- Upload Form Modal -->
    <div id="addVideoModal" 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-2xl w-full">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-medium text-gray-900">Tambah Video</h3>
                </div>
                <form method="post" enctype="multipart/form-data" id="videoForm">
                    {% csrf_token %}
                    <div class="px-6 py-4 space-y-4">
                        <!-- Video Type Selection -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Tipe Video</label>
                            <div class="grid grid-cols-2 gap-4">
                                <label class="relative">
                                    <input type="radio" name="video_type" value="upload" class="sr-only" checked>
                                    <div class="border-2 border-gray-200 rounded-lg p-4 cursor-pointer hover:border-blue-500 video-type-option" data-type="upload">
                                        <div class="text-center">
                                            <i class="fas fa-upload text-2xl text-gray-400 mb-2"></i>
                                            <div class="font-medium">Upload File</div>
                                            <div class="text-sm text-gray-500">Upload video dari komputer</div>
                                        </div>
                                    </div>
                                </label>
                                <label class="relative">
                                    <input type="radio" name="video_type" value="youtube" class="sr-only">
                                    <div class="border-2 border-gray-200 rounded-lg p-4 cursor-pointer hover:border-blue-500 video-type-option" data-type="youtube">
                                        <div class="text-center">
                                            <i class="fab fa-youtube text-2xl text-red-500 mb-2"></i>
                                            <div class="font-medium">YouTube</div>
                                            <div class="text-sm text-gray-500">Embed dari YouTube</div>
                                        </div>
                                    </div>
                                </label>
                                <label class="relative">
                                    <input type="radio" name="video_type" value="vimeo" class="sr-only">
                                    <div class="border-2 border-gray-200 rounded-lg p-4 cursor-pointer hover:border-blue-500 video-type-option" data-type="vimeo">
                                        <div class="text-center">
                                            <i class="fab fa-vimeo text-2xl text-blue-500 mb-2"></i>
                                            <div class="font-medium">Vimeo</div>
                                            <div class="text-sm text-gray-500">Embed dari Vimeo</div>
                                        </div>
                                    </div>
                                </label>
                                <label class="relative">
                                    <input type="radio" name="video_type" value="embed" class="sr-only">
                                    <div class="border-2 border-gray-200 rounded-lg p-4 cursor-pointer hover:border-blue-500 video-type-option" data-type="embed">
                                        <div class="text-center">
                                            <i class="fas fa-code text-2xl text-gray-400 mb-2"></i>
                                            <div class="font-medium">Embed Code</div>
                                            <div class="text-sm text-gray-500">Kode embed HTML</div>
                                        </div>
                                    </div>
                                </label>
                            </div>
                        </div>

                        <!-- Upload File -->
                        <div id="uploadFileSection" class="video-section">
                            <label class="block text-sm font-medium text-gray-700 mb-2">File Video</label>
                            <div class="upload-area" id="uploadArea">
                                <i class="fas fa-video text-4xl text-gray-400 mb-2"></i>
                                <p class="text-sm text-gray-600">Drag & drop video atau klik untuk memilih</p>
                                <input type="file" name="video_file" id="id_video_file" accept="video/*" class="hidden">
                            </div>
                            <video id="videoPreview" class="video-preview hidden" controls></video>
                        </div>

                        <!-- YouTube URL -->
                        <div id="youtubeSection" class="video-section hidden">
                            <label for="id_youtube_url" class="block text-sm font-medium text-gray-700 mb-2">YouTube URL</label>
                            <input type="url" name="youtube_url" id="id_youtube_url" 
                                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                   placeholder="https://www.youtube.com/watch?v=...">
                        </div>

                        <!-- Vimeo URL -->
                        <div id="vimeoSection" class="video-section hidden">
                            <label for="id_vimeo_url" class="block text-sm font-medium text-gray-700 mb-2">Vimeo URL</label>
                            <input type="url" name="vimeo_url" id="id_vimeo_url" 
                                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                   placeholder="https://vimeo.com/...">
                        </div>

                        <!-- Embed Code -->
                        <div id="embedSection" class="video-section hidden">
                            <label for="id_embed_code" class="block text-sm font-medium text-gray-700 mb-2">Embed Code</label>
                            <textarea name="embed_code" id="id_embed_code" rows="4"
                                      class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                      placeholder="<iframe src='...'></iframe>"></textarea>
                        </div>

                        <!-- Common Fields -->
                        <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 video">
                        </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="closeAddVideoModal()" 
                                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>

    <!-- Video Grid -->
    {% if videos %}
    <div class="video-grid">
        {% for video in videos %}
        <div class="video-item">
            {% if video.video_type == 'upload' %}
                <video controls>
                    <source src="{{ video.video_file.url }}" type="video/mp4">
                    Browser tidak mendukung video.
                </video>
            {% elif video.video_type == 'youtube' %}
                <div class="relative" style="padding-bottom: 56.25%; height: 0;">
                    <iframe src="{{ video.youtube_url|add:'?autoplay=0&rel=0' }}" 
                            frameborder="0" allowfullscreen
                            class="absolute top-0 left-0 w-full h-full"></iframe>
                </div>
            {% elif video.video_type == 'vimeo' %}
                <div class="relative" style="padding-bottom: 56.25%; height: 0;">
                    <iframe src="{{ video.vimeo_url|add:'?autoplay=0' }}" 
                            frameborder="0" allowfullscreen
                            class="absolute top-0 left-0 w-full h-full"></iframe>
                </div>
            {% elif video.video_type == 'embed' %}
                <div class="p-4 bg-gray-100 text-center">
                    <i class="fas fa-code text-2xl text-gray-400 mb-2"></i>
                    <p class="text-sm text-gray-600">Embed Video</p>
                </div>
            {% endif %}
            
            <div class="video-item-actions">
                <button onclick="editVideo({{ video.pk }}, '{{ video.video_type }}', '{{ video.caption }}', '{{ video.alt_text }}', {{ video.order }}, '{{ video.youtube_url|default:'' }}', '{{ video.vimeo_url|default:'' }}', '{{ video.embed_code|default:'' }}')" 
                        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_video_delete' video.pk %}" class="inline">
                    {% csrf_token %}
                    <button type="submit" onclick="return confirm('Hapus video 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="video-item-info">
                <div class="video-type-badge type-{{ video.video_type }}">
                    {{ video.get_video_type_display }}
                </div>
                {% if video.caption %}
                <div class="video-item-caption">{{ video.caption }}</div>
                {% endif %}
                <div class="text-xs text-gray-500 mt-1">
                    Urutan: {{ video.order }}
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="text-center py-12">
        <i class="fas fa-video text-6xl text-gray-300 mb-4"></i>
        <h3 class="text-lg font-medium text-gray-900 mb-2">Belum ada video</h3>
        <p class="text-gray-500 mb-4">Tambahkan video untuk membuat konten yang lebih menarik</p>
        <button onclick="openAddVideoModal()" 
                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 Video Pertama
        </button>
    </div>
    {% endif %}
</div>

<!-- Edit Video Modal -->
<div id="editVideoModal" 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-2xl w-full">
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-medium text-gray-900">Edit Video</h3>
            </div>
            <form method="post" action="" id="editVideoForm">
                {% 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="closeEditVideoModal()" 
                            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 openAddVideoModal() {
    document.getElementById('addVideoModal').classList.remove('hidden');
}

function closeAddVideoModal() {
    document.getElementById('addVideoModal').classList.add('hidden');
    document.getElementById('videoForm').reset();
    document.getElementById('videoPreview').classList.add('hidden');
    showVideoSection('upload');
}

function openEditVideoModal() {
    document.getElementById('editVideoModal').classList.remove('hidden');
}

function closeEditVideoModal() {
    document.getElementById('editVideoModal').classList.add('hidden');
}

function editVideo(pk, videoType, caption, altText, order, youtubeUrl, vimeoUrl, embedCode) {
    document.getElementById('edit_caption').value = caption || '';
    document.getElementById('edit_alt_text').value = altText || '';
    document.getElementById('edit_order').value = order || 0;
    document.getElementById('editVideoForm').action = `/admin/blog/videos/${pk}/edit/`;
    openEditVideoModal();
}

// Video type selection
document.querySelectorAll('input[name="video_type"]').forEach(radio => {
    radio.addEventListener('change', function() {
        showVideoSection(this.value);
    });
});

document.querySelectorAll('.video-type-option').forEach(option => {
    option.addEventListener('click', function() {
        const radio = this.querySelector('input[type="radio"]');
        radio.checked = true;
        showVideoSection(radio.value);
    });
});

function showVideoSection(type) {
    // Hide all sections
    document.querySelectorAll('.video-section').forEach(section => {
        section.classList.add('hidden');
    });
    
    // Show selected section
    const sectionId = type + 'Section';
    const section = document.getElementById(sectionId);
    if (section) {
        section.classList.remove('hidden');
    }
    
    // Update required fields
    const requiredFields = {
        'upload': ['id_video_file'],
        'youtube': ['id_youtube_url'],
        'vimeo': ['id_vimeo_url'],
        'embed': ['id_embed_code']
    };
    
    // Remove required from all fields
    document.querySelectorAll('input, textarea').forEach(field => {
        field.removeAttribute('required');
    });
    
    // Add required to current type fields
    if (requiredFields[type]) {
        requiredFields[type].forEach(fieldId => {
            const field = document.getElementById(fieldId);
            if (field) field.setAttribute('required', 'required');
        });
    }
}

// Upload area functionality
const uploadArea = document.getElementById('uploadArea');
const fileInput = document.getElementById('id_video_file');
const videoPreview = document.getElementById('videoPreview');

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;
        previewVideo(files[0]);
    }
});

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

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

// Close modals when clicking outside
document.addEventListener('click', (e) => {
    if (e.target.id === 'addVideoModal') {
        closeAddVideoModal();
    }
    if (e.target.id === 'editVideoModal') {
        closeEditVideoModal();
    }
});

// Initialize with upload section
showVideoSection('upload');
</script>
{% endblock %}