<!doctype html>
<html lang="en" data-layout="vertical" data-layout-style="detached" data-sidebar="light" data-topbar="dark"
    data-sidebar-size="lg">

<head>

    <meta charset="utf-8" />
    <title>Halaman Regitrasi</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="Premium Multipurpose Admin & Dashboard Template" name="description" />
    <meta content="Themesbrand" name="author" />
    <!-- App favicon -->
    <link rel="shortcut icon" href="{{ asset('assets/images/favicon.ico') }}">

    <!-- Sweet Alert css-->
    <link href="{{ asset('assets/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css" />

    <!-- Layout config Js -->
    <script src="{{ asset('assets/js/layout.js') }}"></script>
    <!-- Bootstrap Css -->
    <link href="{{ asset('assets/css/bootstrap.min.css') }}" rel="stylesheet" type="text/css" />
    <!-- Icons Css -->
    <link href="{{ asset('assets/css/icons.min.css') }}" rel="stylesheet" type="text/css" />
    <!-- App Css-->
    <link href="{{ asset('assets/css/app.min.css') }}" rel="stylesheet" type="text/css" />
    <!-- custom Css-->
    <link href="{{ asset('assets/css/custom.min.css') }}" rel="stylesheet" type="text/css" />

    <style>
        .auth-one-bg {
            background-image: url("{{ asset('assets/images/website/login-logo.png') }}");
        }
    </style>
</head>

