<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Gas | Log in</title>

        <!-- Google Font: Source Sans Pro -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
        <!-- Font Awesome -->
        <link rel="stylesheet" href="<?=base_url()?>/assets/fontawesome-free/css/all.min.css">
        <!-- icheck bootstrap -->
        <link rel="stylesheet" href="<?=base_url()?>/assets/icheck-bootstrap/icheck-bootstrap.min.css">
        <!-- Theme style -->
        <link rel="stylesheet" href="<?=base_url()?>/assets/template/css/adminlte.min.css">

        <!-- jQuery -->
        <script src="<?=base_url()?>/assets/jquery/jquery.min.js"></script>
        <!-- Bootstrap 4 -->
        <script src="<?=base_url()?>/assets/bootstrap/js/bootstrap.bundle.min.js"></script>
        <!-- AdminLTE App -->
        <script src="<?=base_url()?>/assets/template/js/adminlte.min.js"></script>
        <script src="<?=base_url()?>/assets/swal2/sweetalert2.all.min.js"></script>
        <style>
            .login-page{
                background: url("<?=base_url()?>/src/img/spbe.jpeg");
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
            }
        </style>
    </head>
    <body class="hold-transition login-page">
        <div class="login-box">
            <div class="card card-outline card-success">
                <div class="card-header text-center">
                    <a href="#"><img src="<?=base_url()?>/src/img/pertamina.png" class="img-fluid"></a>
                </div>
                <div class="card-body login-card-body">
                    <h4 class="text-center text-success">Gas MORA-1</h4>
                    <p class="login-box-msg">Silahkan Login Untuk Masuk Ke Dalam Aplikasi</p>
                    <form id="flogin" action="#" method="post" enctype="multipart/form-data">
                        <input type="hidden" name="<?= csrf_token() ?>" value="<?= csrf_hash() ?>"> 
                        <div class="input-group mb-3">
                            <input type="text" class="form-control" placeholder="Username" name="username">
                            <div class="input-group-append">
                                <div class="input-group-text">
                                    <span class="fas fa-user"></span>
                                </div>
                            </div>
                            <span id="eusername" class="error invalid-feedback"></span>
                        </div>

                        <div class="input-group mb-3">
                            <input type="password" class="form-control" placeholder="Password" name="password">
                            <div class="input-group-append">
                                <div class="input-group-text">
                                    <span class="fas fa-lock"></span>
                                </div>
                            </div>
                            <span id="epassword" class="error invalid-feedback"></span>
                        </div>

                        <div class="row">
                            <!-- /.col -->
                            <div class="col-4">
                                <button type="submit" class="btn btn-primary btn-block">Sign In</button>
                            </div>
                            <!-- /.col -->
                        </div>
                    </form>
                </div>
            </div>
        </div>

        
        <script>
            $(document).ready(function () {
                $("#flogin").submit(function (e) {
                    e.preventDefault();
                    $("#eusername").html('').hide();
                    $("#epassword").html('').hide();
                    Swal.fire({
                        text: 'Sign In.. Silahkan tunggu..',
                        allowOutsideClick: false
                    });
                    Swal.showLoading();
                    $.post('authentication',$("#flogin").serialize()).done(function (data) {
                        if (data.message != null)
                        {
                            window.location.href = 'home';
                        }else{
                            Swal.fire({
                                text:data.responseJSON.messages.error,
                                icon : 'error'
                            });
                        }
                        // window.location.href = 'home';
                    }).fail(function (data) {
                        Swal.fire({
                            text:data.responseJSON.messages.error,
                            icon : 'error'
                        });
                    });
                });
            });
        </script>
        <!-- AdminLTE App -->
        <script src="<?=base_url()?>/assets/template/js/adminlte.min.js"></script>
    </body>
</html>