@extends('layouts.app_auth')

@section('title', 'Login')
@section('login', 'active')

@section('css')
<style>
    .login-wrap{
        width:100%;
        margin:auto;
        max-width:450px;
        min-height:680px;
        position:relative;
        font:600 16px/18px 'Open Sans',sans-serif;
    }

    .hr{
            height:2px;
            margin:60px 0 20px 0;
            background:rgba(255,255,255,.2);
        }

    .disabledbutton {
        pointer-events: none;
        opacity: 0.4;
    }

    a.hiddenLink {visibility:hidden;}
    .visitors{
        line-height: 1px;
        align: center;
        width: fit-content;
        display: flex;
        flex-direction: column;
        justify-content: revert;
        align-items: start;
        border: 1px solid grey;
        padding: 10px;
        top: 1px;
        font-size: 11px;
        font-family: Arial, Helvetica, sans-serif;
    }
</style>
@endsection

@section('content')
<form action="{{ route('login') }}" method="POST">
    @csrf
    <div class="sign-in-htm">
        <div class="group">
            <label for="user" class="label">No.Kad Pengenalan</label>
            <input id="user" type="text" class="input" name="username" value="{{ Request()->username }}" required autocomplete="username" autofocus>
            <span style="color: grey"><small>Sila masukkan No. Kad Pengenalan 12 digit sahaja tanpa (-)<small></span>
        </div>
        <div class="group">
            <label for="pass" class="label">Kata Laluan</label>
            <input id="pass" type="password" class="input" data-type="password" name="password" required autocomplete="current-password">
        </div>
        <div class="group">
            <input id="check" type="checkbox" class="check" name="remember" {{ old('remember') ? 'checked' : '' }}>
            <label for="check"><span class="icon"></span>&nbsp;&nbsp;Ingati Saya</label>
        </div>
        <div class="group">
            <button type="submit" class="button">Log Masuk</button>
        </div>
       
        <div class="hr"></div>
        <div class="foot-lnk">
            <a href="{{ route('password.request') }}">Terlupa Kata Laluan?</a>  
            <br>
            <br>
            <a href="admin/login">Admin Login</a>
        </div>
    </div>
</form>

@php
use App\Visitor;
$yesterday_visit = Visitor::first()->last_visit ?? null ;
@endphp

<div id="counter" class="foot-lnk" style="margin-top: 10px; display: flex; justify-content: center;">
    <div class="visitors">
        <p>Visitors</p>
        <p class="visitors-total">Total: <span id="total-visit"></span></p>
        <p class="visitors-today">Today: <span id="today-visit"></span></p>
        <p class="visitors-yesterday">Yesterday: <span id="yesterday-visit">{{$yesterday_visit}}</span></p>
    </div>
</div>
@endsection

<script>
(function() {

    const idleDurationSecs = 180;    // X number of seconds
    const redirectUrl = 'https://ssipr.selangor.gov.my';  // Redirect idle users to this URL
    let idleTimeout; // variable to hold the timeout, do not modify

    const resetIdleTimeout = function() {

        // Clears the existing timeout
        if(idleTimeout) clearTimeout(idleTimeout);

        // Set a new idle timeout to load the redirectUrl after idleDurationSecs
        idleTimeout = setTimeout(() => location.href = redirectUrl, idleDurationSecs * 1000);
    };

    // Init on page load
    resetIdleTimeout();

    // Reset the idle timeout on any of the events listed below
    ['click', 'touchstart', 'mousemove'].forEach(evt => 
        document.addEventListener(evt, resetIdleTimeout, false)
    );

})();
</script>