@extends('layouts.app')

@section('title', 'Contact Us | DIGITAL STUDIO2')

@push('styles')
<style>
    /* Contact Page Specific Styles */
    .hero-contact {
        background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.85) 100%),
                    url('{{ asset("assets/service-hero-bg.png") }}');
        background-size: cover;
        background-position: center;
        min-height: 60vh;
        display: flex;
        align-items: center;
    }

    .contact-form-card {
        background: var(--bg-white);
        border-radius: var(--radius-lg);
        padding: 3rem;
        border: 1px solid var(--text-200);
        box-shadow: var(--shadow-lg);
        margin-top: -4rem;
        position: relative;
        z-index: 2;
    }

    .form-control, .form-select {
        padding: 1rem 1.25rem;
        border: 1px solid var(--text-200);
        border-radius: var(--radius-md);
        background: var(--bg-white);
        transition: all var(--transition-normal);
    }

    .form-control:focus, .form-select:focus {
        border-color: var(--primary-500);
        box-shadow: 0 0 0 3px var(--primary-100);
        outline: none;
    }

    .contact-info-card {
        background: var(--bg-white);
        border-radius: var(--radius-lg);
        padding: 2rem;
        border: 1px solid var(--text-200);
        transition: all var(--transition-normal);
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .contact-info-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-lg);
        border-color: var(--primary-500);
    }

    .contact-icon {
        width: 64px;
        height: 64px;
        background: var(--primary-100);
        border-radius: var(--radius-full);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1.5rem;
    }

    .contact-icon i {
        font-size: 1.5rem;
        color: var(--primary-500);
    }

    .office-hours {
        background: var(--bg-light);
        border-radius: var(--radius-lg);
        padding: 2rem;
        margin-top: 2rem;
    }

    @media (max-width: 768px) {
        .hero-contact {
            min-height: 50vh;
        }
        
        .contact-form-card {
            padding: 2rem;
            margin-top: -2rem;
        }
        
        .contact-info-card {
            padding: 1.5rem;
        }
    }

    @media (max-width: 576px) {
        .contact-form-card {
            padding: 1.5rem;
        }
    }
</style>
@endpush

