@extends('layout_web.layouts')

@section('content')
    <section class="account-page-area section-gap-equal">
        <div class="container position-relative">
            <div class="row g-5 justify-content-center">
                <div class="col-lg-7">
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                    <div class="login-form-box registration-form">
                        <h3 class="title">Registration</h3>
                        <p>Already have an account? <a href="{{ route('login') }}">Sign in</a></p>
                        <form method="POST" action="{{ route('register') }}">
                            @CSRF
                            <div class="form-group">
                                <label for="first_name">First Name*</label>
                                <input type="text" name="first_name" id="first_name" placeholder="First Name" required>
                            </div>
                            <div class="form-group">
                                <label for="last_name">Last Name*</label>
                                <input type="text" name="last_name" id="last_name" placeholder="Last name"required>
                            </div>
                            <div class="form-group">
                                <label for="phone_number">Phone Number*</label>
                                <input type="tel" name="phone_number" id="phone_number"
                                    placeholder="Phone Number"required>
                            </div>
                            <div class="form-group">
                                <label for="email">Email*</label>
                                <input type="email" name="email" id="email" placeholder="Email"
                                    autocomplete="new-email"required>
                            </div>
                            <div class="form-group">
                                <label for="password">Password*</label>
                                <input type="password" name="password" id="password" placeholder="Password"
                                    autocomplete="new-password"required>
                                <span class="password-show" id="togglePassword">
                                    <i class="icon-76"></i>
                                </span>
                            </div>
                            <div class="form-group">
                                <label for="password_confirmation">Confirm Password*</label>
                                <input type="password" name="password_confirmation" id="password_confirmation"
                                    placeholder="Confirm Password"required>
                                <span class="password-show" id="togglePasswordConfirmation">
                                    <i class="icon-76"></i>
                                </span>
                            </div>
                            <div class="form-group">
                                <label for="educationalStageId">Educational Stage*</label>
                                <select name="educational_stage_id" class="form-control select2"
                                    data-select-educational-stage="true" id="educationalStageId"required></select>
                            </div>
                            <div class="form-group">
                                <label for="educationalStageId">Stage Year*</label>
                                <select name="stage_year_id" class="form-control select2" data-select-stage-year="true"
                                    id="stageYear"required></select>
                            </div>
                            <div class="form-group">
                                <label for="educationalStageId">Curriculum*</label>
                                <select name="curriculum_id[]" class="form-control select2" data-select-curriculum="true"
                                    id="curriculumId" multiple></select>
                            </div>
                            <div class="form-group">
                                <label for="educationalStageId">Teacher*</label>
                                <select name="teacher_id[]" class="form-control select2" data-select-teacher="true"
                                    id="teacherId" multiple></select>
                            </div>
                            <input type="hidden" id="Educational" class="Educational" name="educational_data[]">
                            <div class="form-group chekbox-area">
                                <div class="edu-form-check">
                                    <input type="checkbox" id="terms_condition" name="terms_condition" required>
                                    <label for="terms_condition">I agree the User Agreement and <a href="#">Terms &
                                            Condition.</a> </label>
                                </div>
                                <div class="contact-us-section">
                                    <p class="mt-4 contact-info d-flex align-items-center">
                                        <i class="mr-2 fas fa-phone-alt"></i>
                                        <a href="tel:{{ getConfigData('phone') }}" class="phone-number">
                                            {{ getConfigData('phone') }}
                                        </a>
                                    </p>
                                </div>
                            </div>
                            <div class="form-group">
                                <button type="submit" class="edu-btn btn-medium">Create Account <i class="icon-4"></i>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <ul class="shape-group">
                <li class="shape-1 scene"><img data-depth="2" src="{{ asset('web/assets/images/about/shape-07.png') }}"
                        alt="Shape"></li>
                <li class="shape-2 scene"><img data-depth="-2" src="{{ asset('web/assets/images/about/shape-13.png') }}"
                        alt="Shape"></li>
                <li class="shape-3 scene"><img data-depth="2"
                        src="{{ asset('web/assets/images/counterup/shape-02.png') }}" alt="Shape">
                </li>
            </ul>
        </div>
    </section>
@endsection

@section('page-style')
    @include('web.auth._form_css')
@endsection

@section('page-script')
    @include('web.auth._form_js')
@endsection
@push('js')
    @include('web.auth.password_script')
@endpush