{% extends "layouts/base.html" %}

{% load static %}  

{% block title %} Insert New Creative {% endblock %}

{% block extra_css %}
<style>
    .file-upload-wrapper {
        position: relative;
        overflow: hidden;
        display: inline-block;
        width: 100%;
    }
    
    .file-upload-input {
        position: absolute;
        left: -9999px;
    }
    
    .file-upload-label {
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    
    .form-section {
        margin-bottom: 2rem;
    }
    
    .required-field::after {
        content: " *";
        color: #dc3545;
    }
</style>
{% endblock extra_css %}

{% block breadcrumb %}
<div class="page-header">
    <h1 class="page-title"> Insert Creative </h1>
    <div>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="javascript:void(0);">Creatives</a></li>
            <li class="breadcrumb-item active" aria-current="page">New</li>
        </ol>
    </div>
</div> 
{% endblock breadcrumb %}

{% block content %}  
<div class="row">
    <div class="col-12 col-sm-12">  
        <form method="post" action="{% url 'campaigns:add_creative' %}" enctype="multipart/form-data" id="creativeForm">
            {% csrf_token %}
            
            <!-- Campaign & Creative Information -->
            <div class="card form-section">
                <div class="card-header">
                    <h3 class="card-title">Campaign & Creative Information</h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="form-group mb-3">
                                <label class="form-label required-field">Campaign</label>
                                <select class="form-control select2-show-search form-select" name="campaign_id" data-placeholder="Choose one" required>
                                    <option value="">Choose one</option>
                                    {% for campaign in data.campaigns %} 
                                        <option value="{{ campaign.id_campaign }}">{{ campaign.name }}</option>
                                    {% endfor %}
                                </select>
                                <div class="invalid-feedback">
                                    Please select a campaign.
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-lg-6">
                            <div class="form-group mb-3">
                                <label class="form-label">Creative Name</label>
                                <input type="text" class="form-control" name="name" placeholder="Enter creative name" maxlength="255">
                                <small class="form-text text-muted">Optional: Descriptive name for the creative</small>
                            </div>
                        </div>
                    </div> 
                </div>
            </div> 
            
            <!-- File/VAST URL Section -->
            <div class="card form-section">
                <div class="card-header">
                    <h3 class="card-title">File Upload & VAST URL</h3>
                </div>
                <div class="card-body">
                    <!-- VAST URL -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <label class="form-label">VAST URL</label>
                            <input class="form-control" placeholder="https://example.com/vast-spot" name="vast_url" type="url">
                            <small class="form-text text-muted">Optional: VAST tag URL for the advertisement</small>
                        </div> 
                    </div>
                    
                    <!-- File Upload -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <label class="form-label">Upload Creative File</label>
                            <div class="input-group file-browser">
                                <input type="text" class="form-control browse-file" placeholder="No file chosen" readonly>
                                <label class="input-group-text btn btn-primary file-upload-label">
                                    <i class="fa fa-upload me-2"></i>Browse 
                                    <input type="file" class="file-browserinput" name="adspot_file" style="display: none;" accept=".mp4,.ts,.mov,.avi,.mkv" >
                                </label>
                            </div>
                            <small class="form-text text-muted">
                                Supported formats: MP4, TS, MOV, AVI, MKV. Maximum file size: 500MB
                            </small>
                        </div>
                    </div>
                    
                    <!-- Submit Button -->
                    <div class="row">
                        <div class="col-12">
                            <div class="d-flex gap-3">
                                <button type="submit" class="btn btn-primary" style="min-width: 120px;">
                                    <i class="fa fa-save me-2"></i>Submit
                                </button>
                                <a href="{% url 'campaigns:views_creative' %}" class="btn btn-secondary">
                                    <i class="fa fa-times me-2"></i>Cancel
                                </a>
                            </div>
                        </div>
                    </div>
                </div> 
            </div> 
        </form> 
    </div> 
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // File input handling
    const fileInput = document.querySelector('.file-browserinput');
    const fileDisplay = document.querySelector('.browse-file');
    
    if (fileInput && fileDisplay) {
        fileInput.addEventListener('change', function(e) {
            const fileName = e.target.files[0] ? e.target.files[0].name : 'No file chosen';
            fileDisplay.value = fileName;
        });
    }
    
    // Form validation
    const form = document.getElementById('creativeForm');
    const campaignSelect = form.querySelector('select[name="campaign_id"]');
    
    form.addEventListener('submit', function(e) {
        let isValid = true;
        
        // Check if campaign is selected
        if (!campaignSelect.value) {
            campaignSelect.classList.add('is-invalid');
            isValid = false;
        } else {
            campaignSelect.classList.remove('is-invalid');
        }
        
        // Check if either file or VAST URL is provided
        const fileInput = form.querySelector('input[name="adspot_file"]');
        const vastUrl = form.querySelector('input[name="vast_url"]');
        
        if (!fileInput.files.length && !vastUrl.value.trim()) {
            alert('Please provide either a creative file or a VAST URL.');
            isValid = false;
        }
        
        if (!isValid) {
            e.preventDefault();
        }
    });
    
    // Duration validation
    const durationInput = form.querySelector('input[name="duration"]');
    if (durationInput) {
        durationInput.addEventListener('input', function(e) {
            const value = parseInt(e.target.value);
            if (value < 1) {
                e.target.value = 1;
            } else if (value > 3600) {
                e.target.value = 3600;
            }
        });
    }
});
</script>
{% endblock content %}