@extends('layouts.app')

@section('title', __('Contact Us'))

@section('content')
    <div class="contact-page">
        <!-- Hero Section -->
        <section class="hero-section bg-primary text-white py-5">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-6">
                        <h1 class="display-4 fw-bold mb-4">{{ __('Contact Us') }}</h1>
                        <p class="lead mb-4">
                            {{ __('We\'d love to hear from you. Get in touch with our team for any questions, feedback, or support you need.') }}
                        </p>
                        <div class="contact-highlights">
                            <div class="d-flex align-items-center mb-3">
                                <i class="fas fa-clock fa-2x me-3"></i>
                                <div>
                                    <h6 class="mb-1">{{ __('Response Time') }}</h6>
                                    <small class="opacity-75">{{ __('Within 24 hours') }}</small>
                                </div>
                            </div>
                            <div class="d-flex align-items-center">
                                <i class="fas fa-headset fa-2x me-3"></i>
                                <div>
                                    <h6 class="mb-1">{{ __('Support Hours') }}</h6>
                                    <small class="opacity-75">{{ __('24/7 Customer Support') }}</small>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 text-center">
                        <div class="hero-illustration">
                            <i class="fas fa-envelope fa-10x opacity-75"></i>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Breadcrumb -->
        <nav aria-label="breadcrumb" class="bg-light py-3">
            <div class="container">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item">
                        <a href="{{ route('home') }}">{{ __('Home') }}</a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">
                        {{ __('Contact Us') }}
                    </li>
                </ol>
            </div>
        </nav>

        <!-- Contact Form & Info Section -->
        <section class="py-5">
            <div class="container">
                <div class="row">
                    <!-- Contact Form -->
                    <div class="col-lg-8 mb-5">
                        <div class="contact-form-wrapper">
                            <h2 class="h3 mb-4">{{ __('Send us a Message') }}</h2>
                            <form id="contactForm" class="contact-form">
                                @csrf
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="name" class="form-label">{{ __('Full Name') }} <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" id="name" name="name" required>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="email" class="form-label">{{ __('Email Address') }} <span class="text-danger">*</span></label>
                                        <input type="email" class="form-control" id="email" name="email" required>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="phone" class="form-label">{{ __('Phone Number') }}</label>
                                        <input type="tel" class="form-control" id="phone" name="phone">
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="subject" class="form-label">{{ __('Subject') }} <span class="text-danger">*</span></label>
                                        <select class="form-control" id="subject" name="subject" required>
                                            <option value="">{{ __('Select a subject') }}</option>
                                            <option value="general">{{ __('General Inquiry') }}</option>
                                            <option value="support">{{ __('Technical Support') }}</option>
                                            <option value="orders">{{ __('Order Related') }}</option>
                                            <option value="returns">{{ __('Returns & Refunds') }}</option>
                                            <option value="partnership">{{ __('Business Partnership') }}</option>
                                            <option value="feedback">{{ __('Feedback & Suggestions') }}</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <label for="message" class="form-label">{{ __('Message') }} <span class="text-danger">*</span></label>
                                    <textarea class="form-control" id="message" name="message" rows="6" placeholder="{{ __('Please describe your inquiry in detail...') }}" required></textarea>
                                </div>

                                <div class="mb-3 form-check">
                                    <input type="checkbox" class="form-check-input" id="privacy" name="privacy" required>
                                    <label class="form-check-label" for="privacy">
                                        {{ __('I agree to the') }} <a href="#" class="text-primary">{{ __('Privacy Policy') }}</a> {{ __('and') }} <a href="#" class="text-primary">{{ __('Terms of Service') }}</a>
                                    </label>
                                </div>

                                <button type="submit" class="btn btn-primary btn-lg">
                                    <i class="fas fa-paper-plane me-2"></i>
                                    {{ __('Send Message') }}
                                </button>
                            </form>
                        </div>
                    </div>

                    <!-- Contact Information -->
                    <div class="col-lg-4">
                        <div class="contact-info">
                            <h3 class="h4 mb-4">{{ __('Get in Touch') }}</h3>

                            <!-- Address -->
                            <div class="contact-item mb-4">
                                <div class="d-flex">
                                    <div class="contact-icon me-3">
                                        <i class="fas fa-map-marker-alt fa-lg text-primary"></i>
                                    </div>
                                    <div>
                                        <h6 class="mb-1">{{ __('Our Address') }}</h6>
                                        <p class="text-muted mb-0">
                                            {{ __('123 Business District') }}<br>
                                            {{ __('Jeddah, Saudi Arabia') }}<br>
                                            {{ __('21577') }}
                                        </p>
                                    </div>
                                </div>
                            </div>

                            <!-- Phone -->
                            <div class="contact-item mb-4">
                                <div class="d-flex">
                                    <div class="contact-icon me-3">
                                        <i class="fas fa-phone fa-lg text-primary"></i>
                                    </div>
                                    <div>
                                        <h6 class="mb-1">{{ __('Phone Number') }}</h6>
                                        <p class="text-muted mb-0">
                                            <a href="tel:+966123456789" class="text-decoration-none">+966 12 345 6789</a>
                                        </p>
                                    </div>
                                </div>
                            </div>

                            <!-- Email -->
                            <div class="contact-item mb-4">
                                <div class="d-flex">
                                    <div class="contact-icon me-3">
                                        <i class="fas fa-envelope fa-lg text-primary"></i>
                                    </div>
                                    <div>
                                        <h6 class="mb-1">{{ __('Email Address') }}</h6>
                                        <p class="text-muted mb-0">
                                            <a href="mailto:info@yourstore.com" class="text-decoration-none">info@yourstore.com</a><br>
                                            <a href="mailto:support@yourstore.com" class="text-decoration-none">support@yourstore.com</a>
                                        </p>
                                    </div>
                                </div>
                            </div>

                            <!-- Business Hours -->
                            <div class="contact-item mb-4">
                                <div class="d-flex">
                                    <div class="contact-icon me-3">
                                        <i class="fas fa-clock fa-lg text-primary"></i>
                                    </div>
                                    <div>
                                        <h6 class="mb-1">{{ __('Business Hours') }}</h6>
                                        <p class="text-muted mb-0">
                                            {{ __('Sunday - Thursday: 9:00 AM - 6:00 PM') }}<br>
                                            {{ __('Friday - Saturday: 10:00 AM - 4:00 PM') }}
                                        </p>
                                    </div>
                                </div>
                            </div>

                            <!-- Social Media -->
                            <div class="contact-item">
                                <h6 class="mb-3">{{ __('Follow Us') }}</h6>
                                <div class="social-links">
                                    <a href="#" class="btn btn-outline-primary btn-sm me-2 mb-2">
                                        <i class="fab fa-facebook-f"></i>
                                    </a>
                                    <a href="#" class="btn btn-outline-primary btn-sm me-2 mb-2">
                                        <i class="fab fa-twitter"></i>
                                    </a>
                                    <a href="#" class="btn btn-outline-primary btn-sm me-2 mb-2">
                                        <i class="fab fa-instagram"></i>
                                    </a>
                                    <a href="#" class="btn btn-outline-primary btn-sm me-2 mb-2">
                                        <i class="fab fa-linkedin"></i>
                                    </a>
                                    <a href="#" class="btn btn-outline-primary btn-sm me-2 mb-2">
                                        <i class="fab fa-whatsapp"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- FAQ Section -->
        <section class="py-5 bg-light">
            <div class="container">
                <div class="text-center mb-5">
                    <h2 class="h3 mb-3">{{ __('Frequently Asked Questions') }}</h2>
                    <p class="text-muted">{{ __('Quick answers to common questions') }}</p>
                </div>

                <div class="row justify-content-center">
                    <div class="col-lg-8">
                        <div class="accordion" id="faqAccordion">
                            <!-- FAQ Item 1 -->
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="faq1">
                                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1">
                                        {{ __('How long does shipping take?') }}
                                    </button>
                                </h2>
                                <div id="collapse1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
                                    <div class="accordion-body">
                                        {{ __('We offer standard shipping (3-5 business days) and express shipping (1-2 business days). Delivery times may vary depending on your location and product availability.') }}
                                    </div>
                                </div>
                            </div>

                            <!-- FAQ Item 2 -->
                            <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 is your return policy?') }}
                                    </button>
                                </h2>
                                <div id="collapse2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                    <div class="accordion-body">
                                        {{ __('We offer a 30-day return policy for most items. Products must be in original condition with tags attached. Some restrictions apply to certain product categories.') }}
                                    </div>
                                </div>
                            </div>

                            <!-- FAQ Item 3 -->
                            <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">
                                        {{ __('Do you offer international shipping?') }}
                                    </button>
                                </h2>
                                <div id="collapse3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                    <div class="accordion-body">
                                        {{ __('Currently, we ship within Saudi Arabia and select GCC countries. We are working on expanding our shipping coverage to more international destinations.') }}
                                    </div>
                                </div>
                            </div>

                            <!-- FAQ Item 4 -->
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="faq4">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse4">
                                        {{ __('How can I track my order?') }}
                                    </button>
                                </h2>
                                <div id="collapse4" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                    <div class="accordion-body">
                                        {{ __('Once your order ships, you\'ll receive a tracking number via email. You can also track your order by logging into your account and viewing your order history.') }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Map Section (Placeholder) -->
        <section class="py-0">
            <div class="map-container bg-light" style="height: 400px;">
                <div class="d-flex align-items-center justify-content-center h-100">
                    <div class="text-center">
                        <i class="fas fa-map-marked-alt fa-3x text-muted mb-3"></i>
                        <h5 class="text-muted">{{ __('Interactive Map') }}</h5>
                        <p class="text-muted">{{ __('Map integration coming soon') }}</p>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection

@push('styles')
    <style>
        .hero-section {
            background: linear-gradient(135deg, var(--bs-primary) 0%, #0056b3 100%);
        }

        .hero-illustration {
            animation: bounce 3s ease-in-out infinite;
        }

        @keyframes bounce {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-15px); }
        }

        .contact-form-wrapper {
            background: white;
            padding: 2rem;
            border-radius: 0.5rem;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }

        .contact-info {
            background: white;
            padding: 2rem;
            border-radius: 0.5rem;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            height: fit-content;
            position: sticky;
            top: 20px;
        }

        .contact-item {
            padding-bottom: 1rem;
            border-bottom: 1px solid #e9ecef;
        }

        .contact-item:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

        .contact-icon {
            width: 40px;
            text-align: center;
        }

        .form-control {
            border: 2px solid #e9ecef;
            border-radius: 0.5rem;
            padding: 0.75rem 1rem;
            transition: border-color 0.2s ease;
        }

        .form-control:focus {
            border-color: var(--bs-primary);
            box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
        }

        .accordion-button {
            font-weight: 500;
        }

        .accordion-button:not(.collapsed) {
            background-color: rgba(var(--bs-primary-rgb), 0.1);
            color: var(--bs-primary);
        }

        .social-links .btn {
            width: 40px;
            height: 40px;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .hero-section .display-4 {
                font-size: 2rem;
            }

            .contact-form-wrapper,
            .contact-info {
                padding: 1.5rem;
            }

            .contact-info {
                position: static;
            }

            .contact-highlights .d-flex {
                flex-direction: column;
                text-align: center;
            }

            .contact-highlights .fa-2x {
                margin-bottom: 0.5rem;
            }
        }
    </style>
@endpush

@push('scripts')
    <script>
        $(document).ready(function() {
            $('#contactForm').on('submit', function(e) {
                e.preventDefault();

                // Get form data
                const formData = new FormData(this);
                const button = $(this).find('button[type="submit"]');
                const originalText = button.html();

                // Show loading state
                button.prop('disabled', true);
                button.html('<i class="fas fa-spinner fa-spin me-2"></i>{{ __("Sending...") }}');

                // Simulate form submission (replace with actual endpoint)
                setTimeout(function() {
                    // Show success message
                    const alertHtml = `
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <i class="fas fa-check-circle me-2"></i>
                    {{ __("Thank you for your message! We'll get back to you within 24 hours.") }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            `;

                    $('.contact-form-wrapper').prepend(alertHtml);

                    // Reset form
                    $('#contactForm')[0].reset();

                    // Reset button
                    button.prop('disabled', false);
                    button.html(originalText);

                    // Scroll to success message
                    $('html, body').animate({
                        scrollTop: $('.contact-form-wrapper').offset().top - 100
                    }, 500);

                }, 1500);
            });
        });
    </script>
@endpush