@extends('layouts.web.app')
@section('page_title')
    @lang('site.contact_us')
@endsection
@section('content')
    <!-- Page Title -->
    <div class="page-title-area page-title-area-two title-img-one" style="background-image: url({{asset('uploads/page_images/'.$pages[0]->contact_banner_image)}}">
        <div class="d-table">
            <div class="d-table-cell">
                <div class="page-title-text">
                    <h2>@lang('site.contact_us')</h2>
                    <ul>
                        <li>
                            <a href="{{route('/')}}">@lang('site.home')</a>
                        </li>
                        <li>
                            <i class="{{(app()->getLocale() == 'ar' ? 'icofont-simple-left' :  'icofont-simple-right')}}"></i>
                        </li>
                        <li>@lang('site.contact_us')</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- End Page Title -->

    <!-- Contact Form -->
    <div class="contact-form contact-form-four pb-100" style="background-image: url({{asset('uploads/page_images/'.$pages[0]->contact_form_background_image)}}">
        <!-- Location -->
        <div class="loaction-area">
            <div class="container">
                <div class="row location-bg" style="background-image: url({{asset('uploads/page_images/'.$pages[0]->contact_form_image)}}">
                    <div class="col-sm-6 col-lg-4">
                        <div class="location-item">
                            <div class="location-icon">
                                <i class="flaticon-pin"></i>
                            </div>
                            <h3>@lang('site.Office_Address')</h3>
                            <ul>
                                <li>{{$settings[0]->location}}</li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-sm-6 col-lg-4">
                        <div class="location-item">
                            <div class="location-icon">
                                <i class="flaticon-call"></i>
                            </div>
                            <h3>@lang('site.Phone_Number')</h3>
                            <ul>
                                <li>
                                    <a href="tel:{{$settings[0]->contact_phone}}">{{$settings[0]->contact_phone}}</a>
                                </li>

                            </ul>
                        </div>
                    </div>
                    <div class="col-sm-6 offset-sm-3 offset-lg-0 col-lg-4">
                        <div class="location-item">
                            <div class="location-icon">
                                <i class="flaticon-email"></i>
                            </div>
                            <h3>@lang('site.email_address')</h3>
                            <ul id="form_messages">
                                <li>
                                    <a href="mailto:{{$settings[0]->email}}">{{$settings[0]->email}}</a>
                                </li>

                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Location -->

        <div class="container-fluid" >
            @include('partials._sessions')
            <form id="" method="post" action="{{ route('contact.post') }}#form_messages">
                {{ csrf_field() }}
                <div class="row contact-wrap">

                    <div class="col-sm-6 col-lg-6" >
                        <div class="form-group">
                            <input type="text" name="name"  class="form-control" required  placeholder="@lang('site.name')">
                        </div>
                    </div>

                    <div class="col-sm-6 col-lg-6">
                        <div class="form-group">
                            <input type="email" name="email"  class="form-control" required  placeholder="@lang('site.email')">
                        </div>
                    </div>

                    <div class="col-sm-6 col-lg-6">
                        <div class="form-group">
                            <input type="text" name="phone"  required  class="form-control" placeholder="@lang('site.phone')">
                        </div>
                    </div>

                    <div class="col-sm-6 col-lg-6">
                        <div class="form-group">
                            <input type="text" name="message"  class="form-control" required  placeholder="@lang('site.message')">
                        </div>
                    </div>

                    <div class="col-md-12 col-lg-12">
                        <div class="form-group">
                            <textarea name="message" class="form-control"  cols="30" rows="8" required  placeholder="@lang('site.message')"></textarea>
                        </div>
                    </div>

                    <div class="col-md-12 col-lg-12">
                        <div class="text-center">
                            <button type="submit" class="contact-btn">@lang('site.submit_now')</button>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!-- End Contact Form -->

    <!-- Start Map Area -->
    <div class="map-area">
        {{--<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d193595.15830869428!2d-74.119763973046!3d40.69766374874431!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2sbd!4v1587550284019!5m2!1sen!2sbd"></iframe>--}}
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7571.806953358877!2d37.36957361856069!3d37.0681420470894!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1531e14f5bc8d2cf%3A0x8bf6b9d2a8c9e299!2zxLBuY2lsaSBQxLFuYXIsIMWeaHQuIE1laG1ldCDDlnRlciBDZCwgMjcwOTAgxZ5laGl0a2FtaWwvR2F6aWFudGVw!5e0!3m2!1sen!2str!4v1636572814646!5m2!1sen!2str" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
    </div>
    <!-- End Map Area -->
@endsection