<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Login | SLHD</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="Dinas Lingkungan Hidup Provinsi DKI Jakarta" name="description">
    <meta content="coderthemes" name="author">

    <!-- App favicon -->
    <link rel="apple-touch-icon" sizes="180x180" href="{{asset('assets/logo-dinas.ico')}}">
    <link rel="icon" type="image/png" sizes="32x32" href="{{asset('assets/logo-dinas.ico')}}">
    <link rel="mask-icon" href="{{asset('assets/logo-dinas.ico')}}" color="#5bbad5">

    <!--Swiper slider css-->
    <link href="{{asset('assets/libs/swiper/swiper-bundle.min.css')}}" rel="stylesheet" type="text/css">

    <!-- App css -->
    <link href="{{asset('assets/css/app.min.css')}}" rel="stylesheet" type="text/css">

    <!-- Icons css -->
    <link href="{{asset('assets/css/icons.min.css')}}" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="{{asset('assets/css/toast.min.css')}}">
</head>

<body class="">

    <div class="flex h-screen bg-cover bg-center relative bg-no-repeat py-5" style="background:#f0f0f0;">
        <div class="bg-white lg:max-w-[480px] z-10 p-12 relative w-full h-full dark:bg-gray-800 mx-auto">
            <div class="flex flex-col gap-4">
                <div class="text-center lg:text-start">
                    <a href="{{url('login')}}" class="flex justify-center lg:justify-center">
                        <img width="80" src="{{asset('assets/logo-dlh.png')}}" alt="logo" class="hidden dark:block">
                        <img width="80" src="{{asset('assets/logo-dlh.png')}}" alt="logo" class="block dark:hidden">
                    </a>
                </div>
                <div class="mb-5">
                    <h3 style="font-size: 20px;" class="mt-1 text-center"><b>SLHD</b></h3>
                    <h3 class="mt-1 text-center">Status Lingkungan Hidup Daerah</h3>
                    {{-- <h3 class="mt-1 text-center">Dinas Lingkungan Hidup Provinsi DKI Jakarta</h3> --}}
                </div>
                <div class="my-auto">
                    <!-- title-->
                    <h4 class="text-dark/70 text-lg font-semibold dark:text-light/80 mb-2">Masuk</h4>
                    <p class="text-gray-400 mb-9">Masukkan username dan kata sandi Anda untuk mengakses akun.</p>

                    <!-- form -->
                    <form action="{{url('login')}}" method="POST">
                        {{csrf_field()}}
                        <div class="mb-6 space-y-2">
                            <label for="emailaddress" class="font-semibold text-gray-500">Username</label>
                            <input class="form-input" type="text" id="username" required="" name="email" placeholder="Masukan Username">
                        </div>
                        <div class="mb-6 space-y-2">
                            <div class="flex justify-between items-center mb-2">
                                <label for="password" class="font-semibold text-gray-500">Kata Sandi</label>
                                <a href="{{url('forgot')}}" class="text-muted text-xs">Lupa Kata Sandi?</a>
                            </div>

                            <div class="flex items-center">
                                <input type="password" id="password" name="password" class="form-input rounded-e-none" placeholder="Masukan Kata Sandi">
                                <span id="togglePassword" class="px-3 py-1 border rounded-e-md -ms-px dark:border-white/10"><i class="ri-eye-line text-lg"></i></span>
                            </div
                        </div>
                        <div class="mb-6">
                            <div class="flex items-center">
                                <input type="checkbox" class="form-checkbox rounded text-primary" id="checkbox-signin">
                                <label class="ms-2 text-sm font-medium" for="checkbox-signin">Ingatkan Saya</label>
                            </div>
                        </div>
                        <div class=" text-center">
                            <button class="btn bg-primary text-white w-full" type="submit"><i class="ri-login-box-line me-1"></i> Masuk </button>
                        </div>
                    </form>
                    <!-- end form-->
                </div>

                <footer class="text-center justify-center h-14 -mb-12">
                    <!-- <p class="text-gray-400">Tidak memiliki akun? <a href="{{url('register')}}" class="text-gray-500 ms-1"><b>Daftar Sekarang</b></a></p> -->
                </footer>
            </div>
        </div>

    </div>

    <!-- Plugin Js -->
     <script src="{{asset('assets/js/jquery.min.js')}}"></script>
    <script src="{{asset('assets/libs/simplebar/simplebar.min.js')}}"></script>
    <script src="{{asset('assets/libs/lucide/umd/lucide.min.js')}}"></script>
    <script src="{{asset('assets/libs/@frostui/tailwindcss/frostui.js')}}"></script>

    <!-- App Js -->
    <script src="{{asset('assets/js/app.js')}}"></script>

    <!-- Swiper Plugin Js -->
    <script src="{{asset('assets/libs/swiper/swiper-bundle.min.js')}}"></script>

    <!-- Swiper Auth Demo Js -->
    <script src="{{asset('assets/js/pages/auth-swiper.js')}}"></script>

    <script src="{{asset('assets/js/toast.min.js')}}"></script>
    <script>
        $('#togglePassword').on('click', function() {
            let passwordField = $('#password');
            let icon = $(this).find('i');

            // Cek apakah input saat ini bertipe password
            if (passwordField.attr('type') === 'password') {
                passwordField.attr('type', 'text'); // Ubah ke teks
                icon.removeClass('ri-eye-line').addClass('ri-eye-2-line'); // Ganti ikon
            } else {
                passwordField.attr('type', 'password'); // Ubah ke password
                icon.removeClass('ri-eye-2-line').addClass('ri-eye-line'); // Kembalikan ikon
            }
        });
        @if (Session::get('type')=='error')
            toastr.error("{{ Session::get('message') }}", 'Error!', {positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right'});
        @endif
        @if (Session::get('type')=='success')
            toastr.success("{{ Session::get('message') }}", 'Berhasil!', {positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right'});
        @endif
        @if (Session::get('type')=='warning')
            toastr.warning("{{ Session::get('message') }}", 'Whoopss!', {positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right'});
        @endif
        @if (Session::get('type')=='info')
            toastr.info("{{ Session::get('message') }}", 'Info!', {positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right'});
        @endif
    </script>

</body>

</html>