@extends('frontend.layouts.master')

@section('page_title')
    {{ __('contact.title') }}
@endsection

@section('head')
@endsection

@section('content-wrapper')
        

    <div class="py-5 text-center align-items-center d-flex portada jarallax" style="">
        <div class="tinte2"></div>
        <div class="container py-5">
            <div class="row text-center">
                <div class="col-lg-12 col-md-12 col-12 col-sm-12">
                    <h1 class="display-4 mb-4 sombratexto">
                        {{ __('contact.title') }}
                    </h1>
                </div>
            </div>
        </div>
    </div>

    <div class="container">

        <div class="row m-4 text-center">
            <p>{{ __('contact.subtitle-pimeef') }}</p>
        </div>

        <div class="row mt-4">
            <div class="col-md-8 col-sm-12">

                <form method="post" action="{{ route('frontend.contact.store') }}" @submit.prevent="onSubmit"> 
                    
                    {{ csrf_field() }}

                    <p class="mb-4 s-text"><span style="color: red;font-size: 18px; ">*</span> {{ __('account.register.required-fields') }}</p>
                    
                    <div class="form-group mb-4" :class="[errors.has('full_name') ? 'has-error' : '']">
                        <label class="form-label required" for="full_name">{{ __('contact.full_name') }}</label>
                        <input type="text" name="full_name" value="{{ old('full_name') }}" id="full_name" v-validate="'required'" class="form-control" data-vv-as="&quot;{{ __('contact.full_name') }}&quot;" />
                        <span class="control-error" v-if="errors.has('full_name')">@{{ errors.first('full_name') }}</span>
                    </div>

                    <div class="form-group mb-4" :class="[errors.has('email') ? 'has-error' : '']">
                        <label class="form-label required" for="email">{{ __('contact.email') }}</label>
                        <input type="email" name="email" value="{{ old('email') }}" id="email" v-validate="'required|email'" class="form-control" data-vv-as="&quot;{{ __('contact.email') }}&quot;" />
                        <span class="control-error" v-if="errors.has('email')">@{{ errors.first('email') }}</span>
                    </div>

                    <div class="form-group mb-4" :class="[errors.has('subject') ? 'has-error' : '']">
                        <label class="form-label required" for="subject">{{ __('contact.subject') }}</label>
                        <input type="text" name="subject" value="{{ old('subject') }}" id="subject" v-validate="'required'" class="form-control" data-vv-as="&quot;{{ __('contact.subject') }}&quot;" />
                        <span class="control-error" v-if="errors.has('subject')">@{{ errors.first('subject') }}</span>
                    </div>     
                    
                    <div class="form-group mb-4" :class="[errors.has('message') ? 'has-error' : '']">
                        <label class="form-label required" for="message">{{ __('contact.message') }}</label>
                        <textarea rows="6" name="message" id="message" v-validate="'required'" class="form-control" data-vv-as="&quot;{{ __('contact.message') }}&quot;" >{{ old('message') }}</textarea>
                        <span class="control-error" v-if="errors.has('message')">@{{ errors.first('message') }}</span>
                    </div>
                    
                    {!! RecaptchaV3::field('contact', 'g-recaptcha-response') !!}

                    <button type="submit" class="site-btn link wow bounceInUp btn-block mb-4">{{ __('contact.submit') }}</button>
                </form>
            </div>
            <div class="col-md-4 col-sm-12 text-center contact-items-ei">
                <i class="fa fa-map-marker icon-contact"></i>
                <p class="direction-contact">Avda. España 18-20 1º 07800 Eivissa</p>
                <i class="fa fa-phone icon-contact"></i>
                <p><a href="tel:+34971302911">+34971302911</a></p>
                <i class="fa fa-envelope icon-contact"></i>
                <p><a href="mailto:info@pimeef.com">info@pimeef.com</a></p>
            </div>
        </div>
    </div>
    
@endsection