@extends($data['layout'])

@section('title', app_name() . ' | ' . __('labels.frontend.auth.login_box_title'))
@if($data['layout'] == 'frontend.layouts.mobile')
    <link rel="stylesheet" href="{{asset('/design/assets/css/style.css?v=0.37')}}">
    <style>
        .search-n-filter-area {
            display: none !important;
        }
    </style>
@endif
@section('content')


    <!-- customer logins start -->
  {{--  <div class="customer_login mt-32">
        <div class="container">
            <div class="row">
                <!--login area start-->
                <div class="col-md-7 col-lg-6 mx-auto">
                    <div class="account_form">
                            <h2 class="title">login</h2>
                        @if($errors->any())
                            <div class="col-md-12 col-12">
                                <div class="alert alert-danger" role="alert">
                                    <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> {{$errors->first()}}
                                </div>
                            </div>
                        @endif
                        {{ html()->form('POST', route('frontend.auth.login.post'))->id('frm_login')->open() }}
                            <p>
                                {{ html()->label(__('validation.attributes.frontend.email'))->for('email') }}
                                {{ html()->email('email')
                                    ->class('mb-0 form-control')
                                    ->placeholder(__('validation.attributes.frontend.email'))
                                    ->attribute('maxlength', 191)
                                    ->required() }}
                            </p>
                            <p>
                                {{ html()->label(__('validation.attributes.frontend.password'))->for('password') }}

                                {{ html()->password('password')
                                    ->class('mb-0 form-control')
                                    ->placeholder(__('validation.attributes.frontend.password'))
                                    ->required() }}
                            </p>
                            <div class="login_submit">
                                <div class="row">
                                    <div class="col-md-6">
                                        <a href="{{ route('frontend.auth.password.reset') }}">@lang('labels.frontend.passwords.forgot_password')</a>
                                        <br>
                                        <a href="{{ route('frontend.auth.register') }}">Don't have an account? Sign-up here</a>
                                    </div>
                                    <div class="col-md-6 text-right">
                                        <label for="remember">
                                            {{ html()->label(html()->checkbox('remember', true, 1) . ' ' . __('labels.frontend.auth.remember_me'))->for('remember') }}
                                        </label>
                                        <span class="pl-4"><button type="submit" class="btn btn-primary">login</button></span>
                                    </div>
                                </div>
                            </div>

                        {{ html()->form()->close() }}
                    </div>
                </div>
                <!--login area start-->

            </div>
        </div>
    </div> --}}
    <!-- customer login end -->
    <div class="login-register_area" style="@if($data['layout'] == 'frontend.layouts.mobile') margin: 17px 17px;  margin-top: 4%; @else  margin-top: 2%; @endif">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-sm-12 col-md-12 col-xs-12 col-lg-6">
                    
                        @include('includes.partials.messages')
                        {{ html()->form('POST', route('frontend.auth.login.post'))->id('frm_login')->open() }}
                        {{ csrf_field() }}
                            {{-- <input type="hidden" value="" name="verify"> --}}
                            <div class="login-form mb-5">
                                <h4 class="login-title">Login</h4>
                                <div class="row">
                                <p>
                                {{ html()->label(__('validation.attributes.frontend.email'))->for('email') }}
                                {{-- {{ html()->email('email')
                                    ->class('mb-0 form-control')
                                    ->placeholder(__('validation.attributes.frontend.email'))
                                    ->attribute('maxlength', 191)
                                    ->required() }} --}}
                                    <input type="email" value="{{ old('email') }}" pattern="^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$"  required name="email" class="form-control mb-0" placeholder="Your email address ...">
                                    
                            </p>
                            <p>
                                {{ html()->label(__('validation.attributes.frontend.password'))->for('password') }}
                                <div class="d-flex flex-row justify-content-end position-relative">
                                    {{ html()->password('password')
                                    ->class('mb-0 form-control')->id('loginPassword')
                                    ->placeholder(__('validation.attributes.frontend.password'))
                                    ->required() }}
                                    <span class="password-toggle" style="cursor: pointer;" data-toggle-for="loginPassword" onclick="togglePasswordVisibility('loginPassword')">
                                        <i style="position: relative; right: 10px; top: -8px;" class="fa fa-eye-slash"></i>
                                    </span>
                                </div>
                            </p>
                            <div class="login_submit" @if($data['layout'] == 'frontend.layouts.mobile') style="margin: 10px 0px 10px -20px;" @endif>
                                <div class="row @if($data['layout'] == 'frontend.layouts.mobile') ml-10 @endif">
                                <div class="col-md-12 text-right">
                                        <label for="remember">
                                            {{ html()->label(html()->checkbox('remember', true, 1) . ' ' . __('labels.frontend.auth.remember_me'))->for('remember') }}
                                        </label>
                                        {{-- <span class="pl-4"><button type="submit" class="btn btn-primary">login</button></span> --}}
                                    </div>
                                    <div class="col-md-12">
                                        <a href="{{ route('frontend.password.reset') }}"><span>@lang('labels.frontend.passwords.forgot_password')</span></a>
                                        <br>
                                        <a href="{{ route('frontend.auth.register') }}"> <span>Don't have an account? Sign-up here</span> </a>
                                    </div>
                                    
                                    <div class="col-md-12">
                                        <button type="submit" class="login_btn bg-dark rounded-1 text-white" >Login</button>
                                    </div>
                                    
                                </div>
                            </div>
                                </div>
                            </div>
                            {{ html()->form()->close() }}
                    </div>
                    <!-- <div class="col-sm-12 col-md-12 col-lg-6 col-xs-12">
                        <form action="#">
                            <div class="login-form">
                                <h4 class="login-title">Register</h4>
                                <div class="row">
                                    <div class="col-md-6 col-12 mb--20">
                                        <label>First Name</label>
                                        <input type="text" placeholder="First Name">
                                    </div>
                                    <div class="col-md-6 col-12 mb--20">
                                        <label>Last Name</label>
                                        <input type="text" placeholder="Last Name">
                                    </div>
                                    <div class="col-md-12">
                                        <label>Email Address*</label>
                                        <input type="email" placeholder="Email Address">
                                    </div>
                                    <div class="col-md-6">
                                        <label>Password</label>
                                        <input type="password" placeholder="Password">
                                    </div>
                                    <div class="col-md-6">
                                        <label>Confirm Password</label>
                                        <input type="password" placeholder="Confirm Password">
                                    </div>
                                    <div class="col-12">
                                        <button class="register_btn">Register</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div> -->
                </div>
            </div>
        </div>

@endsection
@push('after-scripts')
    <script>
        const login_btn = document.querySelector(".login_btn");
                login_btn.addEventListener("click", (e) => {
                    setTimeout(function(){login_btn.disabled = true; console.log('true')},100);
                    setTimeout(function(){login_btn.disabled = false;console.log('false')},6000);
            });
            function togglePasswordVisibility(fieldId) {
                const field = document.getElementById(fieldId);
                const icon = document.querySelector(`[data-toggle-for="${fieldId}"] i`);

                if (field.type === "password") {
                    field.type = "text";
                    icon.classList.remove("fa-eye-slash");
                    icon.classList.add("fa-eye");
                } else {
                    field.type = "password";
                    icon.classList.remove("fa-eye");
                    icon.classList.add("fa-eye-slash");
                }
            }
    </script>
@endpush