@extends('auth.inc.layout')
@section('style')
    <style>
        .tel-invalid {
            display: block;
            width: 100%;
            margin-top: 0.25rem;
            font-size: 0.8125rem;
            color: #dc3545;
        }
    </style>
@endsection
@section('content')
    <section class="register-section login-section">
        <div class="row gx-0">
            <div class="col-lg-5 login-form">
                <h2 class="fw-600 dark-color mb-2">{{ __('website_301.auth.Welcome') }}</h2>
                <p class="mb-45 green-color">{{ __('website_301.auth.EnterData') }}<br>
                    {{ __('website_301.auth.EnterData2') }}</p>
                <form class="main-form white" id="form_submit" method="POST" action="{{ route('register') }}">
                    @csrf

                    <div class="form-group mb-3">
                        <label class="form-label dark-color mb-3 fw-600">{{ __('website_301.profile.StudentName') }}</label>
                        <div class="input-icon">
                            <input type="text" class="form-control @error('name') is-invalid @enderror" name="name"
                                value="{{ old('name') }}" autocomplete="name" autofocus id="name"
                                placeholder="{{ __('website_301.auth.StudentName') }}" />
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <g clip-path="url(#clip0_188_9213)">
                                    <ellipse cx="12" cy="17.5" rx="7" ry="3.5" stroke="#28303F"
                                        stroke-opacity="0.6" stroke-width="1.5" stroke-linejoin="round" />
                                    <circle cx="12" cy="7" r="4" stroke="#28303F" stroke-opacity="0.6"
                                        stroke-width="1.5" stroke-linejoin="round" />
                                </g>
                                <defs>
                                    <clipPath id="clip0_188_9213">
                                        <rect width="24" height="24" fill="white" />
                                    </clipPath>
                                </defs>
                            </svg>
                            @error('name')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                    </div>

                    <div class="form-group mb-3">
                        <label class="form-label dark-color mb-3 fw-600">{{ __('messages.Email') }}</label>
                        <div class="input-icon">
                            <input type="text" class="form-control @error('email') is-invalid @enderror" name="email"
                                value="{{ old('email') }}" autocomplete="email" autofocus id="email"
                                placeholder="{{ __('website_301.contact.Email') }}" />

                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M3 5V4.5C2.86739 4.5 2.74021 4.55268 2.64645 4.64645C2.55268 4.74021 2.5 4.86739 2.5 5H3ZM21 5H21.5C21.5 4.86739 21.4473 4.74021 21.3536 4.64645C21.2598 4.55268 21.1326 4.5 21 4.5V5ZM3 5.5H21V4.5H3V5.5ZM20.5 5V17H21.5V5H20.5ZM19 18.5H5V19.5H19V18.5ZM3.5 17V5H2.5V17H3.5ZM5 18.5C4.60218 18.5 4.22064 18.342 3.93934 18.0607C3.65804 17.7794 3.5 17.3978 3.5 17H2.5C2.5 17.663 2.76339 18.2989 3.23223 18.7678C3.70107 19.2366 4.33696 19.5 5 19.5V18.5ZM20.5 17C20.5 17.3978 20.342 17.7794 20.0607 18.0607C19.7794 18.342 19.3978 18.5 19 18.5V19.5C19.663 19.5 20.2989 19.2366 20.7678 18.7678C21.2366 18.2989 21.5 17.663 21.5 17H20.5Z"
                                    fill="black" fill-opacity="0.6" />
                                <path d="M3 5L12 14L21 5" stroke="black" stroke-opacity="0.6" stroke-linecap="round"
                                    stroke-linejoin="round" />
                            </svg>
                            @error('email')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                    </div>

                    <div class="form-group mb-4">
                        <label class="form-label dark-color mb-3 fw-600">{{ __('messages.Mobile') }}</label>

                        <div class="form-group mb-45">
                            <div dir="ltr">
                                <input id="phone" name="mobile" type="tel"
                                    class="form-control text-start @error('mobile') is-invalid @enderror"
                                    value="{{ old('mobile') }}" data-original-value="{{ old('mobile') }}" />
                            </div>
                            <input type="hidden" id="country_code" value="{{ old('mobile_country_code') }}"
                                name="mobile_country_code" />
                            @error('mobile')
                                <span class="tel-invalid" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                    </div>

                    <div class="form-group mb-3">
                        <label class="form-label dark-color mb-3 fw-600">{{ __('messages.Password') }}</label>
                        <div class="input-icon">
                            <input type="password" class="form-control @error('password') is-invalid @enderror"
                                name="password" autocomplete="current-password"
                                placeholder="{{ __('website_301.auth.Password') }}" />
                            <i class="icon-lock-outline"></i>
                            @error('password')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                    </div>

                    <div class="form-group mb-3">
                        <label class="form-label dark-color mb-3 fw-600">{{ __('messages.Confirm Password') }}</label>
                        <div class="input-icon">
                            <input type="password" class="form-control" name="password_confirmation"
                                autocomplete="new-password" placeholder="{{ __('website_301.auth.ConfirmPassword') }}" />
                            <i class="icon-lock-outline"></i>
                            @error('password_confirmation')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                    </div>

                    <button class="main-btn w-100 mb-3 mt-45">{{ __('website_301.auth.NewAccount') }}</button>
                    <p class="mb-0 green-color text-center">{{ __('website_301.auth.HaveAccount') }}<a
                            href="{{ route('login') }}" class="primary-color">{{ __('website.header.Login') }}</a></p>
                </form>
            </div>
            <div class="col-lg-7 login-bg">
                <div class="text-center position-relative">
                    <div class="mb-4">
                        <a href="{{ route('site') }}">
                            <img src="{{ asset('main-site/assets/img/click.png') }}" class="img-fluid">
                        </a>
                    </div>
                    <h2 class="fw-600 def-color mb-3">{{ __('website_301.auth.Welcome2') }}</h2>
                    <p class="def-color opacity-70 mb-0">{{ __('website_301.auth.Welcome3') }}</p>
                </div>
            </div>
        </div>
    </section>
@endsection