@extends('layouts.frontend.master')

@section('content')
<!-- Form Contact -->
<div class="py-[80px] relative z-[9]">
    <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 class="w-[50px] h-[50px] flex items-center justify-center bg-main rounded-[5px]"><img
                                src="{{asset('frontend')}}/images/8-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 class="w-[50px] h-[50px] flex items-center justify-center bg-main rounded-[5px]"><img
                                src="{{asset('frontend')}}/images/6-012.png" class="max-w-[30px]" 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 class="w-[50px] h-[50px] flex items-center justify-center bg-main rounded-[5px]"><img
                                src="{{asset('frontend')}}/images/7-01.png" class="max-w-[40px]" alt="" /></span>
                        <div class="">
                            <h1 class="text-main">{{ app()->getLocale() == 'ar' ? $settings['address_short_ar'] :
                                $settings['address_short_en'] }}</h1>
                            <p class="text-main text-[13px] font-normal">{{ __('website.location') }}</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!1d3626.1285429315226!2d46.7498547!3d24.653703399999998!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3e2f037047980ecb%3A0xa0472d1204d4483d!2z2LHZitin2LYg2KfZhNi32KjYp9i52KkgUml5YWRoIFByaW50!5e0!3m2!1sen!2seg!4v1732733902826!5m2!1sen!2seg"></iframe>
            </div>
        </div>
    </div>
</div>
@endsection