@extends('layouts.app')

@section('title','Claim your free student account')

@section('meta')
  <!-- Open Graph / Facebook -->
  <meta property="og:type" content="website">
  <meta property="og:url" content="{{Request::url()}}">
  <meta property="og:title" content="Claim your free student account">
  <meta property="og:image" content="{{asset('images/reef-rocks-ltd.jpg')}}">
  <meta property="og:description" content="Fed up of working from your student accommodation or the library? Reef allows you to work from spaces across the UK as well as receive amazing perks!">

  <!-- Twitter -->
  <meta property="twitter:card" content="summary_large_image">
  <meta property="twitter:url" content="{{Request::url()}}">
  <meta property="twitter:title" content="Claim your free student account">
  <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="Fed up of working from your student accommodation or the library? Reef allows you to work from spaces across the UK as well as receive amazing perks!">
@endsection

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

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

    <section class="home-top text-center text-sm-start">
        <div class="container h-100 position-relative">
            <div class="row g-5 h-100 align-items-center">
                <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/partners-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-4">More than just student discounts</h1>
                    <p class="pe-0 pe-xl-5 mb-3 mb-md-4">We want to support students during what can be a stressful time in their lives. Instead of working in either a library, or spending all their time in their student apartment, we have partnered up with amazing spaces, not only for students to work from, not only where they can invite their friends to work with, but also receive discounts off food, drink, tech and much more.</p>
                    <ul class="list-inline list-mobile-fix mb-0">
                        <li class="list-inline-item py-1">
                            <a href="#" class="btn long w160 mobile-full scrollto" target="students-sign-up">Receive my free student accoun</a>
                        </li>
                        <li class="list-inline-item py-1">
                            <a href="#" class="btn w160 mobile-full violet invert scrollto"  target="learn-more">Learn more</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <a href="#" class="scroll-down scrollto" target="next-div">Scroll down</a>
    </section>

    <section class="standard-block pb-4 pb-md-5" id="next-div">
        <div class="container text-center">
            <p class="h2 mb-4">Who we work with</p>
            <ul class="list-inline mb-0 logos-inline first">
                <li class="list-inline-item py-2 py-md-3 align-middle"><img src="{{asset('images/Fitbit_Logo_black.png')}}" alt="#"></li>
                <li class="list-inline-item py-2 py-md-3 align-middle"><img src="{{asset('images/honest-mobile.png')}}" alt="#"></li>
                <li class="list-inline-item py-2 py-md-3 align-middle"><img src="{{asset('images/Jabra_GN_BrandMark_RGB_150ppi.png')}}" alt="#"></li>
                <li class="list-inline-item py-2 py-md-3 align-middle"><img src="{{asset('images/nolii.png')}}" alt="#"></li>
                <li class="list-inline-item py-2 py-md-3 align-middle"><img src="{{asset('images/Logo-Square-1.png')}}" alt="#"></li>
                <li class="list-inline-item py-2 py-md-3 align-middle"><img src="{{asset('images/imagine.png')}}" alt="#"></li>
            </ul>
        </div>
    </section>

    
    <section class="standard-block" id="learn-more">
        <div class="container">
            <div class="row gx-4 gx-xl-5 gy-5 align-items-stretch">
                <div class="col-12 offset-0 col-sm-8 offset-sm-2 col-md-6 offset-md-0 col-lg-4 offset-lg-0 mb-3 mb-lg-5">
                    <div class="icon-text-block">
                        <div class="icon"><img src="{{asset('images/icon-work-anywhere.png')}}" alt="#"></div>
                        <p class="h3 mb-3 mb-md-4  text-uppercase">Amazing workspaces</p>
                        <p>With 100s of spaces across the UK, you can be sure to find a space that suits your needs for any day of the year. If it’s a quiet place to revise, a collaborative space to work on projects, or just a chilled place to relax. We have it covered.</p>
                    </div>
                </div>

                <div class="col-12 offset-0 col-sm-8 offset-sm-2 col-md-6 offset-md-0 col-lg-4 offset-lg-0 mb-3 mb-lg-5">
                    <div class="icon-text-block">
                        <div class="icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="87.043" height="87.042" viewBox="0 0 87.043 87.042">
                                <path id="np_networking_2148898_000000" d="M72.759,37.942A17.408,17.408,0,1,0,57,13.186l-4.66-1.719a7.229,7.229,0,0,0,.109-1.088,7.322,7.322,0,1,0-1.11,3.808l4.653,1.719a17.125,17.125,0,0,0,.239,10.068l-15.954,6.76a17.321,17.321,0,0,0-21.528-8.16l-4.011-8.432a7.22,7.22,0,1,0-4.359,1.491,7.125,7.125,0,0,0,1.744-.236l4.008,8.425A17.377,17.377,0,0,0,15.2,55.3l-2.655,4.769a7.156,7.156,0,0,0-2.169-.366,7.339,7.339,0,1,0,4.7,1.777L17.74,56.7a17.26,17.26,0,0,0,17.724-2.064l5.708,6.282a17.333,17.333,0,0,0-4.682,11.841,17.121,17.121,0,0,0,.218,2.6l-6.717,1.6a7.215,7.215,0,1,0,.7,3.054c0-.08-.022-.156-.022-.236l6.706-1.588A17.4,17.4,0,1,0,69.233,64.526l8.523-5.542a7.377,7.377,0,1,0-1.578-2.434L67.638,62.1a17.489,17.489,0,0,0-6.485-5.15l7.079-19.628a17.433,17.433,0,0,0,4.526.617ZM45.195,14.731a4.352,4.352,0,1,1,4.352-4.352A4.356,4.356,0,0,1,45.195,14.731ZM6.025,10.378a4.352,4.352,0,1,1,4.352,4.352A4.356,4.356,0,0,1,6.025,10.378Zm4.352,60.929a4.352,4.352,0,1,1,4.352-4.352A4.356,4.356,0,0,1,10.378,71.308ZM23.433,84.364a4.352,4.352,0,1,1,4.352-4.352A4.356,4.356,0,0,1,23.433,84.364ZM82.912,49.547A4.352,4.352,0,1,1,78.559,53.9,4.356,4.356,0,0,1,82.912,49.547Zm-18.7-17.314a7.275,7.275,0,0,1,7.094-5.9h2.9a7.275,7.275,0,0,1,7.094,5.9,14.408,14.408,0,0,1-17.089,0Zm8.545-8.8a4.352,4.352,0,1,1,4.352-4.352A4.356,4.356,0,0,1,72.756,23.435Zm0-17.408A14.486,14.486,0,0,1,83.706,30.021a10.279,10.279,0,0,0-5.777-5.868,7.254,7.254,0,1,0-10.343,0,10.29,10.29,0,0,0-5.777,5.868A14.486,14.486,0,0,1,72.756,6.026ZM10.376,40.843a14.507,14.507,0,1,1,25.438,9.509,10.266,10.266,0,0,0-5.785-5.89,7.255,7.255,0,1,0-10.347,0,10.272,10.272,0,0,0-5.77,5.846,14.44,14.44,0,0,1-3.536-9.466ZM20.5,39.392a4.352,4.352,0,1,1,4.352,4.352A4.356,4.356,0,0,1,20.5,39.392ZM16.316,52.522A7.271,7.271,0,0,1,23.4,46.646h2.9A7.272,7.272,0,0,1,33.4,52.561a14.39,14.39,0,0,1-17.082-.04ZM45.33,84.437a7.271,7.271,0,0,1,7.087-5.875h2.9a7.272,7.272,0,0,1,7.094,5.915,14.39,14.39,0,0,1-17.082-.04Zm8.537-8.777a4.352,4.352,0,1,1,4.352-4.352A4.356,4.356,0,0,1,53.868,75.66Zm14.536-2.9a14.439,14.439,0,0,1-3.576,9.509,10.266,10.266,0,0,0-5.785-5.89,7.255,7.255,0,1,0-10.347,0,10.272,10.272,0,0,0-5.77,5.846A14.5,14.5,0,1,1,68.4,72.759ZM58.422,55.967a17.182,17.182,0,0,0-15.106,3l-5.708-6.282a17.291,17.291,0,0,0,3.8-17.282l15.954-6.76a17.514,17.514,0,0,0,8.138,7.7Z" transform="translate(-3.124 -3.125)" fill="#7FDAC7"/>
                            </svg>

                        </div>
                        <p class="h3 mb-3 mb-md-4 text-uppercase">Work with friends</p>
                        <p>Feeling isolated working, sleeping & living in your student accommodation? You’re not the only one. When you book with Reef, you have access to spaces across the UK where you can invite your friends to collaborate and work alongside.</p>
                    </div>
                </div>

                <div class="col-12 offset-0 col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-lg-4 offset-lg-0 mb-3 mb-lg-5">
                    <div class="icon-text-block">
                        <div class="icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="55.62" height="93.711" viewBox="0 0 55.62 93.711">
                              <g id="np_coins_1355580_000000" transform="translate(-20.537 0)">
                                <path id="Path_4151" data-name="Path 4151" d="M48.28,23.526c2.746,0,27.448-.195,27.448-7.841V7.841C75.729.195,51.026,0,48.28,0S20.832.195,20.832,7.841v7.841C20.832,23.331,45.534,23.526,48.28,23.526ZM24.754,15.487V12.351a20.456,20.456,0,0,0,1.959.783v3.724c-.978-.584-1.764-.978-1.959-1.371Zm19.6.2v3.922a51.557,51.557,0,0,1-5.882-.393V15.292C40.634,15.487,42.594,15.487,44.358,15.685Zm-9.8,2.941a23.29,23.29,0,0,1-3.922-.783V14.116c1.176.195,2.547.393,3.922.588ZM48.28,19.6V15.685c2.158,0,16.468-.195,23.526-3.334v3.334C70.825,17.056,62.2,19.6,48.28,19.6ZM50.828,3.922h7.845a2.5,2.5,0,0,1,1.176.195c.393,0,.588,0,.783.195a1.781,1.781,0,0,1,.982.195A1.181,1.181,0,0,1,62.4,4.7a1.781,1.781,0,0,1,.981.195,1.181,1.181,0,0,1,.783.195c.195,0,.588.195.783.195s.393.195.783.195c.195,0,.588.195.783.195s.393.195.588.195.393.195.588.195.393.195.588.195.393.195.588.195a.7.7,0,0,1,.393.195.7.7,0,0,1,.393.195c.195,0,.195.195.393.195s.195.195.393.195.195.195.393.195.195.195.393.195l.195.195.195.195.195.195c-1.371,1.57-9.8,3.922-23.331,3.922S26.519,9.778,25.144,8.208a.191.191,0,0,0,.195-.195l.195-.195a.191.191,0,0,0,.195-.195.681.681,0,0,1,.393-.195c.195,0,.195-.195.393-.195s.195-.195.393-.195.195-.195.393-.195.393-.195.588-.195a.7.7,0,0,0,.393-.195c.195,0,.393-.195.588-.195s.393-.195.588-.195c-.195-.184.195-.184.393-.184s.393-.195.588-.195.393-.195.783-.195c.195,0,.393-.195.783-.195.195,0,.588-.195.783-.195a1.181,1.181,0,0,0,.783-.195,2.153,2.153,0,0,0,.982-.195,1.181,1.181,0,0,0,.783-.195,1.781,1.781,0,0,0,.982-.195,1.181,1.181,0,0,0,.783-.195,2.5,2.5,0,0,0,1.176-.195H48.67c.982-.011,1.375-.011,2.158-.011Z" transform="translate(-0.017 0)" fill="#7FDAC7"/>
                                <path id="Path_4152" data-name="Path 4152" d="M33.559,52.084c7.253,0,15.487-1.57,17.056-1.764,2.746-.588,26.86-5.488,25.485-12.939l-1.57-7.646c-1.57-7.451-25.684-2.941-28.426-2.353a96.2,96.2,0,0,0-11.958,3.136c-2.158.783-4.117,1.371-5.882,2.158q-8.53,3.821-7.646,7.646l1.57,7.646C22.778,51.1,27.873,52.084,33.559,52.084ZM25.325,43.85c.588.195,1.371.195,2.158.393l.783,3.529a3.807,3.807,0,0,1-2.158-.783Zm-.588-4.705.195-.195.195-.195.195-.195.195-.195c.195,0,.195-.195.393-.195s.195-.195.393-.195.195-.195.393-.195.195-.195.393-.195.393-.195.588-.195.393-.195.588-.195.393-.195.588-.195.393-.195.588-.195.393-.195.588-.195.393-.195.588-.195c.195-.195.588-.195.783-.393s.393-.195.783-.393c.195-.195.588-.195.783-.393s.588-.195.783-.393.588-.195.783-.393c.393-.195.588-.195.982-.393.393,0,.588-.195.982-.195.393-.195.588-.195.982-.393.393,0,.588-.195.982-.195.393-.195.783-.195,1.176-.393.393,0,.588-.195.982-.195.393-.195.783-.195,1.176-.393.195,0,.588-.195.783-.195.393-.195.982-.195,1.371-.393h.195a8.373,8.373,0,0,1,2.158-.393,11.538,11.538,0,0,1,2.547-.393h.588a5.46,5.46,0,0,1,1.764-.195,1.484,1.484,0,0,0,.783-.195c.588,0,.982-.195,1.57-.195h.783c.393,0,.982-.195,1.371-.195h.783a3.84,3.84,0,0,0,1.371-.195H69.04c.195,0,.195,0,.393.195h.195a7035.894,7035.894,0,0,0,.39.39h.195c-1.176,1.764-8.822,5.687-22.155,8.429C34.725,41.5,26.1,40.916,24.336,39.545l.4-.4h0Zm20.391,4.117.783,3.922c-2.158.393-4.117.588-5.882.783l-.783-3.922C41.4,43.85,43.558,43.457,45.127,43.262Zm-12.939,4.9-.783-3.724h.588a18.07,18.07,0,0,0,3.334-.195l.783,3.724A27.817,27.817,0,0,1,32.188,48.162ZM49.833,46.4l-.783-3.922c2.158-.393,16.075-3.334,22.35-7.841l.588,3.136c-.592,1.768-8.433,5.885-22.155,8.627Z" transform="translate(0 -1.503)" fill="#7FDAC7"/>
                                <path id="Path_4153" data-name="Path 4153" d="M54.242,67.767a89.381,89.381,0,0,0-16.862-7.841c-5.882-1.764-9.41-1.57-10.782.783l-3.922,6.863c-3.922,6.664,17.45,19.214,19.8,20.585A89.381,89.381,0,0,0,59.341,96a22.742,22.742,0,0,0,6.47,1.176c2.158,0,3.529-.588,4.312-1.959l3.922-6.863c3.919-6.664-17.255-19.21-19.8-20.585Zm.195,4.705a1.023,1.023,0,0,0,.783.393c.393.195.982.588,1.371.783.195.195.588.393.783.588a4.121,4.121,0,0,1,1.176.783c.195.195.588.393.783.588.393.195.588.393.982.588a2.715,2.715,0,0,0,.783.588c.393.195.588.393.982.588l.588.588c.195.195.588.393.783.588s.393.393.588.393c.195.195.588.393.783.588s.393.393.588.393l.588.588c.195.195.393.195.393.393l.588.588.393.393.588.588.393.393c.195.195.393.393.393.588.195.195.195.195.195.393.195.195.195.393.393.393a.191.191,0,0,0,.195.195l.393.393.195.195c0,.195.195.195.195.393a7036.17,7036.17,0,0,1,.39.39v.39c-1.959.588-10.392-1.57-22.155-8.429s-17.839-13.134-18.233-15.1h1.566c3.334.393,10.98,2.746,20.78,8.429a6.274,6.274,0,0,0,1.775,1.371ZM31.893,71.1c.982.783,1.959,1.764,3.136,2.547l-1.959,3.334c-1.176-.982-2.158-1.764-2.941-2.547ZM38.168,76c1.57,1.176,3.136,2.158,4.9,3.334L41.108,82.67c-1.764-1.176-3.334-2.158-4.9-3.334Zm-10.392-9.41a9.876,9.876,0,0,0,1.371,1.57L27.382,71.3a8.148,8.148,0,0,1-1.176-1.959ZM44.439,84.824c0-.195-.195-.195,0,0L46.4,81.489a76.947,76.947,0,0,0,16.862,7.646,35.956,35.956,0,0,0,5.1,1.176l-1.57,2.746C65.222,93.844,56.595,91.687,44.439,84.824Z" transform="translate(-0.098 -3.464)" fill="#7FDAC7"/>
                              </g>
                            </svg>
                        </div>
                        <p class="h3 mb-3 mb-md-4 text-uppercase">Discounted perks</p>
                        <p>Not only are we offering a student discount on our membership, you will also receive discounts off food and drink, hotel rooms, event space and meeting rooms in our spaces as well as discounts off tech from FitBit, Jabra and many more.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="standard-block">
        <div class="container">
            <div class="row g-5 align-items-center">
                <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/about-venues.png')}}" alt="#" class="image-auto">
                </div>
                <div class="col-12 col-md-6 col-lg-5 order-first order-mg-last" id="students-sign-up">
                    <div id="students"></div>
                    <h2 class="mb-2 mb-md-3">Students sign up here</h2>
                    <p>Sign up today, and join the Reefolution.</p>
                    <div class="main-error col-12 mt-3">
                        @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('students_submit')}}" id="student_form">
                        @csrf
                        <div class="mb-0">
                            <label for="input1" class="form-label">First name*</label>
                            <input type="text" name="firstname" class="form-control" id="input1" value="{{old('firstname')}}">
                        </div>
                        <div class="first_name_error text-danger f-14 mb-0">&nbsp;</div>
                        
    
                        <div class="mb-0">
                            <label for="input2" class="form-label">Surname*</label>
                            <input type="text" name="lastname" value="{{old('lastname')}}" class="form-control" id="input2">
                        </div>
                        <div class="last_name_error text-danger f-14 mb-0">&nbsp;</div>
                       
                        <div class="mb-0">
                            <label for="input3" class="form-label">Email*</label>
                            <input type="text" name="email"  value="{{old('email')}}" class="form-control" id="input3">
                        </div> 
                        <div class="email_error f-14">&nbsp;</div> 
                        
    
                        <div class="mb-3">
                            <label for="input4" class="form-label">City</label>
                            <input type="text" name="city" value="{{old('city')}}" class="form-control" id="input4">
                        </div>
    
                        <div class="mb-1">
                            <label for="input4" class="form-label">Uni/College name</label>
                            <input type="text" name="company" value="{{old('company')}}" class="form-control" id="input4">
                        </div>
                        <p class="f-12 mb-3">*Required fields.</p>
                        @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 w160 submit_form_btn">Sign up today for free</button>
                    </form>
                    
                </div>
            </div>
        </div>
    </section>
    {{-- <section class="standard-block pt-0">
        <div class="container">

            <div class="row gy-5 gy-sm-4 gx-4 align-items-stretch">
                <div class="col-12 col-lg-4 pb-5 pb-lg-0 text-center text-lg-start">
                    <h2>Choose billing period</h2>
                    <div class="ps-0 ps-lg-4">
                        <ul class="list-inline mb-0 custom-toggler">
                            <li class="list-inline-item me-1 align-middle color-green">Monthly</li>
                            <li class="list-inline-item me-1 align-middle">
                                <div class="form-check form-switch mb-0">
                                    <input name="name" class="form-check-input" type="checkbox" id="checkboxid">
                                </div>
                            </li>
                            <li class="list-inline-item align-middle">Yearly</li>
                            <!-- tuka treba da menva color-green vo zavisnost dali e mesec/godina -->
                        </ul>
                    </div>
                    <div class="pt-4 pt-lg-5">
                        <h3 class="h2">What you get</h3>
                        <ul class="list-unstyled mb-0">
                            <li>Unlimited bookings</li>
                            <li>Exclusive Networking</li>
                            <li>Access to Reef Discord channel</li>
                            <li>Perks + discounts</li>
                            <li>Digital Reef card</li>
                            <li>Invite + collaborate with colleagues</li>
                        </ul>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-lg-4">
                    <div class="pricing-box">
                        <div class="icon d-flex align-items-center justify-content-center">
                            <img src="{{asset('images/reef-2022/reef-logo-icon.png')}}" alt="#">
                        </div>
                        <p class="h3 mb-3 mb-md-4 text-center font-bold">Students</p>
                        <p class="price text-center">£5 <sub>+vat</sub></p>
                        <p class="h3 mb-3 mb-md-4 font-bold color-green text-center">Per user per year</p>
                        <p>For individual students to sign up to the Reef platform.</p>
                        <p class="bottom mb-0 text-center"><a href="" class="btn green">Try free for 7 days</a></p>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-lg-4">
                    <div class="pricing-box">
                        <div class="icon red d-flex align-items-center justify-content-center">
                            <img src="{{asset('images/reef-2022/reef-logo-icon.png')}}" alt="#">
                        </div>
                        <p class="h3 mb-3 mb-md-4 text-center font-bold">Education</p>
                        <p class="price text-center">£POA</p>
                        <p class="h3 mb-3 mb-md-4 font-bold color-green text-center">Per user per year</p>
                        <p>For further and higher education providers who want to create a perk for their students to utilise.</p>
                        <p class="bottom mb-0 text-center"><a href="#" class="btn green invert w160">Enquire now</a></p>
                    </div>
                </div>
            </div>
        </div>
    </section> --}}

    <section class="black-bar-block">
        <div class="container text-center py-4 py-lg-5">
            <ul class="list-inline list-mobile-fix mb-0">
                <li class="list-inline-item py-2 align-middle color-white font-bold h2 mb-0 me-4 me-xl-5">Are you a university or college? Get in touch with us today to see how we can benefit your students!</li>
                <li class="list-inline-item py-2 align-middle">
                    <a href="{{route('contact')}}" class="btn w160 mobile-full green">Contact us</a>
                </li>
            </ul>
        </div>
    </section>



