<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<title>SIIS - Login</title>

		<meta name="description" content="" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
        <link rel="shortcut icon" href="../img/favicon.ico">

		<!-- bootstrap & fontawesome -->
		<link rel="stylesheet" href="../assets/css/bootstrap.css" />
		<link rel="stylesheet" href="../assets/css/font-awesome.css" />
		<link rel="stylesheet" href="../assets/css/custom/css-custom.css" />

		<!-- page specific plugin styles -->

		<!-- text fonts -->
		<link rel="stylesheet" href="../assets/css/ace-fonts.css" />

		<!-- ace styles -->
		<link rel="stylesheet" href="../assets/css/ace.css" class="ace-main-stylesheet" id="main-ace-style" />

		<!--[if lte IE 9]>
			<link rel="stylesheet" href="../assets/css/ace-part2.css" class="ace-main-stylesheet" />
		<![endif]-->

		<!--[if lte IE 9]>
		  <link rel="stylesheet" href="../assets/css/ace-ie.css" />
		<![endif]-->

		<!-- inline styles related to this page -->

		<!-- ace settings handler -->
		<script src="../assets/js/ace-extra.js"></script>

		<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

		<!--[if lte IE 8]>
		<script src="../assets/js/html5shiv.js"></script>
		<script src="../assets/js/respond.js"></script>
        <![endif]-->
    <style>

        body {
            position: relative;
            min-height: 100%;
            background: #F4F4F4;
            background-size: fill;
            background-position: center;
        }

        .ace-settings-box {
            background-color: #FFF!important;
            border: 0 solid #ffb34b!important;
            transition: none!important;
        }

        .navbar .navbar-nav > li > a:hover, .navbar .navbar-nav > li > a:focus, .navbar .navbar-nav > li.open > a {
            background-color: #fff !important;
            color: #18234F !important;
        }

        .btn-custom, .btn-custom:hover {
            background-color: #fff !important;
            border-color: #fff !important;
            color: #131A37!important;;
        }

        .dropuser {
            top: 108%!important;
            left: -98%!important;
            width: 90px;
        }

        .ace-nav > li.light-blue > a {
            background-color: #ffffff00;
        }

        .ace-nav > li.light-blue > a:hover, .ace-nav > li.light-blue > a:focus, .ace-nav > li.open.light-blue > a {
            background-color: #ffffff00;
        }

        .panel-login {
            border-radius:3px;
            margin-top:3%;
						margin-bottom:3%;
        }

        .siis-logo-login {
            width: 30px!important;
        }

        .textwelcome {
            width: 100%;
            font-style: normal;
            font-weight: 800;
            font-size: 24px;
            color: #1F152F;
        }

        .panel-logo {
            border-color: #fff!important;
        }

        .panel-logo > .panel-heading {

            color: #fff;
            background-color: #fff;
            border-color: #fff;

        }

        .btn-primary-login {
            background: linear-gradient(6.73deg, #FF8E8E -14.01%, #FB254E 103.7%);
            box-shadow: 0px 9px 16px rgba(255, 43, 93, 0.18), 0px 4px 18px rgba(255, 132, 143, 0.16);
            border-radius: 3px;
            color:white;
        }

        .btn-primary-login:hover, .btn:hover, .btn:focus {
            background-color: #FF8E8E!important;
            border-color: #FF8E8E!important;
        }

        .btn, .btn-default, .btn:focus, .btn-default:focus {
            background-color: #FB254E !important;
            border-color: #FB254E!important;
        }

        .modal-footer {
            border: none!important;
            background: none!important;
        }

        .logoside {
            width: 95%;
            padding: 10% 0 0 10%;
        }

        .carouselContainer, .carousel-inner {
            width: 100%;
            height: 500px;
        }

        .carousel-caption {
            top: 100%;
            bottom: 0;
            z-index: 10;
            padding-top: 100px;
            padding-bottom: 0;
            text-align: center;
            text-shadow:none!important;
        }

        .carousel-indicators li {
            background-color:#D5D5D5;
            border: 0px solid #131A37;
						border-radius: 2px!important;
						width: 15px!important;
						height: 2px!important;
        }

        .carousel-indicators .active {
            /* background-color:#FF5A5A!important; */
						height: 5px!important;
						width: 25px!important;
        }

				.carousel-indicators {
            left: 10%!important;
						bottom:-100px!important;
        }

        .input-group-addon {
            color: #555555;
            background:none!important;
            border: none;
        }

        .modal-footer {
            text-align: center;
        }

				.bg-login {
					background: url(../img/login/bg-login.png);
					background-size: cover;
				}

				.panel {
			    margin-bottom: 20px;
			    background-color: #ffffff;
			    border: 0px solid transparent;
			        border-top-color: transparent;
			        border-right-color: transparent;
			        border-bottom-color: transparent;
			        border-left-color: transparent;
			    border-radius: 0px;
			    -webkit-box-shadow: 0 0px 0px rgba(0, 0, 0, 0.05);
			    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.05);
			}

    </style>
	</head>

