{% extends 'admin/base.html.twig' %}

{% block title %}Supprimer le site{% endblock %}
{% block breadcrumb %}Supprimer le site{% endblock %}

{% block body %}
<div class="content-header" data-aos="fade-down">
    <h1 class="content-title text-danger">
        <i class="fas fa-exclamation-triangle me-3"></i>
        Supprimer définitivement le site
    </h1>
    <p class="content-subtitle">Cette action est irréversible</p>
</div>

<div class="row justify-content-center">
    <div class="col-lg-10 col-xl-8">
        <!-- Alerte principale -->
        <div class="alert alert-danger d-flex align-items-start mb-4" role="alert" data-aos="fade-up" style="border: 2px solid #dc3545;">
            <i class="fas fa-exclamation-circle me-3 mt-1 fs-2"></i>
            <div class="flex-grow-1">
                <h4 class="alert-heading fw-bold mb-3">
                    <i class="fas fa-skull-crossbones me-2"></i>
                    ATTENTION - Zone de danger
                </h4>
                <p class="mb-2">
                    Vous êtes sur le point de <strong>supprimer définitivement</strong> votre site
                    <strong class="text-decoration-underline">{{ site.name }}</strong>.
                </p>
                <p class="mb-0">
                    Cette action est <strong>IRRÉVERSIBLE</strong> et entraînera la perte totale et définitive de toutes vos données.
                </p>
            </div>
        </div>

        <!-- Informations sur le site -->
        <div class="modern-card mb-4" data-aos="fade-up" data-aos-delay="100">
            <h5 class="fw-bold mb-4">
                <i class="fas fa-info-circle me-2 text-primary"></i>
                Informations sur le site à supprimer
            </h5>
            <div class="row g-3">
                <div class="col-md-6">
                    <div class="p-3 rounded" style="background: #f8f9fa; border-left: 3px solid var(--colorTheme);">
                        <div class="text-muted small mb-1">Nom du site</div>
                        <div class="fw-semibold">{{ site.name }}</div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="p-3 rounded" style="background: #f8f9fa; border-left: 3px solid var(--colorTheme);">
                        <div class="text-muted small mb-1">Domaine</div>
                        <div class="fw-semibold">{{ site.domain ?: 'Non configuré' }}</div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="p-3 rounded" style="background: #f8f9fa; border-left: 3px solid var(--colorTheme);">
                        <div class="text-muted small mb-1">Nombre de pages</div>
                        <div class="fw-semibold">{{ site.pages|length }} page(s)</div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="p-3 rounded" style="background: #f8f9fa; border-left: 3px solid var(--colorTheme);">
                        <div class="text-muted small mb-1">Date de création</div>
                        <div class="fw-semibold">{{ site.createdAt|date('d/m/Y') }}</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Conséquences de la suppression -->
        <div class="modern-card mb-4" data-aos="fade-up" data-aos-delay="200" style="border: 2px solid #dc3545;">
            <h5 class="fw-bold mb-4 text-danger">
                <i class="fas fa-trash-alt me-2"></i>
                Ce qui sera supprimé définitivement
            </h5>
            <div class="row g-3">
                <div class="col-md-6">
                    <div class="d-flex align-items-start mb-3">
                        <div class="flex-shrink-0">
                            <div class="rounded-circle bg-danger bg-opacity-10 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                                <i class="fas fa-file-alt text-danger"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h6 class="fw-semibold mb-1">Toutes vos pages</h6>
                            <p class="text-muted small mb-0">{{ site.pages|length }} page(s) avec tout leur contenu</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="d-flex align-items-start mb-3">
                        <div class="flex-shrink-0">
                            <div class="rounded-circle bg-danger bg-opacity-10 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                                <i class="fas fa-images text-danger"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h6 class="fw-semibold mb-1">Tous vos médias</h6>
                            <p class="text-muted small mb-0">Images, logos, documents uploadés</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="d-flex align-items-start mb-3">
                        <div class="flex-shrink-0">
                            <div class="rounded-circle bg-danger bg-opacity-10 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                                <i class="fas fa-newspaper text-danger"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h6 class="fw-semibold mb-1">Articles de blog</h6>
                            <p class="text-muted small mb-0">Tous vos posts et catégories</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="d-flex align-items-start mb-3">
                        <div class="flex-shrink-0">
                            <div class="rounded-circle bg-danger bg-opacity-10 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                                <i class="fas fa-inbox text-danger"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h6 class="fw-semibold mb-1">Messages de contact</h6>
                            <p class="text-muted small mb-0">Historique des messages reçus</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="d-flex align-items-start mb-3">
                        <div class="flex-shrink-0">
                            <div class="rounded-circle bg-danger bg-opacity-10 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                                <i class="fas fa-cog text-danger"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h6 class="fw-semibold mb-1">Configuration du site</h6>
                            <p class="text-muted small mb-0">Thème, paramètres, réglages personnalisés</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="d-flex align-items-start mb-3">
                        <div class="flex-shrink-0">
                            <div class="rounded-circle bg-danger bg-opacity-10 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                                <i class="fas fa-users text-danger"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h6 class="fw-semibold mb-1">Accès collaborateurs</h6>
                            <p class="text-muted small mb-0">Tous les utilisateurs perdront l'accès</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Actions finales après suppression -->
        <div class="modern-card mb-4" data-aos="fade-up" data-aos-delay="300">
            <h5 class="fw-bold mb-4">
                <i class="fas fa-power-off me-2 text-warning"></i>
                Ce qui se passera ensuite
            </h5>
            <ul class="list-unstyled mb-0">
                <li class="d-flex align-items-start mb-3">
                    <i class="fas fa-check-circle text-warning me-3 mt-1"></i>
                    <div>
                        <strong>Déconnexion immédiate</strong>
                        <p class="text-muted small mb-0">Vous serez automatiquement déconnecté de votre session</p>
                    </div>
                </li>
                <li class="d-flex align-items-start mb-3">
                    <i class="fas fa-check-circle text-warning me-3 mt-1"></i>
                    <div>
                        <strong>Site inaccessible</strong>
                        <p class="text-muted small mb-0">Votre site ne sera plus accessible en ligne</p>
                    </div>
                </li>
                <li class="d-flex align-items-start">
                    <i class="fas fa-check-circle text-warning me-3 mt-1"></i>
                    <div>
                        <strong>Aucune récupération possible</strong>
                        <p class="text-muted small mb-0">Il ne sera pas possible de restaurer les données après suppression</p>
                    </div>
                </li>
            </ul>
        </div>

        <!-- Boutons d'action -->
        <div class="d-flex justify-content-between align-items-center gap-3 mb-5" data-aos="fade-up" data-aos-delay="400">
            <a href="{{ path('bo-global-parameters') }}" class="btn btn-lg btn-secondary">
                <i class="fas fa-arrow-left me-2"></i>
                Annuler et retourner aux paramètres
            </a>
            <button type="button" class="btn btn-lg btn-danger" data-bs-toggle="modal" data-bs-target="#finalConfirmModal">
                <i class="fas fa-trash-alt me-2"></i>
                Je comprends, supprimer définitivement
            </button>
        </div>
    </div>