@endsection

@section('modals')
@if(session()->has('success'))
    <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">Please check your inbox or junk folders for an email to complete your account.</p>
                </div>
            </div>
        </div>
    </div>
@endif
@if(session()->has('success-students'))
    <div class="modal register-success-modal fade" id="success-students" 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">Let’s get started!</h3>
                    <p class="mb-0 text-center  text-white">Your account has been created successfully. Download Reef App and enjoy it on your mobile.</p>
                </div>
            </div>
        </div>
    </div>
@endif


@endsection

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

@push('scripts')
    <script>
     function isEmail(email) {
      var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
      return regex.test(email);
    }

    function checkEmailValid() {
        var email_valid = false;
        if(isEmail($('#input3').val())){
            var domain = $('#input3').val().substring($('#input3').val().lastIndexOf("@") +1);
            if(domain.toLowerCase().indexOf("ac.uk") >= 0) {
                $('.email_error').html('E-mail accepted');
                email_valid = true;
                $('.email_error').removeClass('text-danger');
                $('.email_error').addClass('text-success');
            } else {
                email_valid = false;
                $('.email_error').html('Please use a .ac.uk email address to register');
                $('.email_error').removeClass('text-success');
                $('.email_error').addClass('text-danger');
            }
        } else {
            email_valid = false;
            $('.email_error').html('Email format not valid');
            $('.email_error').removeClass('text-success');
            $('.email_error').addClass('text-danger');
        }
        return email_valid;
    }

    $('#input3').on('keyup', function(e){
        e.preventDefault();
        checkEmailValid();
    });

    
    var first_name_valid = false;
    $('#input1').on('keyup', function(e){
        if($('#input1').val() == "") {
            $(".first_name_error").html("First Name required");
            first_name_valid = false;
        } else {
            $(".first_name_error").html("");
            first_name_valid = true;
            $(".first_name_error").html("&nbsp;");

        }
    });

    var last_name_valid = false;
    $('#input2').on('keyup', function(e){
        if($('#input2').val() == "") {
            $(".last_name_error").html("Surname required");
            last_name_valid = false;
        } else {
            $(".last_name_error").html("");
            last_name_valid = true;
            $(".last_name_error").html("&nbsp;");

        }
    });

    $(document).on('click', '.submit_form_btn', function(e){
        e.preventDefault();
        var email_check = checkEmailValid();
        //
        var first_name_valid = false;
        if($('#input1').val() == "") {
            $(".first_name_error").html("First Name required");
            first_name_valid = false;
        } else {
            $(".first_name_error").html("");
            first_name_valid = true;
            $(".first_name_error").html("&nbsp;");

        }
       
        var last_name_valid = false;
        if($('#input2').val() == "") {
            $(".last_name_error").html("Surname required");
            last_name_valid = false;
        } else {
            $(".last_name_error").html("");
            last_name_valid = true;
            $(".last_name_error").html("&nbsp;");

        }
        //

        if(email_check == true && first_name_valid == true && last_name_valid == true) {
            $('#student_form').submit();
        }
    });
    
    </script>

    @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

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

        })
    </script>
@endif
@endpush