@extends('layouts.fullLayoutMaster')

@section('title', 'تسجيل حساب جديد')

@section('page-style')
{{-- Page Css files --}}
<link rel="stylesheet" href="{{ asset(mix('css/base/pages/authentication.css')) }}">
<link rel="stylesheet" href="{{ asset('css/custom/register.css') }}">
@endsection

@section('content')
<div class="page">
    <div class="wrapper">
        <div class="interact centered">
            @if (session()->has('userRegistrationErrorMessage'))
            <div class="alert-frame">
                <div class="sessionMessage alert-msg-frame alert alert-success rounded-0" role="alert">
                    <div class="alert-body">
                        {{ session()->get('userRegistrationErrorMessage') }}
                    </div>
                </div>
            </div>
            @endif

            <!-- register-interact -->
            <div  id="registerInteract" class="registerInteract interact-frame register-interact" >
                <div class="header-group-wrapper">
                    <div class="header-frame">
                    <div class="logo">
                    <img src="{{ asset('assets/logo.png') }}" alt="" />
                </div>
                        <h2 class="header-text main-header centered">تسجيل حساب ولي امر</h2>
                    </div>
                    <div class="group-frame">
                        <div class="grid-wrapper">
                            <div class="group-header-frame">
                                <h4 class="card-title mb-1">👋 اهلا بك في ابنائي!</h4>
                                <p class="card-text mb-2">نظام ادارة المدارس الأكثر تطورا ..</p>

                            </div>
                            <div class="group-form-body">
                                <form class="auth-register-form" method="POST" action="{{ route('userRegistration') }}">
                                    @csrf
                                    <div class="inputs-frame">
                                        <div class="row">
                                        <div class="col-4 mb-1">
                                            <x-inputs.text.Input label="الاسم الاول" name="first_name" placeholder="الاسم الاول" required />

                                        </div>
                                        <div class="col-8 mb-1">
                                            <x-inputs.text.Input label="الاسم الاخير" name="last_name" placeholder="الاسم الاخير" required />
                                        </div>
                                        </div>
                                        <div class="mb-1">
                                            <x-inputs.text.Input type="email" label="البريد الأليكتروني" name="email" placeholder="البريد الأليكتروني" required />

                                        </div>
                                        <div class="mb-1 phone-input-wrapper">
                                            <x-inputs.text.Input class="phone-input" label="ادخل رقم الجوال" name="phone" style="width: 80%" placeholder="رقم الجوال" required cl />
                                            <span class="prefix">966+</span>
                                        </div>
                                        <div class="row">
                                            <div class="col-6 mb-1">
                                            <x-inputs.password required name="password" label="كلمة المرور" />
                                            </div>

                                            <div class="col-6 mb-1">
                                            <x-inputs.password required name="password_confirmation" label="تاكيد كلمة المرور" />
                                            </div>
                                        </div>
                                    </div>
                                    <x-inputs.submit class="btn btn-primary btn-submit w-100">تسجيل حساب جديد</x-inputs.submit>
                                </form>
                            </div>
                            <br><br>
                            <div class="text-frame">
                                @if (Route::has('showLoginPage'))
                                <div class="group-form-footer">
                                    <a href="{{ route('showLoginPage') }}">
                                        <h3 class="link-text mb-1">
                                            <span class="question-txt"></span>لديك حساب ؟</span>
                                            <span class="register-txt"> تسجيل الدخول ولي امر </span>
                                        </h3>
                                    </a>
                                </div>
                                @endif
                            </div>
                            <div class="divider-frame mt-1">
                                <div class="divider"></div>
                                <div class="divider-or">
                                    <div class="divider-text">or</div>
                                </div>
                                <div class="divider"></div>
                            </div>
                            <div class="action-frame">
                                <a href="#" class="btn-link">
                                    <img src="{{ asset('assets/icon-google.png') }}"  alt="google">
                                </a>
                                <a href="#" class="btn-link">
                                    <img src="{{ asset('assets/icon-twitter.png') }}"  alt="twitter">
                                </a>
                                <a href="#" class="btn-link">
                                    <img src="{{ asset('assets/icon-facebook.png') }}"  alt="facebook">
                                    </a>
                            </div>
                            <div class="link-frame mt-1">
                                <a href="{{ route('homePage') }}">
                                    <h3 class="link-text">الرجوع لحساب الموظف</h3>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="baner">
            <div class="logo-baner">
                <img src="{{ asset('assets/logo-baner.png') }}" alt="logo-baner-img" />
            </div>
            <div class="brand-frame centered">
                <div class="logo">
                    <img src="{{ asset('assets/logo.png') }}" alt="" />
                </div>
                <h1 class="text">ابنائي</h1>
            </div>
        </div>
    </div>
</div>
@endsection