@extends('layouts.app')

@section('title','Creating the third workspace. Contact us')

@section('meta')
  <!-- Open Graph / Facebook -->
  <meta property="og:type" content="website">
  <meta property="og:url" content="{{Request::url()}}">
  <meta property="og:title" content="Creating the third workspace. Contact us">
  <meta property="og:image" content="{{asset('images/reef-rocks-ltd.jpg')}}">
  <meta property="og:description" content="Contact Reef today with any enquiries and one of our team will be happy to help within 24 hours.">

  <!-- Twitter -->
  <meta property="twitter:card" content="summary_large_image">
  <meta property="twitter:url" content="{{Request::url()}}">
  <meta property="twitter:title" content="Creating the third workspace. Contact us">
  <meta property="twitter:image" content="{{asset('images/reef-rocks-ltd.jpg')}}">

  <meta property="og:image:width" content="600"/>
  <meta property="og:image:height" content="315"/>

  <meta name="description" content=" Contact Reef today with any enquiries and one of our team will be happy to help within 24 hours.">
@endsection


@section('header')
	@include('front.partials.header')
@endsection

@section('content')
    <div class="page-wrapper">

    <section class="standard-block py-4 py-md-5">
        <div class="container">
            <div class="row g-5 align-items-start">
                <div class="col-10 offset-1 col-sm-8 offset-sm-2 col-md-6 offset-md-0 col-lg-7 offset-lg-0 order-last order-md-first">
                    <img src="{{asset('images/contact-bg.png')}}" alt="#" class="image-auto">
                </div>
                <div class="col-12 col-md-6 col-lg-5 order-first order-mg-last">
                    <h1 class="ps-3 h2 mb-2 text-uppercase f-35">Send us a message</h1>
                    <div class="text-center pt-2">
                        @if(session()->has('error'))
                        <small class="error-msg text-error-bigger text-center" style="color: #FFADA3!important;">Something went wrong. Please try again</small>
                        @endif
                        {{-- @if(session()->has('success'))
                        <small class="error-msg text-error-bigger text-center" style="color: green!important;">Message sent!</small>
                        @endif --}}
                        {{-- @if(session('success')) 
                            <span class="successMsg text-success">{{session('success')}}</span>
                        @endif --}}
                    </div>
                    <form method="POST" action="{{route('contact_submit_form')}}" id="contact_form">
                        @csrf 
                        <div class="mb-2">
                            <label for="name" class="form-label">Name*</label>
                            <input type="text" name="name" value="{{old('name')}}" class="form-control formInputs" id="name" >
                            @if($errors->has('name')) 
                            <span class="text-error pl-2 ">
                            
                                    {{ $errors->first('name') }} 
                            
                            </span>
                            @endif 
                        </div>

                        <div class="mb-2">
                            <label for="email" class="form-label">Email*</label>
                            <input type="email" name="email" value="{{old('email')}}" class="form-control formInputs" id="email" >
                            <span class="text-error pl-2 ">
                                @if($errors->has('email')) 
                                    {{ $errors->first('email') }} 
                                @endif 
                            </span>
                        </div>

                        <div class="mb-2">
                            <label for="company" class="form-label">Company name (optional)</label>
                            <input type="text" name="company" value="{{old('company')}}"  class="form-control formInputs" id="company">
                            <span class="text-error pl-2 ">
                                @if($errors->has('company')) 
                                    {{ $errors->first('company') }} 
                                @endif 
                            </span>
                        </div>

                        <div class="mb-2">
                            <label for="phone" class="form-label">Phone (optional)</label>
                            <input type="text" name="phone" value="{{old('phone')}}"  class="form-control formInputs" id="phone">
                            <span class="text-error pl-2 ">
                                @if($errors->has('phone')) 
                                    {{ $errors->first('phone') }} 
                                @endif 
                            </span>
                        </div>

                        <div class="mb-2">
                            <label for="message" class="form-label formInputs">Your Message*</label>
                            <textarea type="text" name="message" class="form-control" id="message" ></textarea>
                        </div>

                        <p class="f-12 mb-2">*Required fields.</p>
                
                        @if(env('GOOGLE_RECAPTCHA_KEY'))
                        <div class="g-recaptcha pt-3"
                            data-sitekey="{{env('GOOGLE_RECAPTCHA_KEY')}}">
                        </div>
                        <p class="text-error-bigger d-flex justify-content-center">
                            @if($errors->has('g-recaptcha-response')) 
                                {{ $errors->first('g-recaptcha-response') }} 
                            @endif 
                        </p>
                        @endif

                        <button type="submit" class="btn green w160 contact_form_submit">Submit</button>
                    </form>
                    {{-- <div class="pipedriveWebForms" data-pd-webforms="https://webforms.pipedrive.com/f/5VR9Z0drODxGnRBWMzKTpxN91EPXE3tcHV6aHbgzW5vamgiEdrJvG1XiDucGmSpi7x"><script src="https://webforms.pipedrive.com/f/loader"></script></div> --}}

                </div>
            </div>
        </div>
    </section>

    @include('front.partials.free_trial_black_bar')

@endsection



@section('footer')
        @include('front.partials.footer')
    </div>
@endsection

@push('modals')

    <div class="modal register-success-modal fade" id="contact-success" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                <div class="modal-body">
                    <h3 class="mb-3 text-center text-white">SUCCESS!</h3>
                    <p class="mb-0 text-center  text-white">Thank you for your message. Someone from our team will contact you soon.</p>
                </div>
            </div>
        </div>
    </div>

@endpush

@push('scripts')
    @if(session()->has('success'))
        <script type="text/javascript">
            $(document).ready(function(){
                let modal = $(document).find('#contact-success');
                if(modal.length > 0){
                    $(modal).modal('show');
                }
            });
        </script>
    @endif
@endpush