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

<head>
    <!-- Design by foolishdeveloper.com -->
    <title>Login | IGD</title>

    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;600&display=swap" rel="stylesheet">
    <link rel="shortcut icon" type="image/png" href="<?= base_url('assets_/assets/img/logo-mini.png') ?>">
    <!--Stylesheet-->
    <style media="screen">
        *,
        *:before,
        *:after {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        body {
            background-color: rgba(53, 134, 64, 0.64);
            display: flex;
            /* Menggunakan flexbox untuk mengatur posisi */
            flex-direction: column;
            /* Mengatur arah flex menjadi kolom */
            min-height: 100vh;
            /* Memastikan body memiliki tinggi minimal 100% dari viewport */
        }

        .background {
            width: 430px;
            height: 520px;
            position: absolute;
            transform: translate(-50%, -50%);
            left: 50%;
            top: 50%;
        }

        .background .shape {
            height: 200px;
            width: 200px;
            position: absolute;
            border-radius: 50%;
        }

        .shape:first-child {
            background: linear-gradient(#1845ad, #23a2f6);
            left: -80px;
            top: -80px;
        }

        .shape:last-child {
            background: linear-gradient(to right, #ff512f, #f09819);
            right: -20px;
            bottom: -30px;
        }

        form {
            height: 520px;
            width: 400px;
            background-color: rgba(255, 255, 255, 0.13);
            position: absolute;
            transform: translate(-50%, -50%);
            top: 50%;
            left: 50%;
            border-radius: 10px;
            backdrop-filter: blur(10px);
            border: 2px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 0 40px rgba(8, 7, 16, 0.6);
            padding: 50px 35px;
        }

        form * {
            font-family: 'Poppins', sans-serif;
            color: #ffffff;
            letter-spacing: 0.5px;
            outline: none;
            border: none;
        }

        form h3 {
            font-size: 32px;
            font-weight: 500;
            line-height: 42px;
            text-align: center;
        }

        label {
            display: block;
            margin-top: 30px;
            font-size: 16px;
            font-weight: 500;
        }

        input {
            display: block;
            height: 50px;
            width: 100%;
            background-color: rgba(255, 255, 255, 0.07);
            border-radius: 3px;
            padding: 0 10px;
            margin-top: 8px;
            font-size: 14px;
            font-weight: 300;
        }

        ::placeholder {
            color: #e5e5e5;
        }

        button {
            margin-top: 10px;
            /* Mengurangi jarak antara tombol */
            width: 100%;
            background-color: #ffffff;
            color: #080710;
            padding: 15px 0;
            font-size: 18px;
            font-weight: 600;
            border-radius: 5px;
            cursor: pointer;
        }

        .social {
            margin-top: 30px;
            display: flex;
        }

        .social div {
            background: red;
            width: 150px;
            border-radius: 3px;
            padding: 5px 10px 10px 5px;
            background-color: rgba(255, 255, 255, 0.27);
            color: #eaf0fb;
            text-align: center;
        }

        .social div:hover {
            background-color: rgba(255, 255, 255, 0.47);
        }

        .social .fb {
            margin-left: 25px;
        }

        .social i {
            margin-right: 4px;
        }

        /* Styling untuk copyright */
        .container {
            text-align: center;
            /* Menyelaraskan teks di tengah */
            padding: 10px 0;
            /* Garis atas footer */
            margin-top: auto;
            /* Memastikan footer berada di bawah */
        }

        .credits {
            margin-top: 0px;
            /* Menambahkan margin atas untuk jarak */
        }

        .responsive-button {
            width: 100%;
            /* Full width by default */
        }

        @media (max-width: 768px) {
            .background {
                width: 300px;
                /* Mengurangi lebar background pada layar kecil */
                height: 400px;
                /* Mengurangi tinggi background pada layar kecil */
            }

            form {
                width: 90%;
                /* Mengatur lebar form menjadi 90% pada layar kecil */
                padding: 30px 20px;
                /* Mengurangi padding pada form */
            }

            form h3 {
                font-size: 28px;
                /* Mengurangi ukuran font judul */
            }

            input {
                height: 45px;
                /* Mengurangi tinggi input */
                font-size: 14px;
                /* Mengurangi ukuran font input */
            }

            button {
                font-size: 16px;
                /* Mengurangi ukuran font tombol */
            }
        }

        @media (max-width: 480px) {
            .background {
                width: 250px;
                /* Mengurangi lebar background pada layar sangat kecil */
                height: 350px;
                /* Mengurangi tinggi background pada layar sangat kecil */
            }

            form {
                width: 90%;
                /* Mengatur lebar form menjadi 90% pada layar sangat kecil */
                padding: 20px 15px;
                /* Mengurangi padding pada form */
            }

            form h3 {
                font-size: 24px;
                /* Mengurangi ukuran font judul */
            }

            input {
                height: 40px;
                /* Mengurangi tinggi input */
                font-size: 13px;
                /* Mengurangi ukuran font input */
            }

            button {
                font-size: 15px;
                /* Mengurangi ukuran font tombol */
            }
        }
    </style>


</head>

<body>
    <div class="background">
        <div class="shape"></div>
        <div class="shape"></div>
    </div>
    <form id="loginForm" action="<?php echo base_url('login/igd/auth'); ?>" method="POST">
        <img src="<?= base_url('assets_/assets/img/logo-mini2.png') ?>" alt="Logo" style="display: block; margin: 0 auto 20px; width: 100px; height: auto;"> <!-- Ganti dengan path logo Anda -->
        <h3>Login Here</h3>

        <!-- Menampilkan pesan kesalahan jika ada -->
        <?php if ($this->session->flashdata('login_error')): ?>
            <div style="color: red; text-align: center; margin-bottom: 10px;">
                <?php echo $this->session->flashdata('login_error'); ?>
            </div>
        <?php endif; ?>

        <input type="text" name="kd_user" id="kd_user" placeholder="Username" onkeyup="myFunction()" />
        <input type="password" name="password" id="password" placeholder="Password" onkeyup="myFunction()" />

        <button type="submit">Masuk</button>
        <button type="button" onclick="window.history.back();">Kembali</button> <!-- Mengubah tombol kembali menjadi button biasa -->
    </form>

    <div class="container copyright text-center mt-1">
        <p>© <span>Copyright</span> <strong class="px-1 sitename">By IT Support RSU ANANDA Purwokerto</strong><span>All Rights Reserved 2024</span></p>

    </div>

    <script>
        function myFunction() {
            var userField = document.getElementById("kd_user");
            userField.value = userField.value.toUpperCase();
            var passwordField = document.getElementById("password");
            passwordField.value = passwordField.value.toUpperCase();
        }
    </script>

    <!-- Tambahkan di header atau sebelum penutup tag </body> -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script>
        $(document).ready(function() {
            $('#loginForm').on('submit', function(e) {
                e.preventDefault(); // Mencegah form submit secara default

                var kd_user = $('#kd_user').val();
                var password = $('#password').val();

                // Validasi input kosong
                if (kd_user === "" || password === "") {
                    Swal.fire({
                        icon: 'error',
                        title: 'Oops...',
                        text: 'Silakan isi username dan password terlebih dahulu!',
                    });
                    return false;
                }

                // Jika input terisi, lanjutkan dengan AJAX request
                $.ajax({
                    url: $(this).attr('action'),
                    type: 'POST',
                    data: $(this).serialize(),
                    success: function(response) {
                        // Handle response dari server
                        var jsonResponse = JSON.parse(response);
                        if (jsonResponse.status === 'error') {
                            Swal.fire({
                                icon: 'error',
                                title: 'Oops...',
                                text: jsonResponse.message,
                            });
                        } else {
                            window.location.href = jsonResponse.redirect;
                        }
                    },
                    error: function(xhr, status, error) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Oops...',
                            text: 'Terjadi kesalahan pada server. Silakan coba lagi.',
                        });
                    }
                });
            });
        });
    </script>
</body>

</html>