@extends('frontend.layouts.app')

@php
    $locale = app()->getLocale();
    $isRtl = $locale === 'ar';

    // Get settings
    $heroTitle = $isRtl ? (setting('contact_hero_title_ar') ?: setting('contact_hero_title') ?: 'تواصل معنا') : (setting('contact_hero_title') ?: 'Contact Us');
    $heroSubtitle = $isRtl ? (setting('contact_hero_subtitle_ar') ?: setting('contact_hero_subtitle') ?: 'نحن هنا لمساعدتك') : (setting('contact_hero_subtitle') ?: 'We are here to help');
    $formTitle = $isRtl ? (setting('contact_form_title_ar') ?: setting('contact_form_title') ?: 'أرسل لنا رسالة') : (setting('contact_form_title') ?: 'Send us a message');
    $mapEmbed = setting('contact_map_embed');
    
    // Extract src from iframe if full iframe provided
    if ($mapEmbed && str_contains($mapEmbed, '<iframe')) {
        preg_match('/src="([^"]+)"/', $mapEmbed, $matches);
        $mapEmbed = $matches[1] ?? null;
    }

    // Contact info from site settings
    $phone = setting('contact_phone');
    $email = setting('contact_email');
    $address = $isRtl ? (setting('contact_address_ar') ?: setting('contact_address')) : setting('contact_address');
    $workingHours = $isRtl ? (setting('contact_working_hours_ar') ?: setting('contact_working_hours') ?: 'الأحد - الخميس: 8 ص - 5 م') : (setting('contact_working_hours') ?: 'Sun - Thu: 8AM - 5PM');
    $whatsapp = setting('contact_whatsapp');
@endphp

@section('title', $heroTitle)

@section('content')

{{-- Hero Section --}}
<section class="relative py-32 bg-slate-900 overflow-hidden">
    {{-- Background --}}
    <div class="absolute inset-0 opacity-30">
        <div class="hero-grid-bg"></div>
    </div>
    
    <div class="container mx-auto px-4 relative z-10">
        <div class="text-center max-w-4xl mx-auto">
            <span class="inline-block px-6 py-2 rounded-full border border-blue-500/30 text-blue-400 text-sm font-bold uppercase tracking-widest mb-6 fade-up">
                {{ $isRtl ? 'تواصل معنا' : 'Get In Touch' }}
            </span>
            <h1 class="text-4xl md:text-5xl lg:text-6xl font-black text-white mb-6 fade-up">
                <span class="gradient-text-animated">{{ $heroTitle }}</span>
            </h1>
            <p class="text-xl text-gray-400 leading-relaxed fade-up">
                {{ $heroSubtitle }}
            </p>
        </div>
    </div>
</section>

