@extends('auth.user.base')

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

@section('content')
    <link
        href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('assets/css/login.css') }}">
    <div class="ark__container">

        <div class="ark__form-section">
            <div class="ark__form--wrap">
                <div class="ark__form-bg">
                    <div class="ark__form--center">

                        <div class="ark__logo ark__login-width">Log<span>in</span></div>
                        <div class="ark__auth-header ark__login-width">
                            <h1 class="ark__title">Welcome Back!</h1>
                            <p class="ark__subtitle">Log in to access your account and manage your Quotes.</p>

                        </div>

                        <div class="ark__social-buttons ark__login-width">
                            <a href="{{ route('social.redirect', ['provider' => 'google']) }}"
                                class="ark__social-btn ark__google">
                                <div class="ark__icon-wrap">
                                    <img src="{{ asset('assets/images/GoogleIcon.svg') }}" alt="Google">
                                </div>
                                <p>Log in with Google</p>
                            </a>
                            <a href="{{ route('social.redirect', ['provider' => 'facebook']) }}"
                                class="ark__social-btn ark__facebook">
                                <div class="ark__icon-wrap">
                                    <img src="{{ asset('assets/images/Facebook.svg') }}" alt="Facebook">
                                </div>
                                <p>Log in with Facebook</p>
                            </a>
                        </div>

                        <form method="POST" action="{{ route('login') }}" class="ark__login-width">
                            @csrf
                            <div class="ark__form-group">
                                <label class="ark__label" for="email">Email</label>
                                <div class="ark__input-wrapper">
                                    <input type="email" name="email" id="email" value="{{ old('email') }}"
                                        class="ark__input" placeholder="you@example.com" required autofocus />
                                    <span tooltip="Please Enter Email Address" class="error-message">
                                        <img src="{{ asset('assets/images/input-error.svg') }}" alt="">
                                    </span>
                                </div>
                                @error('email')
                                    <span class="text-red-500 text-sm">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="ark__form-group">
                                <label class="ark__label" for="password">Password</label>
                                <div class="ark__password-wrapper">
                                    <input type="password" name="password" id="password" class="ark__input"
                                        placeholder="Enter your password" required />
                                    <span class="ark__password-toggle" style="display: none;">
                                        <i class="fas fa-eye"></i>
                                    </span>
                                </div>
                                <span tooltip="Please Enter Password" class="error-message">
                                    <img src="{{ asset('assets/images/input-error.svg') }}" alt="">
                                </span>
                            </div>

                            <div class="ark__checkbox-wrap">
                                <div class="ark__checkbox-group">
                                    <input type="checkbox" name="remember" id="remember" class="ark__checkbox">
                                    <label for="remember">Remember Me</label>
                                </div>
                                <a href="{{ route('password.request') }}" class="ark__forgot-password">Forgot Password?</a>
                            </div>

                            <button type="submit" class="ark__submit-btn">Log In</button>

                            <p class="ark__login-link">
                                Don’t have an account?
                                <a href="{{ route('register') }}">Sign Up</a>
                            </p>
                        </form>
                    </div>

                    <div class="ark__round-one"></div>
                    <div class="ark__round-two"></div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <script>
        $(document).ready(function() {
            $('#password').on('input', function() {
                const $toggle = $(this).next('.ark__password-toggle');
                $toggle.toggle($(this).val().length > 0);
            });

            $('.ark__password-toggle').click(function() {
                const $input = $(this).prev('#password');
                const $eye = $(this).find('i');

                $input.attr('type', $input.attr('type') === 'password' ? 'text' : 'password');
                $eye.toggleClass('fa-eye fa-eye-slash');
            });
        });
        $(document).ready(function() {
            tippy("[tooltip]", {
                arrow: true,
                placement: "top", // top, right, bottom, left
                delay: 5, //ms
                distance: 15, //px or string
                maxWidth: 300, //px or string

                followCursor: true,
                allowHTML: true,
                theme: "custom",
                ignoreAttributes: true,
                content(reference) {
                    const tooltip = reference.getAttribute("tooltip");
                    reference.removeAttribute("tooltip");
                    return tooltip;
                },
            });
        });
        const inputs = document.querySelectorAll(".ark__input");

        inputs.forEach((input) => {
            const formGroup = input.closest(".ark__form-group");
            const errorMessage = formGroup.querySelector(".error-message");

            input.addEventListener("invalid", (e) => {
                e.preventDefault(); // stop browser tooltip
                formGroup.classList.add("error");
                errorMessage.classList.add("show");
            });

            input.addEventListener("input", () => {
                if (input.checkValidity()) {
                    formGroup.classList.remove("error");
                    errorMessage.classList.remove("show");
                }
            });
        });
    </script>
@endsection