<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Log in</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.5 -->
    <link rel="stylesheet" href="<?= base_url('vendor/'); ?>bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <!-- Ionicons -->
    <link rel="icon" href="<?= base_url('images/logo2.png') ?>" type="image/png">
    <!-- Select2 -->
    <link rel="stylesheet" href="<?= base_url('template/'); ?>plugins/select2/select2.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="<?= base_url('template/'); ?>dist/css/AdminLTE.min.css">
    <!-- iCheck -->
    <link rel="stylesheet" href="<?= base_url('template/'); ?>plugins/iCheck/square/blue.css">

</head>

<style>
    /* Sass */
    .circle {
        position: absolute;
        width: 20px;
        height: 20px;
        border-radius: 100%;
        background-color: turquoise;
        animation: move-the-circle 1s infinite;
        transform-origin: center center;
    }

    @for $num from 1 through 8 {
        .circle:nth-child(#{$num}) {
            left: ($num - 1) * 30px;
            animation-delay: $num * .1s;
        }
    }

    @keyframes move-the-circle {
        0% {
            transform: translate(0, 0) scale(1);
            opacity: 1;
            background-color: turquoise;
        }

        50% {
            transform: translate(0, 50px) scale(.4);
            opacity: .5;
            background-color: blue;
        }

        100% {
            transform: translate(0, 0) scale(1);
            opacity: 1;
            background-color: turquoise;
        }
    }
</style>

<body class="hold-transition login-page" style="background: url(<?= base_url('images/bg-2.jpeg'); ?>);background-size: cover; background-attachment: fixed;">
    <div class=" login-box" style=" box-shadow: -1px 5px 20px -4px rgba(0,0,0,0.75);
-webkit-box-shadow: -1px 5px 20px -4px rgba(0,0,0,0.75);
-moz-box-shadow: -1px 5px 20px -4px rgba(0,0,0,0.75);border-bottom-left-radius: 50px; border-top-right-radius: 50px;border-top-left-radius: 10px;border-bottom-right-radius: 10px">

        <div class="login-box-body" style="background: url(<?= base_url('images/1.jpg'); ?>); background-size: cover;border-bottom-left-radius: 50px;border-top-right-radius: 50px;border-top-left-radius: 10px;border-bottom-right-radius: 10px; opacity: 1;">
            <center>
                <!-- HTML -->
                <div class="animation-wrapper">
                    <div class="circle"></div>
                    <div class="circle"></div>
                    <div class="circle"></div>
                    <div class="circle"></div>
                    <div class="circle"></div>
                    <div class="circle"></div>
                    <div class="circle"></div>
                    <div class="circle"></div>
                </div>
                <!-- <img width="260px" style="margin-bottom: 15px;" src="<?= base_url('images/'); ?>logo3.png" alt=""> -->
                <h1 style="font-weight: bolder; color: wheat;">RADJAK GROUP</h1>
                <p style="color: white; margin-top: -10px;">Sistem Pelayanan Medis Klinik</p>
            </center>


            <div class="nav-tabs-custom">
                <ul class="nav nav-tabs">
                    <!-- <li class="active"><a href="#tab_1" data-toggle="tab">General</a></li> -->
                    <!-- <li><a href="#tab_2" data-toggle="tab">Dokter</a></li> -->
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="tab_1">
                        <form action="<?= base_url('login/cekLogin/'); ?>" method="post">
                            <div class="form-group has-feedback">
                                <input type="text" class="form-control" name="username" placeholder="Username">
                                <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
                            </div>
                            <div class="form-group has-feedback">
                                <input type="password" name="password" class="form-control" placeholder="Password">
                                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                            </div>
                            <div class="form-group has-feedback">
                                <select name="shift" class="form-control" required>
                                    <option value="">PILIH SHIFT</option>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                </select>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <button type="submit" style="width:100%; border-radius:5px" class="btn btn-primary bg-blue-gradient btn-block btn-flat">Sign In</button>
                                </div><!-- /.col -->
                            </div>
                        </form>
                    </div><!-- /.tab-pane -->
                    <div class="tab-pane" id="tab_2">
                        <form action="<?= base_url('login/cekLogin/'); ?>" method="post">
                            <div class="form-group has-feedback">
                                <select class="form-control select2" required name="UserName" style="width: 100%;">
                                    <option value=""></option>
                                    <?php
                                    foreach ($dokter as $dok) :
                                    ?>
                                        <option value="<?= $dok['IdAlias']; ?>"><?= $dok['Name']; ?></option>
                                    <?php
                                    endforeach;
                                    ?>
                                </select>
                            </div>
                            <div class="form-group has-feedback">
                                <input type="password" class="form-control" placeholder="Password" required name="Pass">
                                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                            </div>
                            <div class="row">

                                <div class="col-md-12">
                                    <button style="width:100%; border-radius:5px" type="submit" class="btn btn-primary bg-blue-gradient btn-block btn-flat">Sign In</button>
                                </div><!-- /.col -->
                            </div>

                        </form>
                    </div><!-- /.tab-pane -->

                </div><!-- /.tab-content -->
            </div><!-- nav-tabs-custom -->

            <center>
                <div style="color: red; font-weight: bold;">
                    Klinik Pratama dr.Abdul Radjak Unit Serdang
                </div>
            </center>

        </div><!-- /.login-box-body -->
    </div><!-- /.login-box -->

    <!-- jQuery 2.1.4 -->
    <script src="<?= base_url('template/'); ?>plugins/jQuery/jQuery-2.1.4.min.js"></script>
    <!-- Bootstrap 3.3.5 -->
    <script src="<?= base_url('template/'); ?>bootstrap/js/bootstrap.min.js"></script>
    <!-- iCheck -->
    <script src="<?= base_url('template/'); ?>plugins/iCheck/icheck.min.js"></script>
    <!-- Select2 -->
    <script src="<?= base_url('template/'); ?>plugins/select2/select2.full.min.js"></script>
    <script>
        $(function() {
            $(".select2").select2();
            $('input').iCheck({
                checkboxClass: 'icheckbox_square-blue',
                radioClass: 'iradio_square-blue',
                increaseArea: '20%' // optional
            });
        });
    </script>

</body>

</html>