@extends('layouts.app')

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

@section('content')
<div class="container mx-auto px-4 py-12">
    <x-breadcrumbs :items="[
        ['label' => 'Home', 'url' => route('home')],
        ['label' => 'Contact']
    ]" />
    <div class="max-w-4xl mx-auto">
        <h1 class="text-5xl font-serif font-bold mb-12 text-center text-[#524438]">Contact Us</h1>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
            <!-- Contact Form -->
            <div class="bg-white p-8 rounded-2xl shadow-md border border-[#e8ddd0]">
                <h2 class="text-2xl font-serif font-bold mb-6 text-[#524438]">Send us a Message</h2>
                <form id="contact-form" class="space-y-5">
                    @csrf
                    <div>
                        <label for="contact-name" class="block text-sm font-semibold mb-2 text-[#645443]">Name</label>
                        <input type="text" id="contact-name" name="name" required 
                            class="w-full px-4 py-3 border-2 border-[#e8ddd0] rounded-xl focus:ring-2 focus:ring-[#9d8566] focus:border-[#9d8566] transition-all outline-none text-[#524438]">
                    </div>
                    <div>
                        <label for="contact-email" class="block text-sm font-semibold mb-2 text-[#645443]">Email</label>
                        <input type="email" id="contact-email" name="email" required 
                            class="w-full px-4 py-3 border-2 border-[#e8ddd0] rounded-xl focus:ring-2 focus:ring-[#9d8566] focus:border-[#9d8566] transition-all outline-none text-[#524438]">
                    </div>
                    <div>
                        <label for="contact-message" class="block text-sm font-semibold mb-2 text-[#645443]">Message</label>
                        <textarea id="contact-message" name="message" rows="5" required 
                            class="w-full px-4 py-3 border-2 border-[#e8ddd0] rounded-xl focus:ring-2 focus:ring-[#9d8566] focus:border-[#9d8566] transition-all outline-none text-[#524438] resize-none"></textarea>
                    </div>
                    <button type="submit" class="w-full bg-[#7d6a52] text-white px-6 py-3 rounded-full hover:bg-[#9d8566] transition-all font-semibold shadow-lg hover:shadow-xl transform hover:scale-105">
                        Send Message
                    </button>
                </form>
            </div>
            
            <!-- Contact Info -->
            <div class="bg-white p-8 rounded-2xl shadow-md border border-[#e8ddd0]">
                <h2 class="text-2xl font-serif font-bold mb-6 text-[#524438]">Get in Touch</h2>
                <div class="space-y-6">
                    <div>
                        <h3 class="font-semibold mb-2 text-[#524438]">Email</h3>
                        <p class="text-[#645443]">info@sweetdelights.com</p>
                    </div>
                    <div>
                        <h3 class="font-semibold mb-2 text-[#524438]">Phone</h3>
                        <p class="text-[#645443]">+1 (555) 123-4567</p>
                    </div>
                    <div>
                        <h3 class="font-semibold mb-2 text-[#524438]">Address</h3>
                        <p class="text-[#645443]">123 Baker Street<br>City, State 12345<br>United States</p>
                    </div>
                    <div>
                        <h3 class="font-semibold mb-2 text-[#524438]">Social Media</h3>
                        <div class="flex space-x-4">
                            <a href="#" class="text-[#9d8566] hover:text-[#7d6a52] transition-colors font-medium">Facebook</a>
                            <a href="#" class="text-[#9d8566] hover:text-[#7d6a52] transition-colors font-medium">Twitter</a>
                            <a href="#" class="text-[#9d8566] hover:text-[#7d6a52] transition-colors font-medium">Instagram</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.getElementById('contact-form')?.addEventListener('submit', async function(e) {
    e.preventDefault();
    const formData = new FormData(this);
    const response = await fetch('{{ route("contact.store") }}', {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
        }
    });
    const data = await response.json();
    if (data.success) {
        showToast(data.message, 'success');
        this.reset();
    } else {
        showToast(data.message || 'Submission failed. Please try again.', 'error');
    }
});
</script>
@endpush