{% extends "errors/base_error.html" %}

{% block title %}Service indisponible - Bilal Oil{% endblock %}

{% block error_content %}
    <!-- Icône d'erreur animée -->
    <div class="mb-6">
        <div class="error-animation">
            <i class="fas fa-exclamation-triangle text-6xl text-yellow-400 mb-4 pulse-error"></i>
        </div>
    </div>

    <!-- Code d'erreur -->
    <div class="mb-4">
        <h2 class="text-8xl font-bold text-yellow-300">503</h2>
    </div>

    <!-- Message principal -->
    <h3 class="text-2xl font-bold text-gray-800 mb-4">
        Service temporairement indisponible
    </h3>

    <!-- Description -->
    <p class="text-gray-600 mb-6 leading-relaxed">
        Notre site web est actuellement en maintenance ou temporairement surchargé. 
        Nous nous excusons pour ce désagrément et travaillons à rétablir le service rapidement.
    </p>

    <!-- Statut de maintenance -->
    <div class="bg-yellow-50 rounded-lg p-6 mb-6">
        <h4 class="font-semibold text-gray-800 mb-3">
            <i class="fas fa-tools text-yellow-500 mr-2"></i>
            Maintenance en cours
        </h4>
        <div class="text-left space-y-3">
            <div class="flex items-center">
                <div class="w-3 h-3 bg-yellow-400 rounded-full mr-3 animate-pulse"></div>
                <span class="text-gray-600">Mise à jour du système en cours</span>
            </div>
            <div class="flex items-center">
                <div class="w-3 h-3 bg-blue-400 rounded-full mr-3"></div>
                <span class="text-gray-600">Amélioration des performances</span>
            </div>
            <div class="flex items-center">
                <div class="w-3 h-3 bg-green-400 rounded-full mr-3"></div>
                <span class="text-gray-600">Sauvegarde des données sécurisée</span>
            </div>
        </div>
    </div>

    <!-- Estimation du temps -->
    <div class="bg-blue-50 rounded-lg p-6 mb-6">
        <h4 class="font-semibold text-gray-800 mb-3">
            <i class="fas fa-clock text-blue-500 mr-2"></i>
            Temps estimé de rétablissement
        </h4>
        <div class="text-center">
            <div class="text-3xl font-bold text-blue-600 mb-2">
                <span id="countdown">15:00</span>
            </div>
            <p class="text-gray-600">minutes (estimation)</p>
            <p class="text-sm text-gray-500 mt-2">
                Cette page sera automatiquement actualisée
            </p>
        </div>
    </div>

    <!-- Services alternatifs -->
    <div class="bg-green-50 rounded-lg p-6 mb-6">
        <h4 class="font-semibold text-gray-800 mb-3">
            <i class="fas fa-phone text-green-500 mr-2"></i>
            Services toujours disponibles
        </h4>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-left">
            <div class="flex items-center">
                <i class="fas fa-phone text-green-500 mr-2"></i>
                <span class="text-gray-600">Support téléphonique</span>
            </div>
            <div class="flex items-center">
                <i class="fas fa-gas-pump text-green-500 mr-2"></i>
                <span class="text-gray-600">Stations-service ouvertes</span>
            </div>
            <div class="flex items-center">
                <i class="fas fa-mobile-alt text-green-500 mr-2"></i>
                <span class="text-gray-600">Application mobile</span>
            </div>
            <div class="flex items-center">
                <i class="fas fa-envelope text-green-500 mr-2"></i>
                <span class="text-gray-600">Email de contact</span>
            </div>
        </div>
    </div>

    <!-- Actions d'urgence -->
    <div class="bg-red-50 rounded-lg p-6">
        <h4 class="font-semibold text-gray-800 mb-3">
            <i class="fas fa-exclamation text-red-500 mr-2"></i>
            Urgence ?
        </h4>
        <p class="text-gray-600 mb-3">
            Pour toute urgence liée à nos services, contactez directement :
        </p>
        <div class="space-y-2 text-center">
            <a href="tel:+221123456789" 
               class="inline-block bg-red-500 hover:bg-red-600 text-white font-semibold py-2 px-4 rounded-lg transition duration-300">
                <i class="fas fa-phone mr-2"></i>
                Urgence : +221 12 345 67 89
            </a>
        </div>
    </div>

    <!-- Auto-refresh countdown -->
    <script>
        let timeLeft = 900; // 15 minutes en secondes
        
        function updateCountdown() {
            const minutes = Math.floor(timeLeft / 60);
            const seconds = timeLeft % 60;
            const countdown = document.getElementById('countdown');
            
            if (countdown) {
                countdown.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
            }
            
            if (timeLeft <= 0) {
                window.location.reload();
            } else {
                timeLeft--;
            }
        }
        
        // Mettre à jour le compteur chaque seconde
        setInterval(updateCountdown, 1000);
        updateCountdown(); // Appel initial
        
        // Actualiser automatiquement toutes les 60 secondes
        setInterval(function() {
            window.location.reload();
        }, 60000);
    </script>
{% endblock %}