@section('title', __('auth/register.Register'))

@push('style')
<link rel="stylesheet" href="{{mix('css/web/auth/register.css')}}">
@endpush

@push('script')
<script src="{{mix('js/web/auth/register.js')}}"></script>
@endpush

<x-guest-layout>
    <div class="login_wraper">
        <div class="login_wrap_1">
            <div class="login_head_1">
                <a class="navbar-brand" href="{{ route('web_home') }}">
                    <img src="{{config('settings.logo_dark') && Storage::disk('jazeera')->exists(config('settings.logo_dark')) ? Storage::disk('jazeera')->url(config('settings.logo_dark')) : asset("images/web/logo-dark.png")}}">
                </a>
            </div>
            <div class="login_body_1">
                <div class="col-md-12 mt-1 mb-5">
                    <a class="back-btn mb-5 d-inline-block" href="{{ route('web_home') }}"><i class="fa fa-chevron-left"></i> @lang('auth/register.BACK TO HOME PAGE')</a>
                </div>
                <div class="mobile_banner mb-2">
                    <img src="{{ asset('images/web/login-mob-img.png') }}" class="img-fluid">
                </div>
                <div class="addres_form mt-5">
                    <h1 class="mani_head_1 mb-3">@lang('auth/register.Register')</h1>
                    <form id="registerForm" action="{{ route('web_register') }}" method="POST">
                        @csrf
                        <div class="row">
                            <div class="form-group col-md-6  mb-3">
                                <label for="first_name" class="form-label">@lang('auth/register.First Name')<span class="mandatory">*</span></label>
                                <input type="text" value="{{old('first_name')}}" class="form-control" id="first_name" name="first_name">
                                @error('first_name')<small class="form-text red-text text-danger">{{ $message }}</small>@enderror
                            </div>
                            <div class="form-group col-md-6 mb-3">
                                <label for="last_name" class="form-label">@lang('auth/register.Last Name')<span class="mandatory">*</span></label>
                                <input type="text" value="{{old('last_name')}}" class="form-control" id="last_name" name="last_name">
                                @error('last_name')<small class="form-text red-text text-danger">{{ $message }}</small>@enderror
                            </div>
                            <div class="form-group col-md-6 mb-3">
                                <label for="email" class="form-label">@lang('auth/register.Email')<span class="mandatory">*</span></label>
                                <input type="email" value="{{old('email')}}" class="form-control" id="email" name="email">
                                @error('email')<small class="form-text red-text text-danger">{{ $message }}</small>@enderror
                            </div>
                            <div class="form-group col-md-6 mb-3 phone-filed">
                                <label for="phone" class="form-label">@lang('auth/register.Phone Number')<span class="mandatory">*</span></label>
                                <div class="row">
                                    <div class="col-md-5">
                                        <select name="country_code_id" id="country_code_id" name="country_code_id" class="form-control">
                                            @foreach($countries as $country)
                                            <option value="{{$country->id}}" data-description="+{{$country->country_code}}" data-image="{{Storage::disk('jazeera')->url($country->flag)}}" data-title="{{$country->country_code}}" @if(old('country_code_id')==$country->id || (!old('country_code_id') && $country->country_code == '965')) selected @endif><span>{{$country->short_name}} (</span>+{{$country->country_code}}<span>)</span>
                                            </option>
                                            @endforeach
                                        </select>
                                        @error('country_code_id')<small class="form-text red-text text-danger">{{ $message }}</small>@enderror
                                    </div>
                                    <div class="col-md-7">
                                        <input type="tel" value="{{old('phone')}}" id="phone" class="form-control" name="phone">
                                        @error('phone')<small class="form-text red-text text-danger">{{ $message }}</small>@enderror
                                    </div>
                                </div>
                            </div>
                            <div class="form-group col-md-6 mb-3">
                                <label for="password" class="form-label">@lang('auth/register.Password')<span class="mandatory">*</span></label>
                                <input type="password" class="form-control" id="password" name="password">
                                @error('password')<small class="form-text red-text text-danger">{{ $message }}</small>@enderror
                            </div>
                            <div class="form-group col-md-6 mb-3">
                                <label for="cpassword" class="form-label">@lang('auth/register.Confirm Password')<span class="mandatory">*</span></label>
                                <input type="password" class="form-control" id="cpassword" name="cpassword">
                                @error('cpassword')<small class="form-text red-text text-danger">{{ $message }}</small>@enderror
                            </div>
                            <div class="col-md-12 mb-3 d-flex justify-content-between align-items-center">
                                <h4 class="sub_head_3 m-0">@lang('auth/register.Field with') <span style="color:#d20e0e;">*</span> @lang('auth/register.are mandatory')</sp>
                                </h4>
                                <button type="submit" id="btnSubmit" class="submit_btn1">@lang('auth/register.Register')</button>
                            </div>

                            <div class="col-md-12 mb-3">
                                <hr>
                                <h4 class="sub_head_2 text-center m-0">@lang('auth/register.Already have an account?') <a href="login" style="color:#d20e0e;">@lang('auth/register.Login')</a></sp>
                                </h4>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="login_wrap_2"></div>
    </div>
</x-guest-layout>