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

<head>
    <meta charset="utf-8">
    <title>Login | DIKPLHD</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="shortcut icon" href="https://lingkunganhidup.jakarta.go.id/dist/images/logo/logo-dlh-big.png">

    <!--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">
</head>

<body class="">

    <div class="flex h-screen bg-cover bg-center relative bg-no-repeat" style="background-image: url('{{asset("assets/images/background.jpg")}}');">
        <div class="bg-white lg:max-w-[480px] z-10 p-12 relative w-full h-full dark:bg-gray-800">
            <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 src="https://lingkunganhidup.jakarta.go.id/dist/images/logo/logo-dlh-big.png" alt="logo" class="hidden dark:block">
                        <img src="https://lingkunganhidup.jakarta.go.id/dist/images/logo/logo-dlh-big.png" alt="logo" class="block dark:hidden">
                    </a>
                </div>
                <div>
                    <h3 style="font-size: 20px;" class="mt-1 text-center"><b>DIKPLHD</b></h3>
                    <h3 class="mt-1 text-center">Dinas Lingkungan Hidup</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 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>
                        <!-- social-->
                        <!-- <div class="text-center mt-9">
                            <p class="text-gray-400 text-base mb-6">Sign in with</p>
                            <ul class="inline-flex gap-2">
                                <li class="">
                                    <a href="javascript: void(0);" class="rounded-full border-2 border-primary text-primary w-8 h-8 inline-flex items-center justify-center"><i class="ri-facebook-circle-fill"></i></a>
                                </li>
                                <li class="">
                                    <a href="javascript: void(0);" class="rounded-full border-2 border-danger text-danger w-8 h-8 inline-flex items-center justify-center"><i class="ri-google-fill"></i></a>
                                </li>
                                <li class="">
                                    <a href="javascript: void(0);" class="rounded-full border-2 border-info text-info w-8 h-8 inline-flex items-center justify-center"><i class="ri-twitter-fill"></i></a>
                                </li>
                                <li class="">
                                    <a href="javascript: void(0);" class="rounded-full border-2 border-secondary text-secondary w-8 h-8 inline-flex items-center justify-center"><i class="ri-github-fill"></i></a>
                                </li>
                            </ul>
                        </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 class="bg-black/30 w-full h-full relative hidden lg:block">
            <div class="absolute start-0 end-0 bottom-0 flex mt-auto justify-center text-center">
                <div class="xl:w-1/2 w-full mx-auto">
                    <div class="swiper mt-auto cursor-col-resize" id="swiper_one">
                        <div class="swiper-wrapper mb-12">
                            <div class="swiper-slide">
                                <div class="swiper-slide-content">
                                    <h2 class="text-3xl text-white mb-6">I love the color!</h2>
                                    <p class="text-lg text-white mb-5"><i class="ri-double-quotes-l"></i> Everything you need is in this template. Love the overall look and feel. Not too flashy, and still very professional and smart.</p>
                                    <p class="text-white mx-auto">
                                        - Admin User
                                    </p>
                                </div>
                            </div>
                            <!-- swiper-slide End -->

                            <div class="swiper-slide">
                                <div class="swiper-slide-content">
                                    <h2 class="text-3xl text-white mb-6">Flexibility !</h2>
                                    <p class="text-lg text-white mb-5"><i class="ri-double-quotes-l"></i> Pretty nice theme, hoping you guys could add more features to this. Keep up the good work.</p>
                                    <p class="text-white mx-auto">
                                        - Admin User
                                    </p>
                                </div>
                            </div>
                            <!-- swiper-slide End -->

                            <div class="swiper-slide">
                                <div class="swiper-slide-content">
                                    <h2 class="text-3xl text-white mb-6">Feature Availability!</h2>
                                    <p class="text-lg text-white mb-5"><i class="ri-double-quotes-l"></i> This is a great product, helped us a lot and very quick to work with and implement.</p>
                                    <p class="text-white mx-auto">
                                        - Admin User
                                    </p>
                                </div>
                            </div>
                            <!-- swiper-slide End -->
                        </div>
                        <!-- swiper-wrapper End -->

                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Plugin Js -->
    <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>

</body>

</html>