@extends('layout.front.master')

@section('content')

<div role="main" class="main">

    {{-- Page Header --}}
    <section class="page-header p-relative border-0 bg-quaternary overflow-hidden m-0 p-0">
        <div class="custom-hero-bg">
            <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice">
                <defs>
                    <radialGradient id="Gradient1" cx="50%" cy="50%" fx="0.441602%" fy="50%" r=".5">
                        <animate attributeName="fx" dur="34s" values="0%;3%;0%" repeatCount="indefinite"></animate>
                        <stop offset="0%" class="custom-stop-color-1"></stop>
                        <stop offset="100%" class="custom-stop-color-1" stop-opacity="0"></stop>
                    </radialGradient>
                </defs>
                <rect x="13.744%" y="1.18473%" width="100%" height="100%" fill="url(#Gradient1)" transform="rotate(334.41 50 50)">
                    <animate attributeName="x" dur="20s" values="25%;0%;25%" repeatCount="indefinite"></animate>
                    <animate attributeName="y" dur="21s" values="0%;25%;0%" repeatCount="indefinite"></animate>
                    <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="7s" repeatCount="indefinite"></animateTransform>
                </rect>
            </svg>
        </div>
        <div class="container">
            <div class="row align-items-center my-5 pt-5 pb-4">
                <div class="col text-center my-5 pb-5">
                    <div class="py-4">
                        <ul class="breadcrumb d-flex justify-content-center text-4-5 font-weight-medium mb-2">
                            <li><a href="{{ route('front.homepage') }}" class="text-color-primary text-decoration-none">{{ __('HOME') }}</a></li>
                            <li class="text-color-primary active">{{ __('CONTACT US') }}</li>
                        </ul>
                        <h1 class="text-color-light font-weight-bold text-10">{{ __('Contact Us') }}</h1>
                    </div>
                </div>
            </div>
        </div>
        <div class="p-absolute custom-el-1 custom-el-pos-5">
            <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="0">
                <img src="{{ asset('cd-project/img/demos/creative-agency-2/svg/arrow-up-light.svg') }}" width="140" alt="">
            </div>
            <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="100">
                <img src="{{ asset('cd-project/img/demos/creative-agency-2/svg/arrow-up-light.svg') }}" width="140" alt="">
            </div>
            <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">
                <img src="{{ asset('cd-project/img/demos/creative-agency-2/svg/arrow-up-light.svg') }}" width="140" alt="">
            </div>
        </div>
    </section>

    {{-- Content Section --}}
    <div class="custom-page-content p-relative z-index-2">
        <div class="container custom-padding-top-1 custom-padding-bottom-1 px-lg-5 bg-light">
            <div class="row px-lg-3">
                <div class="col">
                    <p class="text-4-5 line-height-7 text-dark pb-1 mb-4 mb-lg-2 mb-xl-4">{{ __('Elit sit amet leo accumsan volutpat. Suspendisse hendreriast ehicula leo, vel efficitur felis ultrices non. Cras a elit sit amet leo acun volutpat. Suspendisse hendrerit vehicula leo, vel efficitur fel.') }}</p>
                </div>
            </div>
            <div class="row px-lg-3 pb-2 mb-5">
                <div class="col-lg-6 mb-4 mb-lg-0 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="0">
                    <div class="row">
                        <div class="col-auto">
                            <h3 class="d-block text-color-grey positive-ls-3 font-weight-medium text-2 mb-1">{{ __('CALL US') }}</h3>
                            <a href="tel:{{ config('site.contact.phone') }}" class="d-flex align-items-center text-decoration-none text-color-dark text-color-hover-primary font-weight-bold text-3-5">
                                {{ config('site.contact.phone') }}
                            </a>
                        </div>
                        <div class="col-auto">
                            <h3 class="d-block text-color-grey positive-ls-3 font-weight-medium text-2 mb-1">{{ __('SEND AN EMAIL') }}</h3>
                            <a href="mailto:{{ config('site.contact.email') }}" class="d-flex align-items-center text-decoration-none text-color-dark text-color-hover-primary font-weight-bold text-3-5">
                                {{ config('site.contact.email') }}
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="1600">
                    <h3 class="d-block text-color-grey positive-ls-3 font-weight-medium text-2 mb-1">{{ __('OUR LOCATION') }}</h3>
                    <span class="d-flex align-items-center text-color-dark font-weight-bold text-3-5">
                        {{ config('site.contact.address', '12345 Porto Blvd.') }} | {{ config('site.contact.city', 'Los Angeles, California 90000') }}
                    </span>
                </div>
            </div>
            <div class="row px-lg-3">
                <div class="col-lg-6 mb-4 mb-lg-0 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="300">
                    <h2 class="font-weight-bold text-color-dark text-6 mb-3">{{ __('Send Us a Message') }}</h2>
                    <form class="contact-form form-style-3" action="{{ route('front.contact.store') }}" method="POST">
                        @csrf
                        <div class="contact-form-success alert alert-success d-none mt-4">
                            <strong>{{ __('Success!') }}</strong> {{ __('Your message has been sent to us.') }}
                        </div>
                        <div class="contact-form-error alert alert-danger d-none mt-4">
                            <strong>{{ __('Error!') }}</strong> {{ __('There was an error sending your message.') }}
                            <span class="mail-error-message text-1 d-block"></span>
                        </div>
                        <div class="row">
                            <div class="form-group col mb-3-5">
                                <input type="text" value="" data-msg-required="{{ __('Please enter your name.') }}" maxlength="100" class="form-control text-3 h-auto py-3-5" name="name" placeholder="{{ __('Your Name') }}" required>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col mb-3-5">
                                <input type="email" value="" data-msg-required="{{ __('Please enter your email address.') }}" data-msg-email="{{ __('Please enter a valid email address.') }}" maxlength="100" class="form-control text-3 h-auto py-3-5" name="email" placeholder="{{ __('Your E-mail Address') }}" required>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col mb-3-5">
                                <input type="text" value="" data-msg-required="{{ __('Please enter the subject.') }}" maxlength="100" class="form-control text-3 h-auto py-3-5" name="subject" placeholder="{{ __('Subject') }}" required>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col mb-3-5">
                                <textarea maxlength="5000" data-msg-required="{{ __('Please enter your message.') }}" rows="8" class="form-control text-3 h-auto py-3-5" name="message" placeholder="{{ __('Message') }}" required></textarea>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col-lg-6 col">
                                <button type="submit" class="btn btn-modern btn-dark w-100 font-weight-semibold text-capitalize text-3 py-3 anim-hover-translate-top-5px transition-2ms mb-5 mb-lg-0">
                                    <span class="px-4 d-block ws-nowrap">{{ __('Send Message') }} <i class="fas fa-arrow-right rotate-l-45 ms-2"></i></span>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="col-lg-6 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="1800">
                    <h2 class="font-weight-bold text-color-dark text-6 mb-3">{{ __('Where We Are') }}</h2>
                    @if(config('site.contact.map_url') || config('site.contact.latitude'))
                        <div id="googlemaps" class="google-map m-0" style="min-height: 450px;" data-latitude="{{ config('site.contact.latitude', '40.7128') }}" data-longitude="{{ config('site.contact.longitude', '-74.0060') }}"></div>
                    @else
                        <div class="bg-color-grey-200" style="min-height: 450px; display: flex; align-items: center; justify-content: center;">
                            <p class="text-color-dark">{{ __('Map location will be displayed here') }}</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

</div>

@endsection