@extends('layout.front.master')

@section('content')

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

    {{-- Page Header --}}
    <section class="page-header page-header-modern custom-bg-gradient-1 page-header-lg mb-0">
        <div class="container">
            <div class="row py-4 text-center text-lg-start">
                <div class="col-lg-8 order-2 order-lg-1 align-self-center p-static">
                    <h1 class="text-color-dark font-weight-semi-bold text-lg-12 appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="0">{{ __('Contact Us') }}</h1>
                </div>
                <div class="col-lg-4 order-1 order-lg-2 align-self-center">
                    <ul class="breadcrumb d-flex justify-content-center justify-content-lg-end text-4-5">
                        <li><a href="{{ route('front.homepage') }}" class="text-color-dark text-color-hover-primary text-transform-none text-decoration-none">{{ __('Home') }}</a></li>
                        <li class="active text-color-primary text-transform-none">{{ __('Contact Us') }}</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    {{-- Intro Section --}}
    <div class="container py-5">
        <div class="row py-5 text-center text-xl-start align-items-center">
            <div class="col-xl-6">
                <div class="appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="0">
                    <span class="bg-gradient text-light d-inline-block text-3-5 rounded-pill px-4 py-1 font-weight-medium mb-2">{{ __('Let\'s Go') }}</span>
                    <h3 class="custom-font-1">{{ __('Ready to elevate your brand? Reach out to us.') }}</h3>
                    <p class="text-dark text-4-5 line-height-9 pt-2">
                        {{ __('We\'re excited to hear from you! Whether you\'re looking to start a new project, need advice on your current marketing strategy, or just want to learn more about our services, our team is here to help.') }}
                    </p>

                    <ul class="list list-unstyled mx-auto mx-lg-0 my-4 pt-2 pb-1">
                        <li class="d-flex justify-content-center justify-content-lg-start align-items-center mb-4">
                            <a href="mailto:{{ config('site.contact.email') }}" class="d-inline-flex align-items-center text-decoration-none text-dark text-color-hover-primary font-weight-semibold text-6">{{ config('site.contact.email') }}</a>
                        </li>
                        <li class="d-flex justify-content-center justify-content-lg-start align-items-center mb-4">
                            <a href="tel:{{ config('site.contact.phone') }}" class="d-inline-flex align-items-center text-decoration-none text-dark text-color-hover-primary font-weight-semibold text-6">{{ config('site.contact.phone') }}</a>
                        </li>
                    </ul>

                    @foreach(config('site.social_media') as $key => $social)
                        @if($social['active'])
                            <a href="{{ $social['url'] }}" target="_blank" class="btn btn-modern btn-effect-4 btn-rounded btn-dark btn-social bg-hover-primary text-transform-none text-4 py-2 font-weight-medium mb-2">
                                {{ ucfirst($key) }} <i class="fas fa-arrow-right rotate-l-45 ms-2"></i>
                            </a>
                        @endif
                    @endforeach
                </div>
            </div>
            <div class="col-xl-6">
                <div class="row pt-5 py-xl-0">
                    {{-- Office 1 --}}
                    <div class="col-lg-6 pb-4">
                        <div data-plugin-float-element data-plugin-options="{'minWindowWidth': 992, 'startPos': 'top', 'speed': 6.0, 'transition': true, 'transitionDuration': 1000}">
                            <div class="card custom-bg-color-1 border-0 custom-border-radius-1">
                                <div class="card-body">
                                    <img class="img-fluid custom-border-radius-1 mb-4" src="{{ asset('cd-project/img/demos/marketing-1/generic/generic-9.jpg') }}" alt="">

                                    <div class="overflow-hidden">
                                        <h2 class="text-color-dark font-weight-semi-bold line-height-3 text-4-5 mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="250">
                                            {{ config('site.contact.address', '123 Street Name') }}<br> 
                                            <span class="text-4">{{ config('site.contact.city', 'Los Angeles, CA') }}</span>
                                        </h2>
                                    </div>
                                    @if(config('site.contact.map_url'))
                                        <div class="overflow-hidden">
                                            <a href="{{ config('site.contact.map_url') }}" target="_blank" class="d-inline-block pt-2 font-weight-semi-bold border-color-primary text-decoration-none text-3-5 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="500">
                                                <i class="fa-solid fa-location-dot text-4 ps-1"></i> {{ __('Get Directions') }}
                                            </a>
                                        </div>
                                    @endif
                                    <ul class="list list-unstyled text-color-dark font-weight-semi-bold text-3-5 pt-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="750">
                                        <li class="d-flex justify-content-center justify-content-lg-start align-items-center mb-2">
                                            <span class="opacity-6 font-weight-medium">{{ __('E-mail:') }}</span> 
                                            <a href="mailto:{{ config('site.contact.email') }}" class="text-color-dark text-color-hover-primary text-decoration-none ms-1">{{ config('site.contact.email') }}</a>
                                        </li>
                                        <li class="d-flex justify-content-center justify-content-lg-start align-items-center mb-0">
                                            <span class="opacity-6 font-weight-medium">{{ __('Phone:') }}</span> 
                                            <a href="tel:{{ config('site.contact.phone') }}" class="text-color-dark text-color-hover-primary text-decoration-none ms-1">{{ config('site.contact.phone') }}</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    {{-- Office 2 (opcional) --}}
                    @if(config('site.contact.secondary_address'))
                    <div class="col-lg-6">
                        <div data-plugin-float-element data-plugin-options="{'minWindowWidth': 992, 'startPos': 'bottom', 'speed': 6.0, 'transition': true, 'transitionDuration': 1000}">
                            <div class="card custom-bg-color-1 border-0 custom-border-radius-1">
                                <div class="card-body">
                                    <img class="img-fluid custom-border-radius-1 mb-4" src="{{ asset('cd-project/img/demos/marketing-1/generic/generic-10.jpg') }}" alt="">

                                    <div class="overflow-hidden">
                                        <h2 class="text-color-dark font-weight-semi-bold line-height-3 text-4-5 mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="250">
                                            {{ config('site.contact.secondary_address') }}<br> 
                                            <span class="text-4">{{ config('site.contact.secondary_city', 'New York, NY') }}</span>
                                        </h2>
                                    </div>
                                    @if(config('site.contact.secondary_map_url'))
                                        <div class="overflow-hidden">
                                            <a href="{{ config('site.contact.secondary_map_url') }}" target="_blank" class="d-inline-block pt-2 font-weight-semi-bold border-color-primary text-decoration-none text-3-5 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="500">
                                                <i class="fa-solid fa-location-dot text-4 ps-1"></i> {{ __('Get Directions') }}
                                            </a>
                                        </div>
                                    @endif
                                    <ul class="list list-unstyled text-color-dark font-weight-semi-bold text-3-5 pt-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="750">
                                        <li class="d-flex justify-content-center justify-content-lg-start align-items-center mb-2">
                                            <span class="opacity-6 font-weight-medium">{{ __('E-mail:') }}</span> 
                                            <a href="mailto:{{ config('site.contact.secondary_email', config('site.contact.email')) }}" class="text-color-dark text-color-hover-primary text-decoration-none ms-1">{{ config('site.contact.secondary_email', config('site.contact.email')) }}</a>
                                        </li>
                                        <li class="d-flex justify-content-center justify-content-lg-start align-items-center mb-0">
                                            <span class="opacity-6 font-weight-medium">{{ __('Phone:') }}</span> 
                                            <a href="tel:{{ config('site.contact.secondary_phone', config('site.contact.phone')) }}" class="text-color-dark text-color-hover-primary text-decoration-none ms-1">{{ config('site.contact.secondary_phone', config('site.contact.phone')) }}</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    {{-- Contact Form Section --}}
    <section class="section bg-gradient border-0 m-0">
        <div class="container py-5">
            <div class="row">
                <div class="col">
                    <h3 class="text-10 text-light">{{ __('Send a Message') }}</h3>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <form class="contact-form form-style-4 form-style-4-border-light-2 form-errors-light pe-lg-5" 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 mt-2 d-block"></span>
                        </div>
                        <div class="row mb-2 mx-0">
                            <input type="text" class="form-control text-3-5 text-color-light px-1 py-3" name="name" placeholder="{{ __('* Full Name') }}" data-msg-required="{{ __('This field is required.') }}" id="name" required />
                        </div>
                        <div class="row mx-0 mb-3">
                            <input type="email" class="form-control text-3-5 text-color-light px-1 py-3" name="email" placeholder="{{ __('* Email Address') }}" data-msg-required="{{ __('This field is required.') }}" id="email" required />
                        </div>
                        <div class="row mb-4 mx-0">
                            <textarea name="message" id="message" rows="4" class="form-control form-control text-3-5 text-color-light px-1" placeholder="{{ __('* Message') }}"></textarea>
                        </div>
                        <input type="submit" class="btn btn-modern btn-effect-4 btn-rounded btn-dark text-transform-none text-3 font-weight-medium mt-2 mb-2" value="{{ __('Send Message') }}" />
                    </form>
                </div>
            </div>
        </div>
    </section>

    {{-- Google Maps --}}
    @if(config('site.contact.map_url') || config('site.contact.latitude'))
    <div id="googlemaps" class="google-map m-0" style="height: 500px;" data-latitude="{{ config('site.contact.latitude', '40.7128') }}" data-longitude="{{ config('site.contact.longitude', '-74.0060') }}"></div>
    @endif

</div>

@endsection