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

{% block title %}{% if object %}Edit Creative{% else %}New Creative{% endif %} - Adtlas{% endblock %}

{% block meta_description %}{% if object %}Edit creative: {{ object.name }}{% else %}Create a new creative asset{% endif %}{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/campaigns.css' %}">
<style>
.file-upload-area {
    border: 2px dashed #e3e6f0;
    border-radius: 0.35rem;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s;
    cursor: pointer;
}
.file-upload-area:hover {
    border-color: #4e73df;
    background-color: #f8f9fc;
}
.file-upload-area.dragover {
    border-color: #4e73df;
    background-color: #e3f2fd;
}
.file-preview {
    max-width: 100%;
    max-height: 300px;
    border-radius: 0.35rem;
    margin-top: 1rem;
}
.progress {
    height: 20px;
    margin-top: 1rem;
}
.form-section {
    background: #f8f9fc;
    border-radius: 0.35rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Header -->
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{% url 'creatives:list' %}">Creatives</a></li>
                    <li class="breadcrumb-item active">{% if object %}Edit{% else %}New{% endif %}</li>
                </ol>
            </nav>
            <h1 class="h3 mb-0 text-gray-800">{% if object %}Edit Creative{% else %}Create New Creative{% endif %}</h1>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Creative Information</h6>
                </div>
                <div class="card-body">
                    <form method="post" enctype="multipart/form-data" id="creativeForm">
                        {% csrf_token %}
                        
                        <!-- Basic Information -->
                        <div class="form-section">
                            <h6 class="text-primary mb-3">Basic Information</h6>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="id_name" class="form-label">Name <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" id="id_name" name="name" value="{{ form.name.value|default:'' }}" required>
                                        {% if form.name.errors %}
                                        <div class="text-danger small mt-1">{{ form.name.errors.0 }}</div>
                                        {% endif %}
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="id_campaign" class="form-label">Campaign</label>
                                        <select class="form-select" id="id_campaign" name="campaign">
                                            <option value="">Select Campaign (Optional)</option>
                                            {% for campaign in campaigns %}
                                            <option value="{{ campaign.id }}" {% if form.campaign.value == campaign.id %}selected{% endif %}>{{ campaign.name }}</option>
                                            {% endfor %}
                                        </select>
                                        {% if form.campaign.errors %}
                                        <div class="text-danger small mt-1">{{ form.campaign.errors.0 }}</div>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label for="id_description" class="form-label">Description</label>
                                <textarea class="form-control" id="id_description" name="description" rows="3" placeholder="Describe your creative...">{{ form.description.value|default:'' }}</textarea>
                                {% if form.description.errors %}
                                <div class="text-danger small mt-1">{{ form.description.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>

                        <!-- File Upload -->
                        <div class="form-section">
                            <h6 class="text-primary mb-3">Creative File</h6>
                            
                            {% if not object or not object.primary_file %}
                            <div class="file-upload-area" id="fileUploadArea">
                                <input type="file" class="d-none" id="id_primary_file" name="primary_file" accept=".jpg,.jpeg,.png,.gif,.mp4,.mov,.avi,.mp3,.wav">
                                <div id="uploadPrompt">
                                    <i class="fas fa-cloud-upload-alt fa-3x text-muted mb-3"></i>
                                    <h5 class="text-muted">Drop files here or click to upload</h5>
                                    <p class="text-muted">Supported formats: JPG, PNG, GIF, MP4, MOV, AVI, MP3, WAV</p>
                                    <button type="button" class="btn btn-primary" onclick="document.getElementById('id_primary_file').click()">
                                        <i class="fas fa-upload"></i> Choose File
                                    </button>
                                </div>
                                <div id="uploadProgress" class="d-none">
                                    <div class="progress">
                                        <div class="progress-bar" role="progressbar" style="width: 0%"></div>
                                    </div>
                                    <p class="mt-2 mb-0">Uploading...</p>
                                </div>
                            </div>
                            {% else %}
                            <div class="current-file mb-3">
                                <h6>Current File:</h6>
                                {% if object.creative_format.format_type == 'video' %}
                                <video controls class="file-preview">
                                    <source src="{{ object.primary_file.url }}" type="{{ object.mime_type }}">
                                </video>
                                {% elif object.creative_format.format_type == 'audio' %}
                                <div class="text-center py-3">
                                    <i class="fas fa-music fa-3x text-muted mb-3"></i>
                                    <audio controls class="w-100">
                                        <source src="{{ object.primary_file.url }}" type="{{ object.mime_type }}">
                                    </audio>
                                </div>
                                {% else %}
                                <img src="{{ object.primary_file.url }}" class="file-preview" alt="{{ object.name }}">
                                {% endif %}
                                <div class="mt-2">
                                    <small class="text-muted">{{ object.primary_file.name }} ({{ object.file_size|filesizeformat }})</small>
                                </div>
                            </div>
                            
                            <div class="form-check mb-3">
                                <input class="form-check-input" type="checkbox" id="replaceFile">
                                <label class="form-check-label" for="replaceFile">
                                    Replace current file
                                </label>
                            </div>
                            
                            <div class="file-upload-area d-none" id="fileUploadArea">
                                <input type="file" class="d-none" id="id_primary_file" name="primary_file" accept=".jpg,.jpeg,.png,.gif,.mp4,.mov,.avi,.mp3,.wav">
                                <div id="uploadPrompt">
                                    <i class="fas fa-cloud-upload-alt fa-3x text-muted mb-3"></i>
                                    <h5 class="text-muted">Drop new file here or click to upload</h5>
                                    <p class="text-muted">Supported formats: JPG, PNG, GIF, MP4, MOV, AVI, MP3, WAV</p>
                                    <button type="button" class="btn btn-primary" onclick="document.getElementById('id_primary_file').click()">
                                        <i class="fas fa-upload"></i> Choose File
                                    </button>
                                </div>
                            </div>
                            {% endif %}
                            
                            {% if form.primary_file.errors %}
                            <div class="text-danger small mt-1">{{ form.primary_file.errors.0 }}</div>
                            {% endif %}
                        </div>

                        <!-- Creative Properties -->
                        <div class="form-section">
                            <h6 class="text-primary mb-3">Properties</h6>
                            
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="id_creative_format" class="form-label">Format</label>
                                        <select class="form-select" id="id_creative_format" name="creative_format">
                                            <option value="">Auto-detect from file</option>
                                            {% for format in creative_formats %}
                                            <option value="{{ format.id }}" {% if form.creative_format.value == format.id %}selected{% endif %}>{{ format.name }}</option>
                                            {% endfor %}
                                        </select>
                                        {% if form.creative_format.errors %}
                                        <div class="text-danger small mt-1">{{ form.creative_format.errors.0 }}</div>
                                        {% endif %}
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="id_duration" class="form-label">Duration (seconds)</label>
                                        <input type="number" class="form-control" id="id_duration" name="duration" value="{{ form.duration.value|default:'' }}" step="0.1" min="0">
                                        <div class="form-text">Leave empty for auto-detection</div>
                                        {% if form.duration.errors %}
                                        <div class="text-danger small mt-1">{{ form.duration.errors.0 }}</div>
                                        {% endif %}
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="id_priority" class="form-label">Priority</label>
                                        <select class="form-select" id="id_priority" name="priority">
                                            <option value="low" {% if form.priority.value == 'low' %}selected{% endif %}>Low</option>
                                            <option value="medium" {% if form.priority.value == 'medium' or not form.priority.value %}selected{% endif %}>Medium</option>
                                            <option value="high" {% if form.priority.value == 'high' %}selected{% endif %}>High</option>
                                            <option value="urgent" {% if form.priority.value == 'urgent' %}selected{% endif %}>Urgent</option>
                                        </select>
                                        {% if form.priority.errors %}
                                        <div class="text-danger small mt-1">{{ form.priority.errors.0 }}</div>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="id_deadline" class="form-label">Deadline</label>
                                        <input type="datetime-local" class="form-control" id="id_deadline" name="deadline" value="{{ form.deadline.value|date:'Y-m-d\TH:i' }}">
                                        {% if form.deadline.errors %}
                                        <div class="text-danger small mt-1">{{ form.deadline.errors.0 }}</div>
                                        {% endif %}
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="id_tags" class="form-label">Tags</label>
                                        <input type="text" class="form-control" id="id_tags" name="tags" value="{{ form.tags.value|default:'' }}" placeholder="Enter tags separated by commas">
                                        <div class="form-text">Separate multiple tags with commas</div>
                                        {% if form.tags.errors %}
                                        <div class="text-danger small mt-1">{{ form.tags.errors.0 }}</div>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Form Actions -->
                        <div class="d-flex justify-content-between">
                            <a href="{% url 'creatives:list' %}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left"></i> Cancel
                            </a>
                            <div>
                                <button type="submit" name="action" value="save_draft" class="btn btn-outline-primary me-2">
                                    <i class="fas fa-save"></i> Save as Draft
                                </button>
                                <button type="submit" name="action" value="save_pending" class="btn btn-primary">
                                    <i class="fas fa-check"></i> Save & Submit for Review
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Help Sidebar -->
        <div class="col-lg-4">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Upload Guidelines</h6>
                </div>
                <div class="card-body">
                    <h6>Supported Formats:</h6>
                    <ul class="list-unstyled">
                        <li><i class="fas fa-image text-primary"></i> Images: JPG, PNG, GIF</li>
                        <li><i class="fas fa-video text-primary"></i> Videos: MP4, MOV, AVI</li>
                        <li><i class="fas fa-music text-primary"></i> Audio: MP3, WAV</li>
                    </ul>
                    
                    <h6 class="mt-3">File Size Limits:</h6>
                    <ul class="list-unstyled">
                        <li>Images: Max 10MB</li>
                        <li>Videos: Max 100MB</li>
                        <li>Audio: Max 50MB</li>
                    </ul>
                    
                    <h6 class="mt-3">Best Practices:</h6>
                    <ul class="small">
                        <li>Use descriptive names for your creatives</li>
                        <li>Add relevant tags for better organization</li>
                        <li>Set appropriate deadlines for review</li>
                        <li>Include detailed descriptions</li>
                    </ul>
                </div>
            </div>

            {% if object %}
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Current Status</h6>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <strong>Status:</strong>
                        <span class="badge ms-2
                            {% if object.creative_status == 'approved' %}bg-success
                            {% elif object.creative_status == 'pending' %}bg-warning
                            {% elif object.creative_status == 'rejected' %}bg-danger
                            {% else %}bg-secondary{% endif %}">
                            {{ object.get_creative_status_display }}
                        </span>
                    </div>
                    <div class="mb-3">
                        <strong>Created:</strong>
                        {{ object.created_at|date:"M d, Y H:i" }}
                    </div>
                    {% if object.updated_at != object.created_at %}
                    <div class="mb-3">
                        <strong>Last Updated:</strong>
                        {{ object.updated_at|date:"M d, Y H:i" }}
                    </div>
                    {% endif %}
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// File upload handling
const fileUploadArea = document.getElementById('fileUploadArea');
const fileInput = document.getElementById('id_primary_file');
const uploadPrompt = document.getElementById('uploadPrompt');
const uploadProgress = document.getElementById('uploadProgress');
const replaceFileCheckbox = document.getElementById('replaceFile');

// Show/hide upload area when replacing file
if (replaceFileCheckbox) {
    replaceFileCheckbox.addEventListener('change', function() {
        if (this.checked) {
            fileUploadArea.classList.remove('d-none');
        } else {
            fileUploadArea.classList.add('d-none');
            fileInput.value = '';
        }
    });
}

// Drag and drop functionality
if (fileUploadArea) {
    fileUploadArea.addEventListener('dragover', function(e) {
        e.preventDefault();
        this.classList.add('dragover');
    });
    
    fileUploadArea.addEventListener('dragleave', function(e) {
        e.preventDefault();
        this.classList.remove('dragover');
    });
    
    fileUploadArea.addEventListener('drop', function(e) {
        e.preventDefault();
        this.classList.remove('dragover');
        
        const files = e.dataTransfer.files;
        if (files.length > 0) {
            fileInput.files = files;
            handleFileSelect(files[0]);
        }
    });
    
    fileUploadArea.addEventListener('click', function() {
        fileInput.click();
    });
}

// File input change handler
if (fileInput) {
    fileInput.addEventListener('change', function() {
        if (this.files.length > 0) {
            handleFileSelect(this.files[0]);
        }
    });
}

function handleFileSelect(file) {
    // Show file info
    const fileName = file.name;
    const fileSize = (file.size / 1024 / 1024).toFixed(2) + ' MB';
    
    uploadPrompt.innerHTML = `
        <i class="fas fa-file fa-2x text-success mb-2"></i>
        <h6 class="text-success">${fileName}</h6>
        <p class="text-muted">${fileSize}</p>
        <button type="button" class="btn btn-outline-primary btn-sm" onclick="fileInput.click()">
            <i class="fas fa-edit"></i> Change File
        </button>
    `;
    
    // Auto-detect format and duration for videos
    if (file.type.startsWith('video/')) {
        const video = document.createElement('video');
        video.preload = 'metadata';
        video.onloadedmetadata = function() {
            document.getElementById('id_duration').value = Math.round(video.duration * 10) / 10;
        };
        video.src = URL.createObjectURL(file);
    }
}

// Form validation
document.getElementById('creativeForm').addEventListener('submit', function(e) {
    const name = document.getElementById('id_name').value.trim();
    
    if (!name) {
        e.preventDefault();
        alert('Please enter a name for your creative.');
        document.getElementById('id_name').focus();
        return false;
    }
    
    // Show loading state
    const submitButtons = this.querySelectorAll('button[type="submit"]');
    submitButtons.forEach(btn => {
        btn.disabled = true;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Saving...';
    });
});
</script>
{% endblock %}