@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"
                    >
                        <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="{{ $title ?? "" }}"
                            />
                        </h3>
                        <p class="fs-4">{{ __('users::users.log_in') }}</p>
                        <form action="{{ route('web.users.login') }}" method="post" class="ajax-form">
                            @csrf
                            <div class="row mt-3">
                                <div class="col-md-12 col-lg-12 col-sm-12 col-x-12">
                                    <div class="input-group mb-3">
                                        <input type="text"
                                            name="{{ $loginInputName }}"
                                            required
                                            value="{{ old($loginInputName) }}"
                                            class="form-control {{ $errors->has($loginInputName) ? 'is-invalid' : '' }}"
                                            placeholder="{{ __("users::users.$loginInputName") }}"
                                            aria-label="{{ __("users::users.$loginInputName") }}"
                                            maxlength="11"
                                            oninput="this.value = this.value.replace(/[^0-9]/g, '')"
                                            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>
                                        <span class="input-group-text orange-color" id="basic-addon1">
                                            <i class="fa-light fa-mobile"></i>
                                        </span>
                                    </div>
                                </div>
                                <div class="col-md-12 col-lg-12 col-sm-12 col-x-12">
                                    <div class="input-group mb-3">
                                        <input type="password" name="password" required
                                               class="form-control {{ $errors->has('password') ? 'is-invalid' : '' }}"
                                               id="inputPassword"
                                               placeholder="{{ __('users::users.password') }}"
                                               aria-label="{{ __('users::users.password') }}"/>
                                        <span
                                            class="input-group-text orange-color toggle-password"
                                            id="togglePassword"
                                            style="cursor: pointer">
                                          <i class="fa-light fa-eye-slash" id="passwordIcon"></i>
                                        </span>
                                    </div>
                                </div>
                                <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12 mt-3">
                                    <div class="row">
                                        <div class="col-md-8 col-lg-8 col-sm-12 col-xs-12">
                                            <a href="{{ route('web.users.get_forget_password') }}"
                                               class="grey-text hvr-orange fs-6">
                                                {{ __('users::users.forget_password') }}
                                            </a>
                                        </div>
                                        <div class="col-md-4 col-lg-4 col-sm-12 col-xs-12 text-end">
                                            <div class="form-check text-grey">
                                                <label class="form-check-label fs-6 grey-text" for="flexCheckDefault">
                                                    {{ __('users::users.remember_me') }}
                                                    <input
                                                        class="form-check-input"
                                                        type="checkbox"
                                                        name="remember"
                                                        {{ old('remember') ? 'checked' : '' }}
                                                        id="flexCheckDefault"/>
                                                </label>
                                            </div>
                                        </div>
                                    </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.login2') }}">
                                        <span class="fs-7">
                                          {{ __('users::users.login2') }}
                                          <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>
                            <div class="mt-4 grey-text fs-6">
                                {{ __('users::users.no_account') }}
                                <a href="{{ getRegisterRoute() }}"
                                   class="grey-text hvr-orange underline-text">
                                    {{-- __('users::users.new_registration') --}}
                                    {{ __('main.subscribe_now') }}
                                </a>
                            </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/login.svg') }}"
                            src="{{ asset('assets/web/images/login/login.svg') }}"
                            width="814px"
                            height="619px"
                            class="img_contain lazyloaded slide_up_down"
                            alt="..."
                        />
                    </div>
                </div>
            </div>
        </section>
    </main>

@endsection