@extends('website.layouts.app')
@section('title',__('titles.login'))
@section('content')
@include('website.layouts.breadcumb',['title' => __('titles.login')])
@section('css')
<link rel="stylesheet" href="{{ asset('assets/css/intlTelInput.css')}}" >
@endsection
<section class="our-compare pt60 pb60">
      <img src="images/icon/login-page-icon.svg" alt="" class="login-bg-icon wow fadeInLeft" data-wow-delay="300ms" style="visibility: visible; animation-delay: 300ms; animation-name: fadeInLeft;">
      <div class="container">
        <div class="row wow fadeInRight" data-wow-delay="300ms" style="visibility: visible; animation-delay: 300ms; animation-name: fadeInRight;">
          <div class="col-lg-6">
            <div class="log-reg-form signup-modal form-style1 bgc-white p50 p30-sm default-box-shadow2 bdrs12">
              <div class="text-center mb40">
                <img class="mb25" src="images/header-logo2.svg" alt="">
                <h2>Sign in</h2>
                <p class="text">Sign in with this account across the following sites.</p>
              </div>
              <div class="mb25">
                <label class="form-label fw600 dark-color">Email</label>
                <input type="email" class="form-control" placeholder="Enter Email">
              </div>
              <div class="mb15">
                <label class="form-label fw600 dark-color">Password</label>
                <input type="text" class="form-control" placeholder="Enter Password">
              </div>
              <div class="checkbox-style1 d-block d-sm-flex align-items-center justify-content-between mb10">
                <label class="custom_checkbox fz14 ff-heading">Remember me
                  <input type="checkbox" checked="checked">
                  <span class="checkmark"></span>
                </label>
                <a class="fz14 ff-heading" href="#">Lost your password?</a>
              </div>
              <div class="d-grid mb20">
                <button class="ud-btn btn-thm" type="button">Sign in <i class="fal fa-arrow-right-long"></i></button>
              </div>
              <div class="hr_content mb20"><hr><span class="hr_top_text">OR</span></div>
              <div class="d-grid mb10">
                <button class="ud-btn btn-white fw400" type="button"><i class="fab fa-google"></i> Continue Google</button>
              </div>
              <div class="d-grid mb10">
                <button class="ud-btn btn-fb fw400" type="button"><i class="fab fa-facebook-f"></i> Continue Facebook</button>
              </div>
              <div class="d-grid mb20">
                <button class="ud-btn btn-apple fw400" type="button"><i class="fab fa-apple"></i> Continue Apple</button>
              </div>
              <p class="dark-color text-center mb0 mt10">Not signed up? <a class="dark-color fw600" href="page-register.html">Create an account.</a></p>
            </div>
          </div>
        </div>
      </div>
    </section>
<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.login.post',['locale' => $locale]) }}" method="post" novalidate class="needs-validation">
                        @csrf
                    <div class="form-style1">
                        <div class="text-center mb40">

                            <h2>@lang('titles.login_msg')</h2>
                            <p class="text">@lang('titles.SignIn')</p>
                          </div>
                          <div class="mb25 form-group">
                            <label class="form-label fw600 dark-color">@lang('attributes.phone')</label>
                            <input required  type="tel"
                                class="form-control phone @if ($errors->has('phone')) is-invalid @endif"
                                placeholder="@lang('attributes.TypePhone') " value="{{ old('phone') }}">


                            @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="checkbox-style1 d-block d-sm-flex align-items-center justify-content-between mb10">
                            <label class="custom_checkbox fz14 ff-heading">
                                @lang('titles.remember_me')
                                <input name="remember" type="checkbox" checked="checked">
                                <span class="checkmark"></span>
                            </label>

                            <a class="fz14 ff-heading" href="{{ route('website.forgot-password.show',['locale'=>$locale]) }}">

                                @lang('titles.forgot_password')
                            </a>
                        </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.login_btn') <i
                                    class="fal fa-arrow-right-long"></i>
                            </button>
                        </div>
                        <p class="dark-color text-center mb0 mt10">
                            @lang('titles.ask_register')
                            <a href="{{ route('website.register',['locale'=>$locale]) }}" class="dark-color fw600">
                                <span>@lang('titles.register')</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
            var phoneInput = $(".phone").intlTelInput({
                preferredCountries: ["om", "kw", "eg", "sa", "qa", "uae", "bh"],
                initialCountry: "auto",
                separateDialCode: true,
                utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/js/utils.js"
            });



        });
    </script>

@endsection