{{-- Contact Content --}}
<section class="py-20 bg-gradient-to-b from-white to-slate-50">
    <div class="container mx-auto px-4">
        <div class="grid lg:grid-cols-3 gap-12">
            
            {{-- Contact Info Cards --}}
            <div class="lg:col-span-1 space-y-6">
                
                {{-- Phone --}}
                @if($phone)
                <div class="bg-white rounded-3xl p-8 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1 fade-up">
                    <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center mb-6 shadow-lg shadow-blue-500/30">
                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
                        </svg>
                    </div>
                    <h3 class="text-xl font-bold text-slate-900 mb-2">{{ $isRtl ? 'الهاتف' : 'Phone' }}</h3>
                    <a href="tel:{{ $phone }}" class="text-lg text-gray-600 hover:text-blue-600 transition-colors" dir="ltr">{{ $phone }}</a>
                </div>
                @endif

                {{-- Email --}}
                @if($email)
                <div class="bg-white rounded-3xl p-8 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1 fade-up">
                    <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-purple-500 to-purple-600 flex items-center justify-center mb-6 shadow-lg shadow-purple-500/30">
                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                        </svg>
                    </div>
                    <h3 class="text-xl font-bold text-slate-900 mb-2">{{ $isRtl ? 'البريد الإلكتروني' : 'Email' }}</h3>
                    <a href="mailto:{{ $email }}" class="text-lg text-gray-600 hover:text-purple-600 transition-colors">{{ $email }}</a>
                </div>
                @endif

                {{-- Address --}}
                @if($address)
                <div class="bg-white rounded-3xl p-8 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1 fade-up">
                    <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-amber-500 to-orange-500 flex items-center justify-center mb-6 shadow-lg shadow-amber-500/30">
                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
                        </svg>
                    </div>
                    <h3 class="text-xl font-bold text-slate-900 mb-2">{{ $isRtl ? 'العنوان' : 'Address' }}</h3>
                    <p class="text-lg text-gray-600">{{ $address }}</p>
                </div>
                @endif

                {{-- Working Hours --}}
                <div class="bg-white rounded-3xl p-8 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1 fade-up">
                    <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-green-500 to-emerald-500 flex items-center justify-center mb-6 shadow-lg shadow-green-500/30">
                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                    </div>
                    <h3 class="text-xl font-bold text-slate-900 mb-2">{{ $isRtl ? 'ساعات العمل' : 'Working Hours' }}</h3>
                    <p class="text-lg text-gray-600">{{ $workingHours }}</p>
                </div>

                {{-- WhatsApp --}}
                @if($whatsapp)
                <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', $whatsapp) }}" target="_blank"
                   class="flex items-center justify-center gap-4 bg-gradient-to-r from-green-500 to-green-600 text-white rounded-3xl p-6 hover:shadow-xl hover:shadow-green-500/30 transition-all duration-300 hover:-translate-y-1 fade-up">
                    <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
                    </svg>
                    <span class="text-xl font-bold">{{ $isRtl ? 'تواصل عبر واتساب' : 'Chat on WhatsApp' }}</span>
                </a>
                @endif
            </div>

            {{-- Contact Form --}}
            <div class="lg:col-span-2 fade-left">
                <div class="bg-white rounded-3xl p-10 shadow-xl">
                    <h2 class="text-3xl font-bold text-slate-900 mb-8 {{ $isRtl ? 'text-right' : '' }}">{{ $formTitle }}</h2>

                    @if(session('success'))
                        <div class="bg-green-100 border border-green-400 text-green-700 px-6 py-4 rounded-2xl mb-8 flex items-center gap-3">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                            </svg>
                            {{ session('success') }}
                        </div>
                    @endif

                    <form action="{{ route('contact.submit') }}" method="POST" class="space-y-6">
                        @csrf

                        <div class="grid md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-semibold text-slate-700 mb-3">{{ $isRtl ? 'الاسم' : 'Your Name' }} *</label>
                                <input type="text" name="name" required value="{{ old('name') }}"
                                       class="w-full px-5 py-4 rounded-xl border-2 border-slate-200 focus:border-blue-500 focus:ring-4 focus:ring-blue-500/10 transition-all text-lg"
                                       placeholder="{{ $isRtl ? 'أدخل اسمك' : 'Enter your name' }}">
                                @error('name')
                                    <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label class="block text-sm font-semibold text-slate-700 mb-3">{{ $isRtl ? 'البريد الإلكتروني' : 'Your Email' }} *</label>
                                <input type="email" name="email" required value="{{ old('email') }}"
                                       class="w-full px-5 py-4 rounded-xl border-2 border-slate-200 focus:border-blue-500 focus:ring-4 focus:ring-blue-500/10 transition-all text-lg"
                                       placeholder="{{ $isRtl ? 'أدخل بريدك الإلكتروني' : 'Enter your email' }}">
                                @error('email')
                                    <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <div class="grid md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-semibold text-slate-700 mb-3">{{ $isRtl ? 'رقم الهاتف' : 'Phone Number' }}</label>
                                <input type="tel" name="phone" value="{{ old('phone') }}"
                                       class="w-full px-5 py-4 rounded-xl border-2 border-slate-200 focus:border-blue-500 focus:ring-4 focus:ring-blue-500/10 transition-all text-lg"
                                       placeholder="{{ $isRtl ? 'أدخل رقم هاتفك' : 'Enter your phone' }}">
                            </div>

                            <div>
                                <label class="block text-sm font-semibold text-slate-700 mb-3">{{ $isRtl ? 'اسم الشركة' : 'Company Name' }}</label>
                                <input type="text" name="company" value="{{ old('company') }}"
                                       class="w-full px-5 py-4 rounded-xl border-2 border-slate-200 focus:border-blue-500 focus:ring-4 focus:ring-blue-500/10 transition-all text-lg"
                                       placeholder="{{ $isRtl ? 'أدخل اسم شركتك' : 'Enter company name' }}">
                            </div>
                        </div>

                        <div>
                            <label class="block text-sm font-semibold text-slate-700 mb-3">{{ $isRtl ? 'الموضوع' : 'Subject' }}</label>
                            <input type="text" name="subject" value="{{ old('subject') }}"
                                   class="w-full px-5 py-4 rounded-xl border-2 border-slate-200 focus:border-blue-500 focus:ring-4 focus:ring-blue-500/10 transition-all text-lg"
                                   placeholder="{{ $isRtl ? 'موضوع الرسالة' : 'Message subject' }}">
                        </div>

                        <div>
                            <label class="block text-sm font-semibold text-slate-700 mb-3">{{ $isRtl ? 'الرسالة' : 'Message' }} *</label>
                            <textarea name="message" required rows="6"
                                      class="w-full px-5 py-4 rounded-xl border-2 border-slate-200 focus:border-blue-500 focus:ring-4 focus:ring-blue-500/10 transition-all text-lg resize-none"
                                      placeholder="{{ $isRtl ? 'اكتب رسالتك هنا...' : 'Write your message here...' }}">{{ old('message') }}</textarea>
                            @error('message')
                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <button type="submit" class="w-full btn-liquid text-xl py-5">
                            {{ $isRtl ? 'إرسال الرسالة' : 'Send Message' }}
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- Map Section --}}
@if($mapEmbed)
<section class="h-[500px] relative">
    <iframe
        src="{{ $mapEmbed }}"
        width="100%"
        height="100%"
        style="border:0;"
        allowfullscreen=""
        loading="lazy"
        referrerpolicy="no-referrer-when-downgrade"
        class="grayscale hover:grayscale-0 transition-all duration-500">
    </iframe>
</section>
@endif

{{-- CTA --}}
@include('frontend.sections.cta')

@endsection