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

{% load static %}

{% block title %}Delete Agency - {{ agency.name }}{% endblock %}

{% block extra_css %}
<style>
    .danger-zone {
        border: 2px solid #dc3545;
        border-radius: 8px;
        background: #f8f9fa;
        padding: 20px;
        margin: 20px 0;
    }
    
    .warning-icon {
        font-size: 4rem;
        color: #dc3545;
        margin-bottom: 20px;
    }
    
    .agency-info {
        background: #fff;
        border-radius: 8px;
        padding: 20px;
        border: 1px solid #dee2e6;
        margin-bottom: 20px;
    }
    
    .stats-item {
        text-align: center;
        padding: 15px;
        background: #f8f9fa;
        border-radius: 6px;
        border: 1px solid #dee2e6;
    }
    
    .stat-number {
        font-size: 1.5rem;
        font-weight: bold;
        color: #dc3545;
    }
</style>
{% endblock extra_css %}

{% block breadcrumb %}
<div class="page-header">
    <h1 class="page-title">Delete Agency</h1>
    <div>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{% url 'agencies:agency_list' %}">Agencies</a></li>
            <li class="breadcrumb-item"><a href="{% url 'agencies:agency_detail' agency.id %}">{{ agency.name }}</a></li>
            <li class="breadcrumb-item active" aria-current="page">Delete</li>
        </ol>
    </div>
