@extends('layouts.master')
@section('meta')
    @include('layouts.partials.seo', [
        'title' => nova_get_setting_translate('contact_meta_title') ?? nova_get_setting_translate('contact_us_title'),
        'description' =>  nova_get_setting_translate('contact_meta_description') ?? env('APP_NAME') ,
        'keywords' => nova_get_setting_translate('contact_meta_keywords') ?? env('APP_NAME'),
        'image' => Storage::url(nova_get_setting('contact_banner')),
        'schema' => nova_get_setting('contact_meta_other'),
    ])
@endsection
@section('css')
    <style>
        .contact-info-list li:hover p {
            color: white
        }
    </style>
@endsection
@section('content')
    <section class="rlr-section">
        <div class="rlr-cta rlr-cta--no-button" style="background-image: url('{{ Storage::url(nova_get_setting('contact_banner')) }}')"
             title="{{nova_get_setting('contact_banner_title')}}" role="img"
             aria-label="{{nova_get_setting_translate('contact_banner_alt')}}">
            <h1>{{nova_get_setting_translate('contact_us_title')}}</h2>
            <p>{{nova_get_setting_translate('contact_us_heading')}}</p>
        </div>
    </section>

    <div class="rlr-search-results-page__breadcrumb-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-12">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb rlr-breadcrumb__items">
                            <li class="breadcrumb-item rlr-breadcrumb__item"><a href="{{route('home')}}">{{__('homePage.home')}}</a>
                            </li>
                            <li class="breadcrumb-item rlr-breadcrumb__item active"
                                aria-current="page">{{nova_get_setting_translate('contact_us_title')}}</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>




    <section class="rlr-section rlr-section__my">
        <div class="container">
            <div class="rlr-contact-details rlr-contact-details--v2">
                <div class="rlr-contact-details__details">
                    <div class="rlr-contact-detail-item">
                        <span class="rlr-contact-detail-item__icon"> <i class="rlr-icon-font flaticon-map-marker"> </i> </span>
                        <div>
                            <p class="rlr-contact-detail-item__title">{{__('contact.address')}}</p>
                            <a href="{{nova_get_setting('site_address_link')}}">
                                <h6 class="rlr-contact-detail-item__desc"> {{nova_get_setting_translate('site_address')}}</h6>
                            </a>
                          
                        </div>
                    </div>
                    <div class="rlr-contact-detail-item">
                        <span class="rlr-contact-detail-item__icon"> <i
                                    class="rlr-icon-font flaticon-phone-receiver-silhouette"> </i> </span>
                        <div>
                            <p class="rlr-contact-detail-item__title">{{__('contact.phone')}}</p>
                            <a href="tel:{{nova_get_setting('site_phone')}}">
                                <h6 class="rlr-contact-detail-item__desc">{{nova_get_setting('site_phone')}}</h6>
                            </a>
                           
                        </div>
                    </div>
                    <div class="rlr-contact-detail-item">
                        <span class="rlr-contact-detail-item__icon"> <i
                                    class="rlr-icon-font flaticon-email"> </i> </span>
                        <div>
                            <p class="rlr-contact-detail-item__title">{{__('contact.email')}}</p>
                            <a href="mailto:{{nova_get_setting('site_email')}}">
                                <h6 class="rlr-contact-detail-item__desc">{{nova_get_setting('site_email')}}</h6>
                            </a>
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="rlr-contact rlr-contact-details--v2 rlr-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-7">
                    <div class="rlr-contact-form">

                        <div class="rlr-contact-form__header">
                            <div class="rlr-page-title">
                                <span class="rlr-page-title__icon"> 
                                    {{-- <i  class="rlr-icon-font flaticon-fluent-hand-left-20-regular"> </i>  --}}
                                    {{-- <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.88 84.04"><title>call-message</title><path d="M34.11,3h83a5.8,5.8,0,0,1,5.79,5.79V70.27a5.76,5.76,0,0,1-1,3.25,2.32,2.32,0,0,1-.55.82,2.2,2.2,0,0,1-.54.38,5.78,5.78,0,0,1-3.7,1.35H68a15.44,15.44,0,0,0,.42-4.45h47.22L84.8,39.23,74.62,47.91h0a2.22,2.22,0,0,1-2.84,0L61.1,39.23h0l-9.69,9.71A12.4,12.4,0,0,0,47,47.07L57.64,36.41,37.91,20.32a14,14,0,0,0-.68-3.42l-.79-3.49L73.15,43.34,115.26,7.46H35.11L34.11,3ZM17.46,31a61.46,61.46,0,0,0,4.73,14.91A51.89,51.89,0,0,0,32.61,60.48a1.47,1.47,0,0,0,1.17.45,5.31,5.31,0,0,0,2-.67,17.91,17.91,0,0,0,2.1-1.36c3.14-2.18,7-4.89,10.29-1.85.08.07.12.14.2.2L58.84,68.78a1.13,1.13,0,0,1,.1.13,6.09,6.09,0,0,1,.79,5.77,14.31,14.31,0,0,1-3.94,5.76,13.76,13.76,0,0,1-7.94,3.46,29.8,29.8,0,0,1-8.28-.4,27.16,27.16,0,0,1-11.31-4.73,54.16,54.16,0,0,1-9.86-9.43l-.24-.29c-1.52-1.8-3.16-3.73-4.69-5.88A78.72,78.72,0,0,1,1,34.34C-.72,25.59-.37,16.85,3.33,9.62c2-4,5.06-7.2,9-8.69,3.44-1.32,7.51-1.34,12.13.63a1.67,1.67,0,0,1,1,1.24l3.73,16.58a4.57,4.57,0,0,1-.82,4.88,9.43,9.43,0,0,1-4.29,2.5c-.56.24-1.21.45-1.9.67-2.27.74-4.86,1.61-4.73,3.65v0Zm70.72,5.33,30.26,31.73V10.58L88.18,36.36Z"/></svg> --}}
                             
                                    <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.88 84.04">
                                        <title>call-message</title>
                                        <path fill="#10a5b2" d="M34.11,3h83a5.8,5.8,0,0,1,5.79,5.79V70.27a5.76,5.76,0,0,1-1,3.25,2.32,2.32,0,0,1-.55.82,2.2,2.2,0,0,1-.54.38,5.78,5.78,0,0,1-3.7,1.35H68a15.44,15.44,0,0,0,.42-4.45h47.22L84.8,39.23,74.62,47.91h0a2.22,2.22,0,0,1-2.84,0L61.1,39.23h0l-9.69,9.71A12.4,12.4,0,0,0,47,47.07L57.64,36.41,37.91,20.32a14,14,0,0,0-.68-3.42l-.79-3.49L73.15,43.34,115.26,7.46H35.11L34.11,3ZM17.46,31a61.46,61.46,0,0,0,4.73,14.91A51.89,51.89,0,0,0,32.61,60.48a1.47,1.47,0,0,0,1.17.45,5.31,5.31,0,0,0,2-.67,17.91,17.91,0,0,0,2.1-1.36c3.14-2.18,7-4.89,10.29-1.85.08.07.12.14.2.2L58.84,68.78a1.13,1.13,0,0,1,.1.13,6.09,6.09,0,0,1,.79,5.77,14.31,14.31,0,0,1-3.94,5.76,13.76,13.76,0,0,1-7.94,3.46,29.8,29.8,0,0,1-8.28-.4,27.16,27.16,0,0,1-11.31-4.73,54.16,54.16,0,0,1-9.86-9.43l-.24-.29c-1.52-1.8-3.16-3.73-4.69-5.88A78.72,78.72,0,0,1,1,34.34C-.72,25.59-.37,16.85,3.33,9.62c2-4,5.06-7.2,9-8.69,3.44-1.32,7.51-1.34,12.13.63a1.67,1.67,0,0,1,1,1.24l3.73,16.58a4.57,4.57,0,0,1-.82,4.88,9.43,9.43,0,0,1-4.29,2.5c-.56.24-1.21.45-1.9.67-2.27.74-4.86,1.61-4.73,3.65v0Zm70.72,5.33,30.26,31.73V10.58L88.18,36.36Z"></path>
                                      </svg>
                                      
                                      
                                </span>
                                <div>
                                    <h2 class="type-h3 rlr-page-title__title">{{nova_get_setting_translate('contact_us_form_title')}}</h2>
                                    <span class="rlr-page-title__desc">{!!nova_get_setting_translate('contact_us_form_description')!!}</span>
                                </div>
                            </div>
                        </div>
                        <div class="rlr-contact-form__body">
                            <form onsubmit="event.preventDefault()" id="contact_form_content">
                                @csrf
                                <div class="rlr-contact-form__input-group">
                                    <label class="type-body-medium rlr-contact-form__label">{{__('contact.full_name')}}</label>
                                    <input type="text" name="name" autocomplete="off" class="form-control"
                                           placeholder=""/>
                                </div>

                                <div class="rlr-contact-form__input-group">
                                    <label class="type-body-medium rlr-contact-form__label">{{__('contact.phone')}}</label>
                                    <input type="text" name="phone_number" autocomplete="off" class="form-control"
                                           placeholder="XXXXXXXXXX"/>
                                </div>

                                <div class="rlr-contact-form__input-group">
                                    <label class="type-body-medium rlr-contact-form__label">{{__('contact.email')}}</label>
                                    <input type="email" name="email" autocomplete="off" class="form-control"
                                           placeholder="johndoe@email.com"/>
                                </div>

                                <div class="rlr-contact-form__input-group">
                                    <label class="type-body-medium rlr-contact-form__label">{{__('contact.message')}}</label>
                                    <textarea name="message" class="form-control form-control--text-area"
                                              placeholder="Please explain the issue your are facing."
                                              rows="12"></textarea>
                                </div>


                                <button type="submit" id="saveContactBtn"
                                        class=" mb-5 btn rlr-button btn rlr-button custom-class rlr-button--medium rlr-button--rounded rlr-button__color--white rlr-button--brand rlr-button-- rlr-button-- rlr-button__color-- rlr-button-- rlr-button--">
                                    {{__('contact.submit')}}
                                </button>

                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-lg-5 mt-lg-0">
                    <div class="rlr-contact-details__map">
                     
                         {!! nova_get_setting('map_iframe') !!}
                       
                       
                    </div>
                </div>
                <div class="col-lg-1"></div>
            </div>
        </div>
    </section>




    @include('layouts.partials.why_choose')
    @include('layouts.partials.customer_gallery')
    @include('layouts.partials.clients_say')
    @include('layouts.partials.faq')
    @include('layouts.partials.partners')
@endsection
@section('js')
    <script type="text/javascript">
        $(document).ready(function() {
            $("#saveContactBtn").on('click', function(e){
                e.preventDefault();

                $.ajax({
                    method: 'POST',
                    url: '{{ route('saveContact') }}',
                    data: $("#contact_form_content").serialize(),
                }).done(function(response) {
                    if(response.status) {
                        toastr.success(response.message);
                        $("#contact_form_content")[0].reset();
                    }
                }).fail(function(response) {
                    handleFailure(response);
                })
            });
        });
    </script>
@endsection