<body class="no-skin">
    <div class="container">

        <div class="panel-body panel-login">
        <div class="row">
            <div class="col-xs-8" style="padding: 0px;">
                <div class="panel-body bg-login" style="height: 650px;">

                <div class="carouselContainer">
                    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                        <!-- Indicators -->
                        <ol class="carousel-indicators">
                        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                        </ol>

                        <!-- Wrapper for slides -->
                        <div class="carousel-inner" role="listbox">
                        <div class="item active">
                            <div class="carousel-caption">
																<span style="text-align: left;">
																<h2><b>Sales Indihome Information System</b></h2>
																<p> adalah aplikasi analytics berbasis data spasial yang dapat menampilkan bermacam data dalam satu visualisasi terintegrasi sehingga menghasilkan suatu insight dan action.</p>
																<p>Capability SIIS:</p>
																<p>-Inventory Management</p>
																<p>-Planning -Analytic </p>
																<p>-Tracking & Monitoring.</p> </span>
														</div>
                        </div>
                        <div class="item">
                            <div class="carousel-caption">
                            Different Caption 2 text
                            </div>
                        </div>
                        </div>

                    </div>
                    </div>
                </div>
            </div>
        <div class="col-xs-4" style="padding: 0px;height: 650px;background: white;">
            <div class="panel panel-default panel-logo">
                <div class="panel-heading" style="padding-top: 40px;">
                        <img src="../img/login/SiiS-logo.png" class="siis-logo-login" />
                    <h6 class="textwelcome">Welcome to SIIS</h5>
                    <h5 class="" style="color: #8D8A92;">Login SIIS Sales IndiHome Information System dan akses fitur SIIS sesuai dengan kebutuhan anda.</h5>
                </div>
                <div class="panel-body">

                    <!--p># Modul config harus disesuaikan dengan koneksi database masing-masing : <i>/Application/config/module.config</i> </p>
                    <p><a href="https://drive.google.com/file/d/1V7B8tMNJIq60PTXdEO_xs05OBWiAn7_p/view?usp=sharing" target="_blank"># download tabel USER</a></p-->
                    <form method="post" id="login" action="<?php echo $this->basePath()?>/user/authenticate">

                        <fieldset>

                            <center>

                                <div class="form-group" style="margin-top:20px;">
                                    <label class="block clearfix">
                                        <span class="block input-icon input-icon-right">
                                            <div class="input-group col-xs-12">
                                            <input type="text" id="username" name="username" class="form-control" placeholder="Username" required />
												<span class="input-group-addon">
													<i class="fa fa-user bigger-110" style="font-size: 145%!important;"></i>
												</span>
											</div>
                                        </span>
                                    </label>
                                </div>

                                <div class="form-group">
                                    <label class="block clearfix">
                                        <span class="block input-icon input-icon-right">
                                        <div class="input-group  col-xs-12">
                                        <input type="password" id="passwd" name="passwd" class="form-control" placeholder="Password" required />
												<span class="input-group-addon">
													<i class="fa fa-key bigger-110"></i>
												</span>
											</div>
                                        </span>
                                    </label>
                                </div>

                                <div class="space"></div>


                                    <button type="submit" class="width-100 center btn btn-sm btn-primary-login">
                                        <i class="icon-key"></i>
                                        START SIIS NOW
                                    </button>

                                <div class="space-4"></div>
                                <input type="text" name="token_keamanan" value="<?php if(isset($this->token_keamanan)) { echo $this->token_keamanan; }?>" hidden>
                                <input type="text" id="key" name="key" value="0" hidden>
                                <div style="font-weight: bold;"><?php if(isset($this->message)) { echo $this->message; }?></div>

                            </center>
                        </fieldset>

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

    </div>