</div>
{% endblock breadcrumb %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-lg-8">
        <!-- Agency Info Card -->
        <div class="agency-info">
            <div class="row align-items-center">
                <div class="col-md-2 text-center">
                    {% if agency.logo %}
                        <img src="{{ agency.logo.url }}" alt="{{ agency.name }}" class="img-fluid rounded" style="max-width: 80px; max-height: 80px;">
                    {% else %}
                        <div class="bg-light rounded d-flex align-items-center justify-content-center" style="width: 80px; height: 80px;">
                            <i class="fe fe-briefcase text-muted" style="font-size: 2rem;"></i>
                        </div>
                    {% endif %}
                </div>
                <div class="col-md-10">
                    <h4 class="mb-1">{{ agency.name }}</h4>
                    {% if agency.legal_name and agency.legal_name != agency.name %}
                        <p class="text-muted mb-1">{{ agency.legal_name }}</p>
                    {% endif %}
                    {% if agency.agency_type %}
                        <p class="text-muted mb-1">{{ agency.agency_type.name }}</p>
                    {% endif %}
                    <p class="text-muted mb-0">
                        <i class="fe fe-mail me-1"></i>{{ agency.email }}
                        {% if agency.phone %}
                            <span class="ms-3">
                                <i class="fe fe-phone me-1"></i>{{ agency.phone }}
                            </span>
                        {% endif %}
                    </p>
                </div>
            </div>
        </div>
        
        <!-- Impact Statistics -->
        <div class="card mb-4">
            <div class="card-header bg-light">
                <h5 class="card-title mb-0">
                    <i class="fe fe-bar-chart me-2"></i>Impact Analysis
                </h5>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-3">
                        <div class="stats-item">
                            <div class="stat-number">{{ agency.team_members.count }}</div>
                            <div class="text-muted">Team Members</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="stats-item">
                            <div class="stat-number">{{ brands_count|default:0 }}</div>
                            <div class="text-muted">Brands</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="stats-item">
                            <div class="stat-number">{{ campaigns_count|default:0 }}</div>
                            <div class="text-muted">Campaigns</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="stats-item">
                            <div class="stat-number">{{ total_adspots|default:0 }}</div>
                            <div class="text-muted">Ad Spots</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Danger Zone -->
        <div class="danger-zone">
            <div class="text-center">
                <i class="fe fe-alert-triangle warning-icon"></i>
                <h3 class="text-danger mb-3">Confirm Agency Deletion</h3>
                <p class="mb-3">
                    You are about to permanently delete the agency <strong>"{{ agency.name }}"</strong>. 
                    This action cannot be undone and will have the following consequences:
                </p>
                
                <div class="row g-2 mb-4">
                    <div class="col-md-6">
                        <div class="alert alert-danger mb-2">
                            <i class="fe fe-x-circle me-2"></i>
                            <strong>{{ agency.team_members.count }}</strong> team members will lose access
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="alert alert-danger mb-2">
                            <i class="fe fe-x-circle me-2"></i>
                            <strong>{{ brands_count|default:0 }}</strong> brands will be deleted
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="alert alert-danger mb-2">
                            <i class="fe fe-x-circle me-2"></i>
                            <strong>{{ campaigns_count|default:0 }}</strong> campaigns will be terminated
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="alert alert-danger mb-2">
                            <i class="fe fe-x-circle me-2"></i>
                            All historical data will be lost
                        </div>
                    </div>
                </div>
                
                <div class="alert alert-warning mb-4">
                    <i class="fe fe-info me-2"></i>
                    <strong>Important:</strong> Consider deactivating the agency instead of deleting if you want to preserve data.
                </div>
                
                <form method="post" class="d-inline-block">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-danger btn-lg me-3" onclick="return confirmDeletion()">
                        <i class="fe fe-trash-2 me-2"></i>
                        Yes, Delete Agency Permanently
                    </button>
                </form>
                
                <a href="{% url 'agencies:agency_detail' agency.id %}" class="btn btn-secondary btn-lg">
                    <i class="fe fe-arrow-left me-2"></i>
                    Cancel and Go Back
                </a>
            </div>
        </div>
        
        <!-- Alternative Actions -->
        <div class="card">
            <div class="card-header bg-light">
                <h5 class="card-title mb-0">
                    <i class="fe fe-help-circle me-2"></i>Alternative Actions
                </h5>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-6">
                        <div class="d-flex align-items-start">
                            <div class="me-3">
                                <div class="bg-warning bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                                    <i class="fe fe-pause text-warning"></i>
                                </div>
                            </div>
                            <div>
                                <h6 class="mb-1">Deactivate Agency</h6>
                                <p class="text-muted mb-2">Temporarily disable access while preserving all data.</p>
                                <a href="{% url 'agencies:agency_update' agency.id %}" class="btn btn-sm btn-warning">
                                    <i class="fe fe-pause me-1"></i>Deactivate
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="d-flex align-items-start">
                            <div class="me-3">
                                <div class="bg-info bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                                    <i class="fe fe-archive text-info"></i>
                                </div>
                            </div>
                            <div>
                                <h6 class="mb-1">Archive Agency</h6>
                                <p class="text-muted mb-2">Move to archived state for future reference.</p>
                                <button class="btn btn-sm btn-info" disabled>
                                    <i class="fe fe-archive me-1"></i>Archive (Coming Soon)
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% include "components/sweetalert_messages.html" %}
{% endblock content %}

{% block extra_js %}
<script>
function confirmDeletion() {
    return confirm(
        'Are you absolutely sure you want to delete this agency?\n\n' +
        'This action is PERMANENT and cannot be undone.\n\n' +
        'Type "DELETE" in the box below if you want to proceed.'
    );
}

// Enhanced confirmation with text input
document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('form[method="post"]');
    const deleteBtn = form.querySelector('button[type="submit"]');
    
    deleteBtn.addEventListener('click', function(e) {
        e.preventDefault();
        
        const userInput = prompt(
            'This action cannot be undone!\n\n' +
            'Please type "DELETE" to confirm the permanent deletion of "{{ agency.name }}":'
        );
        
        if (userInput === 'DELETE') {
            // Add loading state
            deleteBtn.innerHTML = '<i class="fe fe-loader me-2"></i>Deleting...';
            deleteBtn.disabled = true;
            
            // Submit form
            form.submit();
        } else if (userInput !== null) {
            alert('Incorrect confirmation text. Deletion cancelled.');
        }
    });
});
</script>
{% endblock extra_js %}