@extends('web.layouts.layout')

@section('content')

    <main class="mt-100">
        <!-- contact section-->
        <section class="section_padding contact-section">
            <div class="container">
                <div class="row">
                    <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12 wow slow fadeInUp">
                        <form action="{{ route('web.users.post_forget_password') }}" method="post" class="ajax-form">
                            @csrf
                            <h3 class="d-flex fw-bold orange-color mb-2">
                                {{ __('main.welcome_message') }}
                                <img
                                    data-src="{{ asset('assets/web/images/icons/welcome.svg') }}"
                                    src="{{ asset('assets/web/images/icons/welcome.svg') }}"
                                    width="20px"
                                    height="25px"
                                    class="img_contain lazyloaded ms-1 mt-1 slide_left_right"
                                    alt="..."/>
                            </h3>
                            <p class="fs-4">{{ __("users::users.enter_phone") }}</p>
                            <div class="row">
                                <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12 wow slow fadeInUp">
                                    <div class="input-group mt-3">
                                        <input
                                            type="{{ $input_type }}"
                                            name="{{ $field_key }}"
                                            required
                                            value="{{ old($field_key) }}"
                                            class="form-control @error($field_key) is-invalid @enderror"
                                            placeholder="{{ __("users::users.$field_key") }}"
                                            aria-label="{{ __("users::users.$field_key") }}"
                                            style="width: 68%;"
                                        />
                                        <select name="country_code"
                                                class="form-control phone"
                                                dir="ltr"
                                                style="text-align: center;">
                                            @if(isset($countries))
                                                @foreach($countries as $country)
                                                    <option
                                                        value="{{ $country->iso2 }}" @selected(old('country_code') == $country->iso2)>
                                                        {{ $country->country_code }}
                                                    </option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="nav_btns d-inline mt-4">
                                <button type="submit" class="btn btn-primary half-rounded hvr-txt-trans">
                                    <div class="txt" data-text="{{ __('users::users.phone_confirm') }}">
                                        <span class="fs-7">
                                            {{-- __('main.send') --}}
                                          {{ __('users::users.phone_confirm') }}
                                          <img
                                              data-src="{{ asset('assets/web/images/icons/arrows.svg') }}"
                                              src="{{ asset('assets/web/images/icons/arrows.svg') }}"
                                              alt="arrows"
                                              class="lazyload img_contain ms-2"/>
                                        </span>
                                    </div>
                                </button>
                            </div>
                        </form>
                    </div>
                    <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12 wow slow fadeInUp">
                        <img
                            data-src="{{ asset('assets/web/images/login/register.svg') }}"
                            src="{{ asset('assets/web/images/login/register.svg') }}"
                            width="814px"
                            height="619px"
                            class="img_contain lazyloaded slide_up_down"
                            alt="..."
                        />
                    </div>
                </div>
            </div>
        </section>
    </main>

@endsection