@extends('layouts.front')

@section('content')
    <section id="page-banner" class="pt-105 pb-110 bg_cover" data-overlay="8"
        style="background-image: url(images/page-banner-3.jpg)">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="page-banner-cont">
                        <h2>Students</h2>
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="#">Home</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Student Registration</li>
                            </ol>
                        </nav>
                    </div> <!-- page banner cont -->
                </div>
            </div> <!-- row -->
        </div> <!-- container -->
    </section>

    <!--====== PAGE BANNER PART ENDS ======-->

    <!--====== TEACHERS PART START ======-->

    <section id="contact-page" class="pt-90 pb-120 gray-bg">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="contact-from">
                        <div class="section-title">
                            <h5>Student Registration</h5>
                            <h2>Enroll Now</h2>
                        </div> <!-- section title -->
                        <div class="main-form pt-45">
                            <form action="{{ route('front.registerstudent') }}" method="post">
                                @csrf
                                <div class="row">
                                    <div class="col-md-6">
                                        <label>Name</label>
                                        <input name="name" type="text" placeholder="Your name" class="form-control"
                                            required="required">
                                    </div>
                                    <div class="col-md-6">
                                        <label>Guardian/Parent</label>
                                        <input class="form-control" name="guardian" type="text"
                                            placeholder="Guardian/Parent" data-error="Guardian is required."
                                            required="required">
                                    </div>
                                    <div class="col-md-6">
                                        <label>Email</label>
                                            <input class="form-control" name="email" type="email" placeholder="Email"
                                                data-error="Valid email is required." required="required">
                                    </div>
                                    <div class="col-md-6">
                                        <label>Password</label>
                                            <input class="form-control" name="password" type="password" placeholder="Password"
                                                data-error="Valid Password is required." required="required">
                                    </div>
                                    <div class="col-md-6">
                                        <label>School</label>
                                            <input class="form-control" name="school" type="text" placeholder="School Name"
                                                data-error="School is required." required="required">
                                    </div>
                                    <div class="col-md-6">
                                            <label>Grade/Class</label>
                                            <select class="form-control" name="grade_id" required>
                                                @foreach ($grades as $grade)
                                                    <option value="{{ $grade->id }}">{{ $grade->title }}</option>
                                                @endforeach
                                            </select>
                                    </div>
                                    <div class="col-md-6">
                                        <label>Contact</label>
                                            <input class="form-control" name="contact" type="text" placeholder="Contact #"
                                                data-error="Phone is required." required="required">

                                    </div>
                                    <div class="col-md-6">
                                        <label>Address</label>
                                            <input class="form-control" name="address" type="text" placeholder="Address"
                                                data-error="Address is required." required="required">
                                    </div>
                                    <div class="col-md-6">
                                        <label>Country</label>
                                            <input class="form-control" name="country" type="text" placeholder="Country"
                                                data-error="Country is required." required="required">

                                    </div>
                                    <div class="col-md-6">
                                        <label>City</label>
                                            <input class="form-control" name="city" type="text" placeholder="City"
                                                data-error="City is required." required="required">
                                    </div>
                                    <div class="col-md-12">
                                        <label>Message</label>
                                            <textarea class="form-control" name="remarks" placeholder="Messege" data-error="Please,leave us a message." required="required"></textarea>

                                    </div>
                                    <p class="form-message"></p>
                                    <div class="col-md-12">
                                        <div class="singel-form">
                                            <button type="submit" class="main-btn">Register</button>
                                        </div> <!-- singel form -->
                                    </div>
                                </div> <!-- row -->
                            </form>
                        </div> <!-- main form -->
                    </div> <!--  contact from -->
                </div>

            </div> <!-- row -->
        </div> <!-- container -->

    </section>
@endsection

@section('scripts')
@endsection