@extends('frontend.layout')

@section('content')
<div class="container-fuild">
    <div class=" w-100 overflow-hidden position-relative flex-wrap d-block vh-100">
        <div class="row">
            <div class="col-lg-6 col-md-12 col-sm-12">
                <div class="row justify-content-center align-items-center vh-100 overflow-auto flex-wrap login-bg1 ">
                    <div class="col-md-9 mx-auto p-4">
                        <form id="registrationForm">
                            @csrf
                            <div>
                                <div class=" mx-auto mb-5 text-center">
                                    <img id="company-logo" src="assets/img/full-logo.svg" class="img-fluid" alt="Logo">
                                </div>
                                <div class="card">
                                    <div class="card-body">
                                        <div class=" mb-4">
                                            <h2 class="mb-2">{{ __('Register')}}</h2>
                                            <p class="mb-0 fs-16">{{ __('Sign up to share moments with friends!')}}</p>
                                        </div>
                                        <div class="row">
                                            <div class="col-lg-6 col-md-12">
                                                <div class="mb-3">
                                                    <label class="form-label">{{ __('First Name')}}</label>
                                                    <div class="input-icon mb-3 position-relative">
                                                        <input type="text" class="form-control validate-input" id="first_name"
                                                            name="first_name" value="{{ old('first_name') }}">
                                                        <span class="input-icon-addon">
                                                            <i class="ti ti-user"></i>
                                                        </span>
                                                        <div class="invalid-feedback" id="firstNameError">
                                                            @error('first_name')
                                                            {{ $message }}
                                                            @enderror
                                                        </div>
                                                        <div class="valid-feedback"></div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-6 col-md-12">
                                                <div class="mb-3">
                                                    <label class="form-label">{{ __('Last Name')}}</label>
                                                    <div class="input-icon mb-3 position-relative">
                                                        <input type="text" class="form-control validate-input" id="last_name"
                                                            name="last_name" value="{{ old('last_name') }}">
                                                        <span class="input-icon-addon">
                                                            <i class="ti ti-user"></i>
                                                        </span>
                                                        <div class="invalid-feedback" id="lastNameError">
                                                            @error('last_name')
                                                            {{ $message }}
                                                            @enderror
                                                        </div>
                                                        <div class="valid-feedback"></div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-12">
                                                <div class="mb-3">
                                                    <label class="form-label">{{ __('Email')}}</label>
                                                    <div class="input-icon mb-3 position-relative">
                                                        <input type="text" class="form-control validate-input" id="email"
                                                            name="email" value="{{ old('email') }}">
                                                        <span class="input-icon-addon">
                                                            <i class="ti ti-mail"></i>
                                                        </span>
                                                        <div class="invalid-feedback" id="emailError">
                                                            @error('email')
                                                            {{ $message }}
                                                            @enderror
                                                        </div>
                                                        <div class="valid-feedback"></div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-12">
                                                <div class="mb-3">
                                                    <label class="form-label">{{ __('Phone Number')}}</label>
                                                    <div class="input-icon mb-3 position-relative">
                                                        <input type="number" class="form-control validate-input no-arrows" id="mobile_number" oninput="this.value=this.value.slice(0,21);"
                                                            name="mobile_number" value="{{ old('mobile_number') }}" maxlength="21" minlength="9">
                                                        <span class="input-icon-addon">
                                                            <i class="ti ti-phone"></i>
                                                        </span>
                                                        <div class="invalid-feedback" id="mobileNumberError">
                                                            @error('mobile_number')
                                                            {{ $message }}
                                                            @enderror
                                                        </div>
                                                        <div class="valid-feedback"></div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-6 col-md-12">
                                                <div class="mb-3 ">
                                                    <label class="form-label">{{ __('User Name')}}</label>
                                                    <div class="input-icon mb-3 position-relative">
                                                        <input type="text" class="form-control validate-input" id="user_name"
                                                            name="user_name" value="{{ old('user_name') }}">
                                                        <span class="input-icon-addon">
                                                            <i class="ti ti-user"></i>
                                                        </span>
                                                        <div class="invalid-feedback" id="userNameError">
                                                            @error('user_name')
                                                            {{ $message }}
                                                            @enderror
                                                        </div>
                                                        <div class="valid-feedback"></div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-6 col-md-12">
                                                <div class="mb-3">
                                                    <label class="form-label">{{ __('Password')}}</label>
                                                    <div class="input-icon ">
                                                        <input type="password" class="pass-input form-control validate-input"
                                                            id="password" name="password">
                                                        <span class="ti toggle-password ti-eye-off"></span>
                                                        <div class="invalid-feedback" id="passwordError">
                                                            @error('password')
                                                            {{ $message }}
                                                            @enderror
                                                        </div>
                                                        <div class="valid-feedback"></div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-12 col-md-12">
                                                <div class="mb-3 invalid-feedback" id="passwordErrorCharacter">
                                                    @error('password')
                                                    {{ $message }}
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-wrap form-wrap-checkbox mb-3 d-block">
                                            <div class="d-flex align-items-center">
                                                <div class="form-check form-check-md mb-0">
                                                    <input class="form-check-input mt-0" type="checkbox"
                                                        id="terms" name="terms" value="1">
                                                    <div class="valid-feedback"></div>
                                                </div>
                                                <p class="mb-0">
                                                    I agree to
                                                    <a href="https://dreamstechnologies.com/privacy-policy/" target="_blank" class="link-primary">Terms of use</a> &
                                                    <a href="https://dreamstechnologies.com/privacy-policy/" target="_blank" class="link-primary">Privacy policy</a>
                                                </p>
                                            </div>
                                            <div class="invalid-feedback" id="termsError" style="display: none;">

                                            </div>
                                            <div class="valid-feedback"></div>
                                        </div>

                                        <div class="mb-4">
                                            <button type="submit" id="submit_button"
                                                class="btn btn-primary w-100 justify-content-center">{{ __('Sign Up')}}</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="mt-5 text-center">
                                    <p class="mb-0 text-gray-9">{{ __('Already have an account?')}} <a
                                            href="{{ Route('signin') }}" class="link-primary">{{ __('Sign In')}}</a></p>
                                </div>
                            </div>
                        </form>
                    </div>

                </div>
            </div>
            <div class="col-lg-6 p-0">
                <div
                    class="d-lg-flex align-items-center justify-content-center position-relative d-lg-block d-none flex-wrap vh-100 overflowy-auto login-bg2 ">
                    <div class="floating-bg">
                        <img src="assets/img/bg/circle-1.png" alt="Img">
                        <img src="assets/img/bg/circle-2.png" alt="Img">
                        <img src="assets/img/bg/emoji-01.svg" alt="Img">
                        <img src="assets/img/bg/emoji-02.svg" alt="Img">
                        <img src="assets/img/bg/emoji-03.svg" alt="Img">
                        <img src="assets/img/bg/emoji-04.svg" alt="Img">
                        <img src="assets/img/bg/right-arrow-01.svg" alt="Img">
                        <img src="assets/img/bg/right-arrow-02.svg" alt="Img">

                    </div>
                    <div class="floating-avatar ">
                        <span class="avatar avatar-xl avatar-rounded border border-white">
                            <img src="assets/img/profiles/avatar-12.jpg" alt="img">
                        </span>
                        <span class="avatar avatar-xl avatar-rounded border border-white">
                            <img src="assets/img/profiles/avatar-01.jpg" alt="img">
                        </span>
                        <span class="avatar avatar-xl avatar-rounded border border-white">
                            <img src="assets/img/profiles/avatar-02.jpg" alt="img">
                        </span>
                        <span class="avatar avatar-xl avatar-rounded border border-white">
                            <img src="assets/img/profiles/avatar-05.jpg" alt="img">
                        </span>
                    </div>
                    <div class="text-center">
                        <img src="assets/img/bg/login-bg-1.svg" class="login-img" alt="Img">
                    </div>
                </div>
            </div>

        </div>



    </div>
</div>
<script src="https://www.gstatic.com/firebasejs/9.6.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.6.0/firebase-messaging-compat.js"></script>
<script type="module" src="assets/js/firebase/firebaseRegister.js" crossorigin="anonymous"></script>
@endsection