@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="login-page">
    <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>
                        <p class="dark-color text-center mb0 mt10">
                            @lang('titles.registerAsOffice')
                            <a href="{{ route('website.register-office',['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"
            // });


            $(".phone").intlTelInput({
                preferredCountries: ["sa", "gb"],
                separateDialCode: true,
                hiddenInput: "full",
                utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/js/utils.js"
            });

        });
    </script>

@endsection