@extends('layouts.app')

@section('title','Join our waiting list')

@section('meta')
  <!-- Open Graph / Facebook -->
  <meta property="og:type" content="website">
  <meta property="og:url" content="{{Request::url()}}">
  <meta property="og:title" content="Join our waiting list">
  <meta property="og:image" content="{{asset('images/reef-rocks-ltd.jpg')}}">

  <!-- Twitter -->
  <meta property="twitter:card" content="summary_large_image">
  <meta property="twitter:url" content="{{Request::url()}}">
  <meta property="twitter:title" content="Join our waiting list">
  <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="Unable to find a space near you? Join our waiting list and we will notify you when spaces are available in your area so you can start exploring Reef.">
@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/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">Join waiting list</h1>
                    <p class="mb-2 mb-md-3">Sign up today, and join the Reefolution.</p>
                    <div class="main-error col-12 mt-3">
                        @if(session()->has('success'))
                            <small class="success-msg text-success text-center">Your application has been submitted successfully. Someone from our team will contact you soon</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('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('waitinglist_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">
                        </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">
                        </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">
                        </div>
    
                        <div class="mb-2">
                            <label for="input3" class="form-label">Email*</label>
                            <input type="text" name="email" value="{{old('email')}}" class="form-control" id="input3">
                        </div>
    
                        <div class="mb-2">
                            <label for="input4" class="form-label">City</label>
                            <input type="text" name="city" class="form-control" id="input4">
                        </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 id="waitinglist"></div>
                        @if(env('GOOGLE_RECAPTCHA_KEY'))
                        <div class="col-12 col-lg-12">
                            <div class="g-recaptcha"
                                data-sitekey="{{env('GOOGLE_RECAPTCHA_KEY')}}">
                            </div>
                        </div>
                        <div class="col-12 col-lg-12">
                            <p class="text-error pl-2 pt-2 ">
                                @if($errors->has('g-recaptcha-response')) 
                                    {{ $errors->first('g-recaptcha-response') }} 
                                @endif 
                            </p>
                        </div>
                        @endif
                  
                        <button type="submit" class="btn green">Join waiting list</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('footer')
    @include('front.partials.footer')
</div>
@endsection