{% extends "layouts/base.html" %}
{% load static %}
{% load i18n %}
{% load widget_tweaks %}

{% block title %}{{ title }} - {{ block.super }}{% endblock %}

{% block extra_css %}
<link href="{% static 'css/campaigns.css' %}" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{% url 'campaigns:list' %}">{% trans "Campaigns" %}</a></li>
                    {% if object %}
                        <li class="breadcrumb-item"><a href="{% url 'campaigns:detail' object.pk %}">{{ object.name }}</a></li>
                        <li class="breadcrumb-item active" aria-current="page">{% trans "Edit" %}</li>
                    {% else %}
                        <li class="breadcrumb-item active" aria-current="page">{% trans "Create" %}</li>
                    {% endif %}
                </ol>
            </nav>
            <h1 class="h3 mb-0 text-gray-800">{{ title }}</h1>
        </div>
        <div>
            <a href="{% if object %}{% url 'campaigns:detail' object.pk %}{% else %}{% url 'campaigns:list' %}{% endif %}" 
               class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-2"></i>{% trans "Back" %}
            </a>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <form method="post" id="campaignForm">
                {% csrf_token %}
                
                <!-- Basic Information -->
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">
                            <i class="fas fa-info-circle me-2"></i>{% trans "Basic Information" %}
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="{{ form.name.id_for_label }}" class="form-label">
                                        {{ form.name.label }} <span class="text-danger">*</span>
                                    </label>
                                    {{ form.name|add_class:"form-control" }}
                                    {% if form.name.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.name.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="{{ form.campaign_type.id_for_label }}" class="form-label">
                                        {{ form.campaign_type.label }} <span class="text-danger">*</span>
                                    </label>
                                    {{ form.campaign_type|add_class:"form-control" }}
                                    {% if form.campaign_type.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.campaign_type.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-group mb-3">
                            <label for="{{ form.description.id_for_label }}" class="form-label">
                                {{ form.description.label }}
                            </label>
                            {{ form.description|add_class:"form-control" }}
                            {% if form.description.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.description.errors.0 }}
                                </div>
                            {% endif %}
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="{{ form.advertiser.id_for_label }}" class="form-label">
                                        {{ form.advertiser.label }} <span class="text-danger">*</span>
                                    </label>
                                    {{ form.advertiser|add_class:"form-control select2" }}
                                    {% if form.advertiser.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.advertiser.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="{{ form.priority.id_for_label }}" class="form-label">
                                        {{ form.priority.label }}
                                    </label>
                                    {{ form.priority|add_class:"form-control" }}
                                    {% if form.priority.help_text %}
                                        <small class="form-text text-muted">{{ form.priority.help_text }}</small>
                                    {% endif %}
                                    {% if form.priority.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.priority.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-group mb-3">
                            <label for="{{ form.target_audience.id_for_label }}" class="form-label">
                                {{ form.target_audience.label }}
                            </label>
                            {{ form.target_audience|add_class:"form-control" }}
                            {% if form.target_audience.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.target_audience.errors.0 }}
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <!-- Schedule & Budget -->
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">
                            <i class="fas fa-calendar-alt me-2"></i>{% trans "Schedule & Budget" %}
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="{{ form.start_date.id_for_label }}" class="form-label">
                                        {{ form.start_date.label }} <span class="text-danger">*</span>
                                    </label>
                                    {{ form.start_date|add_class:"form-control" }}
                                    {% if form.start_date.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.start_date.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="{{ form.end_date.id_for_label }}" class="form-label">
                                        {{ form.end_date.label }} <span class="text-danger">*</span>
                                    </label>
                                    {{ form.end_date|add_class:"form-control" }}
                                    {% if form.end_date.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.end_date.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group mb-3">
                                    <label for="{{ form.total_budget.id_for_label }}" class="form-label">
                                        {{ form.total_budget.label }} <span class="text-danger">*</span>
                                    </label>
                                    <div class="input-group">
                                        <span class="input-group-text">$</span>
                                        {{ form.total_budget|add_class:"form-control" }}
                                    </div>
                                    {% if form.total_budget.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.total_budget.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group mb-3">
                                    <label for="{{ form.daily_budget.id_for_label }}" class="form-label">
                                        {{ form.daily_budget.label }}
                                    </label>
                                    <div class="input-group">
                                        <span class="input-group-text">$</span>
                                        {{ form.daily_budget|add_class:"form-control" }}
                                    </div>
                                    {% if form.daily_budget.help_text %}
                                        <small class="form-text text-muted">{{ form.daily_budget.help_text }}</small>
                                    {% endif %}
                                    {% if form.daily_budget.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.daily_budget.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group mb-3">
                                    <label for="{{ form.cost_per_spot.id_for_label }}" class="form-label">
                                        {{ form.cost_per_spot.label }}
                                    </label>
                                    <div class="input-group">
                                        <span class="input-group-text">$</span>
                                        {{ form.cost_per_spot|add_class:"form-control" }}
                                    </div>
                                    {% if form.cost_per_spot.help_text %}
                                        <small class="form-text text-muted">{{ form.cost_per_spot.help_text }}</small>
                                    {% endif %}
                                    {% if form.cost_per_spot.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.cost_per_spot.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Targeting -->
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">
                            <i class="fas fa-crosshairs me-2"></i>{% trans "Targeting" %}
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label class="form-label">{{ form.geographic_zones.label }}</label>
                                    <div class="border rounded p-3" style="max-height: 200px; overflow-y: auto;">
                                        {% for choice in form.geographic_zones %}
                                            <div class="form-check">
                                                {{ choice.tag }}
                                                <label class="form-check-label" for="{{ choice.id_for_label }}">
                                                    {{ choice.choice_label }}
                                                </label>
                                            </div>
                                        {% endfor %}
                                    </div>
                                    {% if form.geographic_zones.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.geographic_zones.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label class="form-label">{{ form.channels.label }}</label>
                                    <div class="border rounded p-3" style="max-height: 200px; overflow-y: auto;">
                                        {% for choice in form.channels %}
                                            <div class="form-check">
                                                {{ choice.tag }}
                                                <label class="form-check-label" for="{{ choice.id_for_label }}">
                                                    {{ choice.choice_label }}
                                                </label>
                                            </div>
                                        {% endfor %}
                                    </div>
                                    {% if form.channels.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.channels.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Form Actions -->
                <div class="card shadow mb-4">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div>
                                {% if object %}
                                    <a href="{% url 'campaigns:detail' object.pk %}" class="btn btn-outline-secondary">
                                        <i class="fas fa-times me-2"></i>{% trans "Cancel" %}
                                    </a>
                                {% else %}
                                    <a href="{% url 'campaigns:list' %}" class="btn btn-outline-secondary">
                                        <i class="fas fa-times me-2"></i>{% trans "Cancel" %}
                                    </a>
                                {% endif %}
                            </div>
                            <div>
                                <button type="submit" name="save_draft" class="btn btn-outline-primary me-2">
                                    <i class="fas fa-save me-2"></i>{% trans "Save as Draft" %}
                                </button>
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-check me-2"></i>{{ submit_text }}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <!-- Sidebar -->
        <div class="col-lg-4">
            <!-- Help & Tips -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-lightbulb me-2"></i>{% trans "Tips & Guidelines" %}
                    </h6>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <h6 class="font-weight-bold">{% trans "Campaign Name" %}</h6>
                        <p class="text-muted small">{% trans "Choose a descriptive name that clearly identifies the campaign purpose and target." %}</p>
                    </div>
                    
                    <div class="mb-3">
                        <h6 class="font-weight-bold">{% trans "Budget Planning" %}</h6>
                        <p class="text-muted small">{% trans "Set realistic budgets based on your campaign goals. Daily budget helps control spending pace." %}</p>
                    </div>
                    
                    <div class="mb-3">
                        <h6 class="font-weight-bold">{% trans "Targeting" %}</h6>
                        <p class="text-muted small">{% trans "Select geographic zones and channels that align with your target audience demographics." %}</p>
                    </div>
                    
                    <div class="mb-3">
                        <h6 class="font-weight-bold">{% trans "Priority Levels" %}</h6>
                        <p class="text-muted small">{% trans "Higher priority campaigns get preference during ad slot allocation conflicts." %}</p>
                    </div>
                </div>
            </div>

            <!-- Campaign Status -->
            {% if object %}
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">
                            <i class="fas fa-info-circle me-2"></i>{% trans "Current Status" %}
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="text-center">
                            {% if object.status == 'active' %}
                                <span class="badge badge-success badge-lg">{{ object.get_status_display }}</span>
                            {% elif object.status == 'paused' %}
                                <span class="badge badge-warning badge-lg">{{ object.get_status_display }}</span>
                            {% elif object.status == 'completed' %}
                                <span class="badge badge-secondary badge-lg">{{ object.get_status_display }}</span>
                            {% else %}
                                <span class="badge badge-light badge-lg">{{ object.get_status_display }}</span>
                            {% endif %}
                        </div>
                        
                        {% if object.total_budget and object.total_spend %}
                            <hr>
                            <div class="row text-center">
                                <div class="col-6">
                                    <div class="h6 font-weight-bold text-primary">
                                        ${{ object.total_spend|floatformat:2 }}
                                    </div>
                                    <div class="text-xs text-uppercase text-muted">{% trans "Spent" %}</div>
                                </div>
                                <div class="col-6">
                                    <div class="h6 font-weight-bold text-success">
                                        ${{ object.total_budget|sub:object.total_spend|floatformat:2 }}
                                    </div>
                                    <div class="text-xs text-uppercase text-muted">{% trans "Remaining" %}</div>
                                </div>
                            </div>
                            
                            <div class="progress mt-3">
                                <div class="progress-bar" role="progressbar" 
                                     style="width: {{ object.budget_utilization }}%" 
                                     aria-valuenow="{{ object.budget_utilization }}" 
                                     aria-valuemin="0" aria-valuemax="100">
                                    {{ object.budget_utilization|floatformat:1 }}%
                                </div>
                            </div>
                        {% endif %}
                    </div>
                </div>
            {% endif %}

            <!-- Quick Actions -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-bolt me-2"></i>{% trans "Quick Actions" %}
                    </h6>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <button type="button" class="btn btn-outline-info btn-sm" onclick="fillSampleData()">
                            <i class="fas fa-magic me-2"></i>{% trans "Fill Sample Data" %}
                        </button>
                        <button type="button" class="btn btn-outline-warning btn-sm" onclick="clearForm()">
                            <i class="fas fa-eraser me-2"></i>{% trans "Clear Form" %}
                        </button>
                        <button type="button" class="btn btn-outline-secondary btn-sm" onclick="validateForm()">
                            <i class="fas fa-check-circle me-2"></i>{% trans "Validate Form" %}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
$(document).ready(function() {
    // Initialize Select2
    $('.select2').select2({
        theme: 'bootstrap-5',
        width: '100%'
    });
    
    // Form validation
    $('#campaignForm').on('submit', function(e) {
        if (!validateForm()) {
            e.preventDefault();
        }
    });
    
    // Budget calculation helpers
    $('#id_total_budget, #id_start_date, #id_end_date').on('change', function() {
        calculateDailyBudget();
    });
});

function fillSampleData() {
    $('#id_name').val('Sample Campaign ' + new Date().getTime());
    $('#id_description').val('This is a sample campaign for demonstration purposes.');
    $('#id_total_budget').val('10000.00');
    $('#id_cost_per_spot').val('50.00');
    $('#id_priority').val('5');
    $('#id_target_audience').val('Adults 25-54, interested in technology and innovation.');
}

function clearForm() {
    if (confirm('{% trans "Are you sure you want to clear all form data?" %}')) {
        $('#campaignForm')[0].reset();
        $('.select2').val(null).trigger('change');
        $('input[type="checkbox"]').prop('checked', false);
    }
}

function validateForm() {
    let isValid = true;
    let errors = [];
    
    // Check required fields
    const requiredFields = ['#id_name', '#id_advertiser', '#id_start_date', '#id_end_date', '#id_total_budget'];
    
    requiredFields.forEach(function(field) {
        if (!$(field).val()) {
            isValid = false;
            errors.push($(field).closest('.form-group').find('label').text().replace('*', '').trim() + ' {% trans "is required" %}');
        }
    });
    
    // Check date range
    const startDate = new Date($('#id_start_date').val());
    const endDate = new Date($('#id_end_date').val());
    
    if (startDate && endDate && startDate >= endDate) {
        isValid = false;
        errors.push('{% trans "End date must be after start date" %}');
    }
    
    // Check budget values
    const totalBudget = parseFloat($('#id_total_budget').val());
    const dailyBudget = parseFloat($('#id_daily_budget').val());
    
    if (totalBudget && totalBudget <= 0) {
        isValid = false;
        errors.push('{% trans "Total budget must be greater than 0" %}');
    }
    
    if (dailyBudget && dailyBudget <= 0) {
        isValid = false;
        errors.push('{% trans "Daily budget must be greater than 0" %}');
    }
    
    // Show validation results
    if (!isValid) {
        alert('{% trans "Please fix the following errors:" %}\n\n' + errors.join('\n'));
    } else {
        alert('{% trans "Form validation passed!" %}');
    }
    
    return isValid;
}

function calculateDailyBudget() {
    const totalBudget = parseFloat($('#id_total_budget').val());
    const startDate = new Date($('#id_start_date').val());
    const endDate = new Date($('#id_end_date').val());
    
    if (totalBudget && startDate && endDate && startDate < endDate) {
        const days = Math.ceil((endDate - startDate) / (1000 * 60 * 60 * 24)) + 1;
        const suggestedDailyBudget = (totalBudget / days).toFixed(2);
        
        if (!$('#id_daily_budget').val()) {
            $('#id_daily_budget').attr('placeholder', '{% trans "Suggested:" %} $' + suggestedDailyBudget);
        }
    }
}
</script>
{% endblock %}