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

{% block title %}{% if campaign %}Edit Campaign{% else %}Add Campaign{% endif %} - Adtlas{% endblock %}

{% block extra_css %}
<!-- INTERNAL Select2 css -->
<link href="{% static 'plugins/select2/css/select2.min.css' %}" rel="stylesheet" />

<!-- INTERNAL Daterangepicker css -->
<link href="{% static 'plugins/bootstrap-daterangepicker/daterangepicker.css' %}" rel="stylesheet" />

<!-- INTERNAL Datetimepicker css -->
<link href="{% static 'plugins/amazeui-datetimepicker/css/amazeui.datetimepicker.css' %}" rel="stylesheet" />

<!-- INTERNAL File Upload css -->
<link href="{% static 'plugins/fileuploads/css/fileupload.css' %}" rel="stylesheet" type="text/css" />

<style>
.form-section {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}
.form-section h5 {
    color: #495057;
    margin-bottom: 15px;
    font-weight: 600;
}
.preview-container {
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    background: #f8f9fa;
}
.preview-container.has-file {
    border-color: #28a745;
    background: #d4edda;
}
</style>
{% endblock %}

{% block content %}
<!-- PAGE-HEADER -->
<div class="page-header">
    <h1 class="page-title">{% if campaign %}Edit Campaign{% else %}Add New Campaign{% endif %}</h1>
    <div>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Home</a></li>
            <li class="breadcrumb-item"><a href="{% url 'campaigns:campaign_list' %}">Campaigns</a></li>
            <li class="breadcrumb-item active" aria-current="page">{% if campaign %}Edit{% else %}Add{% endif %}</li>
        </ol>
    </div>
</div>
<!-- PAGE-HEADER END -->