</div>

<!-- Modal de confirmation finale -->
<div class="modal fade" id="finalConfirmModal" tabindex="-1" aria-labelledby="finalConfirmModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header border-0 bg-danger text-white">
                <h5 class="modal-title fw-bold" id="finalConfirmModalLabel">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    Confirmation finale de suppression
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-4">
                <div class="text-center mb-4">
                    <div class="rounded-circle bg-danger bg-opacity-10 d-inline-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px;">
                        <i class="fas fa-skull-crossbones text-danger" style="font-size: 2.5rem;"></i>
                    </div>
                    <h5 class="fw-bold mb-3">Êtes-vous absolument certain ?</h5>
                    <p class="text-muted mb-0">
                        Cette action supprimera <strong class="text-danger">{{ site.name }}</strong> et toutes ses données de manière <strong>DÉFINITIVE</strong>.
                    </p>
                </div>

                <div class="alert alert-danger mb-0">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="confirmCheckbox">
                        <label class="form-check-label" for="confirmCheckbox">
                            <strong>Je comprends que cette action est irréversible</strong>
                        </label>
                    </div>
                </div>
            </div>
            <div class="modal-footer border-0 p-4 pt-0">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-1"></i>
                    Annuler
                </button>
                <a href="{{ path('site-remove', {'id': site.id}) }}" class="btn btn-danger" id="confirmDeleteBtn" style="opacity: 0.5; pointer-events: none;">
                    <i class="fas fa-trash-alt me-1"></i>
                    Confirmer la suppression définitive
                </a>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block javascripts %}
<script>
    // Activer le bouton de suppression seulement si la checkbox est cochée
    document.getElementById('confirmCheckbox').addEventListener('change', function() {
        const deleteBtn = document.getElementById('confirmDeleteBtn');
        if (this.checked) {
            deleteBtn.style.opacity = '1';
            deleteBtn.style.pointerEvents = 'auto';
        } else {
            deleteBtn.style.opacity = '0.5';
            deleteBtn.style.pointerEvents = 'none';
        }
    });
</script>
{% endblock %}