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

{% block title %}Contact Us - {{ block.super }}{% endblock %}

{% block content %}
<div class="contact-container">
    <!-- Contact Form -->
    <div class="contact-card">
        <div class="logo-container">
            <img src="{% static 'images/logo.png' %}" alt="Logo" class="logo">
        </div>
        <div class="mb-4">
            <h1>
                <i class="fas fa-envelope me-3 text-primary"></i>Get in Touch
            </h1>
            <p>
                We'd love to hear from you. Send us a message and we'll respond as soon as possible.
            </p>
        </div>
                
                <form method="post" id="contactForm">
                    {% csrf_token %}
                    
            {% if form.non_field_errors %}
                <div class="error-message">
                    <i class="fas fa-exclamation-circle me-2"></i>
                    {{ form.non_field_errors.0 }}
                </div>
            {% endif %}
                    
                    <div class="row g-3">
                        <!-- Name Field -->
                        <div class="col-md-6">
                            <div class="form-floating">
                                <input type="text" 
                                       class="form-control {% if form.name.errors %}is-invalid{% endif %}" 
                                       id="{{ form.name.id_for_label }}"
                                       name="{{ form.name.name }}"
                                       value="{{ form.name.value|default:'' }}"
                                       placeholder="Enter your full name"
                                       required>
                                <label for="{{ form.name.id_for_label }}">
                                    <i class="fas fa-user me-2"></i>Full Name *
                                </label>
                                {% if form.name.errors %}
                                    <div class="invalid-feedback">
                                        {{ form.name.errors.0 }}
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                        
                        <!-- Email Field -->
                        <div class="col-md-6">
                            <div class="form-floating">
                                <input type="email" 
                                       class="form-control {% if form.email.errors %}is-invalid{% endif %}" 
                                       id="{{ form.email.id_for_label }}"
                                       name="{{ form.email.name }}"
                                       value="{{ form.email.value|default:'' }}"
                                       placeholder="Enter your email address"
                                       required>
                                <label for="{{ form.email.id_for_label }}">
                                    <i class="fas fa-envelope me-2"></i>Email Address *
                                </label>
                                {% if form.email.errors %}
                                    <div class="invalid-feedback">
                                        {{ form.email.errors.0 }}
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                        
                        <!-- Phone Field -->
                        <div class="col-md-6">
                            <div class="form-floating">
                                <input type="tel" 
                                       class="form-control {% if form.phone.errors %}is-invalid{% endif %}" 
                                       id="{{ form.phone.id_for_label }}"
                                       name="{{ form.phone.name }}"
                                       value="{{ form.phone.value|default:'' }}"
                                       placeholder="Enter your phone number">
                                <label for="{{ form.phone.id_for_label }}">
                                    <i class="fas fa-phone me-2"></i>Phone Number
                                </label>
                            <div class="form-text">
                                <i class="fas fa-info-circle me-1"></i>Optional - for urgent matters
                            </div>
                            {% if form.phone.errors %}
                                <div class="invalid-feedback">
                                    {{ form.phone.errors.0 }}
                                </div>
                            {% endif %}
                            </div>
                        </div>
                        
                        <!-- Subject Field -->
                        <div class="col-md-6">
                            <div class="form-floating">
                                <select class="form-select {% if form.subject.errors %}is-invalid{% endif %}" 
                                        id="{{ form.subject.id_for_label }}"
                                        name="{{ form.subject.name }}"
                                        required>
                                    <option value="">Select a subject</option>
                                    <option value="general" {% if form.subject.value == 'general' %}selected{% endif %}>General Inquiry</option>
                                    <option value="support" {% if form.subject.value == 'support' %}selected{% endif %}>Technical Support</option>
                                    <option value="billing" {% if form.subject.value == 'billing' %}selected{% endif %}>Billing Question</option>
                                    <option value="feature" {% if form.subject.value == 'feature' %}selected{% endif %}>Feature Request</option>
                                    <option value="bug" {% if form.subject.value == 'bug' %}selected{% endif %}>Bug Report</option>
                                    <option value="partnership" {% if form.subject.value == 'partnership' %}selected{% endif %}>Partnership</option>
                                    <option value="other" {% if form.subject.value == 'other' %}selected{% endif %}>Other</option>
                                </select>
                                <label for="{{ form.subject.id_for_label }}">
                                    <i class="fas fa-tag me-2"></i>Subject *
                                </label>
                                {% if form.subject.errors %}
                                    <div class="invalid-feedback">
                                        {{ form.subject.errors.0 }}
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                        
                        <!-- Priority Field -->
                        <div class="col-md-6">
                            <div class="form-floating">
                                <select class="form-select {% if form.priority.errors %}is-invalid{% endif %}" 
                                        id="{{ form.priority.id_for_label }}"
                                        name="{{ form.priority.name }}">
                                    <option value="low" {% if form.priority.value == 'low' %}selected{% endif %}>Low</option>
                                    <option value="medium" {% if form.priority.value == 'medium' or not form.priority.value %}selected{% endif %}>Medium</option>
                                    <option value="high" {% if form.priority.value == 'high' %}selected{% endif %}>High</option>
                                    <option value="urgent" {% if form.priority.value == 'urgent' %}selected{% endif %}>Urgent</option>
                                </select>
                                <label for="{{ form.priority.id_for_label }}">
                                    <i class="fas fa-exclamation-circle me-2"></i>Priority
                                </label>
                                <div class="form-text">
                                    <i class="fas fa-info-circle me-1"></i>Help us prioritize your request
                                </div>
                                {% if form.priority.errors %}
                                    <div class="invalid-feedback">
                                        {{ form.priority.errors.0 }}
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                        
                        <!-- Company Field -->
                        <div class="col-md-6">
                            <div class="form-floating">
                                <input type="text" 
                                       class="form-control {% if form.company.errors %}is-invalid{% endif %}" 
                                       id="{{ form.company.id_for_label }}"
                                       name="{{ form.company.name }}"
                                       value="{{ form.company.value|default:'' }}"
                                       placeholder="Enter your company name">
                                <label for="{{ form.company.id_for_label }}">
                                    <i class="fas fa-building me-2"></i>Company/Organization
                                </label>
                                {% if form.company.errors %}
                                    <div class="invalid-feedback">
                                        {{ form.company.errors.0 }}
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                        
                        <!-- Message Field -->
                        <div class="col-12">
                            <div class="form-floating">
                                <textarea class="form-control {% if form.message.errors %}is-invalid{% endif %}" 
                                          id="{{ form.message.id_for_label }}"
                                          name="{{ form.message.name }}"
                                          rows="6"
                                          style="height: 120px;"
                                          placeholder="Please describe your inquiry in detail..."
                                          required>{{ form.message.value|default:'' }}</textarea>
                                <label for="{{ form.message.id_for_label }}">
                                    <i class="fas fa-comment me-2"></i>Message *
                                </label>
                                <div class="form-text d-flex justify-content-between">
                                    <span>
                                        <i class="fas fa-info-circle me-1"></i>Minimum 10 characters
                                    </span>
                                    <span id="charCount" class="text-muted">0 / 2000</span>
                                </div>
                                {% if form.message.errors %}
                                    <div class="invalid-feedback">
                                        {{ form.message.errors.0 }}
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                        
                        <!-- Attachment Field (if exists) -->
                        {% if form.attachment %}
                            <div class="col-12">
                                <label for="{{ form.attachment.id_for_label }}" class="form-label">
                                    <i class="fas fa-paperclip me-2"></i>Attachment
                                </label>
                                <input type="file" 
                                       class="form-control {% if form.attachment.errors %}is-invalid{% endif %}" 
                                       id="{{ form.attachment.id_for_label }}"
                                       name="{{ form.attachment.name }}"
                                       accept=".pdf,.doc,.docx,.txt,.png,.jpg,.jpeg">
                                <div class="form-text">
                                    <i class="fas fa-info-circle me-1"></i>
                                    Supported formats: PDF, DOC, DOCX, TXT, PNG, JPG (Max 5MB)
                                </div>
                                {% if form.attachment.errors %}
                                    <div class="invalid-feedback">
                                        {{ form.attachment.errors.0 }}
                                    </div>
                                {% endif %}
                            </div>
                        {% endif %}
                        
                        <!-- Newsletter Subscription -->
                        <div class="col-12">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" 
                                       id="newsletter" name="newsletter"
                                       {% if form.newsletter.value %}checked{% endif %}>
                                <label class="form-check-label" for="newsletter">
                                    <i class="fas fa-newspaper me-2"></i>
                                    Subscribe to our newsletter for updates and news
                                </label>
                            </div>
                        </div>
                        
                        <!-- Privacy Agreement -->
                        <div class="col-12">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" 
                                       id="privacy" name="privacy" required>
                                <label class="form-check-label" for="privacy">
                                    I agree to the <a href="{% url 'core:privacy' %}" target="_blank">Privacy Policy</a> 
                                    and <a href="{% url 'core:terms' %}" target="_blank">Terms of Service</a> *
                                </label>
                            </div>
                        </div>
                    </div>
                    
                    <div class="d-grid mt-4">
                        <button type="submit" class="btn-contact" id="submitBtn">
                            <span class="btn-text">
                                <i class="fas fa-paper-plane me-2"></i>Send Message
                            </span>
                            <span class="btn-loading d-none">
                                <span class="loading me-2"></span>Sending...
                            </span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    
    <!-- Contact Information Sidebar -->
    <div class="contact-sidebar">
        <!-- Contact Info Card -->
        <div class="contact-info-card">
            <h5 class="mb-4">
                <i class="fas fa-info-circle me-2 text-info"></i>Contact Information
            </h5>
                
                <div class="contact-item mb-3">
                    <div class="d-flex align-items-start">
                        <i class="fas fa-envelope text-primary me-3 mt-1"></i>
                        <div>
                            <h6 class="mb-1">Email</h6>
                            <p class="text-muted mb-0">
                                <a href="mailto:support@example.com" class="text-decoration-none">
                                    support@example.com
                                </a>
                            </p>
                            <small class="text-muted">We typically respond within 24 hours</small>
                        </div>
                    </div>
                </div>
                
                <div class="contact-item mb-3">
                    <div class="d-flex align-items-start">
                        <i class="fas fa-phone text-success me-3 mt-1"></i>
                        <div>
                            <h6 class="mb-1">Phone</h6>
                            <p class="text-muted mb-0">
                                <a href="tel:+1234567890" class="text-decoration-none">
                                    +1 (234) 567-8900
                                </a>
                            </p>
                            <small class="text-muted">Mon-Fri, 9 AM - 6 PM EST</small>
                        </div>
                    </div>
                </div>
                
                <div class="contact-item mb-3">
                    <div class="d-flex align-items-start">
                        <i class="fas fa-map-marker-alt text-danger me-3 mt-1"></i>
                        <div>
                            <h6 class="mb-1">Address</h6>
                            <p class="text-muted mb-0">
                                123 Business Street<br>
                                Suite 100<br>
                                City, State 12345
                            </p>
                        </div>
                    </div>
                </div>
                
                <div class="contact-item">
                    <div class="d-flex align-items-start">
                        <i class="fas fa-comments text-info me-3 mt-1"></i>
                        <div>
                            <h6 class="mb-1">Live Chat</h6>
                            <p class="text-muted mb-2">Available 24/7 for immediate assistance</p>
                            <button class="btn btn-sm btn-outline-info" onclick="openLiveChat()">
                                <i class="fas fa-comment me-1"></i>Start Chat
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- FAQ Card -->
        <div class="contact-info-card">
            <h5 class="mb-4">
                <i class="fas fa-question-circle me-2 text-warning"></i>Frequently Asked Questions
            </h5>
                
                <div class="accordion" id="faqAccordion">
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="faq1">
                            <button class="accordion-button collapsed" type="button" 
                                    data-bs-toggle="collapse" data-bs-target="#collapse1">
                                How quickly will I get a response?
                            </button>
                        </h2>
                        <div id="collapse1" class="accordion-collapse collapse" 
                             data-bs-parent="#faqAccordion">
                            <div class="accordion-body small">
                                We aim to respond to all inquiries within 24 hours during business days. 
                                Urgent matters are typically addressed within 2-4 hours.
                            </div>
                        </div>
                    </div>
                    
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="faq2">
                            <button class="accordion-button collapsed" type="button" 
                                    data-bs-toggle="collapse" data-bs-target="#collapse2">
                                What information should I include?
                            </button>
                        </h2>
                        <div id="collapse2" class="accordion-collapse collapse" 
                             data-bs-parent="#faqAccordion">
                            <div class="accordion-body small">
                                Please provide as much detail as possible about your issue or question. 
                                Include relevant account information, error messages, and steps you've already tried.
                            </div>
                        </div>
                    </div>
                    
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="faq3">
                            <button class="accordion-button collapsed" type="button" 
                                    data-bs-toggle="collapse" data-bs-target="#collapse3">
                                Can I track my support request?
                            </button>
                        </h2>
                        <div id="collapse3" class="accordion-collapse collapse" 
                             data-bs-parent="#faqAccordion">
                            <div class="accordion-body small">
                                Yes! After submitting your request, you'll receive a confirmation email 
                                with a ticket number that you can use to track the status of your inquiry.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Social Media Card -->
        <div class="contact-info-card">
            <h5 class="mb-4">
                <i class="fas fa-share-alt me-2 text-primary"></i>Follow Us
            </h5>
                
                <div class="d-flex gap-2">
                    <a href="#" class="btn btn-outline-primary btn-sm flex-fill">
                        <i class="fab fa-twitter"></i>
                    </a>
                    <a href="#" class="btn btn-outline-primary btn-sm flex-fill">
                        <i class="fab fa-facebook"></i>
                    </a>
                    <a href="#" class="btn btn-outline-primary btn-sm flex-fill">
                        <i class="fab fa-linkedin"></i>
                    </a>
                    <a href="#" class="btn btn-outline-primary btn-sm flex-fill">
                        <i class="fab fa-github"></i>
                    </a>
                </div>
                
                <p class="text-muted small mt-3 mb-0">
                    Stay updated with our latest news and announcements on social media.
                </p>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
    .contact-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 2rem;
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 2rem;
        min-height: 100vh;
    }
    
    .contact-card {
        background: var(--card-bg);
        border-radius: var(--border-radius-lg);
        padding: 3rem;
        box-shadow: var(--shadow-lg);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .contact-sidebar {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .contact-info-card {
        background: var(--card-bg);
        border-radius: var(--border-radius-lg);
        padding: 2rem;
        box-shadow: var(--shadow-md);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .logo-container {
        text-align: center;
        margin-bottom: 2rem;
    }
    
    .logo {
        height: 60px;
        width: auto;
    }
    
    .btn-contact {
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
        color: white;
        border: none;
        padding: 1rem 2rem;
        border-radius: var(--border-radius);
        font-weight: 600;
        font-size: 1.1rem;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }
    
    .btn-contact:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
        color: white;
    }
    
    .btn-contact:active {
        transform: translateY(0);
    }
    
    .btn-contact:disabled {
        opacity: 0.7;
        cursor: not-allowed;
        transform: none;
    }
    
    .error-message {
        background: rgba(220, 53, 69, 0.1);
        color: #dc3545;
        padding: 1rem;
        border-radius: var(--border-radius);
        border: 1px solid rgba(220, 53, 69, 0.2);
        margin-bottom: 1.5rem;
    }
    
    .form-floating {
        margin-bottom: 1.5rem;
    }
    
    .form-floating > .form-control,
    .form-floating > .form-select {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: var(--text-color);
        transition: all 0.3s ease;
    }
    
    .form-floating > .form-control:focus,
    .form-floating > .form-select:focus {
        background: rgba(255, 255, 255, 0.1);
        border-color: var(--primary-color);
        box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.25);
    }
    
    .form-floating > label {
        color: rgba(255, 255, 255, 0.7);
    }
    
    .contact-item {
        padding: 1rem 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .contact-item:last-child {
        border-bottom: none;
    }
    
    @media (max-width: 768px) {
        .contact-container {
            grid-template-columns: 1fr;
            padding: 1rem;
        }
        
        .contact-card {
            padding: 2rem;
        }
        
        .contact-info-card {
            padding: 1.5rem;
        }
    }
</style>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const contactForm = document.getElementById('contactForm');
    const submitBtn = document.getElementById('submitBtn');
    const messageField = document.getElementById('{{ form.message.id_for_label }}');
    const charCount = document.getElementById('charCount');
    
    // Character counter for message field
    if (messageField && charCount) {
        function updateCharCount() {
            const length = messageField.value.length;
            charCount.textContent = `${length} / 2000`;
            
            if (length > 2000) {
                charCount.className = 'text-danger';
                messageField.classList.add('is-invalid');
            } else if (length < 10) {
                charCount.className = 'text-muted';
                messageField.classList.remove('is-valid', 'is-invalid');
            } else {
                charCount.className = 'text-success';
                messageField.classList.remove('is-invalid');
                messageField.classList.add('is-valid');
            }
        }
        
        messageField.addEventListener('input', updateCharCount);
        updateCharCount(); // Initial count
    }
    
    // Email validation
    const emailField = document.getElementById('{{ form.email.id_for_label }}');
    if (emailField) {
        emailField.addEventListener('blur', function() {
            const email = this.value.trim();
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            
            if (email.length > 0) {
                if (emailRegex.test(email)) {
                    this.classList.remove('is-invalid');
                    this.classList.add('is-valid');
                } else {
                    this.classList.remove('is-valid');
                    this.classList.add('is-invalid');
                }
            }
        });
    }
    
    // Phone number formatting
    const phoneField = document.getElementById('{{ form.phone.id_for_label }}');
    if (phoneField) {
        phoneField.addEventListener('input', function() {
            let value = this.value.replace(/\D/g, '');
            if (value.length >= 6) {
                value = value.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
            } else if (value.length >= 3) {
                value = value.replace(/(\d{3})(\d{0,3})/, '($1) $2');
            }
            this.value = value;
        });
    }
    
    // Form submission with validation
    contactForm.addEventListener('submit', function(e) {
        const btnText = submitBtn.querySelector('.btn-text');
        const btnLoading = submitBtn.querySelector('.btn-loading');
        
        // Validate required fields
        const requiredFields = contactForm.querySelectorAll('[required]');
        let isValid = true;
        
        requiredFields.forEach(field => {
            if (!field.value.trim()) {
                field.classList.add('is-invalid');
                isValid = false;
            } else {
                field.classList.remove('is-invalid');
            }
        });
        
        // Validate message length
        if (messageField && (messageField.value.length < 10 || messageField.value.length > 2000)) {
            e.preventDefault();
            messageField.classList.add('is-invalid');
            showAlert('Message must be between 10 and 2000 characters.', 'danger');
            return;
        }
        
        // Validate email format
        if (emailField) {
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailRegex.test(emailField.value)) {
                e.preventDefault();
                emailField.classList.add('is-invalid');
                showAlert('Please enter a valid email address.', 'danger');
                return;
            }
        }
        
        // Validate privacy checkbox
        const privacyCheckbox = document.getElementById('privacy');
        if (privacyCheckbox && !privacyCheckbox.checked) {
            e.preventDefault();
            showAlert('Please agree to the Privacy Policy and Terms of Service.', 'danger');
            return;
        }
        
        if (!isValid) {
            e.preventDefault();
            showAlert('Please fill in all required fields.', 'danger');
            return;
        }
        
        // Show loading state
        btnText.classList.add('d-none');
        btnLoading.classList.remove('d-none');
        submitBtn.disabled = true;
        
        // Show success message after form submission (if no server errors)
        setTimeout(() => {
            if (!contactForm.querySelector('.alert-danger')) {
                showSuccessMessage();
            } else {
                // Re-enable button if there was an error
                btnText.classList.remove('d-none');
                btnLoading.classList.add('d-none');
                submitBtn.disabled = false;
            }
        }, 1000);
    });
    
    function showSuccessMessage() {
        const cardBody = document.querySelector('.card-body');
        cardBody.innerHTML = `
            <div class="text-center">
                <i class="fas fa-check-circle fa-4x text-success mb-4"></i>
                <h3 class="text-success mb-3">Message Sent Successfully!</h3>
                <p class="mb-4">
                    Thank you for contacting us. We've received your message and will get back to you soon.
                </p>
                <div class="alert alert-info">
                    <i class="fas fa-info-circle me-2"></i>
                    <strong>What happens next?</strong>
                    <ol class="mb-0 mt-2 text-start">
                        <li>You'll receive a confirmation email with your ticket number</li>
                        <li>Our team will review your message</li>
                        <li>We'll respond within 24 hours during business days</li>
                        <li>You can track your request using the ticket number</li>
                    </ol>
                </div>
                <div class="mt-4">
                    <a href="/" class="btn btn-primary me-2">
                        <i class="fas fa-home me-1"></i>Back to Home
                    </a>
                    <button class="btn btn-outline-secondary" onclick="location.reload()">
                        <i class="fas fa-plus me-1"></i>Send Another Message
                    </button>
                </div>
            </div>
        `;
    }
    
    function showAlert(message, type) {
        // Remove existing alerts
        const existingAlerts = document.querySelectorAll('.alert-dismissible');
        existingAlerts.forEach(alert => alert.remove());
        
        const alertDiv = document.createElement('div');
        alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
        alertDiv.innerHTML = `
            <i class="fas fa-exclamation-circle me-2"></i>
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        `;
        
        const form = document.getElementById('contactForm');
        form.insertBefore(alertDiv, form.firstChild);
        
        // Auto-hide after 5 seconds
        setTimeout(() => {
            if (alertDiv.parentNode) {
                alertDiv.remove();
            }
        }, 5000);
    }
    
    // Auto-fill form if user is logged in
    {% if user.is_authenticated %}
        const nameField = document.getElementById('{{ form.name.id_for_label }}');
        const emailFieldAuth = document.getElementById('{{ form.email.id_for_label }}');
        const companyField = document.getElementById('{{ form.company.id_for_label }}');
        
        if (nameField && !nameField.value) {
            nameField.value = '{{ user.get_full_name|default:user.username }}';
        }
        if (emailFieldAuth && !emailFieldAuth.value) {
            emailFieldAuth.value = '{{ user.email }}';
        }
        if (companyField && !companyField.value && '{{ user.userprofile.company }}') {
            companyField.value = '{{ user.userprofile.company }}';
        }
    {% endif %}
    
    // Live chat function (placeholder)
    window.openLiveChat = function() {
        alert('Live chat feature coming soon! Please use the contact form or email for now.');
    };
    
    // Add fade-in animation
    const cards = document.querySelectorAll('.card');
    cards.forEach((card, index) => {
        card.style.opacity = '0';
        card.style.transform = 'translateY(20px)';
        
        setTimeout(() => {
            card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
            card.style.opacity = '1';
            card.style.transform = 'translateY(0)';
        }, 100 * (index + 1));
    });
    
    // Add keyboard shortcuts
    document.addEventListener('keydown', function(e) {
        // Ctrl+Enter to submit form
        if (e.ctrlKey && e.key === 'Enter') {
            e.preventDefault();
            contactForm.submit();
        }
    });
    
    // File upload validation
    const attachmentField = document.getElementById('{{ form.attachment.id_for_label }}');
    if (attachmentField) {
        attachmentField.addEventListener('change', function() {
            const file = this.files[0];
            if (file) {
                // Check file size (5MB limit)
                if (file.size > 5 * 1024 * 1024) {
                    this.classList.add('is-invalid');
                    showAlert('File size must be less than 5MB.', 'warning');
                    this.value = '';
                    return;
                }
                
                // Check file type
                const allowedTypes = ['application/pdf', 'application/msword', 
                                    'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
                                    'text/plain', 'image/png', 'image/jpeg', 'image/jpg'];
                
                if (!allowedTypes.includes(file.type)) {
                    this.classList.add('is-invalid');
                    showAlert('File type not supported. Please use PDF, DOC, DOCX, TXT, PNG, or JPG.', 'warning');
                    this.value = '';
                    return;
                }
                
                this.classList.remove('is-invalid');
                this.classList.add('is-valid');
            }
        });
    }
});
</script>
{% endblock %}