<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Login Admin</title>

    <!-- Bootstrap & FontAwesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

    <style>
        body {
            margin: 0;
            font-family: 'Segoe UI', sans-serif;
            background: linear-gradient(135deg, #5f2c82, #49a09d);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .login-container {
            width: 100%;
            max-width: 420px;
            animation: fadeIn 0.8s ease-in-out;
        }

        .login-card {
            background: #ffffff;
            border-radius: 15px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.2);
            padding: 35px;
        }

        .login-title {
            text-align: center;
            margin-bottom: 25px;
        }

        .login-title h2 {
            font-weight: 700;
            margin-bottom: 5px;
        }

        .login-title small {
            color: #777;
        }

        .form-group {
            position: relative;
            margin-bottom: 20px;
        }

        .form-group i {
            position: absolute;
            top: 13px;
            left: 15px;
            color: #999;
        }

        .form-control {
            height: 45px;
            padding-left: 40px;
            border-radius: 8px;
        }

        .btn-login {
            height: 45px;
            border-radius: 8px;
            font-weight: 600;
            background: linear-gradient(135deg, #5f2c82, #49a09d);
            border: none;
            color: #fff;
            transition: 0.3s;
        }

        .btn-login:hover {
            opacity: 0.9;
            transform: translateY(-2px);
        }

        .info-text {
            text-align: center;
            margin-bottom: 20px;
            color: #555;
        }

        /* Loading Overlay */
        .loading-overlay {
            display: none;
            position: fixed;
            z-index: 9999;
            background: rgba(0,0,0,0.5);
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 18px;
        }

        @keyframes fadeIn {
            from {opacity: 0; transform: translateY(20px);}
            to {opacity: 1; transform: translateY(0);}
        }

        @media(max-width: 500px){
            .login-card {
                padding: 25px;
                margin: 15px;
            }
        }
    </style>
</head>

<body>

<div class="login-container">
    <div class="login-card">

        <div class="login-title">
            <h2>SMK INDUSTRI NASIONAL 1</h2>
            <small>Login Administrator</small>
        </div>

        <div class="info-text">
            Selamat datang di sistem Ujian Online
        </div>

        <div id="form-pesan"></div>

        <?php echo form_open('manager/welcome/login','id="form-login"')?>

            <div class="form-group">
                <i class="fa fa-user"></i>
                <input type="text" class="form-control" id="username" name="username" placeholder="Username" required>
            </div>

            <div class="form-group">
                <i class="fa fa-lock"></i>
                <input type="password" class="form-control" id="password" name="password" placeholder="Password" required>
            </div>

            <button type="submit" class="btn btn-login btn-block">
                <i class="fa fa-sign-in-alt"></i> Login
            </button>

        </form>

    </div>
</div>

<!-- Loading -->
<div class="loading-overlay" id="loading">
    <div>
        <i class="fa fa-spinner fa-spin"></i> Memproses Data...
    </div>
</div>

<script>
$(function () {

    $('#username').focus();

    $('#form-login').submit(function(e){
        e.preventDefault();

        $('#loading').fadeIn();

        $.ajax({
            url:"<?php echo site_url('manager/welcome/login'); ?>",
            type:"POST",
            data:$(this).serialize(),
            success:function(respon){

                var obj = $.parseJSON(respon);

                if(obj.status == 1){
                    window.location.href = "<?php echo site_url('manager/dashboard'); ?>";
                } else {
                    $('#form-pesan').html(
                        '<div class="alert alert-danger">'+obj.error+'</div>'
                    );
                    $('#loading').fadeOut();
                }
            }
        });
    });

});
</script>

</body>
</html>