@extends('layouts.authentication.master')
@section('title', 'Login')

@section('css')
@endsection

@section('style')
    <style>
        .login-card .login-main .theme-form .show-hide {
            top: 70% !important;
        }

        img {
            width: 250px;
            height: auto !important;
        }
    </style>
@endsection

@section('content')
    @php
        // Set static logo path
        $logo = asset('assets/images/logo/login-logo.svg');
    @endphp
    <div class="container-fluid p-0">
        <div class="row m-0">
            <div class="col-12 p-0">
                <div class="login-card">
                    <div>
                        <div>
                            <h1><a class="logo">
                                    <img class="img-fluid for-light" src="{{ $logo }}" alt="log-in page">
                                </a></h1>
                        </div>
                        <div class="login-main">
                            @include('layouts.alerts')
                            <form class="theme-form" method="POST" action="{{ route('forget-password.post') }}">
                                @csrf
                                <h4 style="color: #203468; font-weight: bold;">Forgot Password</h4>
                                <div class="form-group">
                                    <label class="col-form-label">Email Address</label>
                                    <input class="form-control" name="email" id="email" type="text" required=""
                                        placeholder="Enter email.">
                                </div>
                              
                                <div class="form-group mb-0">
                                    <div class="mt-5 text-center">
                                        <button class="btn btn-primary btn-block custom_btn_black" type="submit">Send Code</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
<script>
    var sessionTime = parseInt("{{ config('session.lifetime') }}") * 60 * 1000; // Convert minutes to milliseconds

    function checkSession() {
        fetch("{{ route('session.check') }}")
            .then(response => response.json())
            .then(data => {
                if (!data.active) {
                    console.log("Session expired! Reloading...");
                    location.reload();
                }
            })
            .catch(error => console.error("Session check failed", error));
    }

    // Run session check every 2 minutes
    setInterval(checkSession, 120000);

    // Final check before session expires (1 minute before expiry)
    setTimeout(() => {
        console.log("Session about to expire! Checking...");
        checkSession();
    }, sessionTime - 60000);
</script>

@endsection