</div>

								<!-- PAGE CONTENT ENDS -->

                                </div><!-- /.page-content -->
				</div>
			</div><!-- /.main-content -->
		</div><!-- /.main-container -->

		<!-- basic scripts -->

		<!--[if !IE]> -->
		<script type="text/javascript">
			window.jQuery || document.write("<script src='../assets/js/jquery.js'>"+"<"+"/script>");
		</script>

		<!-- <![endif]-->

		<!--[if IE]>
<script type="text/javascript">
 window.jQuery || document.write("<script src='../assets/js/jquery1x.js'>"+"<"+"/script>");
</script>
<![endif]-->
		<script type="text/javascript">
			if('ontouchstart' in document.documentElement) document.write("<script src='../assets/js/jquery.mobile.custom.js'>"+"<"+"/script>");
		</script>
		<script src="../assets/js/bootstrap.js"></script>

		<!-- page specific plugin scripts -->

		<!-- ace scripts -->
		<script src="../assets/js/ace/elements.scroller.js"></script>
		<script src="../assets/js/ace/elements.colorpicker.js"></script>
		<script src="../assets/js/ace/elements.fileinput.js"></script>
		<script src="../assets/js/ace/elements.typeahead.js"></script>
		<script src="../assets/js/ace/elements.wysiwyg.js"></script>
		<script src="../assets/js/ace/elements.spinner.js"></script>
		<script src="../assets/js/ace/elements.treeview.js"></script>
		<script src="../assets/js/ace/elements.wizard.js"></script>
		<script src="../assets/js/ace/elements.aside.js"></script>
		<script src="../assets/js/ace/ace.js"></script>
		<script src="../assets/js/ace/ace.ajax-content.js"></script>
		<script src="../assets/js/ace/ace.touch-drag.js"></script>
		<script src="../assets/js/ace/ace.sidebar.js"></script>
		<script src="../assets/js/ace/ace.sidebar-scroll-1.js"></script>
		<script src="../assets/js/ace/ace.submenu-hover.js"></script>
		<script src="../assets/js/ace/ace.widget-box.js"></script>
		<script src="../assets/js/ace/ace.settings.js"></script>
		<script src="../assets/js/ace/ace.settings-rtl.js"></script>
		<script src="../assets/js/ace/ace.settings-skin.js"></script>
		<script src="../assets/js/ace/ace.widget-on-reload.js"></script>
		<script src="../assets/js/ace/ace.searchbox-autocomplete.js"></script>

		<!-- inline scripts related to this page -->
		<script type="text/javascript">
			jQuery(function($) {
			   $('#sidebar2').insertBefore('.page-content').ace_sidebar('collapse', false);
			   $('#navbar').addClass('h-navbar');
			   $('.footer').insertAfter('.page-content');

			   $('.page-content').addClass('main-content');

			   $('.menu-toggler[data-target="#sidebar2"]').insertBefore('.navbar-brand-new');


			   $(document).on('settings.ace.two_menu', function(e, event_name, event_val) {
				 if(event_name == 'sidebar_fixed') {
					 if( $('#sidebar').hasClass('sidebar-fixed') ) $('#sidebar2').addClass('sidebar-fixed')
					 else $('#sidebar2').removeClass('sidebar-fixed')
				 }
			   }).triggerHandler('settings.ace.two_menu', ['sidebar_fixed' ,$('#sidebar').hasClass('sidebar-fixed')]);

			   $('#sidebar2[data-sidebar-hover=true]').ace_sidebar_hover('reset');
               $('#sidebar2[data-sidebar-scroll=true]').ace_sidebar_scroll('reset', true);

               $('.carousel').carousel();

            });


		</script>

		<!-- the following scripts are used in demo only for onpage help and you don't need them -->
		<link rel="stylesheet" href="../assets/css/ace.onpage-help.css" />
		<link rel="stylesheet" href="../docs/assets/js/themes/sunburst.css" />

		<script type="text/javascript"> ace.vars['base'] = '..'; </script>
		<script src="../assets/js/ace/elements.onpage-help.js"></script>
		<script src="../assets/js/ace/ace.onpage-help.js"></script>
		<script src="../docs/assets/js/rainbow.js"></script>
		<script src="../docs/assets/js/language/generic.js"></script>
		<script src="../docs/assets/js/language/html.js"></script>
		<script src="../docs/assets/js/language/css.js"></script>
		<script src="../docs/assets/js/language/javascript.js"></script>
	</body>
</html>
