@extends('web.layouts.layout')
@section('content')


    <main>
        <!-- Start pg_header -->
        @include('web.pages.components.header.header')

        <!-- Start section -->
        <section class="contact_pg section">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-6">
                        <div class="text_box">
                            <div class="sec_head mb-5">
                                <h6 class="color-primary fw-bold text-uppercase mb-3 fs-1"> {{__('web.be_contact')}}    </h6>
                            </div>

                            <div class="row mt-4">
                                <div class="col-6">
                                    <div class="item">
                                        <h5 class="label"> {{__('web.email')}} </h5>
                                        <p class="data">{{$settings['site_email']}}</p>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="item">
                                        <h5 class="label"> {{__('web.phone')}} </h5>
                                        <p class="data">{{$settings['site_phone']}}</p>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="item">
                                        <h5 class="label"> {{__('web.address')}} </h5>
                                        <p class="data">{{$settings['site_address_ar']}}</p>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="item">
                                        <h5 class="label"> {{__('web.follow_us')}} </h5>
                                        <div class="social_links d-flex mt-3">
                                            @if($settings['facebook'])
                                                <a href="{{$settings['facebook']}}" target="_blank"><i class="fa-brands fa-facebook-f"></i></a>
                                            @endif
                                            @if($settings['instagram'])
                                                <a href="{{$settings['instagram']}}" target="_blank"><i class="fa-brands fa-instagram"></i></a>
                                            @endif
                                            @if($settings['twitter'])
                                                <a href="{{$settings['twitter']}}" target="_blank"><i class="fa-brands fa-x-twitter"></i></a>
                                            @endif
                                            @if($settings['snapchat'])
                                                <a href="{{$settings['snapchat']}}" target="_blank"><i class="fa-brands fa-snapchat"></i></a>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="map_box">
                            <iframe width="100%" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="{{$settings['map_link']}}"><a href="https://www.gps.ie/">gps trackers</a></iframe>
                        </div>
                    </div>
                </div>
                <div class="inner  mt-5">
                    <div class="row">
                        <div class="col-lg-5">
                            <div class="box">
                                <div class="zi-5">
                                    <img src="{{asset($page->image)}}" class="icon mx-auto d-block" alt="">
                                    <h3 class="title fs-1 color-secondary fw-bold mb-4">
                                        {!! $page->title !!}
                                    </h3>
                                    <p class="p mb-0 text-white">
                                        {!! $page->description !!}
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-7">
                            <form method="post" action="{{$action}}" onsubmit="formAction(this)" class="form">
                                @CSRF
                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="form-group mb-4">
                                            <input type="text" name="name" class="form-control" placeholder=" {{__('visitorMessages.name')}}   "/>
                                            <span class="icon"> <i class="fa-light fa-user"></i> </span>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group phone_group mb-4">
                                            <input name="phone" class="form-control digitsOnly" placeholder="XXX-XXX-XXX  "  />
                                            <span class="countryCode_span">+966</span>
                                            <span class="icon">  <i class="fa-light fa-mobile"></i> </span>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group mb-4">
                                            <input name="email" type="email" class="form-control" placeholder=" {{__('visitorMessages.email')}}  "/>
                                            <span class="icon"> <i class="fa-light fa-envelope"></i> </span>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group mb-4">
                                            <input type="text" name="subject" class="form-control" placeholder=" {{__('visitorMessages.subject')}}     "/>
                                            <span class="icon"> <i class="fa-light fa-box-archive"></i> </span>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="form-group mb-4">
                                            <textarea rows="6" name="message" class="form-control" placeholder="{{__('web.write_message')}}" ></textarea>
                                            <span class="icon"> <i class="fa-light fa-comment"></i> </span>
                                        </div>
                                    </div>
                                </div>

                                <button class="submit_butn butn primary_butn mx-auto " > {{__('web.send')}}  </button>


                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </section>


    </main>

@stop