@extends('web.layouts.container')

@section('breadcrumb')
    <nav class="nav-breadcrumb" aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{LaravelLocalization::getLocalizedURL(getCurrentLocale(), null, [], true)}}">{{__('main.home_page')}}</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{__('users.new_register')}}</li>
        </ol>
    </nav>
@endsection

@section('content')
    <main>
        <!--start register-->
        <section class="register">
            <div class="container">
                <div class="col-lg-7 col-md-8 col-sm-12 col-xs-12 m-auto">
                    <div class="register-card ">
                        <h5>{{__('users.new_register')}}</h5>
                        <form method="post" action="{{route('user.doRegister')}}">
                            @csrf()
                            <div class="row pt-5">
                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
                                    <div class="form-group">
                                        <input type="text" name="name" class="form-control @error('name') is-invalid @enderror" value="{{old('name')}}" autocomplete="off" />
                                        <label class="floating-label">{{__('users.name')}}</label>
                                        @error('name') <span class="text-danger">{{$message}}</span> @enderror
                                    </div>
                                </div>
                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                    <div class="form-group">
                                        <input type="email" name="email" class="form-control @error('email') is-invalid @enderror" value="{{old('email')}}" autocomplete="off" />
                                        <label class="floating-label">{{__('users.email')}}</label>
                                        @error('email') <span class="text-danger">{{$message}}</span> @enderror
                                    </div>
                                </div>
                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                    <div class="form-group">
                                        <input type="tel" name="phone" class="form-control @error('phone') is-invalid @enderror" value="{{old('phone')}}" autocomplete="off" />
                                        <label class="floating-label">{{__('users.phone')}}</label>
                                        @error('phone') <span class="text-danger">{{$message}}</span> @enderror
                                    </div>
                                </div>
                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                    <div class="form-group">
                                        <input type="date"name="birth_date" class="form-control @error('birth_date') is-invalid @enderror" value="{{old('birth_date')}}" autocomplete="off" />
                                        <label class="floating-label">{{__('users.birth_date')}}</label>
                                        @error('birth_date') <span class="text-danger">{{$message}}</span> @enderror
                                    </div>
                                </div>
                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                    <div class="form-group">
                                        <input type="password" name="password" class="form-control @error('password') is-invalid @enderror" autocomplete="off" />
                                        <label class="floating-label">{{__('users.password')}}</label>
                                        @error('password') <span class="text-danger">{{$message}}</span> @enderror
                                    </div>
                                </div>
                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                    <div class="form-group">
                                        <input type="password" name="password_confirmation" class="form-control" autocomplete="off" />
                                        <label class="floating-label">{{__('users.password_confirmation')}}</label>
                                    </div>
                                </div>
                                 <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                   <div class="form-group">
                                    <div class="custom-control custom-checkbox">
                                        <input {{old('terms') ? 'checked' : ''}} type="checkbox" name="terms" class="" id="customCheck1">
                                        <a target="_blank" href="{{route('ourPages.index', 4)}}">{{__('users.terms')}}</a>
                                        @error('terms') <span class="text-danger">{{$message}}</span> @enderror
                                    </div>
                                   </div>
                                </div>
                            </div>
                            <button class="submit-btn" type="submit">{{__('users.register')}}</button>
                        </form>
                        <p class="sign">{{__('users.have_account')}}<a href="{{route('user.login')}}">{{__('main.login')}}</a></p>
{{--                        <div class="another-option">--}}
{{--                            <div class="or">--}}
{{--                                <p>أو</p>--}}
{{--                                <hr>--}}
{{--                            </div>--}}
{{--                            <div class="buttons">--}}
{{--                                <div class="row">--}}
{{--                                    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">--}}
{{--                                        <button class="butn fb">--}}
{{--                                            <i class="fab fa-facebook-f"></i>--}}
{{--                                            Facebook--}}
{{--                                        </button>--}}
{{--                                    </div>--}}
{{--                                    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">--}}
{{--                                        <button class="butn gm">--}}
{{--                                            <i class="fab fa-google-plus-g"></i>--}}
{{--                                            Gmail--}}
{{--                                        </button>--}}
{{--                                    </div>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        </div>--}}
                    </div>
                </div>
            </div>
        </section>
    </main>
@endsection

@section('inner_js')
    <script>
        $(document).ready(function () {
            $('.navs-container').addClass('page-heading')
        })
    </script>
@endsection