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

{% block title %}Delete Brand - {{ brand.name }}{% endblock %}

{% block extra_css %}
<style>
.delete-warning {
    background: linear-gradient(135deg, #ff6b6b, #ee5a52);
    color: white;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
}

.brand-preview {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
}

.impact-assessment {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 8px;
    padding: 15px;
    margin: 20px 0;
}

.confirmation-input {
    background: #fff;
    border: 2px solid #dc3545;
    border-radius: 5px;
    padding: 10px;
    font-size: 16px;
    width: 100%;
    margin: 10px 0;
}

.delete-btn {
    background: #dc3545;
    border: none;
    color: white;
    padding: 12px 30px;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.delete-btn:hover {
    background: #c82333;
    transform: translateY(-2px);
}

.delete-btn:disabled {
    background: #6c757d;
    cursor: not-allowed;
    transform: none;
}

.cancel-btn {
    background: #6c757d;
    border: none;
    color: white;
    padding: 12px 30px;
    border-radius: 5px;
    font-size: 16px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    margin-right: 10px;
}

.cancel-btn:hover {
    background: #5a6268;
    color: white;
    text-decoration: none;
    transform: translateY(-2px);
}

.brand-logo {
    max-height: 80px;
    max-width: 120px;
    object-fit: contain;
}
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <!-- Header -->
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h1 class="h3 mb-0">Delete Brand</h1>
                    <p class="text-muted">Permanently remove brand from the system</p>
                </div>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
                        <li class="breadcrumb-item"><a href="{% url 'advertisers:brand_list' %}">Brands</a></li>
                        <li class="breadcrumb-item"><a href="{% url 'advertisers:brand_detail' brand.id %}">{{ brand.name }}</a></li>
                        <li class="breadcrumb-item active">Delete</li>
                    </ol>
                </nav>
            </div>

            <!-- Warning Alert -->
            <div class="delete-warning">
                <div class="d-flex align-items-center">
                    <i class="fas fa-exclamation-triangle fa-2x me-3"></i>
                    <div>
                        <h4 class="mb-1">⚠️ Permanent Deletion Warning</h4>
                        <p class="mb-0">This action cannot be undone. All data associated with this brand will be permanently deleted.</p>
                    </div>
                </div>
            </div>

            <!-- Brand Preview -->
            <div class="brand-preview">
                <h5>Brand to be deleted:</h5>
                <div class="row">
                    <div class="col-md-8">
                        <h4>{{ brand.name }}</h4>
                        <p class="text-muted">{{ brand.description|default:"No description available" }}</p>
                        <div class="row">
                            <div class="col-sm-6">
                                <strong>Agency:</strong> 
                                <a href="{% url 'advertisers:agency_detail' brand.agency.id %}">{{ brand.agency.name }}</a><br>
                                <strong>Industry:</strong> {{ brand.industry|default:"Not specified" }}<br>
                                <strong>Category:</strong> {{ brand.category.name|default:"Not specified" }}<br>
                                <strong>Website:</strong> 
                                {% if brand.website %}
                                    <a href="{{ brand.website }}" target="_blank">{{ brand.website }}</a>
                                {% else %}
                                    Not specified
                                {% endif %}
                            </div>
                            <div class="col-sm-6">
                                <strong>Created:</strong> {{ brand.created_at|date:"M d, Y" }}<br>
                                <strong>Status:</strong> 
                                <span class="badge bg-{{ brand.status|yesno:'success,danger' }}">{{ brand.get_status_display }}</span><br>
                                <strong>Annual Budget:</strong> 
                                {% if brand.annual_budget %}
                                    ${{ brand.annual_budget|floatformat:0 }}
                                {% else %}
                                    Not set
                                {% endif %}<br>
                                <strong>Total Campaigns:</strong> {{ brand.total_campaigns }}
                            </div>
                        </div>
                    </div>
                    {% if brand.logo %}
                    <div class="col-md-4 text-center">
                        <img src="{{ brand.logo.url }}" alt="{{ brand.name }} Logo" class="brand-logo img-fluid">
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- Impact Assessment -->
            <div class="impact-assessment">
                <h5><i class="fas fa-info-circle"></i> Deletion Impact</h5>
                <p>Deleting this brand will also:</p>
                <ul>
                    <li><strong>{{ brand.total_campaigns }} Campaign(s)</strong> will be deleted</li>
                    <li>All associated <strong>creatives and ad spots</strong> will be permanently removed</li>
                    <li>All <strong>analytics data and performance reports</strong> will be lost</li>
                    <li>User access permissions for this brand will be revoked</li>
                    {% if brand.annual_budget %}
                    <li>Annual budget allocation of <strong>${{ brand.annual_budget|floatformat:0 }}</strong> will be released</li>
                    {% endif %}
                </ul>
            </div>

            <!-- Confirmation Form -->
            <div class="card">
                <div class="card-body">
                    <form method="post" id="deleteForm">
                        {% csrf_token %}
                        
                        <div class="mb-3">
                            <label for="confirmationInput" class="form-label">
                                <strong>Type the brand name "{{ brand.name }}" to confirm deletion:</strong>
                            </label>
                            <input type="text" 
                                   id="confirmationInput" 
                                   class="confirmation-input" 
                                   placeholder="Enter brand name to confirm"
                                   required>
                        </div>

                        <div class="mb-3">
                            <label for="deleteReason" class="form-label">Reason for deletion (optional):</label>
                            <textarea id="deleteReason" 
                                      name="delete_reason" 
                                      class="form-control" 
                                      rows="3" 
                                      placeholder="Provide a reason for this deletion..."></textarea>
                        </div>

                        <div class="form-check mb-3">
                            <input class="form-check-input" type="checkbox" id="confirmUnderstanding" required>
                            <label class="form-check-label" for="confirmUnderstanding">
                                I understand that this action is permanent and cannot be undone
                            </label>
                        </div>

                        <div class="d-flex justify-content-end">
                            <a href="{% url 'advertisers:brand_detail' brand.id %}" class="cancel-btn">
                                <i class="fas fa-times"></i> Cancel
                            </a>
                            <button type="submit" class="delete-btn" id="deleteButton" disabled>
                                <i class="fas fa-trash"></i> Delete Brand Permanently
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const confirmationInput = document.getElementById('confirmationInput');
    const confirmUnderstanding = document.getElementById('confirmUnderstanding');
    const deleteButton = document.getElementById('deleteButton');
    const deleteForm = document.getElementById('deleteForm');
    const expectedName = '{{ brand.name|escapejs }}';
    
    function checkFormValidity() {
        const nameMatches = confirmationInput.value.trim() === expectedName;
        const understandingChecked = confirmUnderstanding.checked;
        
        if (nameMatches && understandingChecked) {
            deleteButton.disabled = false;
            deleteButton.style.background = '#dc3545';
        } else {
            deleteButton.disabled = true;
            deleteButton.style.background = '#6c757d';
        }
    }
    
    // Enable/disable delete button based on form validity
    confirmationInput.addEventListener('input', checkFormValidity);
    confirmUnderstanding.addEventListener('change', checkFormValidity);
    
    // Final confirmation before submission
    deleteForm.addEventListener('submit', function(e) {
        if (confirmationInput.value.trim() !== expectedName) {
            e.preventDefault();
            alert('Please enter the exact brand name to confirm deletion.');
            return false;
        }
        
        if (!confirmUnderstanding.checked) {
            e.preventDefault();
            alert('Please confirm that you understand this action is permanent.');
            return false;
        }
        
        if (!confirm('Are you absolutely sure you want to delete this brand? This action cannot be undone.')) {
            e.preventDefault();
            return false;
        }
        
        // Show loading state
        deleteButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Deleting...';
        deleteButton.disabled = true;
    });
});
</script>
{% endblock %}