{% extends 'layouts/dashboard.html' %}
{% load static %}

{% block title %}Creatives - Adtlas{% endblock %}

{% block meta_description %}Manage your creative assets and campaigns{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/campaigns.css' %}">
<style>
.creative-card {
    border: 1px solid #e3e6f0;
    border-radius: 0.35rem;
    transition: all 0.3s;
}
.creative-card:hover {
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
    transform: translateY(-2px);
}
.creative-thumbnail {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 0.35rem 0.35rem 0 0;
}
.status-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}
.creative-actions {
    opacity: 0;
    transition: opacity 0.3s;
}
.creative-card:hover .creative-actions {
    opacity: 1;
}
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Header -->
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">Creative Assets</h1>
        <div class="d-flex gap-2">
            <a href="{% url 'creatives:create' %}" class="btn btn-primary btn-sm">
                <i class="fas fa-plus fa-sm text-white-50"></i> New Creative
            </a>
            <button class="btn btn-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#bulkUploadModal">
                <i class="fas fa-upload fa-sm"></i> Bulk Upload
            </button>
        </div>
    </div>

    <!-- Filters -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Filters</h6>
        </div>
        <div class="card-body">
            <form method="get" class="row g-3">
                <div class="col-md-3">
                    <label for="search" class="form-label">Search</label>
                    <input type="text" class="form-control" id="search" name="search" value="{{ request.GET.search }}" placeholder="Search creatives...">
                </div>
                <div class="col-md-2">
                    <label for="status" class="form-label">Status</label>
                    <select class="form-select" id="status" name="status">
                        <option value="">All Statuses</option>
                        <option value="draft" {% if request.GET.status == 'draft' %}selected{% endif %}>Draft</option>
                        <option value="pending" {% if request.GET.status == 'pending' %}selected{% endif %}>Pending</option>
                        <option value="approved" {% if request.GET.status == 'approved' %}selected{% endif %}>Approved</option>
                        <option value="rejected" {% if request.GET.status == 'rejected' %}selected{% endif %}>Rejected</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="format" class="form-label">Format</label>
                    <select class="form-select" id="format" name="format">
                        <option value="">All Formats</option>
                        <option value="video" {% if request.GET.format == 'video' %}selected{% endif %}>Video</option>
                        <option value="image" {% if request.GET.format == 'image' %}selected{% endif %}>Image</option>
                        <option value="audio" {% if request.GET.format == 'audio' %}selected{% endif %}>Audio</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="campaign" class="form-label">Campaign</label>
                    <select class="form-select" id="campaign" name="campaign">
                        <option value="">All Campaigns</option>
                        {% for campaign in campaigns %}
                        <option value="{{ campaign.id }}" {% if request.GET.campaign == campaign.id|stringformat:'s' %}selected{% endif %}>{{ campaign.name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">&nbsp;</label>
                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary">Filter</button>
                        <a href="{% url 'creatives:list' %}" class="btn btn-outline-secondary">Clear</a>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Creatives Grid -->
    <div class="row">
        {% for creative in creatives %}
        <div class="col-xl-3 col-lg-4 col-md-6 mb-4">
            <div class="card creative-card h-100">
                <div class="position-relative">
                    {% if creative.thumbnail %}
                    <img src="{{ creative.thumbnail.url }}" class="creative-thumbnail" alt="{{ creative.name }}">
                    {% else %}
                    <div class="creative-thumbnail bg-light d-flex align-items-center justify-content-center">
                        <i class="fas fa-image fa-3x text-muted"></i>
                    </div>
                    {% endif %}
                    <div class="position-absolute top-0 end-0 m-2">
                        <span class="badge status-badge 
                            {% if creative.creative_status == 'approved' %}bg-success
                            {% elif creative.creative_status == 'pending' %}bg-warning
                            {% elif creative.creative_status == 'rejected' %}bg-danger
                            {% else %}bg-secondary{% endif %}">
                            {{ creative.get_creative_status_display }}
                        </span>
                    </div>
                    <div class="position-absolute bottom-0 end-0 m-2 creative-actions">
                        <div class="btn-group" role="group">
                            <a href="{% url 'creatives:detail' creative.pk %}" class="btn btn-sm btn-primary" title="View">
                                <i class="fas fa-eye"></i>
                            </a>
                            <a href="{% url 'creatives:update' creative.pk %}" class="btn btn-sm btn-warning" title="Edit">
                                <i class="fas fa-edit"></i>
                            </a>
                            <a href="{% url 'creatives:delete' creative.pk %}" class="btn btn-sm btn-danger" title="Delete">
                                <i class="fas fa-trash"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <h6 class="card-title mb-2">{{ creative.name }}</h6>
                    <p class="card-text text-muted small mb-2">{{ creative.description|truncatechars:80 }}</p>
                    <div class="d-flex justify-content-between align-items-center">
                        <small class="text-muted">
                            <i class="fas fa-calendar"></i> {{ creative.created_at|date:"M d, Y" }}
                        </small>
                        <small class="text-muted">
                            <i class="fas fa-user"></i> {{ creative.created_by.get_full_name|default:creative.created_by.username }}
                        </small>
                    </div>
                    {% if creative.campaign %}
                    <div class="mt-2">
                        <small class="text-primary">
                            <i class="fas fa-bullhorn"></i> {{ creative.campaign.name }}
                        </small>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
        {% empty %}
        <div class="col-12">
            <div class="card">
                <div class="card-body text-center py-5">
                    <i class="fas fa-images fa-3x text-muted mb-3"></i>
                    <h5 class="text-muted">No creatives found</h5>
                    <p class="text-muted">Start by creating your first creative asset.</p>
                    <a href="{% url 'creatives:create' %}" class="btn btn-primary">
                        <i class="fas fa-plus"></i> Create Creative
                    </a>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

    <!-- Pagination -->
    {% if is_paginated %}
    <nav aria-label="Creatives pagination">
        <ul class="pagination justify-content-center">
            {% if page_obj.has_previous %}
            <li class="page-item">
                <a class="page-link" href="?page=1{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.format %}&format={{ request.GET.format }}{% endif %}{% if request.GET.campaign %}&campaign={{ request.GET.campaign }}{% endif %}">&laquo; First</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.format %}&format={{ request.GET.format }}{% endif %}{% if request.GET.campaign %}&campaign={{ request.GET.campaign }}{% endif %}">Previous</a>
            </li>
            {% endif %}
            
            <li class="page-item active">
                <span class="page-link">{{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span>
            </li>
            
            {% if page_obj.has_next %}
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.format %}&format={{ request.GET.format }}{% endif %}{% if request.GET.campaign %}&campaign={{ request.GET.campaign }}{% endif %}">Next</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.format %}&format={{ request.GET.format }}{% endif %}{% if request.GET.campaign %}&campaign={{ request.GET.campaign }}{% endif %}">Last &raquo;</a>
            </li>
            {% endif %}
        </ul>
    </nav>
    {% endif %}
</div>

<!-- Bulk Upload Modal -->
<div class="modal fade" id="bulkUploadModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Bulk Upload Creatives</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="bulkUploadForm" enctype="multipart/form-data">
                    {% csrf_token %}
                    <div class="mb-3">
                        <label for="bulkFiles" class="form-label">Select Files</label>
                        <input type="file" class="form-control" id="bulkFiles" name="files" multiple accept=".jpg,.jpeg,.png,.gif,.mp4,.mov,.avi,.mp3,.wav">
                        <div class="form-text">Select multiple image, video, or audio files.</div>
                    </div>
                    <div class="mb-3">
                        <label for="bulkCampaign" class="form-label">Campaign</label>
                        <select class="form-select" id="bulkCampaign" name="campaign">
                            <option value="">Select Campaign (Optional)</option>
                            {% for campaign in campaigns %}
                            <option value="{{ campaign.id }}">{{ campaign.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="submitBulkUpload()">Upload</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function submitBulkUpload() {
    const form = document.getElementById('bulkUploadForm');
    const formData = new FormData(form);
    
    // Show loading state
    const uploadBtn = event.target;
    uploadBtn.disabled = true;
    uploadBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Uploading...';
    
    fetch('{% url "creatives:bulk_upload" %}', {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert('Upload failed: ' + data.message);
            uploadBtn.disabled = false;
            uploadBtn.innerHTML = 'Upload';
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Upload failed. Please try again.');
        uploadBtn.disabled = false;
        uploadBtn.innerHTML = 'Upload';
    });
}
</script>
{% endblock %}