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

{% block title %}{% trans "Delete Campaign" %} - {{ object.name }} - {{ block.super }}{% endblock %}

{% block extra_css %}
<link href="{% static 'css/campaigns.css' %}" rel="stylesheet">
<style>
.warning-box {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    border: 2px solid #ffc107;
    border-radius: 10px;
    padding: 20px;
    margin: 20px 0;
}

.danger-box {
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
    border: 2px solid #dc3545;
    border-radius: 10px;
    padding: 20px;
    margin: 20px 0;
}

.campaign-info {
    background: #f8f9fc;
    border-radius: 8px;
    padding: 15px;
    margin: 15px 0;
}

.impact-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #e3e6f0;
}

.impact-item:last-child {
    border-bottom: none;
}

.impact-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
}

.btn-delete {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    border: none;
    color: white;
    font-weight: bold;
    transition: all 0.3s ease;
}

.btn-delete:hover {
    background: linear-gradient(135deg, #c82333 0%, #bd2130 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
}

.confirmation-checkbox {
    transform: scale(1.2);
    margin-right: 10px;
}
</style>
{% 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>
                    <li class="breadcrumb-item"><a href="{% url 'campaigns:detail' object.pk %}">{{ object.name }}</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{% trans "Delete" %}</li>
                </ol>
            </nav>
            <h1 class="h3 mb-0 text-gray-800">
                <i class="fas fa-trash-alt text-danger me-2"></i>{% trans "Delete Campaign" %}
            </h1>
        </div>
        <div>
            <a href="{% url 'campaigns:detail' object.pk %}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-2"></i>{% trans "Back to Campaign" %}
            </a>
        </div>
    </div>

    <div class="row justify-content-center">
        <div class="col-lg-8">
            <!-- Warning Alert -->
            <div class="danger-box">
                <div class="d-flex align-items-center mb-3">
                    <div class="me-3">
                        <i class="fas fa-exclamation-triangle fa-3x text-danger"></i>
                    </div>
                    <div>
                        <h4 class="text-danger mb-1">{% trans "Permanent Deletion Warning" %}</h4>
                        <p class="mb-0 text-dark">
                            {% trans "This action cannot be undone. All campaign data, performance metrics, and associated records will be permanently deleted." %}
                        </p>
                    </div>
                </div>
            </div>

            <!-- Campaign 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 "Campaign Details" %}
                    </h6>
                </div>
                <div class="card-body">
                    <div class="campaign-info">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <strong>{% trans "Campaign Name:" %}</strong><br>
                                    <span class="h5 text-primary">{{ object.name }}</span>
                                </div>
                                <div class="mb-3">
                                    <strong>{% trans "Advertiser:" %}</strong><br>
                                    {{ object.advertiser.name }}
                                </div>
                                <div class="mb-3">
                                    <strong>{% trans "Campaign Type:" %}</strong><br>
                                    {{ object.get_campaign_type_display }}
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <strong>{% trans "Status:" %}</strong><br>
                                    {% 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>
                                <div class="mb-3">
                                    <strong>{% trans "Campaign Period:" %}</strong><br>
                                    {{ object.start_date|date:"M d, Y" }} - {{ object.end_date|date:"M d, Y" }}
                                </div>
                                <div class="mb-3">
                                    <strong>{% trans "Total Budget:" %}</strong><br>
                                    <span class="h6 text-success">${{ object.total_budget|floatformat:2|intcomma }}</span>
                                </div>
                            </div>
                        </div>
                        
                        {% if object.description %}
                            <div class="mt-3">
                                <strong>{% trans "Description:" %}</strong><br>
                                <p class="text-muted">{{ object.description }}</p>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>

            <!-- Impact Assessment -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-warning">
                        <i class="fas fa-exclamation-circle me-2"></i>{% trans "Deletion Impact" %}
                    </h6>
                </div>
                <div class="card-body">
                    <p class="text-muted mb-4">
                        {% trans "The following data and relationships will be permanently deleted:" %}
                    </p>
                    
                    <div class="impact-item">
                        <div class="impact-icon bg-danger text-white">
                            <i class="fas fa-chart-line"></i>
                        </div>
                        <div>
                            <strong>{% trans "Performance Data" %}</strong><br>
                            <span class="text-muted">
                                {% trans "All performance metrics, impressions, and analytics data" %}
                                {% if object.total_impressions %}
                                    ({{ object.total_impressions|intcomma }} {% trans "impressions" %})
                                {% endif %}
                            </span>
                        </div>
                    </div>
                    
                    <div class="impact-item">
                        <div class="impact-icon bg-warning text-white">
                            <i class="fas fa-calendar-alt"></i>
                        </div>
                        <div>
                            <strong>{% trans "Channel Schedules" %}</strong><br>
                            <span class="text-muted">
                                {% trans "All scheduling information and channel assignments" %}
                                {% if object.channels.count %}
                                    ({{ object.channels.count }} {% trans "channels" %})
                                {% endif %}
                            </span>
                        </div>
                    </div>
                    
                    <div class="impact-item">
                        <div class="impact-icon bg-info text-white">
                            <i class="fas fa-dollar-sign"></i>
                        </div>
                        <div>
                            <strong>{% trans "Financial Records" %}</strong><br>
                            <span class="text-muted">
                                {% trans "Budget allocation and spending history" %}
                                {% if object.total_spend %}
                                    (${{ object.total_spend|floatformat:2|intcomma }} {% trans "spent" %})
                                {% endif %}
                            </span>
                        </div>
                    </div>
                    
                    <div class="impact-item">
                        <div class="impact-icon bg-secondary text-white">
                            <i class="fas fa-map-marker-alt"></i>
                        </div>
                        <div>
                            <strong>{% trans "Geographic Targeting" %}</strong><br>
                            <span class="text-muted">
                                {% trans "All geographic zone assignments and targeting data" %}
                                {% if object.geographic_zones.count %}
                                    ({{ object.geographic_zones.count }} {% trans "zones" %})
                                {% endif %}
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Alternative Actions -->
            {% if object.status == 'active' or object.status == 'paused' %}
                <div class="warning-box">
                    <div class="d-flex align-items-center mb-3">
                        <div class="me-3">
                            <i class="fas fa-lightbulb fa-2x text-warning"></i>
                        </div>
                        <div>
                            <h5 class="text-warning mb-1">{% trans "Consider These Alternatives" %}</h5>
                            <p class="mb-0">
                                {% trans "Instead of deleting, you might want to consider these options:" %}
                            </p>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-pause-circle text-warning me-3"></i>
                                <div>
                                    <strong>{% trans "Pause Campaign" %}</strong><br>
                                    <small class="text-muted">{% trans "Temporarily stop the campaign while preserving all data" %}</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-archive text-info me-3"></i>
                                <div>
                                    <strong>{% trans "Archive Campaign" %}</strong><br>
                                    <small class="text-muted">{% trans "Mark as completed to preserve historical data" %}</small>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mt-3">
                        <a href="{% url 'campaigns:pause' object.pk %}" class="btn btn-warning me-2">
                            <i class="fas fa-pause me-2"></i>{% trans "Pause Instead" %}
                        </a>
                        <a href="{% url 'campaigns:edit' object.pk %}" class="btn btn-info">
                            <i class="fas fa-edit me-2"></i>{% trans "Edit Campaign" %}
                        </a>
                    </div>
                </div>
            {% endif %}

            <!-- Deletion Form -->
            <div class="card shadow mb-4">
                <div class="card-header py-3 bg-danger">
                    <h6 class="m-0 font-weight-bold text-white">
                        <i class="fas fa-trash-alt me-2"></i>{% trans "Confirm Deletion" %}
                    </h6>
                </div>
                <div class="card-body">
                    <form method="post" id="deleteForm">
                        {% csrf_token %}
                        
                        <div class="mb-4">
                            <div class="form-check">
                                <input class="form-check-input confirmation-checkbox" type="checkbox" 
                                       id="confirmUnderstand" required>
                                <label class="form-check-label font-weight-bold" for="confirmUnderstand">
                                    {% trans "I understand that this action cannot be undone" %}
                                </label>
                            </div>
                        </div>
                        
                        <div class="mb-4">
                            <div class="form-check">
                                <input class="form-check-input confirmation-checkbox" type="checkbox" 
                                       id="confirmDataLoss" required>
                                <label class="form-check-label font-weight-bold" for="confirmDataLoss">
                                    {% trans "I understand that all campaign data will be permanently lost" %}
                                </label>
                            </div>
                        </div>
                        
                        <div class="mb-4">
                            <label for="campaignNameConfirm" class="form-label font-weight-bold">
                                {% trans "Type the campaign name to confirm:" %} <span class="text-danger">{{ object.name }}</span>
                            </label>
                            <input type="text" class="form-control" id="campaignNameConfirm" 
                                   placeholder="{% trans 'Enter campaign name exactly as shown above' %}" required>
                            <div class="invalid-feedback">
                                {% trans "Campaign name does not match" %}
                            </div>
                        </div>
                        
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <a href="{% url 'campaigns:detail' object.pk %}" class="btn btn-outline-secondary">
                                    <i class="fas fa-times me-2"></i>{% trans "Cancel" %}
                                </a>
                            </div>
                            <div>
                                <button type="submit" class="btn btn-delete" id="deleteButton" disabled>
                                    <i class="fas fa-trash-alt me-2"></i>{% trans "Delete Campaign Permanently" %}
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    const campaignName = '{{ object.name|escapejs }}';
    const deleteButton = $('#deleteButton');
    const confirmUnderstand = $('#confirmUnderstand');
    const confirmDataLoss = $('#confirmDataLoss');
    const campaignNameConfirm = $('#campaignNameConfirm');
    
    function checkFormValidity() {
        const isNameMatch = campaignNameConfirm.val().trim() === campaignName;
        const isUnderstandChecked = confirmUnderstand.is(':checked');
        const isDataLossChecked = confirmDataLoss.is(':checked');
        
        if (isNameMatch && isUnderstandChecked && isDataLossChecked) {
            deleteButton.prop('disabled', false);
            campaignNameConfirm.removeClass('is-invalid').addClass('is-valid');
        } else {
            deleteButton.prop('disabled', true);
            if (campaignNameConfirm.val().trim() !== '' && !isNameMatch) {
                campaignNameConfirm.removeClass('is-valid').addClass('is-invalid');
            } else {
                campaignNameConfirm.removeClass('is-invalid is-valid');
            }
        }
    }
    
    // Check form validity on input changes
    confirmUnderstand.on('change', checkFormValidity);
    confirmDataLoss.on('change', checkFormValidity);
    campaignNameConfirm.on('input', checkFormValidity);
    
    // Form submission confirmation
    $('#deleteForm').on('submit', function(e) {
        if (!confirm('{% trans "Are you absolutely sure you want to delete this campaign? This action cannot be undone." %}')) {
            e.preventDefault();
            return false;
        }
        
        // Show loading state
        deleteButton.html('<i class="fas fa-spinner fa-spin me-2"></i>{% trans "Deleting..." %}');
        deleteButton.prop('disabled', true);
    });
    
    // Prevent accidental navigation
    window.addEventListener('beforeunload', function(e) {
        if (campaignNameConfirm.val().trim() !== '' || confirmUnderstand.is(':checked') || confirmDataLoss.is(':checked')) {
            e.preventDefault();
            e.returnValue = '{% trans "Are you sure you want to leave? Your confirmation will be lost." %}';
        }
    });
    
    // Remove beforeunload listener on form submission
    $('#deleteForm').on('submit', function() {
        window.removeEventListener('beforeunload', function() {});
    });
});
</script>
{% endblock %}