<!-- ROW-1 -->
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Campaign Information</h3>
            </div>
            <div class="card-body">
                <form method="post" enctype="multipart/form-data" id="campaign-form">
                    {% csrf_token %}
                    
                    <!-- Basic Information Section -->
                    <div class="form-section">
                        <h5><i class="fa fa-info-circle"></i> Basic Information</h5>
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="form-label">Campaign Name <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" name="name" value="{{ campaign.name|default:'' }}" required>
                                    <small class="form-text text-muted">Enter a descriptive name for your campaign</small>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="form-label">Advertiser <span class="text-danger">*</span></label>
                                    <select class="form-control select2" name="advertiser" required>
                                        <option value="">Select Advertiser</option>
                                        {% for advertiser in advertisers %}
                                        <option value="{{ advertiser.id }}" {% if campaign.advertiser_id == advertiser.id %}selected{% endif %}>
                                            {{ advertiser.name }}
                                        </option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label class="form-label">Description</label>
                                    <textarea class="form-control" name="description" rows="3" placeholder="Enter campaign description">{{ campaign.description|default:'' }}</textarea>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Campaign Settings Section -->
                    <div class="form-section">
                        <h5><i class="fa fa-cogs"></i> Campaign Settings</h5>
                        <div class="row">
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label class="form-label">Campaign Type <span class="text-danger">*</span></label>
                                    <select class="form-control" name="campaign_type" required>
                                        <option value="">Select Type</option>
                                        <option value="video" {% if campaign.campaign_type == 'video' %}selected{% endif %}>Video</option>
                                        <option value="display" {% if campaign.campaign_type == 'display' %}selected{% endif %}>Display</option>
                                        <option value="audio" {% if campaign.campaign_type == 'audio' %}selected{% endif %}>Audio</option>
                                        <option value="native" {% if campaign.campaign_type == 'native' %}selected{% endif %}>Native</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label class="form-label">Priority</label>
                                    <select class="form-control" name="priority">
                                        <option value="low" {% if campaign.priority == 'low' %}selected{% endif %}>Low</option>
                                        <option value="medium" {% if campaign.priority == 'medium' or not campaign %}selected{% endif %}>Medium</option>
                                        <option value="high" {% if campaign.priority == 'high' %}selected{% endif %}>High</option>
                                        <option value="urgent" {% if campaign.priority == 'urgent' %}selected{% endif %}>Urgent</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label class="form-label">Status</label>
                                    <select class="form-control" name="status">
                                        <option value="draft" {% if campaign.status == 'draft' or not campaign %}selected{% endif %}>Draft</option>
                                        <option value="active" {% if campaign.status == 'active' %}selected{% endif %}>Active</option>
                                        <option value="paused" {% if campaign.status == 'paused' %}selected{% endif %}>Paused</option>
                                        <option value="completed" {% if campaign.status == 'completed' %}selected{% endif %}>Completed</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Schedule Section -->
                    <div class="form-section">
                        <h5><i class="fa fa-calendar"></i> Schedule & Budget</h5>
                        <div class="row">
                            <div class="col-lg-3">
                                <div class="form-group">
                                    <label class="form-label">Start Date <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control datetimepicker" name="start_date" value="{{ campaign.start_date|date:'Y-m-d H:i'|default:'' }}" required>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="form-group">
                                    <label class="form-label">End Date</label>
                                    <input type="text" class="form-control datetimepicker" name="end_date" value="{{ campaign.end_date|date:'Y-m-d H:i'|default:'' }}">
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="form-group">
                                    <label class="form-label">Budget ($)</label>
                                    <input type="number" class="form-control" name="budget" value="{{ campaign.budget|default:'' }}" step="0.01" min="0">
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="form-group">
                                    <label class="form-label">Daily Budget ($)</label>
                                    <input type="number" class="form-control" name="daily_budget" value="{{ campaign.daily_budget|default:'' }}" step="0.01" min="0">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Targeting Section -->
                    <div class="form-section">
                        <h5><i class="fa fa-bullseye"></i> Targeting</h5>
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="form-label">Target Channels</label>
                                    <select class="form-control select2" name="target_channels" multiple>
                                        {% for channel in channels %}
                                        <option value="{{ channel.id }}" {% if channel.id in campaign.target_channels.all.values_list %}selected{% endif %}>
                                            {{ channel.name }}
                                        </option>
                                        {% endfor %}
                                    </select>
                                    <small class="form-text text-muted">Select specific channels or leave empty for all channels</small>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="form-label">Target Demographics</label>
                                    <input type="text" class="form-control" name="target_demographics" value="{{ campaign.target_demographics|default:'' }}" placeholder="e.g., 18-35, Male, Urban">
                                    <small class="form-text text-muted">Describe your target audience</small>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label class="form-label">Geographic Targeting</label>
                                    <input type="text" class="form-control" name="geographic_targeting" value="{{ campaign.geographic_targeting|default:'' }}" placeholder="e.g., New York, California">
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label class="form-label">Language Targeting</label>
                                    <select class="form-control select2" name="language_targeting" multiple>
                                        <option value="en" {% if 'en' in campaign.language_targeting|default:'' %}selected{% endif %}>English</option>
                                        <option value="es" {% if 'es' in campaign.language_targeting|default:'' %}selected{% endif %}>Spanish</option>
                                        <option value="fr" {% if 'fr' in campaign.language_targeting|default:'' %}selected{% endif %}>French</option>
                                        <option value="de" {% if 'de' in campaign.language_targeting|default:'' %}selected{% endif %}>German</option>
                                        <option value="it" {% if 'it' in campaign.language_targeting|default:'' %}selected{% endif %}>Italian</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label class="form-label">Device Targeting</label>
                                    <select class="form-control select2" name="device_targeting" multiple>
                                        <option value="tv" {% if 'tv' in campaign.device_targeting|default:'' %}selected{% endif %}>Smart TV</option>
                                        <option value="mobile" {% if 'mobile' in campaign.device_targeting|default:'' %}selected{% endif %}>Mobile</option>
                                        <option value="tablet" {% if 'tablet' in campaign.device_targeting|default:'' %}selected{% endif %}>Tablet</option>
                                        <option value="desktop" {% if 'desktop' in campaign.device_targeting|default:'' %}selected{% endif %}>Desktop</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Creative Assets Section -->
                    <div class="form-section">
                        <h5><i class="fa fa-image"></i> Creative Assets</h5>
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="form-label">Primary Creative</label>
                                    <div class="preview-container" id="primary-preview">
                                        {% if campaign.primary_creative %}
                                        <div class="current-file">
                                            <i class="fa fa-file fa-3x text-success"></i>
                                            <p>{{ campaign.primary_creative.name }}</p>
                                        </div>
                                        {% else %}
                                        <i class="fa fa-cloud-upload fa-3x text-muted"></i>
                                        <p>Click to upload or drag and drop</p>
                                        <small>Supported formats: MP4, MOV, AVI, JPG, PNG, GIF</small>
                                        {% endif %}
                                    </div>
                                    <input type="file" class="form-control mt-2" name="primary_creative" accept="video/*,image/*">
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="form-label">Companion Banner</label>
                                    <div class="preview-container" id="companion-preview">
                                        {% if campaign.companion_banner %}
                                        <div class="current-file">
                                            <i class="fa fa-image fa-3x text-success"></i>
                                            <p>{{ campaign.companion_banner.name }}</p>
                                        </div>
                                        {% else %}
                                        <i class="fa fa-cloud-upload fa-3x text-muted"></i>
                                        <p>Click to upload or drag and drop</p>
                                        <small>Supported formats: JPG, PNG, GIF</small>
                                        {% endif %}
                                    </div>
                                    <input type="file" class="form-control mt-2" name="companion_banner" accept="image/*">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="form-label">Click-through URL</label>
                                    <input type="url" class="form-control" name="click_through_url" value="{{ campaign.click_through_url|default:'' }}" placeholder="https://example.com">
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="form-label">Tracking URL</label>
                                    <input type="url" class="form-control" name="tracking_url" value="{{ campaign.tracking_url|default:'' }}" placeholder="https://tracking.example.com">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Advanced Settings Section -->
                    <div class="form-section">
                        <h5><i class="fa fa-sliders-h"></i> Advanced Settings</h5>
                        <div class="row">
                            <div class="col-lg-3">
                                <div class="form-group">
                                    <label class="form-label">Frequency Cap</label>
                                    <input type="number" class="form-control" name="frequency_cap" value="{{ campaign.frequency_cap|default:'' }}" min="1" placeholder="e.g., 3">
                                    <small class="form-text text-muted">Max impressions per user per day</small>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="form-group">
                                    <label class="form-label">Impression Goal</label>
                                    <input type="number" class="form-control" name="impression_goal" value="{{ campaign.impression_goal|default:'' }}" min="1">
                                    <small class="form-text text-muted">Total impressions target</small>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="form-group">
                                    <label class="form-label">CPM ($)</label>
                                    <input type="number" class="form-control" name="cpm" value="{{ campaign.cpm|default:'' }}" step="0.01" min="0">
                                    <small class="form-text text-muted">Cost per thousand impressions</small>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="form-group">
                                    <label class="form-label">Weight</label>
                                    <input type="number" class="form-control" name="weight" value="{{ campaign.weight|default:100 }}" min="1" max="100">
                                    <small class="form-text text-muted">Campaign priority weight (1-100)</small>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="enable_tracking" {% if campaign.enable_tracking %}checked{% endif %}>
                                        <label class="form-check-label">Enable detailed tracking and analytics</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="enable_companion_ads" {% if campaign.enable_companion_ads %}checked{% endif %}>
                                        <label class="form-check-label">Enable companion ads</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="skip_enabled" {% if campaign.skip_enabled %}checked{% endif %}>
                                        <label class="form-check-label">Allow users to skip ad</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Form Actions -->
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="form-group">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fa fa-save"></i> {% if campaign %}Update Campaign{% else %}Create Campaign{% endif %}
                                </button>
                                <button type="button" class="btn btn-secondary" onclick="saveDraft()">
                                    <i class="fa fa-file"></i> Save as Draft
                                </button>
                                <a href="{% url 'campaigns:campaign_list' %}" class="btn btn-light">
                                    <i class="fa fa-times"></i> Cancel
                                </a>
                                {% if campaign %}
                                <button type="button" class="btn btn-info" onclick="previewCampaign()">
                                    <i class="fa fa-eye"></i> Preview
                                </button>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- ROW-1 END -->
{% endblock %}

