{% extends 'video_help/admin/base.html' %}

{% block title %}Videos - Video Help Admin{% endblock %}
{% block page_title %}Manage Videos{% endblock %}

{% block content %}
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
        <span><i class="fas fa-video me-2"></i>All Videos</span>
        <div class="d-flex gap-2 align-items-center">
            <!-- Category Filter -->
            <select class="form-select form-select-sm" 
                    id="categoryFilter" 
                    style="width: auto;"
                    onchange="filterByCategory(this.value)">
                <option value="">All Categories</option>
                {% for cat in categories %}
                    <option value="{{ cat.id }}" {% if selected_category == cat.id|stringformat:"i" %}selected{% endif %}>
                        {{ cat.name }}
                    </option>
                {% endfor %}
            </select>
            <a href="{% url 'video_help:video_add' %}" class="btn btn-success btn-sm">
                <i class="fas fa-plus me-1"></i> Add Video
            </a>
        </div>
    </div>
    <div class="card-body p-0">
        <table class="table table-hover mb-0">
            <thead>
                <tr>
                    <th style="width: 40px;"></th>
                    <th style="width: 100px;">Thumbnail</th>
                    <th>Title</th>
                    <th>Category</th>
                    <th>Duration</th>
                    <th style="width: 100px;">Status</th>
                    <th style="width: 150px;">Actions</th>
                </tr>
            </thead>
            <tbody id="sortable-videos">
                {% for video in videos %}
                <tr data-id="{{ video.id }}">
                    <td>
                        <span class="sortable-handle">
                            <i class="fas fa-grip-vertical"></i>
                        </span>
                    </td>
                    <td>
                        <img src="{{ video.thumbnail_url }}" 
                             alt="{{ video.title }}" 
                             class="video-thumbnail"
                             onerror="this.src='https://via.placeholder.com/80x45?text=No+Image'">
                    </td>
                    <td>
                        <strong>{{ video.title }}</strong>
                        {% if video.description %}
                            <br><small class="text-muted">{{ video.description|truncatewords:10 }}</small>
                        {% endif %}
                    </td>
                    <td>
                        <span class="badge bg-primary">{{ video.category.name }}</span>
                    </td>
                    <td>
                        {% if video.duration %}
                            <i class="fas fa-clock text-muted me-1"></i>{{ video.duration }}
                        {% else %}
                            <span class="text-muted">-</span>
                        {% endif %}
                    </td>
                    <td>
                        <label class="toggle-switch">
                            <input type="checkbox" 
                                   {% if video.is_active %}checked{% endif %}
                                   onchange="toggleStatus('video', {{ video.id }}, this)">
                            <span class="toggle-slider"></span>
                        </label>
                    </td>
                    <td>
                        <a href="https://youtube.com/watch?v={{ video.youtube_id }}" 
                           target="_blank"
                           class="btn btn-sm btn-outline-danger btn-action" 
                           title="Watch on YouTube">
                            <i class="fab fa-youtube"></i>
                        </a>
                        <a href="{% url 'video_help:video_edit' video.id %}" 
                           class="btn btn-sm btn-outline-primary btn-action" 
                           title="Edit">
                            <i class="fas fa-edit"></i>
                        </a>
                        <a href="{% url 'video_help:video_delete' video.id %}" 
                           class="btn btn-sm btn-outline-danger btn-action" 
                           title="Delete">
                            <i class="fas fa-trash"></i>
                        </a>
                    </td>
                </tr>
                {% empty %}
                <tr>
                    <td colspan="7" class="text-center py-5">
                        <div class="text-muted">
                            <i class="fas fa-video-slash fa-3x mb-3 d-block"></i>
                            No videos found.<br>
                            <a href="{% url 'video_help:video_add' %}" class="btn btn-success mt-3">
                                <i class="fas fa-plus me-1"></i> Add Your First Video
                            </a>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    function filterByCategory(categoryId) {
        const url = new URL(window.location.href);
        if (categoryId) {
            url.searchParams.set('category', categoryId);
        } else {
            url.searchParams.delete('category');
        }
        window.location.href = url.toString();
    }
    
    // Sortable for drag & drop ordering
    {% if videos %}
    const sortable = new Sortable(document.getElementById('sortable-videos'), {
        animation: 150,
        handle: '.sortable-handle',
        ghostClass: 'sortable-ghost',
        onEnd: function(evt) {
            const rows = document.querySelectorAll('#sortable-videos tr');
            const order = [];
            rows.forEach((row, index) => {
                order.push({
                    id: parseInt(row.dataset.id),
                    order: index + 1
                });
            });
            
            fetch('{% url "video_help:update_video_order" %}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': csrftoken
                },
                body: JSON.stringify({ order: order })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showToast('Order updated successfully', 'success');
                }
            });
        }
    });
    {% endif %}
</script>
{% endblock %}