@extends('layouts.frontend.master')
@section('content')
<!-- Info Head Contact -->
<div class="text-center my-9">
    <h4 class="text-[30px] font-bold">{{ __('website.contactUsTitle') }}</h4>
    <p class="max-w-[600px] m-auto mt-4">
        {{ app()->getLocale() == 'ar' ? $settings['website_bio_ar'] : $settings['website_bio_en'] }}
    </p>
</div>

<!-- Form Contact -->
<div class="py-[40px]">
    <div class="container">
        <div class="grid grid-cols-12 lg:gap-[40px] p-3">
            <div class="lg:col-span-6 col-span-12 mb-3">
                <div class="flex lg:items-center gap-[10px] lg:flex-row flex-col mb-7">
                    <div class="flex items-center gap-2 lg:w-[33%] w-full">
                        <span><img src="./images/Icons/16-01.png" class="max-w-[40px]" alt="" /></span>
                        <div class="">
                            <h1 class="text-main">{{ __('website.mobile') }}</h1>
                            <p class="text-main text-[13px] font-normal" style="direction: ltr">
                                {{ $settings['phone'] }}
                            </p>
                        </div>
                    </div>
                    <div class="flex items-center gap-2 lg:w-[33%] w-full">
                        <span><img src="./images/Icons/17-01.png" class="max-w-[40px]" alt="" /></span>
                        <div class="">
                            <h1 class="text-main">{{ __('website.email') }}</h1>
                            <p class="text-main text-[13px] font-normal">
                                {{ $settings['email'] }}
                            </p>
                        </div>
                    </div>
                    <div class="flex items-center gap-2 lg:w-[33%] w-full">
                        <span><img src="./images/Icons/18-01.png" class="max-w-[40px]" alt="" /></span>
                        <div class="">
                            <h1 class="text-main">{{ __('website.location') }}</h1>
                            <p class="text-main text-[13px] font-normal">
                                {{ app()->getLocale() == 'ar' ? $settings['address_short_ar'] :
                                $settings['address_short_en'] }}
                            </p>
                        </div>
                    </div>
                </div>
                <form id="ajaxFormContact" action="{{ route('contact-post') }}" method="POST" class="w-full"
                    enctype="multipart/form-data">
                    @csrf
                    <input class="w-full border border-[#ddd] rounded-[5px] mb-3 p-3" type="text" name="name" id="name"
                        value="" placeholder="{{ __('website.yourName') }}" />
                    <div style="color: red" id="nameError"></div>
                    <input class="w-full border border-[#ddd] rounded-[5px] mb-3 p-3" type="email" name="email"
                        id="email" value="" placeholder="{{ __('website.email') }}" />
                    <div style="color: red" id="emailError"></div>
                    <input class="w-full border border-[#ddd] rtl:text-right ltr:text-left rounded-[5px] mb-3 p-3"
                        name="phone" id="phone" value="" type="tel" placeholder="{{ __('website.mobile') }}" />
                    <div style="color: red" id="phoneError"></div>
                    <textarea class="w-full border border-[#ddd] rounded-[5px] mb-3 p-3 min-h-[200px] resize-none"
                        name="message" id="message" placeholder="{{ __('website.enterMessage') }}"></textarea>
                    <div style="color: red" id="messageError"></div>
                    <button type="submit"
                        class="bg-main text-white m-auto table text-[20px] text-main rounded-[10px] w-full h-[45px]">
                        {{ __('website.send') }}
                    </button>
                    <div id="successMessageContact" class="alert alert-success d-none" style="color: green"></div>
                </form>
            </div>
            <div class="lg:col-span-6 col-span-12 mt-3">
                <iframe class="w-full h-[500px]" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d31176131.564223234!2d-0.5164220027366438!3d17.475017809167994!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x15e7b33fe7952a41%3A0x5960504bc21ab69b!2sSaudi%20Arabia!5e0!3m2!1sen!2sus!4v1734708693689!5m2!1sen!2sus"></iframe>
            </div>
        </div>
    </div>
</div>

@endsection