@extends('front/layout')
@section('page_title','Register')
@section('container')


<style>
    .tab-container {
        display: flex;
        justify-content: center;
        margin-bottom: 30px;
    }
    .tab {
        background-color: #0070c0;
        color: white;
        padding: 10px 15px;
        cursor: pointer;
        border: none;
        outline: none;
        font-size: 18px;
        margin: 0 5px;
    }
</style>
  <main id="main">
<section class="register inner-page contact">
      <div class="container" data-aos="fade-down"> 

        <div class="section-header">
          <h2>Register</h2>         
        </div>

      </div>

   
      <div class="container">
        <div class="row justify-content-center">
           <div class="col-xl-10 col-lg-10">
            @if(session()->has('message'))
            <div class="sufee-alert alert with-close alert-success alert-dismissible fade show">
                {{session('message')}}
     <!--           <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>		-->
            </div>
            @else

            <div class="tab-container">
                <button class="tab" onclick="openTab('student')">I am a Student</button> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <button class="tab" onclick="openTab('teacher')">I am a Teacher/Principal</button>
            </div>

              <form method="post" name="registerform" id="adiRegister" action="{{route('registration_process')}}" class="tab-content" style="display:none;">
                @csrf
                 <div class="row">
                    <div class="col-md-5 d-none d-md-block">
                       <div class="signup-box text-center">
                         
                          <div class="signup-message"><img src="{{asset('front_assets/img/sign-up-message.png')}}" alt="img not found"></div>
                          <div class="signup-thumb"><img src="{{asset('front_assets/img/sign-up.png')}}" alt="img not found"></div>
                       </div>
                    </div>
                    <div class="col-md-7">
                       <div class="signup-form-wrapper">
                          <div class="signup-input-wrapper d-flex">
						  <div>
                            <input id="name" type="text" class="@error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" autocomplete="name" autofocus placeholder="Name*">
                                @error('name')
                                    <div class="alert alert-danger">{{ $message }}</div>
                                @enderror
								</div><div>
                            <input type="text" class="numbersOnly @error('phone') is-invalid @enderror" id="phone" name="phone" value="{{ old('phone') }}" placeholder="Mobile*">
                            <span id="error_phone"></span>
                            @error('phone')
                                <div class="alert alert-danger">{{ $message }}</div>
                            @enderror 
                        </div> </div>
                          <div class="signup-input-wrapper d-flex"><div>
                            <input id="email" type="email" class="@error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" autocomplete="email" placeholder="Email *">
                            <span id="error_email"></span>
                            @error('email')
                                <div class="alert alert-danger">{{ $message }}</div>
                            @enderror
							</div>
                            <input type="text" id="city" name="city" value="{{ old('city') }}" placeholder="City/Town">
                        </div>
                          <div class="signup-input-wrapper d-flex">
                            <input type="text" id="state" name="state" value="{{ old('state') }}" placeholder="State">
                            <input type="text" id="country" name="country" value="{{ old('country') }}" placeholder="Country">
                        </div>

                         <!-- <div id="student" class="tab-content">
                    <h2>Student Tab Content</h2>
                </div>

            <div id="teacher" class="tab-content">
                <h2>Teacher Tab Content</h2>
            </div> -->
                          <div class="signup-wrapper d-flex"> 
                            <div class="form-group radiobtn" id="registerType">
                              <input type="radio" id="student" name="register_type" value="Student" checked>
                              <label for="student">Student</label>
                              <input type="radio" id="teacher" name="register_type" value="Teacher">
                              <label for="teacher">Teacher</label>
                            </div>
                            <div class="signup-wrapper mt-1" id="reg_student">                               
                              <input type="text" class="form-control" id="grade" name="grade" placeholder="Grade / Class">
                          </div>
                          <div class="signup-wrapper mt-1" id="reg_teacher"  style="display: none;">                             
                            <input type="text" class="form-control" id="subject" name="subject" placeholder="Subject">
                        </div>
                        </div>
                        <div class="signup-input-wrapper" id="reg_institute">
                            <input type="text" id="institute_name" name="institute_name" value="{{ old('institute_name') }}" placeholder="Institute Name">
                        </div>
                        <div class="signup-input-wrapper" id="school_code_profile" style="display: none;">
                            <input type="text" id="profile_school_code" name="profile_school_code" value="{{ old('profile_school_code') }}" placeholder="School Code">
                        </div>

                        <div class="form-group row">
                            <!-- <label for="captcha" class="col-md-4 col-form-label text-md-right">{{ __('Captcha') }}</label> -->
                            <div class="col-md-6">
                                {!! NoCaptcha::renderJs() !!}
                                {!! NoCaptcha::display() !!}
                                @error('g-recaptcha-response')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                          <div class="signup-action">
                             <div class="course-sidebar-list"><input class="signup-checkbo @error('email') is-invalid @enderror" type="checkbox" name="accept_terms" id="accept_terms"><label class="sign-check" for="accept_terms"><span>Accept the terms and <a href="#">Privacy Policy</a></span></label></div>  <span id="error_accept_terms"></span>
                            @error('accept_terms')
                                <div class="alert alert-danger">{{ $message }}</div>
                            @enderror                         
                          </div>
                          <div class="sing-buttom mb-20">
                            <button class="sing-btn" id="register-button">Register now</button></div>
                          <div class="acount-login text-center"><span>Already have an account? <a href="