@extends('layout.master')
@section('meta')
    @include('layout.partials.seo', [
        'title' => nova_get_setting_translate('contact_meta_title'),
        'description' => nova_get_setting_translate('contact_meta_description'),
        'keywords' => nova_get_setting_translate('contact_meta_keywords'),
        'image' => Storage::url(nova_get_setting('contact_banner')),
        'schema' => nova_get_setting('contact_schema')
    ])
@endsection
@section('content')
    <main id="content">

        <div class="bg-img-hero text-center mb-1"
             style="background-image: url({{Storage::url(nova_get_setting('contact_banner'))}});"
             role="img"
             title="{{nova_get_setting_translate('contact_banner_title')}}"
             aria-label="{{nova_get_setting_translate('contact_banner_alt')}}">
            <div class="container space-top-xl-3 py-6 py-xl-0">
                <div class="row justify-content-center py-xl-4">
                    <!-- Info -->
                    <div class="py-xl-10 py-5">
                        <h1 class="font-size-40 font-size-xs-30 text-white font-weight-bold mb-0">{{nova_get_setting_translate('contact_title')}}</h1>
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb breadcrumb-no-gutter justify-content-center mb-0">
                                <li class="breadcrumb-item font-size-14"><a class="text-white" href="{{route('home')}}">{{__('general.home')}}</a></li>
                                <li class="breadcrumb-item custom-breadcrumb-item font-size-14 text-white active"
                                    aria-current="page">{{nova_get_setting_translate('contact_name')}}
                                </li>
                            </ol>
                        </nav>
                    </div>
                    <!-- End Info -->
                </div>
            </div>
        </div>

        <div class="icon-block-center icon-center-v1 border-bottom border-color-8">
            <div class="container text-center space-1">

                <!-- Features -->
                <div class="mb-2">
                    <div class="row">
                        <!-- Icon Block -->
                        <div class="col-md-4">
                            <i class="flaticon-phone-call text-primary font-size-80 mb-3"></i>
                            <h5 class="font-size-17 text-dark font-weight-bold mb-2"><a>{{__('contact.phone')}}</a></h5>
                            <p class="text-gray-1 px-xl-2 px-uw-7"> {{nova_get_setting('site_phone')}} </p>
                        </div>
                        <!-- End Icon Block -->

                        <!-- Icon Block -->
                        <div class="col-md-4">
                            <i class="flaticon-envelope text-primary font-size-80 mb-3"></i>
                            <h5 class="font-size-17 text-dark font-weight-bold mb-2"><a>{{__('contact.email')}}</a></h5>
                            <p class="text-gray-1 px-xl-2 px-uw-7">{{nova_get_setting('site_email')}}</p>
                        </div>
                        <!-- End Icon Block -->

                        <!-- Icon Block -->
                        <div class="col-md-4">
                            <i class="flaticon-home text-primary font-size-80 mb-3"></i>
                            <h5 class="font-size-17 text-dark font-weight-bold mb-2"><a>{{__('contact.address')}}</a></h5>
                            <p class="text-gray-1 px-xl-2 px-uw-7">{{nova_get_setting_translate('site_address')}} </p>
                        </div>
                        <!-- End Icon Block -->
                    </div>
                </div>
                <!-- End Features -->
            </div>
        </div>

        <div class="border-bottom border-color-8 pb-6 pb-lg-9 mb-6 mb-lg-8">
            <div class="container mb-10">
                <div class="w-md-80 w-lg-50 text-center mx-md-auto my-3">
                    <h2 class="section-title text-black font-size-30 font-weight-bold mb-5 pb-xl-1">{{nova_get_setting_translate('contact_label')}}</h2>
                </div>
                <div class="comment-section mx-auto">
                    <div class="row">
                        <div class="col-lg-4">
                            <iframe
                                src="{{nova_get_setting('map_iframe')}}"
                                width="100%" height="330" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
                        </div>
                        <div class="col-lg-8">
                            <form class="js-validate" novalidate="novalidate" id="contactForm">
                                @csrf
                                <div class="row">
                                    <!-- Input -->
                                    <div class="col-sm-6 mb-5">
                                        <div class="js-form-message">
                                            <input type="text" class="form-control" name="name" placeholder="{{__('contact.name')}}"
                                                   aria-label="Jack Wayley" required data-error-class="u-has-error"
                                                   data-msg="Please enter your name."
                                                   data-success-class="u-has-success">
                                        </div>
                                    </div>
                                    <!-- End Input -->

                                    <!-- Input -->
                                    <div class="col-sm-6 mb-5">
                                        <div class="js-form-message">
                                            <input type="email" class="form-control" name="email" placeholder="{{__('contact.email')}}"
                                                   aria-label="jackwayley@gmail.com" required
                                                   data-msg="Please enter a valid email address."
                                                   data-error-class="u-has-error" data-success-class="u-has-success">
                                        </div>
                                    </div>
                                    <!-- Input -->
                                    <div class="col-sm-12 mb-5">
                                        <div class="js-form-message">
                                            <input type="email" class="form-control" name="phone_number" placeholder="{{__('contact.phone_number')}}"
                                                   aria-label="jackwayley@gmail.com" required
                                                   data-msg="Please enter a valid email address."
                                                   data-error-class="u-has-error" data-success-class="u-has-success">
                                        </div>
                                    </div>
                                    <!-- End Input -->
                                    <div class="col-sm-12 mb-5">
                                        <div class="js-form-message">
                                            <div class="input-group">
                                                <textarea class="form-control" rows="6" cols="77" name="message"
                                                          placeholder="{{__('contact.message')}}"
                                                          aria-label="Hi there, I would like to ..." required
                                                          data-msg="Please enter a reason."
                                                          data-error-class="u-has-error"
                                                          data-success-class="u-has-success"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- End Input -->
                                    <div class="col d-flex justify-content-lg-start">
                                        <button type="submit" data-url="{{route('saveContact')}}"
                                                class="btn rounded-xs bg-blue-dark-1 text-white height-51 width-190 transition-3d-hover"
                                                type="submit" id="saveContactBtn">{{__('contact.send_message')}}</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @include('layout.partials.partners')
    </main>

@endsection