{% block extra_js %}
<!-- INTERNAL Select2 js -->
<script src="{% static 'plugins/select2/js/select2.full.min.js' %}"></script>

<!-- INTERNAL Daterangepicker js -->
<script src="{% static 'plugins/bootstrap-daterangepicker/daterangepicker.js' %}"></script>

<!-- INTERNAL Datetimepicker js -->
<script src="{% static 'plugins/amazeui-datetimepicker/js/amazeui.datetimepicker.min.js' %}"></script>

<!-- INTERNAL File Upload js -->
<script src="{% static 'plugins/fileuploads/js/fileupload.js' %}"></script>

<script>
$(document).ready(function() {
    // Initialize Select2
    $('.select2').select2({
        placeholder: 'Select options',
        allowClear: true
    });
    
    // Initialize datetime pickers
    $('.datetimepicker').datetimepicker({
        format: 'yyyy-mm-dd hh:ii',
        autoclose: true,
        todayBtn: true,
        minuteStep: 15
    });
    
    // File upload preview
    $('input[type="file"]').on('change', function() {
        var file = this.files[0];
        var preview = $(this).siblings('.preview-container');
        
        if (file) {
            preview.addClass('has-file');
            preview.html('<i class="fa fa-file fa-3x text-success"></i><p>' + file.name + '</p>');
        }
    });
    
    // Form validation
    $('#campaign-form').on('submit', function(e) {
        var isValid = true;
        var errors = [];
        
        // Check required fields
        $('[required]').each(function() {
            if (!$(this).val()) {
                isValid = false;
                $(this).addClass('is-invalid');
                errors.push($(this).prev('label').text() + ' is required');
            } else {
                $(this).removeClass('is-invalid');
            }
        });
        
        // Check date logic
        var startDate = $('[name="start_date"]').val();
        var endDate = $('[name="end_date"]').val();
        
        if (startDate && endDate && new Date(startDate) >= new Date(endDate)) {
            isValid = false;
            errors.push('End date must be after start date');
        }
        
        if (!isValid) {
            e.preventDefault();
            alert('Please fix the following errors:\n' + errors.join('\n'));
        }
    });
    
    // Auto-save draft every 5 minutes
    setInterval(function() {
        saveDraft(true);
    }, 300000);
});

function saveDraft(silent = false) {
    var formData = new FormData($('#campaign-form')[0]);
    formData.append('save_as_draft', 'true');
    
    $.ajax({
        url: $('#campaign-form').attr('action') || window.location.href,
        method: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(data) {
            if (!silent) {
                alert('Campaign saved as draft');
            }
        },
        error: function() {
            if (!silent) {
                alert('Failed to save draft');
            }
        }
    });
}

function previewCampaign() {
    {% if campaign %}
    window.open('/campaigns/{{ campaign.id }}/preview/', '_blank');
    {% endif %}
}
</script>
{% endblock %}