@extends('frontend.layouts.default')
@section('content')
    <!-- banner section start-->
    <!--
    <div class="inner-page-banner-strip">
       <img src="{{ url('frontend/img/inner-page-background.jpg') }}" alt="...">
    </div>
-->
    <!-- / banner section end -->

    <div class="mainsection">
        <div class="custom_bnr banner-top fw-banner">
            <div class="container d-flex align-items-center" style="margin-bottom:1%">
                <div class="row custombnr">
                    <div class=" col-lg-6 col-md-6 col-sm-12 col-xs-12 banner_cm_col">
                        <div class="banner_text_card">
                            <h4 class="title">100% grade 5+ guaranteed or your money back</h4>
                            <h3 class="sub-title">Click below to trial KayScience for 3 weeks to see the power of our direct instruction videos, self-marking quizzes, exam question booklets, app & whole-school tracking software. Invest in your students and watch your department's progress score improve!</h3>
                            <div class="h-btn-group">
                                <!-- <a class="btn temp-btn" title="coming soon...">
                                    <span>Coming soon...</span>
                                </a> -->
                               {{--  <button href="#" class="btn btn_banner_blue2" data-toggle="modal"
                                        data-target="#school-log-modal">Free quizzes & tracking
                                </button> --}}

                                {{-- <span>Or</span> --}}
                                <a class="btn btn_banner_blue btn-lg" href="{{ url('schools') }}#contact-us">3 Week Free Trial</a>
                                <a href="https://calendly.com/kayscience/30min" target="_blank" class="btn btn_banner_blue btn-lg" style="margin-left:10px;">Book Demo</a>
                                <a href="https://www.tes.com/teaching-resources/shop/KayScienceResources" target="_blank" class="btn btn_banner_blue btn-lg" style="margin-left:10px;">Buy Resources</a>
                            </div>
                        </div>
                    </div>
                    <div class=" col-lg-6 col-md-6 col-sm-12 col-xs-12 banner_cm_col text-center">

                        <div class="banner_vd">
                            <div class="shape-clip d-flex align-items-center justify-content-center">
                                <svg>
                                    <clipPath id="cp" clipPathUnits="objectBoundingBox">
                                        <path
                                            d="M0.149,0,0.867,0.07 A0.159,0.16,0,0,1,0.996,0.24 V0.68 A0.149,0.15,0,0,1,0.877,0.83 L0.239,1 C0.169,1,0.09,1,0.08,0.86 L0,0.18 A0.149,0.15,0,0,1,0.149,0"></path>
                                    </clipPath>
                                </svg>
                                <div class="shape-path first">

                                    <div class="btn btn-primary video-btn" data-toggle="modal" data-target="#myModal5">
                                        <div class="play_btn_bnr"><i class="fa fa-play-circle" aria-hidden="true"></i>
                                        </div>
                                    </div>
                                   <!-- <video class="top-video" src="{{ asset('frontend/KayScience5.mp4') }}"  muted
                                           loop width="200px" height="100px"></video>-->
                                        <img src="{{ url('frontend/img/kayscience2023-screencap.png') }}" alt= "" width="450px">
                                </div>
                            </div>
                        </div>

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

            <!-- <div class="featuress-pad">
                <div class="featuress-section">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-3 col-sm-3 col-xs-6">
                                <div class="features-box">
                                    <h1>800+</h1>
                                    <h2>Videos</h2>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-3 col-xs-6">
                                <div class="features-box">
                                    <h1>20,000+</h1>
                                    <h2>Questions</h2>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-3 col-xs-6">
                                <div class="features-box">
                                    <h1>1M+</h1>
                                    <h2>min watched</h2>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-3 col-xs-6">
                                <div class="features-box last-ch">
                                    <h3>Free <br>App</h3>
                                </div>
                            </div>
                        </div>
                        <div class="features-inner-section"></div>
                    </div>
                </div>
            </div> -->
            <div class="featuress-pad">
              <div class="featuress-section">
                <div class="container">
                  <div class="row features-row">
                    <div class="col bor-right">
                      <div class="features-box">
                        <h1>800+</h1>
                        <h2>Videos</h2>
                      </div>
                    </div>
                    <div class="col bor-right">
                      <div class="features-box">
                        <h1>20,000+</h1>
                        <h2>Questions</h2>
                      </div>
                    </div>
                    <div class="col bor-right">
                      <div class="features-box">
                        <h2><strong>GCSE Specs:</strong></h2>
                        <h2>AQA, Edexcel, OCR</h2>
                      </div>
                    </div>
                    <div class="col bor-right">
                      <div class="features-box">
                        <h1>Exam</h1>
                        <h2>Question booklets</h2>
                      </div>
                    </div>
                    <div class="col bor-right">
                      <div class="features-box last-ch">
                        <h2><strong>Our top grade</strong></h2>
                        <h2 class="mb-0">Guarantee</h2>
                      </div>
                    </div>
                  </div>

                  <div class="features-inner-section"></div>
                </div>
              </div>
            </div>
        </div>
    </div>
    <!-- / featuress-section end -->
    <div class="clearfix"></div>
    <div class="sec-pad"></div>
    @include('frontend.layouts.twitter')

    <div class="section box-s3" id="how-it-works">
        <div class="container">
            <h3 class="title">Watch these videos to see how KayScience works…</h3>
            <div class="row">
                <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-xs-12">
                    <div class="content">
                        <h4 class="title">How to set up a KayScience school account:</h4>
                        <ul>
                            <li><i class="fa fa-check" aria-hidden="true"></i> How to add teachers</li>
                            <li><i class="fa fa-check" aria-hidden="true"></i> How to add classes</li>
                            <li><i class="fa fa-check" aria-hidden="true"></i> How to add students</li>
                        </ul>
                        <div class="d-flex justify-content-center">
                            <button class="btn btn-primary video-btn" data-toggle="modal" data-target="#myModal1"><i
                                    class="fa fa-play"></i>Watch Video
                            </button>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-xs-12">
                    <div class="content">
                        <h4 class="title">How teachers set tasks:</h4>
                        <ul>
                            <li><i class="fa fa-check" aria-hidden="true"></i> How to set videos & quizzes</li>
                            <li><i class="fa fa-check" aria-hidden="true"></i> How pupils complete tasks</li>
                            <li><i class="fa fa-check" aria-hidden="true"></i> How pupils use KayScience</li>
                        </ul>
                        <div class="d-flex justify-content-center">
                            <button class="btn btn-primary video-btn" data-toggle="modal" data-target="#myModal2"><i
                                    class="fa fa-play"></i>Watch Video
                            </button>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-xs-12">
                    <div class="content">
                        <h4 class="title">How to use our markbook to track student progress:</h4>
                        <ul>
                            <li><i class="fa fa-check" aria-hidden="true"></i> Whole school performance</li>
                            <li><i class="fa fa-check" aria-hidden="true"></i> Markbook to track quizzes</li>
                            <li><i class="fa fa-check" aria-hidden="true"></i> Markbook to track videos</li>
                        </ul>
                        <div class="d-flex justify-content-center">
                            <button class="btn btn-primary video-btn" data-toggle="modal" data-target="#myModal3"><i
                                    class="fa fa-play"></i>Watch Video
                            </button>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-xs-12">
                    <div class="content">
                        <h4 class="title">How to set up and use quizzes for free:</h4>
                        <ul>
                            <li><i class="fa fa-check" aria-hidden="true"></i> Set quizzes for homework</li>
                            <li><i class="fa fa-check" aria-hidden="true"></i> Fully trackable markbook</li>
                            <li><i class="fa fa-check" aria-hidden="true"></i> How pupils use the quizzes</li>
                        </ul>
                        <div class="d-flex justify-content-center">
                            <button class="btn btn-primary video-btn" data-toggle="modal" data-target="#myModal4"><i
                                    class="fa fa-play"></i>Watch Video
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="section box-s2">
        <div class="container">
            <h2 class="title">KayScience For Schools</h2>
            <div class="row no-gutter">
                <div class="col-xl-3 col-lg-3 col-md-3 col-sm-6 col-xs-12 card_ylow_col bx2">
                    <div class="content">
                        <img src="{{ url('frontend/img/smart_icon/2.png') }}" alt="">
                        <h3 class="title">Help your students catch up with lost learning</h3>
                        <p>Fill the gaps of your students knowledge and get them ready for the 2023 GCSE exams</p>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-3 col-md-3 col-sm-6 col-xs-12 card_ylow_col bx1">
                    <div class="content">
                        <img src="{{ url('frontend/img/smart_icon/5.png') }}" alt="">
                        <h3 class="title">Improve your department’s results</h3>
                        <p>Teachers can use our 800+ videos with embedded tasks and formative assessment during lessons,
                            distance learning and homework</p>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-3 col-md-3 col-sm-6 col-xs-12 card_ylow_col bx1">
                    <div class="content">
                        <img src="{{ url('frontend/img/smart_icon/8.png') }}" alt="">
                        <h3 class="title">Reduce your department's workload </h3>
                        <p>No more marking and reduced planning with 8000+ self-marking quiz questions which tracks
                            student progress</p>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-3 col-md-3 col-sm-6 col-xs-12 card_ylow_col bx2">
                    <div class="content">
                        <img src="{{ url('frontend/img/smart_icon/9.png') }}" alt="">
                        <h3 class="title">Every Teacher can teach with confidence
                        </h3>
                        <p>Use our 800+ videos for CPD to Improve the quality of teaching in your department</p><br><br>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- / testimonial-section start -->
    @include('frontend.layouts.testimonial_school')
  <!-- @include('frontend.layouts.trust-pilot')-->
    <!-- / testimonial-section end -->
    <div class="clearfix"></div>
    <div class="clearfix" id="contact-us"></div>
    <div class="section form-section" style="margin-top: 100px;margin-bottom: 100px;">
        <div class="container">
            <form class="form-bg" method="POST" id="enquiry_form" action="{{ url('enquiry') }}">
                {{ csrf_field() }}
                <div class="row">
                    <div class="d-flex align-items-center col-md-4">
                        <div class="content">
                            {{--                            <h3 class="title">Request a Quote for a School Subscription</h3>--}}
                            <h3 class="text-white">Complete this form to start your 3 week free trial for full access to our:</h3>
                            <h4 class="text-white">
                                <li>videos & resources</li>
                                <li>quizzes</li>
                                <li>student app</li>
                                <li>tracking software</li>
                            </h4>
                            <h5 class="text-white">
                                Once completed, you'll be sent an email to access your account.
                            </h5>
                        </div>
                    </div>

                    <div class="col-md-8 form-block">
                        <div class="row">
                            <div class="col-md-4 col-xs-6">
                                <div class="form-group">
                                    <label>Full Name*</label>
                                    <input type="text" class="form-control" placeholder="Full Name" name="name"
                                           id="name">
                                </div>
                            </div>
                            <div class="col-md-4 col-xs-6">
                                <div class="form-group">
                                    <label>School or Institution Name*</label>
                                    <input type="text" class="form-control" placeholder="School or Institution Name"
                                           name="school_name" id="school_name">
                                </div>
                            </div>
                            <div class="col-md-4 col-xs-6">
                                <div class="form-group">
                                    <label>School Postcode*</label>
                                    <input type="text" class="form-control" placeholder="School Postcode"
                                           name="postcode" id="postcode">
                                </div>
                            </div>
                            <div class="col-md-4 col-xs-6">
                                <div class="form-group">
                                    <label>Position*</label>
                                    <input type="text" class="form-control" placeholder="Position" name="position"
                                           id="position">
                                </div>
                            </div>
                            <div class="col-md-4 col-xs-6">
                                <div class="form-group">
                                    <label>Email Address*</label>
                                    <input type="text" class="form-control" placeholder="Email Address" name="email"
                                           id="email">
                                </div>
                            </div>
                            <div class="col-md-4 col-xs-6">
                                <div class="form-group">
                                    <label>Contact number</label>
                                    <input type="text" class="form-control" placeholder="Contact number" name="phone"
                                           id="phone">
                                </div>
                            </div>
                            <div class="col-md-4 col-xs-12">
                                <div class="form-group">
                                    <label>Best time to contact?</label>
                                    <input type="text" class="form-control" placeholder="Best time to contact?"
                                           name="contact_time" id="contact_time">
                                </div>
                            </div>
                            <div class="col-md-5 col-xs-12">
                                <div class="form-group">
                                    <label>Estimated number of students</label>
                                    <input type="number" class="form-control"
                                           placeholder="Estimated number of students?" name="estimated_students_count"
                                           id="estimated_students_count" min="1" max="10000">

                                </div>
                            </div>
                            <div class="col-md-3 col-xs-12">
                                @php
                                    $curriculum   = App\Models\Curriculum::pluck('name','id');
                                @endphp
                                <div class="form-group">
                                    {!! Form::select('curriculum', $curriculum , '', ['class' => 'form-control ', 'id' => 'curriculum', 'style' => 'width:100%', 'placeholder' => 'Curriculum']) !!}

                                </div>
                            </div>
                            <!--  <div class="col-md-6 col-xs-6 ">
                               <div class="form-group">
                                 <select class="form-control">
                                   <option>Method of funding?</option>
                                   <option>2</option>
                                   <option>3</option>
                                   <option>4</option>
                                   <option>5</option>
                                 </select>
                               </div>
                             </div> -->
                            <!--
                                            <div class="col-xs-12">
                                            <div class="col-xs-12">
                                              <div class="form-group">
                                                <label>How did you hear about us?</label>
                                                <select class="form-control" name="how_hear_about_us" id="how_hear_about_us">
                                                  <option>How did you hear about us?</option>
                                                  <option value="Friends">Friends</option>
                                                  <option value="Social Media">Social Media</option>
                                                </select>
                                              </div>
                                            </div>
                            -->
                            <div class="col-xs-12">
                            <div class="form-group">
                                    {!! NoCaptcha::renderJs() !!}
                                    {!! NoCaptcha::display() !!}
                                    @error('g-recaptcha-response')
                                    <div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
                                    @enderror
                            </div>
                            </div>
                   
                    <input type="hidden" name="recaptcha" id="recaptcha">
                            <div class="col-xs-12">
                            <a class="btn btn-primary" href="mailto:info@kayscience.com">Submit</a>
                            </div>
                            <div class="col-xs-12">
                                <div class="alignnone thankyou-msg" style="background-color: #ddeeff; display: none;">
                                    <h2><em>Thank you!</em></h2>
                                    <p><em>Your message has been successfully sent. We will contact you very soon!</em>
                                    </p>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>


    <!-- download app start -->
    @include('frontend/layouts/mobile-app');
    <!-- download app end -->
    <div class="clearfix"></div>
    <!-- / Subscription-section start 
    @include('frontend.pages.newsletter')-->
    <!-- / Subscription-section start -->
    <!-- Button trigger modal -->
    <!-- Modal -->

    @include('frontend.pages.signup_modal')
@endsection
@push('page-css')
    <style>
        .mainsection {
          height: 100vh;
        }
        .g-recaptcha {
            padding-left: 1px !important;
        }
    </style>
@endpush
@push('inner-scripts')
    <script src="https://www.google.com/recaptcha/api.js?render={{ config('services.recaptcha.sitekey') }}"></script>
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    <script>


        $(document).ready(function () {
            $('[data-toggle="tooltip"]').tooltip();
        });
    </script>
    <script type="text/javascript">