@section('content')
    <!-- Hero Section -->
    <section class="hero-contact position-relative">
        <!-- Glow Effects -->
        <div class="glow-effect glow-primary glow-top-right"></div>
        <div class="glow-effect glow-primary glow-bottom-left"></div>

        <div class="container">
            <div class="row justify-content-center text-center">
                <div class="col-lg-8" data-aos="fade-up">
                    <h1 class="display-3 fw-bold text-white mb-4">
                        Get In Touch With <span class="text-gradient">Us 24/7</span>
                    </h1>
                    <p class="lead text-light opacity-90">
                        We thrive on delivering exceptional results for ambitious organisations and 
                        forward-thinking clients. Contact us today for a professional consultation.
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Form -->
    <section class="py-5 bg-light">
        <div class="container">
            <div class="contact-form-card" data-aos="fade-up">
                <div class="text-center mb-5">
                    <span class="badge bg-primary-100 text-primary mb-3 px-3 py-2 rounded-pill">
                        Contact Us
                    </span>
                    <h2 class="mb-3">Book Your Free <span class="text-gradient">Consultation</span></h2>
                    <p class="text-muted">
                        Share your business goals with us, and we'll explore how we can create 
                        something remarkable together.
                    </p>
                </div>

                <form action="{{ route('contact.submit') }}" method="POST">
                    @csrf
                    <div class="row g-4">
                        <div class="col-md-6">
                            <div class="form-group">
                                <input type="text" name="full_name" class="form-control" 
                                       placeholder="Full Name *" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <input type="email" name="email_address" class="form-control" 
                                       placeholder="Email Address *" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <input type="tel" name="phone_number" class="form-control" 
                                       placeholder="Phone Number *" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <select name="subject" class="form-select" required>
                                    <option value="" selected disabled>Select Subject *</option>
                                    <option value="Consultation">Free Consultation</option>
                                    <option value="Quote">Project Quote</option>
                                    <option value="Support">Technical Support</option>
                                    <option value="Other">Other Inquiry</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-group">
                                <textarea name="message" class="form-control" rows="5" 
                                          placeholder="Your Message *" required></textarea>
                            </div>
                        </div>
                        <div class="col-12">
                            <button type="submit" class="btn btn-primary btn-lg w-100 py-3">
                                <i class="fas fa-paper-plane me-2"></i>
                                Send Message
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </section>

    <!-- Contact Information -->
    <section class="py-5">
        <div class="container">
            <div class="text-center mb-5" data-aos="fade-up">
                <span class="badge bg-primary-100 text-primary mb-3 px-3 py-2 rounded-pill">
                    Get In Touch
                </span>
                <h2 class="mb-4">Multiple Ways to <span class="text-gradient">Connect</span></h2>
                <p class="text-muted mx-auto" style="max-width: 700px">
                    For immediate assistance, please feel free to reach out to us through any of the following channels.
                </p>
            </div>

            <div class="row g-4">
                <div class="col-md-4" data-aos="fade-up" data-aos-delay="100">
                    <a href="mailto:info@DigitalStudio.com" class="text-decoration-none">
                        <div class="contact-info-card">
                            <div class="contact-icon">
                                <i class="fas fa-envelope"></i>
                            </div>
                            <h4 class="fw-bold mb-3">Email Us</h4>
                            <p class="text-muted mb-3">
                                Send us an email for general inquiries or project discussions
                            </p>
                            <div class="fw-bold text-primary mt-auto">
                                info@DigitalStudio.com
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-md-4" data-aos="fade-up" data-aos-delay="200">
                    <a href="tel:+447476603415" class="text-decoration-none">
                        <div class="contact-info-card">
                            <div class="contact-icon">
                                <i class="fas fa-phone"></i>
                            </div>
                            <h4 class="fw-bold mb-3">Call Us</h4>
                            <p class="text-muted mb-3">
                                Speak directly with our team for immediate assistance
                            </p>
                            <div class="fw-bold text-primary mt-auto">
                                +44 74 7660 3415
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-md-4" data-aos="fade-up" data-aos-delay="300">
                    <a href="https://wa.me/442045764155" target="_blank" class="text-decoration-none">
                        <div class="contact-info-card">
                            <div class="contact-icon">
                                <i class="fab fa-whatsapp"></i>
                            </div>
                            <h4 class="fw-bold mb-3">WhatsApp</h4>
                            <p class="text-muted mb-3">
                                Chat with us on WhatsApp for quick responses
                            </p>
                            <div class="fw-bold text-primary mt-auto">
                                +44 20 4576 4155
                            </div>
                        </div>
                    </a>
                </div>
            </div>

            <!-- Office Hours -->
            <div class="row justify-content-center mt-5">
                <div class="col-lg-6" data-aos="fade-up">
                    <div class="office-hours">
                        <h4 class="fw-bold mb-4 text-center">Office Hours</h4>
                        <div class="row">
                            <div class="col-6">
                                <div class="mb-3">
                                    <div class="fw-bold">Monday - Friday</div>
                                    <div class="text-muted">9:00 AM - 6:00 PM</div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="mb-3">
                                    <div class="fw-bold">Saturday</div>
                                    <div class="text-muted">10:00 AM - 4:00 PM</div>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="text-center">
                                    <div class="fw-bold">Sunday</div>
                                    <div class="text-muted">Emergency Support Only</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Map Section -->
    <section class="py-5 bg-light">
        <div class="container">
            <div class="text-center mb-5" data-aos="fade-up">
                <span class="badge bg-primary-100 text-primary mb-3 px-3 py-2 rounded-pill">
                    Our Location
                </span>
                <h2 class="mb-4">Visit Our <span class="text-gradient">Studio</span></h2>
            </div>

            <div class="row g-4">
                <div class="col-lg-6" data-aos="fade-right">
                    <div class="bg-white rounded-lg p-4 border">
                        <h4 class="fw-bold mb-4">London Office</h4>
                        <div class="mb-3">
                            <i class="fas fa-map-marker-alt text-primary me-2"></i>
                            <span class="fw-bold">Address:</span>
                            <span class="text-muted ms-2">London, United Kingdom</span>
                        </div>
                        <div class="mb-3">
                            <i class="fas fa-clock text-primary me-2"></i>
                            <span class="fw-bold">Hours:</span>
                            <span class="text-muted ms-2">Mon-Fri 9AM-6PM, Sat 10AM-4PM</span>
                        </div>
                        <p class="text-muted">
                            Our London studio is equipped with state-of-the-art facilities and 
                            a creative environment where ideas come to life. Schedule a visit 
                            to discuss your project in person.
                        </p>
                    </div>
                </div>
                <div class="col-lg-6" data-aos="fade-left">
                    <div class="bg-white rounded-lg overflow-hidden border">
                        <iframe 
                            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2482.8880381909485!2d-0.1272003!3d51.5073509!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48761b323093d307%3A0x2fb199016d5642a7!2sLondon!5e0!3m2!1sen!2suk!4v1622549400000!5m2!1sen!2suk" 
                            width="100%" 
                            height="300" 
                            style="border:0;" 
                            allowfullscreen="" 
                            loading="lazy"
                            class="rounded-lg">
                        </iframe>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Form submission handling
        const contactForm = document.querySelector('form');
        if (contactForm) {
            contactForm.addEventListener('submit', async function(e) {
                e.preventDefault();
                
                const submitBtn = this.querySelector('[type="submit"]');
                const originalText = submitBtn.innerHTML;
                
                // Show loading state
                submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i> Sending...';
                submitBtn.disabled = true;
                
                try {
                    // Get form data
                    const formData = new FormData(this);
                    
                    // Send form data (you'll need to implement the actual API call)
                    const response = await fetch('{{ route("contact.submit") }}', {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                            'Accept': 'application/json'
                        },
                        body: formData
                    });
                    
                    const data = await response.json();
                    
                    if (response.ok) {
                        // Show success message
                        showToast('Message sent successfully! We\'ll contact you soon.', 'success');
                        this.reset();
                    } else {
                        throw new Error(data.message || 'Something went wrong');
                    }
                    
                } catch (error) {
                    showToast(error.message || 'Something went wrong. Please try again.', 'error');
                } finally {
                    // Reset button
                    submitBtn.innerHTML = originalText;
                    submitBtn.disabled = false;
                }
            });
        }
        
        // Toast notification function
        function showToast(message, type = 'success') {
            // Create toast element
            const toast = document.createElement('div');
            toast.className = 'toast-notification';
            toast.innerHTML = `
                <div class="toast-content d-flex align-items-center">
                    <i class="fas fa-${type === 'success' ? 'check-circle' : 'exclamation-circle'} me-3 text-${type === 'success' ? 'success' : 'danger'}"></i>
                    <span>${message}</span>
                </div>
            `;
            
            // Add styles
            toast.style.cssText = `
                position: fixed;
                top: 20px;
                right: 20px;
                background: var(--bg-white);
                color: var(--text-700);
                padding: 1rem 1.5rem;
                border-radius: var(--radius-md);
                box-shadow: var(--shadow-lg);
                z-index: 9999;
                animation: slideInRight 0.3s ease;
                border-left: 4px solid ${type === 'success' ? 'var(--primary-500)' : '#ef4444'};
                max-width: 400px;
            `;
            
            document.body.appendChild(toast);
            
            // Remove after 5 seconds
            setTimeout(() => {
                if (toast.parentNode) {
                    toast.style.animation = 'slideOutRight 0.3s ease';
                    setTimeout(() => toast.remove(), 300);
                }
            }, 5000);
            
            // Add animations
            const style = document.createElement('style');
            style.textContent = `
                @keyframes slideInRight {
                    from { transform: translateX(100%); opacity: 0; }
                    to { transform: translateX(0); opacity: 1; }
                }
                @keyframes slideOutRight {
                    from { transform: translateX(0); opacity: 1; }
                    to { transform: translateX(100%); opacity: 0; }
                }
            `;
            document.head.appendChild(style);
        }
    });
</script>
@endpush