@extends('frontendv2.layouts.frontend_design')
@section('content')


<section class="w-full h-full">

    <div class=" bg-cultured1 px-8 sm:px-20  pt-12">
        <div class="bg-white w-full h-full">
            <div class=" ">
                <div class="flex">
                    <p class="text-lg capitalize cursor-pointer text-black text-gray1 cursor-pointer">
                        <a href="{{route('webhome')}}">Home</a>
                    </p>
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"
                        xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray1 mx-1 mt-[7px]">
                        <path
                            d="M15.8376 12.5648L10.8516 18.5558C10.5466 19.0138 9.90865 19.1418 9.45065 18.8358C8.99365 18.5308 8.86562 17.8908 9.17062 17.4318L13.7826 12.0028L9.17062 6.57385C8.86562 6.11485 8.99365 5.47583 9.45065 5.16983C9.90865 4.86383 10.5466 4.99183 10.8516 5.44983L15.8376 11.4408C16.0606 11.7768 16.0606 12.2288 15.8376 12.5648Z"
                            fill="currentColor"></path>
                    </svg>
                    <p class="text-lg capitalize text-black">{{$title}}</p>
                </div>
            </div>
        </div>
    </div>

 
<div class="login-page-outer">
    <div class="login-block-outer">
        <div class="login-page">
            <form method="POST" name="customer_login" action="{{ route('customerLoginAction') }}" id="login-form"
                class="push--top-small forward">
                <input type="hidden" name="_token" value="{{ csrf_token() }}" />
                <h4 id="input-title" data-reactid="17">Welcome back</h4>
                <label class="label" id="input-label" for="useridInput" data-reactid="18">
                    Phone Number (required)
                </label>
                <div style="margin-bottom:24px;" data-reactid="19">
                    <div data-reactid="20">
                        <div data-reactid="22">
                            <input type="text" id="useridInput" name="phone_number" value="" class="text-input req"
                                placeholder="Enter register phone number" required />
                        </div>
                    </div>
                    <div id="error-caption"
                        style="font-weight:500;font-size:12px;line-height:24px;color:rgb(203, 56, 11);box-sizing:border-box;"
                        data-reactid="24">
                        <div data-reactid="25"></div>
                    </div>
                </div>
                <div class="next-button-wrapper">
                    <!-- <input type="submit" class="btn submit-btn" value="Login" /> -->
                    <input
                        class=" py-3 bg-[#037ABC] text-white btn submit-btn    hover:border-light-gray disabled:bg-cultured md:w-auto mr-4 px-8 md:px-[36px] lg:px-[54px]"
                        type="submit" value="Login" />
                </div>
                <div class="small push-small--bottom push-small--top" id="sign-up-link-only" data-reactid="32">
                    <p class=" display--inline " data-reactid="33">New User ? <a class="text-[#037ABC]"
                            href="{{ route('customerRegistration') }}">Create an account</a></p>
                </div>

                <div class="small push-small--bottom push-small--top " id="sign-up-link-only" data-reactid="32">
                    <p class=" display--inline">
                        <!-- @if($errors->any())
                    <div class="errorblock text-[red]">{{$errors->first()}}</div>
                    @endif -->
                    </p>
                </div>
            </form>
        </div>
    </div>
</div>

</section>
@endsection 

@section('pagescript')
<script type="text/javascript">
    $(document).ready(function () {
        $('#login-form').validate();
        $('#useridInput').css({
            "padding-left": "8px"
        });
        $('#useridInput').keyup(function () {
            var dInput = this.value;
            if (parseInt(dInput) > 10) {
                $(this).css({
                    "padding-left": ($('.iti__selected-flag').width() + 20) + "px"
                });
                $('.iti--separate-dial-code .iti__selected-flag').show();
            } else {
                $(this).css({
                    "padding-left": "8px"
                });
                $('.iti--separate-dial-code .iti__selected-flag').hide();
            }
            if (dInput != "") {
                $('.submit-btn').removeClass('grey');
            } else {
                $('.submit-btn').addClass('grey');
            }
        });
    });
    var input = document.querySelector("#useridInput");
    window.intlTelInput(input, {
        // allowDropdown: false,
        // autoHideDialCode: false,
        // autoPlaceholder: "off",
        // dropdownContainer: document.body,
        // excludeCountries: ["us"],
        // formatOnDisplay: false,
        // geoIpLookup: function(callback) {
        //   $.get("http://ipinfo.io", function() {}, "jsonp").always(function(resp) {
        //     var countryCode = (resp && resp.country) ? resp.country : "";
        //     callback(countryCode);
        //   });
        // },
        // hiddenInput: "full_number",
        // initialCountry: "auto",
        // localizedCountries: { 'de': 'Deutschland' },
        // nationalMode: false,
        // onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'],
        // placeholderNumberType: "MOBILE",
        preferredCountries: [],
        separateDialCode: true,
        utilsScript: "{{ asset('frontend/js/phone/utils.js')}}",
    });
</script>
@stop