@extends('frontend.layouts.app')

@php
    use App\Helpers\Helper;
@endphp

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

@section('content')
    {{-- @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif --}}

    {{-- Hero Section --}}
    @include('frontend.partials.hero', [
        'mainHeading' => Helper::contentText('pages.contact_us'),
        'subHeading' => Helper::contentText('pages.contact_us_description'),
        'breadcrumb1' => [
            'name' => __('route.home'),
            'route' => route('home'),
        ],
        'breadcrumb2' => [
            'name' => __('route.contact_us'),
            'route' => route('contact'),
            'class' => 'text-gray-400',
        ],
        'breadcrumb3' => null,
        'breadcrumb4' => null,
    ])

    <div class="container-page section-y">

        {{-- Intro --}}
        <div class="text-center max-w-2xl mx-auto mb-10 md:mb-14">
            <p class="text-primary font-bold uppercase tracking-widest text-sm">{!! Helper::content('pages.get_in_touch') !!}</p>
            <h2 class="text-h2 font-bold text-gray-900 mt-2">{!! Helper::content('pages.we_here_to_help') !!}</h2>
            <p class="text-gray-600 mt-3 text-base md:text-lg">{!! Helper::content('pages.fill_form_below') !!}</p>
        </div>

        {{-- Contact cards --}}
        <div class="grid grid-cols-1 md:grid-cols-3 grid-gap mb-10 md:mb-14">
            {{-- Email --}}
            <div class="card-ui card-pad flex items-start gap-4">
                <span
                    class="shrink-0 w-12 h-12 rounded-xl bg-primary/10 text-primary flex items-center justify-center">
                    <i class="fa-regular fa-envelope fa-lg"></i>
                </span>
                <div class="min-w-0">
                    <h3 class="text-base font-bold text-primary uppercase tracking-wide">{!! Helper::content('pages.email_address') !!}
                    </h3>
                    <a href="mailto:{{ json_decode($setting->email1)->email ?? 'void:;' }}"
                        class="block mt-1 text-gray-700 font-medium break-words hover:text-primary hover:underline">{{ json_decode($setting->email1)->email ?? '' }}</a>
                    <a href="mailto:{{ json_decode($setting->email2)->email ?? 'void:;' }}"
                        class="block text-gray-700 font-medium break-words hover:text-primary hover:underline">{{ json_decode($setting->email2)->email ?? '' }}</a>
                </div>
            </div>

            {{-- Phone --}}
            <div class="card-ui card-pad flex items-start gap-4">
                <span
                    class="shrink-0 w-12 h-12 rounded-xl bg-primary/10 text-primary flex items-center justify-center">
                    <i class="fa-solid fa-phone fa-lg"></i>
                </span>
                <div class="min-w-0">
                    <h3 class="text-base font-bold text-primary uppercase tracking-wide">{!! Helper::content('pages.phone_no') !!}</h3>
                    <a href="tel:{{ json_decode($setting->contact)->contact ?? 'void:;' }}"
                        class="block mt-1 text-gray-700 font-medium hover:text-primary hover:underline">{{ json_decode($setting->contact)->contact ?? '' }}</a>
                </div>
            </div>

            {{-- Social --}}
            <div class="card-ui card-pad flex items-start gap-4">
                <span
                    class="shrink-0 w-12 h-12 rounded-xl bg-primary/10 text-primary flex items-center justify-center">
                    <i class="fa-solid fa-share-nodes fa-lg"></i>
                </span>
                <div class="min-w-0">
                    <h3 class="text-base font-bold text-primary uppercase tracking-wide">
                        {!! Helper::content('pages.social_community') !!}</h3>
                    <p class="text-gray-600 mt-1 text-sm">{!! Helper::content('pages.stay_connected_with_us') !!}:</p>
                    <div class="flex flex-wrap items-center gap-2 mt-3">
                        @foreach (['facebook' => 'facebook-f', 'instagram' => 'instagram', 'linkedin' => 'linkedin-in', 'x' => 'x-twitter', 'youtube' => 'youtube'] as $key => $icon)
                            @if (isset($setting->$key))
                                <a href="{{ $setting->$key }}" target="_blank" rel="noopener noreferrer"
                                    aria-label="{{ ucfirst($key) }}"
                                    class="w-10 h-10 flex items-center justify-center rounded-full bg-gray-100 text-primary hover:bg-primary hover:text-white">
                                    <i class="fa-brands fa-{{ $icon }}"></i>
                                </a>
                            @endif
                        @endforeach
                    </div>
                </div>
            </div>
        </div>

        {{-- Form + map --}}
        <div class="grid grid-cols-1 lg:grid-cols-5 grid-gap items-stretch">

            <section class="lg:col-span-3 card-ui card-pad !p-6 sm:!p-8 md:!p-10">
                <h3 class="text-h3 font-bold text-gray-900 mb-6">{!! Helper::content('pages.send_message') !!}</h3>

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

                    @if (session('success'))
                        <div x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 5000)" x-transition.duration.500ms
                            class="p-4 bg-green-100 border border-green-300 text-green-700 rounded-lg text-sm text-center">
                            {{ session('success') }}
                        </div>
                    @endif

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6">
                        <!-- Full Name -->
                        <x-fields.text-field label="{{ __('pages.full_name') }}" :data="old('full_name')" fieldName="full_name"
                            :required=true />

                        <!-- Contact Number -->
                        <x-fields.tel-field label="{{ __('pages.contact_no') }}" :data="old('contact_no')"
                            fieldName="contact_no" :required=true />

                        <!-- Email -->
                        <div class="md:col-span-2">
                            <x-fields.email-field label="{{ __('pages.email') }}" :data="old('email')" fieldName="email"
                                :required=true />
                        </div>

                        {{-- Message --}}
                        <div class="md:col-span-2">
                            <label for="message" class="block text-gray-700 font-semibold mb-2 text-sm sm:text-base">
                                {{ __('pages.your_message') }} <span class="text-red-600">*</span>
                            </label>
                            <textarea id="message" name="message" rows="6"
                                class="w-full border border-gray-300 rounded-lg focus:border-primary focus:ring-1 focus:ring-primary p-3 resize-none text-sm sm:text-base @error('message') border-red-500 @enderror"
                                placeholder="{{ __('pages.write_here') }}" required>{{ old('message') }}</textarea>

                            @error('message')
                                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <div>
                        <x-recaptcha action="contact" />
                    </div>

                    <button type="submit"
                        class="btn w-full sm:w-auto bg-primary text-white hover:bg-secondary px-8">
                        {!! Helper::content('pages.send_message') !!}
                        <i class="fa-solid fa-paper-plane text-sm"></i>
                    </button>
                </form>
            </section>

            {{-- Map --}}
            <section class="lg:col-span-2 card-ui overflow-hidden min-h-[320px] lg:min-h-full">
                @php $mapUrl = Helper::mapUrl($setting->map ?? ''); @endphp
                @if ($mapUrl)
                <iframe src="{{ $mapUrl }}" title="{{ Helper::contentText('pages.contact_us') }}"
                    class="w-full h-full min-h-[320px] border-0" allowfullscreen loading="lazy"
                    referrerpolicy="no-referrer-when-downgrade"></iframe>
                @endif
            </section>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            @if (session('success'))
                Swal.fire({
                    icon: 'success',
                    title: "{{ __('pages.message_sent') }}",
                    text: "{{ __('pages.thankyou_for_contacting') }}",
                    confirmButtonColor: '#10B981'
                });
            @endif

            @if (session('error'))
                Swal.fire({
                    icon: 'error',
                    title: "{{ __('pages.please_try_again') }}",
                    text: "{{ __('pages.something_went_wrong') }}",
                    confirmButtonColor: '#EF4444'
                });
            @endif
        });
    </script>
@endpush