@extends('layouts.auth')

@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <section class="w-100">
        <div class="container d-flex" style="height: 100vh;">
            <div class="row align-items-center justify-content-center">
                <div class="col-lg-5 col-md-6">
                    <div class="card login-page bg-white shadow rounded border-0">
                        <div class="card-body">
                            <h4 class="card-title text-center">Login</h4>
                            @if (Session::has('login'))
                                {!! Session::get('login') !!}
                            @endif
                            <div id="errors"></div>
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="mb-3">
                                        <label class="form-label">Email</label>
                                        <div class="form-icon position-relative">
                                            <i data-feather="mail" class="fea icon-sm icons"></i>
                                            <input type="text" class="form-control ps-5" placeholder="your@email.com"
                                                name="email">
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-12">
                                    <div class="mb-3">
                                        <label class="form-label">Kata Sandi</label>
                                        <div class="form-icon position-relative">
                                            <i data-feather="key" class="fea icon-sm icons"></i>
                                            <input type="password" class="form-control ps-5" placeholder="********"
                                                name="password">
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-12 mb-3">
                                    <div class="d-flex justify-content-between">
                                        <div class="mb-3">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value=""
                                                    name="remember_me" id="remember-me">
                                                <label class="form-check-label" for="remember-me">Ingat
                                                    saya</label>
                                            </div>
                                        </div>
                                        <p class="forgot-pass mb-0"><a href="" class="text-dark fw-bold">Lupa
                                                kata sandi ?</a></p>
                                    </div>
                                </div>

                                <div class="col-lg-12 mb-0">
                                    <div class="d-grid">
                                        <button type="button"
                                            class="btn btn-primary d-flex align-items-center justify-content-center gap-1"
                                            id="login">Masuk</button>
                                    </div>
                                </div>
                                <p class="text-center my-2">atau</p>
                                <div class="col-lg-12">
                                    <div class="d-grid">
                                        <a href="{{ route('oauth.redirect') }}" class="btn btn-light">
                                            <img src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 48 48'%3E%3Cdefs%3E%3Cpath id='a' d='M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z'/%3E%3C/defs%3E%3CclipPath id='b'%3E%3Cuse xlink:href='%23a' overflow='visible'/%3E%3C/clipPath%3E%3Cpath clip-path='url(%23b)' fill='%23FBBC05' d='M0 37V11l17 13z'/%3E%3Cpath clip-path='url(%23b)' fill='%23EA4335' d='M0 11l17 13 7-6.1L48 14V0H0z'/%3E%3Cpath clip-path='url(%23b)' fill='%2334A853' d='M0 37l30-23 7.9 1L48 0v48H0z'/%3E%3Cpath clip-path='url(%23b)' fill='%234285F4' d='M48 48L17 24l-4-3 35-10z'/%3E%3C/svg%3E"
                                                alt="google" class="img-fluid me-2" style="width: 20px !important">
                                            <span>Masuk dengan Google</span>
                                        </a>
                                    </div>
                                </div>
                                <div class="col-12 text-center">
                                    <p class="mb-0 mt-3">
                                        <small class="text-dark me-2">Tidak memiliki akun ?</small> <a
                                            href="{{ route('register') }}" class="text-dark fw-bold">Daftar</a>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
    <script>
        const email = document.querySelector('input[name="email"]');
        const password = document.querySelector('input[name="password"]');
        const rememberMe = document.querySelector('input[name="remember_me"]');
        const loginButton = document.getElementById('login');
        const errors = document.getElementById('errors');

        email.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                loginButton.click();
            }
        });

        password.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                loginButton.click();
            }
        });

        loginButton.addEventListener('click', async () => {
            clearError();
            disabledElement();

            const payload = {
                email: email.value,
                password: password.value,
                remember_me: rememberMe.checked,
            };
            const response = await login(payload);
            if (response.status === 'success') {
                return window.location.href = `${window.location.origin}/panel/dashboard`;
            }

            enabledElement();
            showError();
        });

        const login = async (payload) => {
            const options = {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(payload),
            };
            const response = await fetch(`${window.location.origin}/login`, options);
            const result = await response.json();
            return result;
        }

        const disabledElement = () => {
            email.setAttribute('disabled', '');
            password.setAttribute('disabled', '');
            rememberMe.setAttribute('disabled', '');
            loginButton.setAttribute('disabled', '');
            loginButton.innerHTML =
                'Loading <div class="spinner-border spinner-border-sm" role="status"><span class="visually-hidden">Loading...</span></div>';
        };

        const enabledElement = () => {
            email.removeAttribute('disabled');
            password.removeAttribute('disabled');
            rememberMe.removeAttribute('disabled');
            loginButton.removeAttribute('disabled');
            loginButton.innerHTML = 'Masuk';
        };

        const showError = () => {
            errors.innerHTML = `
                <div class="alert bg-soft-danger fw-medium alert-dismissible fade show" role="alert">
                    <i class="uil uil-info-circle fs-5 align-middle me-1"></i> email atau kata sandi salah
                    <button type="button" class="btn-close top-0" data-bs-dismiss="alert"
                        aria-label="Close" style="transform: translateY(100%);"></button>
                </div>
            `;
        };

        const clearError = () => {
            errors.innerHTML = '';
        };
    </script>
@endpush