{% extends 'base.html' %}
{% load static %}

{% block title %}500 - Under Development | POS 254{% endblock %}

{% block extra_css %}
<style>
    .error-container {
        text-align: center;
        background: rgba(255, 255, 255, 0.95);
        padding: 60px 40px;
        border-radius: 20px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        backdrop-filter: blur(10px);
        max-width: 600px;
        width: 90%;
        margin: 0 auto;
        animation: fadeInUp 0.8s ease-out;
    }

    [data-theme="dark"] .error-container {
        background: rgba(45, 55, 72, 0.95);
        color: #e2e8f0;
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .error-icon {
        font-size: 80px;
        color: var(--primary-color);
        margin-bottom: 30px;
        animation: pulse 2s infinite;
    }

    @keyframes pulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.05); }
        100% { transform: scale(1); }
    }

    .error-code {
        font-size: 72px;
        font-weight: 800;
        color: var(--primary-color);
        margin-bottom: 20px;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    }

    .error-title {
        font-size: 28px;
        font-weight: 600;
        color: var(--card-fg);
        margin-bottom: 20px;
    }

    .error-message {
        font-size: 18px;
        color: #6c757d;
        margin-bottom: 30px;
        line-height: 1.6;
    }

    [data-theme="dark"] .error-message {
        color: #a0aec0;
    }

    .development-badge {
        display: inline-block;
        background: linear-gradient(45deg, var(--primary-color), #ff9800);
        color: white;
        padding: 8px 20px;
        border-radius: 25px;
        font-weight: 600;
        margin-bottom: 30px;
        box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3);
        animation: bounce 2s infinite;
    }

    @keyframes bounce {
        0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
        40% { transform: translateY(-10px); }
        60% { transform: translateY(-5px); }
    }

    .feature-list {
        text-align: left;
        background: var(--card-bg);
        padding: 25px;
        border-radius: 15px;
        margin: 30px 0;
        border-left: 5px solid var(--primary-color);
        border: 1px solid var(--border-color);
    }

    .feature-list h5 {
        color: var(--primary-color);
        margin-bottom: 15px;
        font-weight: 600;
    }

    .feature-list ul {
        margin: 0;
        padding-left: 20px;
    }

    .feature-list li {
        margin-bottom: 8px;
        color: var(--card-fg);
    }

    .feature-list i {
        color: var(--primary-color);
        margin-right: 8px;
    }

    .action-buttons {
        margin-top: 40px;
    }

    .btn-primary-custom {
        background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
        border: none;
        padding: 12px 30px;
        border-radius: 25px;
        color: white;
        font-weight: 600;
        text-decoration: none;
        display: inline-block;
        margin: 0 10px 10px 0;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
    }

    .btn-primary-custom:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
        color: white;
        text-decoration: none;
    }

    .btn-secondary-custom {
        background: transparent;
        border: 2px solid var(--primary-color);
        color: var(--primary-color);
        padding: 10px 28px;
        border-radius: 25px;
        font-weight: 600;
        text-decoration: none;
        display: inline-block;
        margin: 0 10px 10px 0;
        transition: all 0.3s ease;
    }

    .btn-secondary-custom:hover {
        background: var(--primary-color);
        color: white;
        text-decoration: none;
        transform: translateY(-2px);
    }

    .progress-container {
        margin: 30px 0;
    }

    .progress-label {
        font-size: 14px;
        color: #6c757d;
        margin-bottom: 10px;
    }

    [data-theme="dark"] .progress-label {
        color: #a0aec0;
    }

    .progress {
        height: 8px;
        border-radius: 10px;
        background-color: var(--border-color);
        overflow: hidden;
    }

    .progress-bar {
        background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
        width: 75%;
        height: 100%;
        border-radius: 10px;
        animation: progressAnimation 3s ease-in-out infinite;
    }

    @keyframes progressAnimation {
        0% { width: 70%; }
        50% { width: 80%; }
        100% { width: 75%; }
    }

    .footer-note {
        margin-top: 40px;
        font-size: 14px;
        color: #6c757d;
        border-top: 1px solid var(--border-color);
        padding-top: 20px;
    }

    [data-theme="dark"] .footer-note {
        color: #a0aec0;
    }

    .footer-note a {
        color: var(--primary-color);
        text-decoration: none;
    }

    .footer-note a:hover {
        text-decoration: underline;
    }

    .social-links {
        margin-top: 20px;
    }

    .social-links a {
        color: var(--primary-color);
        font-size: 24px;
        margin: 0 10px;
        transition: all 0.3s ease;
        text-decoration: none;
    }

    .social-links a:hover {
        color: var(--secondary-color);
        transform: translateY(-2px);
        text-decoration: none;
    }

    @media (max-width: 768px) {
        .error-container {
            padding: 40px 20px;
            margin: 20px;
        }
        
        .error-code {
            font-size: 48px;
        }
        
        .error-title {
            font-size: 24px;
        }
        
        .error-message {
            font-size: 16px;
        }
        
        .btn-primary-custom,
        .btn-secondary-custom {
            display: block;
            margin: 10px 0;
            text-align: center;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid d-flex align-items-center justify-content-center" style="min-height: 70vh;">
    <div class="error-container">
        <div class="error-icon">
            <i class="fas fa-tools"></i>
        </div>
        
        <div class="error-code">500</div>
        
        <h1 class="error-title">System Under Development</h1>
        
        <div class="development-badge">
            <i class="fas fa-code"></i> In Development
        </div>
        
        <p class="error-message">
            We're working hard to bring you an amazing POS experience! Our development team is currently enhancing the system with new features and improvements.
        </p>

        <div class="feature-list">
            <h5><i class="fas fa-rocket"></i> What's Coming Soon:</h5>
            <ul>
                <li><i class="fas fa-check-circle"></i> Enhanced inventory management</li>
                <li><i class="fas fa-check-circle"></i> Advanced reporting features</li>
                <li><i class="fas fa-check-circle"></i> Mobile-responsive design</li>
                <li><i class="fas fa-check-circle"></i> Real-time analytics dashboard</li>
                <li><i class="fas fa-check-circle"></i> Multi-user access controls</li>
            </ul>
        </div>

        <div class="progress-container">
            <div class="progress-label">
                <i class="fas fa-cog fa-spin"></i> Development Progress
            </div>
            <div class="progress">
                <div class="progress-bar"></div>
            </div>
        </div>

        <div class="action-buttons">
            <a href="{% url 'dashboard' %}" class="btn-primary-custom">
                <i class="fas fa-home"></i> Go to Dashboard
            </a>
            <a href="javascript:history.back()" class="btn-secondary-custom">
                <i class="fas fa-arrow-left"></i> Go Back
            </a>
        </div>

        <div class="footer-note">
            <p><strong>{{ shop.name|default:"POS 254" }}</strong> - Complete Business Management Solution</p>
            <p>Powered by <a href="https://optinet.co.ke" target="_blank">Optinet Global Links</a></p>
            
            <div class="social-links">
                <a href="#" title="Contact Support"><i class="fas fa-envelope"></i></a>
                <a href="#" title="Phone Support"><i class="fas fa-phone"></i></a>
                <a href="#" title="Documentation"><i class="fas fa-book"></i></a>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Auto-refresh functionality
    let refreshCount = 0;
    const maxRefreshAttempts = 10;
    
    function autoRefresh() {
        if (refreshCount < maxRefreshAttempts) {
            refreshCount++;
            setTimeout(() => {
                // Try to ping the server silently
                fetch('/', { method: 'HEAD', mode: 'no-cors' })
                    .then(() => {
                        // If successful, reload the page
                        window.location.reload();
                    })
                    .catch(() => {
                        // If failed, try again
                        autoRefresh();
                    });
            }, 30000); // Check every 30 seconds
        }
    }
    
    // Start auto-refresh
    autoRefresh();
    
    // Add click effect to buttons
    const buttons = document.querySelectorAll('.btn-primary-custom, .btn-secondary-custom');
    buttons.forEach(button => {
        button.addEventListener('click', function() {
            this.style.transform = 'scale(0.95)';
            setTimeout(() => {
                this.style.transform = '';
            }, 150);
        });
    });
});
</script>
{% endblock %}