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

{% load static %}

{% block title %}Bad Request - 400{% endblock %}

{% block extra_css %}
<style>
    .error-container {
        min-height: 70vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #42a5f5 0%, #1e88e5 100%);
        border-radius: 15px;
        margin: 20px 0;
        position: relative;
        overflow: hidden;
    }
    
    .error-container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="white" opacity="0.1"/><circle cx="20" cy="80" r="0.5" fill="white" opacity="0.1"/><circle cx="90" cy="30" r="0.5" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
        pointer-events: none;
    }
    
    .error-content {
        text-align: center;
        color: white;
        z-index: 2;
        position: relative;
    }
    
    .error-icon {
        font-size: 6rem;
        margin-bottom: 20px;
        animation: wobble 2s ease-in-out infinite;
    }
    
    .error-code {
        font-size: 8rem;
        font-weight: 900;
        margin: 0;
        text-shadow: 3px 3px 0px rgba(0,0,0,0.2);
        animation: bounce 2s ease-in-out infinite;
    }
    
    .error-title {
        font-size: 2.5rem;
        margin: 20px 0;
        font-weight: 600;
    }
    
    .error-description {
        font-size: 1.2rem;
        margin-bottom: 30px;
        opacity: 0.9;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
        line-height: 1.6;
    }
    
    .error-actions {
        display: flex;
        gap: 20px;
        justify-content: center;
        flex-wrap: wrap;
        margin-top: 40px;
    }
    
    .error-btn {
        padding: 15px 30px;
        border: 2px solid white;
        background: rgba(255, 255, 255, 0.1);
        color: white;
        text-decoration: none;
        border-radius: 50px;
        font-weight: 600;
        transition: all 0.3s ease;
        backdrop-filter: blur(10px);
    }
    
    .error-btn:hover {
        background: white;
        color: #42a5f5;
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    }
    
    .error-btn.primary {
        background: rgba(255, 255, 255, 0.2);
    }
    
    .floating-icons {
        position: absolute;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: 1;
    }
    
    .floating-icon {
        position: absolute;
        color: rgba(255, 255, 255, 0.1);
        animation: floatIcon 6s ease-in-out infinite;
    }
    
    .floating-icon:nth-child(1) {
        top: 20%;
        left: 10%;
        font-size: 2.5rem;
        animation-delay: 0s;
    }
    
    .floating-icon:nth-child(2) {
        top: 50%;
        right: 15%;
        font-size: 2rem;
        animation-delay: 2s;
    }
    
    .floating-icon:nth-child(3) {
        bottom: 25%;
        left: 20%;
        font-size: 3rem;
        animation-delay: 4s;
    }
    
    @keyframes wobble {
        0%, 100% { transform: rotate(0deg); }
        15% { transform: rotate(5deg); }
        30% { transform: rotate(-5deg); }
        45% { transform: rotate(3deg); }
        60% { transform: rotate(-3deg); }
        75% { transform: rotate(1deg); }
    }
    
    @keyframes bounce {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.1); }
    }
    
    @keyframes floatIcon {
        0%, 100% { transform: translateY(0px) rotate(0deg); }
        33% { transform: translateY(-15px) rotate(120deg); }
        66% { transform: translateY(10px) rotate(240deg); }
    }
    
    .breadcrumb-container {
        background: rgba(248, 249, 250, 0.95);
        border-radius: 10px;
        padding: 15px;
        margin-bottom: 20px;
        backdrop-filter: blur(10px);
    }
    
    .request-info {
        background: rgba(255, 255, 255, 0.2);
        border-radius: 10px;
        padding: 20px;
        margin-top: 30px;
        backdrop-filter: blur(10px);
    }
    
    .suggestion-card {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        padding: 15px;
        margin: 10px 0;
        border-left: 4px solid white;
    }
    
    @media (max-width: 768px) {
        .error-code {
            font-size: 5rem;
        }
        .error-title {
            font-size: 2rem;
        }
        .error-description {
            font-size: 1rem;
            padding: 0 20px;
        }
        .error-actions {
            flex-direction: column;
            align-items: center;
        }
        .error-btn {
            width: 200px;
            text-align: center;
        }
        .error-icon {
            font-size: 4rem;
        }
    }
</style>
{% endblock extra_css %}

{% block breadcrumb %}
<div class="breadcrumb-container">
    <div class="page-header">
        <h1 class="page-title">Bad Request</h1>
        <div>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
                <li class="breadcrumb-item active" aria-current="page">400 Error</li>
            </ol>
        </div>
    </div>
