@extends('website.layouts.app')
@section('title',__('titles.register'))
@section('css')
<link rel="stylesheet" href="{{ asset('/assets/css/intlTelInput.css')}}" >

@endsection
@section('content')
@include('website.layouts.breadcumb',['title' => __('titles.register')])
<section>
    <div class="container">
      <div class="row d-flex ">
        <div class="col-lg-6 position-relative">
            <div class="log-reg-form">
                <div class="navtab-style2">
                    <form action="{{ route('website.register.post',['locale' => $locale]) }}" method="post" novalidate class="needs-validation">
                        @csrf
                    <div class="form-style1">
                        <div class="text-center mb40">

                            <h2>@lang('titles.register_msg')</h2>
                            <p class="text">@lang('titles.SignUp')</p>
                          </div>
                        <div class="mb25 form-group">
                            <label class="form-label fw600 dark-color">@lang('attributes.name')</label>
                            <input required name="name" type="name" class="form-control @if ($errors->has('name')) is-invalid @endif" placeholder="@lang('attributes.TypeName') ">
                            @if ($errors->has('name'))
                                <span class="invalid-feedback">{{ $errors->first('name') }}</span>
                            @else
                                <div class="invalid-feedback">@lang('validation.required', ['attribute' => __('attributes.name')])
                                </div>
                            @endif
                        </div>
                        <div class="mb25 form-group">
                            <label class="form-label fw600 dark-color">@lang('attributes.email')</label>
                            <input required name="email" type="email" class="form-control @if ($errors->has('email')) is-invalid @endif" placeholder="@lang('attributes.TypeEmail') ">
                            @if ($errors->has('email'))
                                <span class="invalid-feedback">{{ $errors->first('email') }}</span>
                            @else
                                <div class="invalid-feedback">@lang('validation.required', ['attribute' => __('attributes.mobile')])
                                </div>
                            @endif
                        </div>
                        <div class="mb25 form-group">
                            <label class="form-label fw600 dark-color">@lang('attributes.phone')</label>
                            <input required name="phone" type="phone" class="form-control phone @if ($errors->has('phone')) is-invalid @endif" placeholder="@lang('attributes.TypePhone') ">
                            @if ($errors->has('phone'))
                                <span class="invalid-feedback">{{ $errors->first('phone') }}</span>
                            @else
                                <div class="invalid-feedback">@lang('validation.required', ['attribute' => __('attributes.phone')])
                                </div>
                            @endif
                        </div>
                        <div class="mb15 form-group">
                            <label class="form-label fw600 dark-color">@lang('attributes.Password')</label>
                            <input required name="password" type="password" class="form-control @if ($errors->has('password')) is-invalid @endif" placeholder="@lang('attributes.TypePassword')">
                            @if ($errors->has('password'))
                                <span class="invalid-feedback">{{ $errors->first('password') }}</span>
                            @else
                                <div class="invalid-feedback">@lang('validation.required', ['attribute' => __('attributes.password')])
                                </div>
                            @endif

                        </div>

                        <div class="mb15 form-group">
                            <label class="form-label fw600 dark-color">@lang('attributes.PasswordConfirmation')</label>
                            <input required name="password_confirmation" type="password"
                                class="form-control @if ($errors->has('password_confirmation')) is-invalid @endif"
                                placeholder="@lang('attributes.TypePasswordConfirmation')">
                            @if ($errors->has('password_confirmation'))
                                <span class="invalid-feedback">{{ $errors->first('password_confirmation') }}</span>
                            @else
                                <div class="invalid-feedback">@lang('validation.required', ['attribute' => __('attributes.PasswordConfirmation')])
                                </div>
                            @endif

                        </div>

                        <div class="col-md-12">
                            <div class="form-group">
                                @if ($errors->any())
                                    <h5 class="text-danger float-left">{{ $errors->first() }}</h5>
                                    <br>
                                @endif
                            </div>
                        </div>
                        <div class="d-grid mb20">
                            <button class="ud-btn btn-thm" type="submit">
                                @lang('titles.register_btn')<i
                                    class="fal fa-arrow-right-long"></i>
                            </button>
                        </div>
                        <p class="dark-color text-center mb0 mt10">@lang('titles.ask_login')
                        <a href="{{ route('website.login',['locale'=>$locale]) }}"
                        class="dark-color fw600">
                            <span>@lang('titles.login')</span>
                        </a>

                    </p>
                    </div>
                    </form>
                </div>

            </div>
        </div>
        <div class="col-lg-6 wow fadeInUp" data-wow-delay="100ms" style="visibility: visible; animation-delay: 100ms; animation-name: fadeInUp;">
            <div class="about-box2">
                <h4 class="title">The New Way to Find <br class="d-none d-xl-block"> Your Home</h4>
                <p class="text fz15">From as low as $10 per day with <br class="d-none d-xl-block"> limited time offer discounts.</p>
                <a href="page-property-single-v1.html" class="ud-btn btn-thm">How İt Works<i class="fal fa-arrow-right-long"></i></a>
                <img class="img-1" src="{{ asset('/assets/images/login.png') }}" alt="">
            </div>
        </div>
      </div>
    </div>
</section>

@endsection
@section('js')
    <script src="{{ asset('/assets/js/intlTelInput-jquery.min.js')}}" ></script>
    <script src="https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/js/intlTelInput.min.js"></script>

    <script src="{{ asset('/assets/js/validate.js') }}"></script>
    <script>


        $(document).ready(function() {
            "use strict";
            // Phone
            $(".phone").intlTelInput({
                preferredCountries: ["uae","kw", "eg", "sa"],
                separateDialCode: true,
                hiddenInput: "full",
            });
        });
    </script>
@endsection