@extends('layouts.v2.frontend')
@section('css')
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css">
@endsection
@section('content')
<div class="login-section pt-2">
  <div class="row gx-0">
      <div class="col-xl-6 col-lg-6">
          <div class="left-img shine-effect">
              <img src="{{url('v2/images/contact-img.png')}}" alt="">
          </div>
      </div>
      <div class="col-xl-6 col-lg-6">
          <div class="login-form-area ">
            <h5 class="">{{ __('Register') }}</h5>
            @if (session('controller_error'))
              <div class="alert alert-danger">
                  {{ session('controller_error') }}
              </div>
            @endif
            <form id="sign_up" method="POST" action="{{ route('register') }}">
                @csrf
                <div class="row">
                  <div class="col-md-6">
                    <div class="mb-3">
                      <label for="name" >{{ __('Name') }}</label>
                      <input id="name" oninput="filterString(this);" type="text" class="@error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" required autocomplete="name" autofocus>
                      <span id="name-error" class="text-danger small"></span>
                      @error('name')
                          <span class="invalid-feedback" role="alert">
                              <strong>{{ $message }}</strong>
                          </span>
                      @enderror
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="mb-3">
                      <label for="email" >{{ __('Email') }}</label>
                      <input id="email" oninput="validateEmail();" type="email" class=" @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email">
                      <span id="email-error" class="text-danger small"></span>
                      @error('email')
                          <span class="invalid-feedback" role="alert">
                              <strong>{{ $message }}</strong>
                          </span>
                      @enderror
                    </div>
                  </div>
                </div>
                <div class="row">
                <div class="col-md-12">
                <div class="mb-3">
                  <label for="date_of_birth" >{{ __('Date of Birth') }}</label>
                  <input id="date_of_birth" type="text" placeholder="mm-dd-yyyy" class="@error('date_of_birth') is-invalid @enderror" name="date_of_birth" value="{{ old('date_of_birth') }}" required autocomplete="off" readonly>
                  <span id="dob-error" class="text-danger small"></span>
                      @error('date_of_birth')
                          <span class="invalid-feedback" role="alert">
                              <strong>{{ $message }}</strong>
                          </span>
                      @enderror
                </div>
                </div>
                </div>

                <div class="row">
                <label for="phone" >{{ __('Phone') }}</label>
                  <div class="col-md-8">
                    <div class="mb-3">
                       
                        <div class="row">
                          <div class="col-3 pe-2" >
                            <div class="d-flex style="min-width: 65px;">
                              <span class="input-group-text no-border-right-radius-input-group-tex pointer-event">+</span>
                              <input id="phone_country_code" type="text" style="height: 50px; min-width: 40px; padding: 0 0 !important; z-index: 1;" oninput="validateInputNumber()" class="number_validation @error('phone_country_code') is-invalid @enderror  no-border-left-radius" name="phone_country_code" value="1"  placeholder="" maxlength="2"  required  readonly>
                              <input type="hidden" id="phone_country_code_hidden" name="phone_country_code" value="{{ old('phone_country_code') ?? '1' }}">
                            </div>
                          </div>
                          <div class="col-9 p-0-mobile">
                              <input id="phone_number" type="text" oninput="formatPhoneNumber()" class="@error('phone_number') is-invalid @enderror" name="phone_number" value="{{ old('phone_number') }}" placeholder="" maxlength="12"  required>
                              <input type="hidden" id="phone_number_hidden" name="phone_number" value="{{ old('phone_number') }}">
                            </div>
                            <div class="col-md-12">
                              <div id="verification-status" class="mt-2"></div>
                                <span id="phone-error" class="text-danger small"></span>
                                  @error('phone_country_code')
                                    <span class="invalid-feedback d-block" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                  @enderror
                                  @error('phone_number')
                                    <span class="invalid-feedback d-block" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                  @enderror
                          </div>
                        </div>
                    </div>
                    
                  </div>
                  <div class="col-md-4">
                    <div class="mb-3">
                        <div id="otp-section" class="row d-flex flex-column align-items-center d-none">
                            <div class="col-md-12 col-sm-12">
                                <input id="otp" type="text" class="form-control otp_sign_up_input" placeholder="Enter code" maxlength="6">
                                <span id="otp-error" class="text-danger small"></span>
                            </div>
                            <div class="col-md-12 col-sm-12 d-flex justify-content-between otp_sign_up_row">
                                <a href="javascript:void(0);" class="text-primary verify_otp_btn" id="verify_otp">Verify</a>
                                <a href="javascript:void(0);" class="text-primary resend_otp_btn" id="resend_otp">Resend</a>
                            </div>
                        </div>


                        <div class="d-flex justify-content-center flex-column align-items-center">
                            <!-- 'Verified' Status -->
                            <span id="verified" class="text-success d-none">Verified</span> <!-- Removed </br> tag -->

                            <!-- 'Change Number' Link -->
                            <a href="javascript:void(0);" class="text-primary d-none verify-again">Change Number</a> <!-- Adjusted margin-top -->
                        </div>

                        <!-- The 'Verify' Button (Center-aligned) -->
                        <div class="d-flex justify-content-center">
                            <a href="javascript:void(0);" id="verify-link" class="text-primary disabled" disabled>Verify</a>
                        </div>

                        <input type="hidden" id="is_varified_user" name="is_varified_user"  value="{{ old('is_varified_user', '0') }}" />
                    </div>
                </div>
 
                
                </div>

                <div class="row">

                  <div class="col-md-6">
                    <div class="mb-3">
                      <label for="password">{{ __('Password') }}</label>
                      <input id="password" type="password" class=" @error('password') is-invalid @enderror" name="password" required autocomplete="new-password">
                      <span id="password-error" class="text-danger small"></span>
                      @error('password')
                          <span class="invalid-feedback" role="alert">
                              <strong>{{ $message }}</strong>
                          </span>
                      @enderror
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="mb-3">
                      <label for="password-confirm">{{ __('Confirm Password') }}</label>
                      <input id="password-confirm" type="password" name="password_confirmation" required autocomplete="new-password">
                      <span id="password-confirm-error" class="text-danger small"></span>
                    </div>             
                  </div>

                </div>

                <div class="mb-4">
                    <!-- Hidden input to ensure the opt_in field is sent with a value of 0 if unchecked -->
                    <input type="hidden" name="opt_in" value="0">
                
                    <div class="form-group form-check remember-form opt_btn d-flex align-items-center">
                        <input type="checkbox" class="form-check-input mt-0" name="opt_in" id="opt_in" value="1" checked>
                        <label class="form-check-label ms-2" for="opt_in">
                            I agree to opt in for SMS updates. Read
                            <a href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#termsModal" style="color: #fa4617; text-decoration: none;" 
                            onmouseover="this.style.textDecoration='underline'" 
                            onmouseout="this.style.textDecoration='none'">
                                terms & conditions
                            </a>.
                        </label>
                    </div>
                </div>