</div>
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="error-container">
            <div class="floating-icons">
                <i class="fe fe-exclamation-triangle floating-icon"></i>
                <i class="fe fe-question-circle floating-icon"></i>
                <i class="fe fe-times-circle floating-icon"></i>
            </div>
            
            <div class="error-content">
                <i class="fe fe-exclamation-circle error-icon"></i>
                <h1 class="error-code">400</h1>
                <h2 class="error-title">Bad Request</h2>
                <p class="error-description">
                    The request you sent to the server was invalid or malformed. 
                    Please check your input and try again.
                </p>
                
                <div class="request-info">
                    <h5><i class="fe fe-lightbulb me-2"></i>Common Issues:</h5>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="suggestion-card">
                                <h6><i class="fe fe-keyboard me-2"></i>Form Data</h6>
                                <small>Check that all required fields are filled correctly</small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="suggestion-card">
                                <h6><i class="fe fe-file-alt me-2"></i>File Upload</h6>
                                <small>Ensure files are the right format and size</small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="suggestion-card">
                                <h6><i class="fe fe-link me-2"></i>URL Parameters</h6>
                                <small>Verify the URL is correctly formatted</small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="suggestion-card">
                                <h6><i class="fe fe-shield-alt me-2"></i>Security Token</h6>
                                <small>CSRF token might be missing or expired</small>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="error-actions">
                    <a href="javascript:history.back()" class="error-btn primary">
                        <i class="fe fe-arrow-left me-2"></i>Go Back & Retry
                    </a>
                    <a href="{% url 'core:dashboard' %}" class="error-btn">
                        <i class="fe fe-home me-2"></i>Dashboard
                    </a>
                    <a href="javascript:location.reload()" class="error-btn">
                        <i class="fe fe-sync-alt me-2"></i>Refresh Page
                    </a>
                </div>
            </div>
        </div>
        
        <!-- Detailed Help Section -->
        <div class="card mt-4">
            <div class="card-header">
                <h5 class="mb-0"><i class="fe fe-question-circle me-2"></i>What Causes a 400 Error?</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <h6>Form-Related Issues:</h6>
                        <ul>
                            <li>Missing required form fields</li>
                            <li>Invalid data format (email, phone, etc.)</li>
                            <li>File size exceeding limits</li>
                            <li>Unsupported file types</li>
                            <li>Form submission timeout</li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <h6>Technical Issues:</h6>
                        <ul>
                            <li>Malformed URL or parameters</li>
                            <li>Missing CSRF security token</li>
                            <li>Invalid request method (GET vs POST)</li>
                            <li>Character encoding problems</li>
                            <li>Browser cache conflicts</li>
                        </ul>
                    </div>
                </div>
                
                <div class="alert alert-info mt-3">
                    <i class="fe fe-info-circle me-2"></i>
                    <strong>Tip:</strong> If you were filling out a form, try going back to the previous page and submitting it again. 
                    Make sure all required fields are completed and any uploaded files meet the specified requirements.
                </div>
            </div>
        </div>
        
        <!-- Quick Actions -->
        <div class="card mt-4">
            <div class="card-body">
                <h5 class="card-title">Quick Solutions</h5>
                <div class="row">
                    <div class="col-md-3">
                        <div class="text-center mb-3">
                            <i class="fe fe-redo fa-2x text-primary mb-2"></i>
                            <h6>Try Again</h6>
                            <small class="text-muted">Go back and resubmit your request</small>
                            <br>
                            <button class="btn btn-outline-primary btn-sm mt-2" onclick="history.back()">
                                Go Back
                            </button>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="text-center mb-3">
                            <i class="fe fe-broom fa-2x text-success mb-2"></i>
                            <h6>Clear Cache</h6>
                            <small class="text-muted">Clear browser cache and cookies</small>
                            <br>
                            <button class="btn btn-outline-success btn-sm mt-2" onclick="clearCache()">
                                Clear Cache
                            </button>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="text-center mb-3">
                            <i class="fe fe-check-double fa-2x text-warning mb-2"></i>
                            <h6>Check Form</h6>
                            <small class="text-muted">Verify all form fields are correct</small>
                            <br>
                            <a href="#" class="btn btn-outline-warning btn-sm mt-2">
                                Form Help
                            </a>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="text-center mb-3">
                            <i class="fe fe-life-ring fa-2x text-danger mb-2"></i>
                            <h6>Get Support</h6>
                            <small class="text-muted">Contact our support team</small>
                            <br>
                            <a href="mailto:support@yourcompany.com" class="btn btn-outline-danger btn-sm mt-2">
                                Contact Us
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Request Details for Debugging -->
        {% if user.is_staff or user.is_superuser %}
        <div class="card mt-4 border-primary">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0"><i class="fe fe-bug me-2"></i>Debug Information (Admin Only)</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <h6>Request Details:</h6>
                        <ul class="list-unstyled">
                            <li><strong>Method:</strong> <code>{{ request.method }}</code></li>
                            <li><strong>URL:</strong> <code>{{ request.build_absolute_uri }}</code></li>
                            <li><strong>User Agent:</strong> <small>{{ request.META.HTTP_USER_AGENT|truncatechars:50 }}</small></li>
                            <li><strong>Content Type:</strong> <code>{{ request.content_type|default:"Not specified" }}</code></li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <h6>Possible Solutions:</h6>
                        <ul>
                            <li>Check form validation in views</li>
                            <li>Verify CSRF token is included</li>
                            <li>Validate request parameters</li>
                            <li>Check file upload settings</li>
                            <li>Review URL patterns</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endblock content %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Clear cache function
        window.clearCache = function() {
            if ('caches' in window) {
                caches.keys().then(function(names) {
                    names.forEach(function(name) {
                        caches.delete(name);
                    });
                });
            }
            
            // Clear localStorage and sessionStorage
            if (typeof(Storage) !== "undefined") {
                localStorage.clear();
                sessionStorage.clear();
            }
            
            // Show success message
            if (typeof Swal !== 'undefined') {
                Swal.fire({
                    icon: 'success',
                    title: 'Cache Cleared',
                    text: 'Browser cache has been cleared. Try your request again.',
                    timer: 2000,
                    showConfirmButton: false
                });
            } else {
                alert('Cache cleared! Please try your request again.');
            }
        };
        
        // Auto-suggest going back after some time
        setTimeout(function() {
            if (confirm('Would you like to go back to the previous page and try again?')) {
                history.back();
            }
        }, 10000);
        
        // Add interactive effects to suggestion cards
        document.querySelectorAll('.suggestion-card').forEach(card => {
            card.addEventListener('mouseenter', function() {
                this.style.transform = 'translateX(5px)';
                this.style.transition = 'transform 0.3s ease';
            });
            
            card.addEventListener('mouseleave', function() {
                this.style.transform = 'translateX(0)';
            });
        });
    });
</script>
{% endblock extra_js %}