@extends('layouts.client')
@section('title', 'Login')

@section('content')
    <section id="login" class="animation-fade-in min py-40"
        style="
            background: url('img/bg-login.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            ">
        <div class="w-full container grid md:grid-cols-2 md:mt-0 md:max-w-5xl xl:p-0">
            <div class="flex flex-col items-center flex-col justify-center h-full">
                <h1 class="text-3xl md:text-4xl xl:text-5xl font-bold text-blue-700">
                    Sign In to Rechage Direct
                </h1>
                <img src="img/img_login.png" alt="" />
            </div>
            <div class="p-6 space-y-4 md:space-y-6 sm:p-8">
                <h1 class="text-center mb-0 text-2xl text-blue-800 font-bold md:text-3xl uppercase">
                    USER LOGIN
                </h1>
                <form id="loginForm" class="space-y-4 md:space-y-6" method="POST" action="{{ route('login') }}">
                    @csrf
                    <div>
                        @error('email')
                            <span class="invalid-feedback text-red-500" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                        <label for="email" class="block mb-2 text-base font-medium text-gray-900">Email address</label>
                        <input type="email" id="email" name="email" value="{{ old('email') }}" required
                            autocomplete="email" autofocus
                            class="@error('email')
                            is-invalid @enderror px-4 py-2 transition duration-300 w-full border border-gray-300 rounded focus:border-transparent focus:outline-none focus:ring-4 focus:ring-blue-200" />

                    </div>
                    <div>
                        <label class="font-medium text-base block mb-1 mt-6 text-gray-700" for="password">
                            Password
                        </label>
                        <div class="relative w-full">
                            <div class="absolute inset-y-0 right-0 flex items-center px-2">
                                <input class="hidden js-password-toggle" id="toggle" type="checkbox" />
                                <label class="rounded px-2 py-1 text-xl text-gray-600 cursor-pointer js-password-label"
                                    for="toggle"><i class="ri-eye-line"></i></label>
                            </div>
                            <input
                                class="@error('password')
                                is-invalid @enderror px-4 py-2 transition duration-300 w-full border border-gray-300 rounded focus:border-transparent focus:outline-none focus:ring-4 focus:ring-blue-200 js-password"
                                id="password" type="password" autocomplete="current-password" required name="password" />
                            @error('password')
                                <span class="invalid-feedback text-red-500" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                    </div>
                    <div class="flex items-center justify-between">
                        <div class="flex items-start">
                            <div class="flex items-center h-5">
                                <input id="remember" name="remember" aria-describedby="remember" type="checkbox"
                                    class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300"
                                    {{ old('remember') ? 'checked' : '' }} />
                            </div>
                            <div class="ml-3 text-sm">
                                <label for="remember" class="text-gray-500"> {{ __('Remember Me') }}</label>
                            </div>
                        </div>
                        <a href="{{ route('password.request') }}"
                            class="text-sm font-medium text-primary-600 hover:underline">Forgot password?</a>
                    </div>

                    <div class="text-end relative">
                        <button type="submit" id="loginButton"
                            class="w-full py-2 rounded-lg text-neutral-50 bg-blue-500 text-center hover:opacity-80 relative flex items-center justify-center">
                            <div class="flex">
                                <span class="me-3">Login</span>
                                <div class="flex flex-row space-x-4">
                                    <div
                                        class="w-6 h-6 rounded-full animate-spin border-4 border-solid border-neutral-50 border-t-transparent hidden">
                                    </div>
                                </div>
                            </div>
                        </button>
                    </div>
                    <p class="text-sm font-light text-gray-500">
                        Don’t have an account yet?
                        <a href="{{ route('register') }}"
                            class="font-medium text-primary-600 hover:underline text-blue-500">Sign up
                        </a>
                    </p>
                </form>
            </div>
        </div>
    </section>
@endsection

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const status = "{{ session('status') }}";
        const message = "{{ session('message') }}";

        if (status === 'Success') {
            toastr.success(message);
        } else if (status === 'Error') {
            toastr.error(message);
        }

        var loginForm = document.getElementById('loginForm');

        loginForm.addEventListener('submit', function() {
            // Get the button and spinner elements
            var loginButton = document.getElementById('loginButton');
            var spinner = loginButton.querySelector('.animate-spin');

            // Disable the button and remove the spinner animation
            loginButton.disabled = true;
            //  spinner.classList.remove('animate-spin');
            spinner.classList.remove('hidden');
        });
    });
</script>

<script>
    window.addEventListener("load", (event) => {
        $(".js-password-toggle").on("click", function() {
            var passwordInput = $(".js-password");

            if (passwordInput.attr("type") === "password") {
                passwordInput.attr("type", "text");
                $(".js-password-label").html('<i class="ri-eye-off-line"></i>');
            } else {
                passwordInput.attr("type", "password");
                $(".js-password-label").html('<i class="ri-eye-line"></i>');
            }
        });
    });
</script>