@extends('template')

@section('content')
    <div class="h-screen center  "style="padding-top:150px;">
        <div class=" card p-5  my-5 " style=" color:#333!important;">
            <form style="color:#333!important;" method="POST" action="{{ route('loginAction') }}">
                @csrf
                <h1 class="center text-center">Login</h1>
                <p class="center text-center m-lg-5">Silahkan login menggunakan email <br> yang sudah terdaftar dan
                    terverifikasi.</p>
                @include('message')
                <div class="mb-3">
                    <label for="email" class="form-label">Email</label>
                    <input type="email" class="form-control" id="email"name="email"
                        aria-describedby="emailHelp"placeholder="Email">
                </div>

                <div class="mb-3">
                    <label for="password" class="form-label">Password</label>
                    <div class="d-flex">
                        <input type="password" class="form-control" id="password" name="password"placeholder="Password">
                        <span toggle="#password" class=" eye card center p-1"
                            style="width: 40px!important; height:40px!important;"><i class="bi bi-eye-fill"></i></span>
                    </div>

                </div>

                <button type="submit" class="btn btn-secondary">Log In</button>
                {{-- <p>Belum memiliki Akun?<a class="link" style="font-weight: 500" href="3">Daftar</a> --}}
                </p>
            </form>
        </div>

    </div>
    @push('script-tambahan')
        <script>
            var clicked = false;
            const togglePassword = document.querySelector('.eye');
            const password = document.querySelector('#password');

            togglePassword.addEventListener('click', function() {
                const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
                password.setAttribute('type', type);
                if (clicked) {
                    togglePassword.style.cssText =
                        'background-color:#ffffff!important;width: 40px!important; height:40px!important;color:#333!important;';
                } else {
                    togglePassword.style.cssText =
                        'background-color:#333!important;width: 40px!important; height:40px!important;color:#ffffff!important;';

                }
                clicked = !clicked;
            });
        </script>
    @endpush
@endsection