@extends("Site.Layouts.blank")
@section ("content")

    <!-- *=*=*=*=*=*=*=*=*=* Section Banner *=*=*=*=*=*=*=*=*=* -->
    <div class="w-full relative overflow-x-hidden overflow-y-hidden">
        <img class="w-full    min-h-[320px] md:h-auto object-cover  " src="{{url($setting['Contact_page_banner'])}}" alt="banner">
        <div class="left_bottom-absolute  min-w-full">
            <div class="Banner_text-wrapper">
                <h1 > @lang('site.CONTACT US')  </h1>
            </div>
        </div>
    </div>

    <main class="my-12  mx-6 lg:mx-16 2xl:mx-40">


        <!-- *=*=*=*=*=*=*=*=*=* Section location *=*=*=*=*=*=*=*=*=* -->
        <section class="flex justify-between  flex-col lg:flex-row  gap-y-6 ">
            <div>
                <h1 class="text-2xl md:text-4xl text-primary mb-4"> @lang('site.HEAD OFFICE') </h1>


                @foreach($Contact_info as $info)
                    <p class="text-[#4C4849] text-base md:text-lg">  <img src="{{$info->image}}" alt="{{$info->title}}"  > {!! nl2br(e($info->title)) !!}  </p>
                    <p class="text-[#4C4849] text-base md:text-lg">  {!! nl2br(e($info->description)) !!} </p>
                    <br>
                @endforeach

            </div>
            <div class=" ">
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3710.540905166578!2d39.2132684!3d21.564799499999996!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x15c3d1a3c4fd9de5%3A0x19b185d989bfc0fc!2sALBADEEL%20CONTRACTING!5e0!3m2!1sen!2seg!4v1688481310899!5m2!1sen!2seg"
                        class="w-full lg:w-[550px] xl:w-[700px] 2xl:w-[900px]" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
            </div>
        </section>


        <br><br><br>

        <h1 class="text-2xl md:text-4xl text-primary mb-4">  @lang('site.GET IN TOUCH') </h1>

        <form action="{{url('ContactUs')}}" method="post"  data-aos="fade-up">
            <div class="flex gap-2 flex-col md:flex-row  mb-5"> @csrf
                <input type="text" name="name" placeholder="@lang('site.Name')" class="flex-1 px-2 py-3 border-2	rounded-md	" />
                <input type="number" name="phone" placeholder="@lang('site.Phone')" class="flex-1 px-2 py-3 border-2	rounded-md	" />
                <input type="email" name="email" placeholder="@lang('site.Email')" class="flex-1 px-2 py-3 border-2	rounded-md	" />
            </div>
            <textarea placeholder="Massage" name="message" class="w-full h-36 px-2 py-3 border-2 block 	rounded-md placeholder-gray-300" > </textarea>

            <div class="text-center mt-5 ">
                <button class=" bg-primary text-white px-12 py-3 rounded-lg drop-shadow-lg hover:scale-x-110  transition-all" type="submit"> @lang('site.Submit') </button>
            </div>

        </form>


    </main>





@endsection