<body>

    <!-- auth-page wrapper -->
    <div class="auth-page-wrapper auth-bg-cover py-5 d-flex justify-content-center align-items-center min-vh-100">
        <div class="bg-overlay"></div>
        <!-- auth-page content -->
        <div class="auth-page-content overflow-hidden pt-lg-5">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card overflow-hidden m-0">
                            <div class="row justify-content-center g-0">
                                <div class="col-lg-6">
                                    <div class="p-lg-5 p-4 auth-one-bg h-100">
                                        <div class="bg-overlay"></div>
                                        <div class="position-relative h-100 d-flex flex-column">
                                            <div class="mb-4">
                                                <a href="{{ route('home.index') }}" class="d-block">
                                                    <img src="{{ asset('assets/images/landingpage/logo-spk-tani-white.png') }}"
                                                        alt="" height="130">
                                                </a>
                                            </div>
                                            <div class="mt-auto">
                                                <div class="mb-3">
                                                    <i class="ri-double-quotes-l display-4 text-success"></i>
                                                </div>

                                                <div id="qoutescarouselIndicators" class="carousel slide"
                                                    data-bs-ride="carousel">
                                                    <div class="carousel-indicators">
                                                        <button type="button"
                                                            data-bs-target="#qoutescarouselIndicators"
                                                            data-bs-slide-to="0" class="active" aria-current="true"
                                                            aria-label="Slide 1"></button>
                                                        <button type="button"
                                                            data-bs-target="#qoutescarouselIndicators"
                                                            data-bs-slide-to="1" aria-label="Slide 2"></button>
                                                        <button type="button"
                                                            data-bs-target="#qoutescarouselIndicators"
                                                            data-bs-slide-to="2" aria-label="Slide 3"></button>
                                                    </div>
                                                    <div class="carousel-inner text-center text-white-50 pb-5">
                                                        <div class="carousel-item active">
                                                            <p class="fs-15 fst-italic">" Selamat Datang di SPK-Tani
                                                                (Sistem Pendukung Keputusan Tani)!! "</p>
                                                        </div>
                                                        <div class="carousel-item">
                                                            <p class="fs-15 fst-italic">" Sistem pendukung keputusan
                                                                menggunakan metode Technique for Order of Preference by
                                                                Similarity to Ideal Solution !."</p>
                                                        </div>
                                                        <div class="carousel-item">
                                                            <p class="fs-15 fst-italic">" Sistem rekomendasi tanaman
                                                                pangan di wilayah Kabupaten Bondowoso !. "</p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!-- end carousel -->

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

                                <div class="col-lg-6">
                                    <div class="p-lg-5 p-4">
                                        <div>
                                            <h4 class="text-primary">Register Akun</h4>
                                        </div>

                                        <div class="mt-4">
                                            <form class="needs-validation" novalidate
                                                action="{{ route('registrasi.registrasi') }}" method="POST">
                                                @csrf
                                                <input type="hidden" name="role" id="role" value="admin">
                                                <div class="mb-3">
                                                    <label for="email" class="form-label">Masukkan email <span
                                                            class="text-danger">*</span></label>
                                                    <input type="email" class="form-control" id="email"
                                                        name="email" placeholder="inputkan email anda ..." required>
                                                    <div class="invalid-feedback">
                                                        email anda belum valid !!
                                                    </div>
                                                </div>
                                                <div class="mb-3">
                                                    <label for="name" class="form-label">Masukkan nama<span
                                                            class="text-danger">*</span></label>
                                                    <input type="text" class="form-control" id="name"
                                                        name="name" placeholder="inputkan nama anda ...." required>
                                                    <div class="invalid-feedback">
                                                        nama anda belum diisi !!
                                                    </div>
                                                </div>
                                                <div class="mb-3">
                                                    <label for="username" class="form-label">Masukkan username<span
                                                            class="text-danger">*</span></label>
                                                    <input type="text" class="form-control" id="username"
                                                        name="username" placeholder="inputkan username anda ...."
                                                        required>
                                                    <div class="invalid-feedback">
                                                        username anda belum diisi !!
                                                    </div>
                                                </div>

                                                <div class="mb-3">
                                                    <label for="jenis_kelamin" class="form-label">Pilih jenis
                                                        kelamin<span class="text-danger">*</span></label>
                                                    <select class="form-select" id="jenis_kelamin"
                                                        name="jenis_kelamin" aria-label="jenis-kelamin">
                                                        <option selected value="Laki-laki">Laki-laki</option>
                                                        <option value="Perempuan">Perempuan</option>
                                                    </select>
                                                </div>

                                                <div class="mb-2">
                                                    <label for="password" class="form-label">Masukkan
                                                        password<span class="text-danger">*</span></label>
                                                    <input type="password" class="form-control" id="password"
                                                        name="password" placeholder="inputkan password anda ..."
                                                        required>
                                                    <div class="invalid-feedback">
                                                        password anda belum diisi !!
                                                    </div>
                                                </div>

                                                <div class="mt-4">
                                                    <button class="btn btn-info w-100"
                                                        type="submit">Registrasi</button>
                                                </div>
                                            </form>
                                        </div>

                                        <div class="mt-5 text-center">
                                            <p class="mb-0">Apakah sudah memiliki akun ? <a
                                                    href="{{ route('login.index') }}"
                                                    class="fw-semibold text-primary text-decoration-underline">
                                                    login</a> </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- end card -->
                    </div>
                    <!-- end col -->

                </div>
                <!-- end row -->
            </div>
            <!-- end container -->
        </div>
        <!-- end auth page content -->

        <!-- footer -->
        <footer class="footer">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="text-center">
                            <p class="mb-0">&copy;
                                <script>
                                    document.write(new Date().getFullYear())
                                </script> Velzon. Crafted with <i class="mdi mdi-heart text-danger"></i>
                                by Themesbrand
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
        <!-- end Footer -->
    </div>
    <!-- end auth-page-wrapper -->

    {{-- sweetalerts --}}
    @include('sweetalert::alert')

    <!-- JAVASCRIPT -->
    <script src="{{ asset('assets/libs/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
    <script src="{{ asset('assets/libs/simplebar/simplebar.min.js') }}"></script>
    <script src="{{ asset('assets/libs/node-waves/waves.min.js') }}"></script>
    <script src="{{ asset('assets/libs/feather-icons/feather.min.js') }}"></script>
    <script src="{{ asset('assets/js/pages/plugins/lord-icon-2.1.0.js') }}"></script>
    <script src="{{ asset('assets/js/plugins.js') }}"></script>


    <!-- Sweet Alerts js -->
    <script src="{{ asset('assets/libs/sweetalert2/sweetalert2.min.js') }}"></script>

    <!-- validation init -->
    <script src="{{ asset('assets/js/pages/form-validation.init.js') }}"></script>
</body>

</html>
