@extends('layouts.app')

@section('title','Start your free 7 day trial')

@section('meta')
  <!-- Open Graph / Facebook -->
  <meta property="og:type" content="website">
  <meta property="og:url" content="{{Request::url()}}">
  <meta property="og:title" content="Start your free 7 day trial">
  <meta property="og:image" content="{{asset('images/reef-rocks-ltd.jpg')}}">
  <meta property="og:description" content="Start your free 7 day trial on Reef today. Sign yourself or your business up to our platform to start taking advantage of our spaces & perks.">

  <!-- Twitter -->
  <meta property="twitter:card" content="summary_large_image">
  <meta property="twitter:url" content="{{Request::url()}}">
  <meta property="twitter:title" content="Start your free 7 day trial">
  <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="Start your free 7 day trial on Reef today. Sign yourself or your business up to our platform to start taking advantage of our spaces & perks.">
@endsection

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

@section('content')
<div class="page-wrapper">
<section class="standard-block py-4 py-md-5" id="success-message">
    <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/join-waiting-list-bg.png')}}" alt="#" class="image-auto">
            </div>
            <div class="col-12 col-md-6 col-lg-5 order-first order-mg-last">
                <h1 class="mb-2 mb-md-3 f-45">7 day free trial</h1>
                <p class="mb-2 mb-md-3 f-14">Sign up today, and join the Reefolution.</p>
                <div class="pt-0 pb-3">
                    {{-- @if(session()->has('success'))
                        <small class="success-msg text-success text-center" style="color:#7FDAC7 !important;">Thanks for starting your 7 day trial. Please check your email (and spam) to complete your sign up.</small>
                    @endif --}}
                    @if(session()->has('error'))
                    <small class="error-msg text-error text-center">Something went wrong. Please try again or contact us.</small>
                    @endif
                    @if(session()->has('email_error'))
                    <small class="error-msg text-error text-center text-danger">Error. You already have an account with this email. </small><br>
                    <small class="error-msg text-error text-center">Please login <a href="https://reef.rocks/login">here</a>.
                    </small>
                    @endif
                    @if(session()->has('msg_error'))
                    <small class="error-msg text-error text-center text-danger">Something went wrong. Please try again or contact us.</small>
                    @endif
                </div>
                <form method="POST" action="{{route('free_trial_submit')}}">
                        @csrf
                    <div class="mb-2">
                        <label for="input1" class="form-label">Company name*</label>
                        <input type="text" name="company" value="{{old('company')}}"  class="form-control" id="input1" required>
                    </div>

                    <div class="mb-2">
                        <label for="input2" class="form-label">First name*</label>
                        <input type="text" name="firstname" value="{{old('firstname')}}" class="form-control" id="input2" required>
                    </div>
                    <div class="mb-2">
                        <label for="input2" class="form-label">Surname*</label>
                        <input type="text" name="lastname"  value="{{old('lastname')}}" class="form-control" id="input2" required>
                    </div>

                    <div class="mb-2">
                        <label for="input3" class="form-label">Email*</label>
                        <input type="email" name="email" value="{{old('email')}}" class="form-control" id="input3" required>
                    </div>

                    <div class="mb-2">
                        <label for="input4" class="form-label">Number of Users*</label>
                        <a href="" title="How many people would you like to add onto your account? If it is just you, please type 1.">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16" >
                                <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                                <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
                            </svg>
                        </a>
                        <input type="text" name="number_of_licences" value="{{old('number_of_licences')}}" class="form-control" id="input4" required>
                    </div>

                    <div class="mb-3">
                        <label for="input5" class="form-label">How did you hear about us?*</label>
                        <select type="text" name="how_did_you_hear" class="form-select" id="input5" required>
                            <option>Choose one</option>
                            <option value="email">Email</option>
                            <option value="event">Event</option>
                            <option value="networking">Networking</option>
                            <option value="podcast">Podcast</option>
                            <option value="pr">PR</option>
                            <option value="search_engine">Search engine</option>
                            <option value="social_media">Social media</option>
                            <option value="word_of_mouth">Word of mouth</option>
                        </select>
                    </div>

                    <p class="f-12 mb-2">*Required fields.</p>

                    <div class="form-check mb-2">
                        <input class="form-check-input" type="checkbox" value="" id="defaultCheck1" required>
                        <label class="form-check-label" for="defaultCheck1"><small>I have read and agree to the <a class="font-italic text-underline" href= {{route('terms_user')}}>Terms</a>  and  <a class="font-italic text-underline" href= {{route('privacy_policy')}}> Privacy Policy</a> . </small></label>
                    </div>

                    @if(env('GOOGLE_RECAPTCHA_KEY'))
                    <div class="g-recaptcha pb-3"
                        data-sitekey="{{env('GOOGLE_RECAPTCHA_KEY')}}">
                    </div>
                    <p class="text-error-bigger">
                        @if($errors->has('g-recaptcha-response'))
                            {{ $errors->first('g-recaptcha-response') }}
                        @endif
                    </p>
                    @endif

                    <button type="submit" class="btn green">Start 7 day trial</button>
                </form>
            </div>
        </div>
    </div>
</section>

{{-- @include('front.partials.who_we_worked_with') --}}

@include('front.partials.logos_square')



@include('front.partials.free_trial_black_bar')

@endsection

@section('modals')
@if(session()->has('success'))
    <div class="modal register-success-modal fade" id="company-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">Please check your inbox or junk folders for an email to complete your account.</p>
                </div>
            </div>
        </div>
    </div>
@endif
@endsection

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

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