@extends('layouts.landing_page.master')

@section('title', __('Login'))

@push('styles')
<meta http-equiv="cache-control" content="private, max-age=0, no-cache">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="expires" content="0">
<link href="{{ asset('frontend/styles/css/page-css/login-register-page.css') }}" rel="stylesheet">
@endpush

@section('content')
    <section id="signin" class="h-100vh">
        <div class="container bgm-shadows">
            <div class="row">
                <div class="col-lg-7 col-md-12 col-sm-12 col-12 my-auto">
                    <img class="d-block" src="{{ asset('frontend/images/logo.png') }}" alt="..." width="95px"
                         height="95px" />
                    <h2 class="lgm-title mt-2">{{ __('Sign In') }}</h2>
                </div>
                <div class="col-lg-1 col-md-12 col-sm-12 col-12"></div>
                <div class="col-lg-4 col-md-12 col-sm-12 col-12 p-0">
                    @if($isLogin == "Yes")
                    <div class="login-section">
                        <form action="javascript:void(0)" method="POST" onsubmit="return false;" id="formLogin">
                            <div class="grid md:grid-cols-1 gap-3">
                                <div class="relative z-0 w-full mb-1 group">
                                    <input type="text" name="email" id="email"
                                        class="form-control email-validation border-clr p-2.5 w-full text-sm text-gray-900 rounded-lg bg-transparent border-0 border-b-2 border-gray-700 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer"
                                        placeholder="" aria-describedby="inputGroupPrependEmail" autofocus onkeydown="keyupEvent(event)" autocomplete="off"/>
                                    <label for="email" class="ml-2 p-2 py-0 peer-focus:font-medium absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white">{{ __('Email Or Username') }}</label>
                                </div>
                                <div class="form-group mb-2">
                                    <div class="relative z-0 w-full group">
                                        <input type="password" id="password" name="password" class="form-control border-clr p-2.5 w-full text-sm text-gray-900 bg-transparent border-gray-300 appearance-none focus:outline-none border-0 focus:ring-0 focus:border-indigo-400 peer pl-15 password login-form signin-input w-full"
                                            aria-label="password" placeholder="" value="" autocomplete="off">
                                        <label for="password" class="ml-2 p-2 py-0 peer-focus:font-medium absolute text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10">{{ __('Password') }}</label>
                                        <div class="input-group-prepend rounded-right"> <i class="cursor-pointer bi bi-eye" onclick="passwordToText($(this))"></i> </div>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex align-middle justify-between mt-4 txt-titles mflex-wraps">
                                @if ($loginDays == "Yes")
                                <div class="flex items-center w-100">
                                    <input id="remember" type="checkbox" name="remember" value="" class="w-4 h-4 text-amber-900-600 bg-gray-100 border-gray-300 rounded dark:ring-offset-ring-yellow-950  dark:bg-gray-700 dark:border-gray-600">
                                    <label for="remember" class="ms-2 text-sm font-medium remember-txt">{{ __('Remember Me') }}</label>
                                </div>
                                @endif
                                <div class="w-100 text-end">
                                    <a href="{{ route('member.password.request') }}" class="pwd-title float-end">{{ __('Forgot Your Password?') }}</a>
                                </div>
                            </div>
                            <button type="submit" class="w-full primarym-btn text-center mt23" id="login-btn"><i class="bi bi-box-arrow-in-right me-1"></i>{{ __('Sign In') }}</button>
                        </form>
                        <div class="text-center mt-3">
                            <p class="txt-title">{{ __('Don’t Have An Account?') }} <a href="{{ route('member.register') }}" class="linked">{{ __('Sign Up') }}</a></p>
                        </div>
                    @else
                        <div id="failed_sign_in_box">
                            <div class="guest-box fw-bold text-danger">
                                <h2 class="title text-danger">{{__('Too many failed login attempts')}}.</h2>
                                <p class="mb-3">{{__('You have exceeded your login attempt. The system will now closed')}}.</p>
                                <p class="mb-3">{{__('Contact your system administrator about your login status')}}.</p>
                                <p class="mb-3 timer" data-minutes-left="{{ $totalLockMinute }}"></p>
                            </div>
                    </div>
                    <div id="failed_sign_in_box" style="display:none;">
                        <div class="guest-box">
                            <h2 class="title">{{__('Too many failed login attempts')}}</h2>
                            <span class="lock-out-msg"></span>
                            <span class="mb-3 timer" data-seconds-left=""><span class="me-1 fw-bold">Time remaining: </span></span>
                        </div>
                    @endif

                    <div id="failed_sign_in_box" style="display: none">
                        <div class="guest-box fw-bold text-danger">
                            <h2 class="title text-danger">{{__('Too many failed login attempts')}}.</h2>
                            <p class="mb-3">{{__('You have exceeded your login attempt. The system will now closed')}}.</p>
                            <p class="mb-3">{{__('Contact your system administrator about your login status')}}.</p>
                            <p class="mb-3 timer" data-minutes-left="{{ $totalLockMinute }}"></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
    <script src="{{ asset('frontend/js/page-js/jquery.simple.timer.js') }}"></script>
    <script>
        window.Icons = @json(getIconClassMap());

        function renderIconTag(name, extraClass = 'me-1') {
            const iconClass = window.Icons?.[name];
            if (!iconClass) return '';
            return `<i class="${extraClass} ${iconClass}"></i>`;
        }
    </script>
    <script>
        var loginIdleTime = "{{ getSiteSettings('login_idle_time') }}";
    </script>
    <script src="{{asset('frontend/js/page-js/login.js')}}"></script>
@endpush