@extends('layouts.app')
@section('content')
<div class="pt-24">
<div class="relative py-20 px-4 bg-gradient-to-br from-dark-brown to-deep-green bengali-pattern text-center">
    <h1 class="font-playfair text-5xl text-cream font-bold mb-3" data-aos="fade-up">Contact Us</h1>
    <p class="text-cream/60" data-aos="fade-up" data-aos-delay="100">We'd love to hear from you</p>
    <div class="section-divider mt-4"></div>
</div>

<div class="max-w-7xl mx-auto px-4 py-16">
    <div class="grid lg:grid-cols-2 gap-12">
        {{-- Form --}}
        <div class="glass-card p-8" data-aos="fade-right">
            <h2 class="font-playfair text-2xl text-cream font-bold mb-6">Send a Message</h2>
            @if(session('success'))
            <div class="bg-green-500/20 border border-green-500/40 text-green-400 p-4 rounded-xl mb-6 flex items-center gap-2">
                <i class="fas fa-check-circle"></i>{{ session('success') }}
            </div>
            @endif
            <form action="{{ route('contact.store') }}" method="POST" class="space-y-5">
                @csrf
                <div class="grid sm:grid-cols-2 gap-5">
                    <div>
                        <label class="text-cream/70 text-sm block mb-2">Full Name *</label>
                        <input type="text" name="name" value="{{ old('name') }}" required
                               class="w-full bg-deep-green/60 border border-gold/20 text-cream placeholder-cream/30 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-gold transition-colors" placeholder="Your name">
                        @error('name')<p class="text-red-400 text-xs mt-1">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="text-cream/70 text-sm block mb-2">Email Address *</label>
                        <input type="email" name="email" value="{{ old('email') }}" required
                               class="w-full bg-deep-green/60 border border-gold/20 text-cream placeholder-cream/30 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-gold transition-colors" placeholder="your@email.com">
                        @error('email')<p class="text-red-400 text-xs mt-1">{{ $message }}</p>@enderror
                    </div>
                </div>
                <div class="grid sm:grid-cols-2 gap-5">
                    <div>
                        <label class="text-cream/70 text-sm block mb-2">Phone</label>
                        <input type="tel" name="phone" value="{{ old('phone') }}"
                               class="w-full bg-deep-green/60 border border-gold/20 text-cream placeholder-cream/30 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-gold transition-colors" placeholder="+880 1X-XXXX-XXXX">
                    </div>
                    <div>
                        <label class="text-cream/70 text-sm block mb-2">Branch</label>
                        <select name="branch" class="w-full bg-deep-green/60 border border-gold/20 text-cream rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-gold transition-colors">
                            <option value="">Select Branch</option>
                            @foreach($branches as $b)<option value="{{ $b->name }}" {{ old('branch')==$b->name?'selected':'' }}>{{ $b->name }}</option>@endforeach
                        </select>
                    </div>
                </div>
                <div>
                    <label class="text-cream/70 text-sm block mb-2">Subject</label>
                    <input type="text" name="subject" value="{{ old('subject') }}"
                           class="w-full bg-deep-green/60 border border-gold/20 text-cream placeholder-cream/30 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-gold transition-colors" placeholder="How can we help?">
                </div>
                <div>
                    <label class="text-cream/70 text-sm block mb-2">Message *</label>
                    <textarea name="message" rows="5" required
                              class="w-full bg-deep-green/60 border border-gold/20 text-cream placeholder-cream/30 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-gold transition-colors resize-none"
                              placeholder="Write your message here...">{{ old('message') }}</textarea>
                    @error('message')<p class="text-red-400 text-xs mt-1">{{ $message }}</p>@enderror
                </div>
                <button type="submit" class="btn-gold w-full py-4 text-base">
                    <i class="fas fa-paper-plane mr-2"></i>Send Message
                </button>
            </form>
        </div>

        {{-- Info --}}
        <div data-aos="fade-left">
            <div class="glass-card p-8 mb-6">
                <h2 class="font-playfair text-2xl text-cream font-bold mb-6">Get in Touch</h2>
                <div class="space-y-5">
                    @foreach($branches as $b)
                    <div class="flex items-start gap-4 pb-5 {{ !$loop->last ? 'border-b border-white/10' : '' }}">
                        <div class="w-10 h-10 rounded-full bg-gold/20 flex items-center justify-center flex-shrink-0 mt-1">
                            <i class="fas fa-map-marker-alt text-gold text-sm"></i>
                        </div>
                        <div>
                            <h4 class="text-cream font-semibold text-sm mb-1">{{ $b->name }} @if($b->is_main)<span class="text-gold text-xs ml-1">(Main)</span>@endif</h4>
                            <p class="text-cream/60 text-xs leading-relaxed mb-1">{{ $b->address }}, {{ $b->city }}</p>
                            <a href="tel:{{ $b->phone }}" class="text-gold text-xs hover:text-light-gold transition-colors">{{ $b->phone }}</a>
                            @if($b->opening_time)<p class="text-cream/40 text-xs mt-1"><i class="fas fa-clock mr-1"></i>{{ $b->opening_time }} – {{ $b->closing_time }}</p>@endif
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>

            <div class="glass-card p-8">
                <h3 class="font-playfair text-xl text-cream font-bold mb-5">Quick Connect</h3>
                <div class="space-y-4">
                    <a href="mailto:info@shalikrestaurant.com" class="flex items-center gap-3 text-cream/60 hover:text-gold transition-colors text-sm">
                        <i class="fas fa-envelope text-gold w-5"></i>info@shalikrestaurant.com
                    </a>
                    <a href="https://wa.me/{{ env('WHATSAPP_NUMBER') }}" target="_blank" class="flex items-center gap-3 text-cream/60 hover:text-gold transition-colors text-sm">
                        <i class="fab fa-whatsapp text-green-400 w-5"></i>WhatsApp Chat
                    </a>
                </div>
                <div class="flex gap-4 mt-6 pt-6 border-t border-white/10">
                    @foreach([['fab fa-facebook-f','#'],['fab fa-instagram','#'],['fab fa-youtube','#']] as [$icon,$url])
                    <a href="{{ $url }}" class="w-10 h-10 rounded-full bg-deep-green/60 border border-gold/30 flex items-center justify-center text-gold hover:bg-gold hover:text-dark-brown transition-all">
                        <i class="{{ $icon }} text-sm"></i>
                    </a>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>
</div>
@endsection