<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title><?php if(!empty($site_name)){ echo $site_name; } ?> | <?php echo $title; ?></title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content='width=device-width, initial-scale=1, maximum-scale=10, user-scalable=yes' name='viewport'>
	<meta name="description" content="Aplikasi Ujian Online smkinas">
	<meta name="keywords" content="Aplikasi Ujian Online smk inas">
	<meta name="author" content="mariarumi">
    <!-- Bootstrap 3.3.4 -->
    <link href="<?php echo base_url(); ?>public/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- Font Awesome Icons -->
    <link href="<?php echo base_url(); ?>public/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- Ionicons -->
    <link href="<?php echo base_url(); ?>public/plugins/ionicons/css/ionicons.min.css" rel="stylesheet" type="text/css" />
    <!-- Theme style -->
    <link href="<?php echo base_url(); ?>public/plugins/adminlte/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link href="<?php echo base_url(); ?>public/plugins/adminlte/css/skins/_all-skins.min.css" rel="stylesheet" type="text/css" />
    <!-- DATA TABLES -->
    <link href="<?php echo base_url(); ?>public/plugins/datatables/dataTables.bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="<?php echo base_url(); ?>public/plugins/datatables/extensions/Responsive/css/dataTables.responsive.css" rel="stylesheet" type="text/css" />

    <link href="<?php echo base_url(); ?>public/plugins/datetimepicker/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css" />
    <link href="<?php echo base_url(); ?>public/plugins/datepicker/datepicker3.css" rel="stylesheet" type="text/css" />

    <!-- summernote dimatikan
    <link href="<?php echo base_url(); ?>public/plugins/summernote/summernote.css" rel="stylesheet" type="text/css" />
    -->

    <link href="<?php echo base_url(); ?>public/plugins/pnotify/pnotify.custom.min.css" rel="stylesheet" type="text/css" />
    <!-- daterange picker -->
    <link href="<?php echo base_url(); ?>public/plugins/daterangepicker/daterangepicker-bs3.css" rel="stylesheet" type="text/css" />

    <!-- select2 -->
    <link href="<?php echo base_url(); ?>public/plugins/select2-4.0.5/css/select2.min.css" rel="stylesheet" type="text/css" />

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    
    
    <!-- jQuery 2.1.4 -->
    <script src="<?php echo base_url(); ?>public/plugins/jQuery/jQuery-2.1.4.min.js"></script>
    <!-- Bootstrap 3.3.2 JS -->
    <script src="<?php echo base_url(); ?>public/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <!-- FastClick -->
    <script src='<?php echo base_url(); ?>public/plugins/fastclick/fastclick.min.js'></script>
    <!-- AdminLTE App -->
    <script src="<?php echo base_url(); ?>public/plugins/adminlte/js/app.min.js" type="text/javascript"></script>
    <!-- Sparkline -->
    <script src="<?php echo base_url(); ?>public/plugins/sparkline/jquery.sparkline.min.js" type="text/javascript"></script>
    <!-- SlimScroll 1.3.0 -->
    <script src="<?php echo base_url(); ?>public/plugins/slimScroll/jquery.slimscroll.min.js" type="text/javascript"></script>
	
	 <!-- ChartJS 1.0.1 -->
    <script src="<?php echo base_url(); ?>public/app.js" type="text/javascript"></script>

    <script src="<?php echo base_url(); ?>public/plugins/datatables/jquery.dataTables.min.js" type="text/javascript"></script>
    <script src="<?php echo base_url(); ?>public/plugins/datatables/dataTables.reload.js" type="text/javascript"></script>
    <script src="<?php echo base_url(); ?>public/plugins/datatables/dataTables.bootstrap.min.js" type="text/javascript"></script>
    <script src="<?php echo base_url(); ?>public/plugins/datatables/extensions/Responsive/js/dataTables.responsive.min.js" type="text/javascript"></script>
    <!-- bootstrap time picker -->
    <script src="<?php echo base_url(); ?>public/plugins/datetimepicker/bootstrap-datetimepicker.min.js" type="text/javascript"></script>
    <script src="<?php echo base_url(); ?>public/plugins/datepicker/bootstrap-datepicker.js" type="text/javascript"></script>
    <!-- AdminLTE for demo purposes -->
    <script src="<?php echo base_url(); ?>public/plugins/adminlte/js/demo.js" type="text/javascript"></script>
    
    <!-- summernote dimatikan
    <script src="<?php echo base_url(); ?>public/plugins/summernote/summernote.js" type="text/javascript"></script>
    -->

    <script src="<?php echo base_url(); ?>public/plugins/pnotify/pnotify.custom.min.js" type="text/javascript"></script>

    <!-- datetimerange -->
    <script src="<?php echo base_url(); ?>public/plugins/daterangepicker/moment.min.js" type="text/javascript"></script>
    <script src="<?php echo base_url(); ?>public/plugins/daterangepicker/daterangepicker.js" type="text/javascript"></script>

    <!-- ckeditor -->
    <script src="<?php echo base_url(); ?>public/plugins/ckeditor/ckeditor.js" type="text/javascript"></script>
    
    <!-- select2 -->
    <script src="<?php echo base_url(); ?>public/plugins/select2-4.0.5/js/select2.min.js" type="text/javascript"></script>

    <!-- membuat gambar responsive pada table -->
    <!-- membuat gambar responsive pada table -->
<style type="text/css">
/* ===============================
   PREMIUM PURPLE DASHBOARD 2026
   =============================== */

body.skin-purple{
    background:linear-gradient(135deg,#ede9fe,#f5f3ff);
    font-family:'Poppins',sans-serif;
    color:#2e1065;
}

/* ===== NAVBAR ===== */
.main-header .navbar{
    background:linear-gradient(135deg,#6d28d9,#9333ea) !important;
    border:none;
    box-shadow:0 5px 25px rgba(124,58,237,0.3);
}

.main-header .logo{
    background:transparent !important;
    font-weight:700;
    letter-spacing:1px;
    color:#fff !important;
}

/* ===== SIDEBAR (GLASS EFFECT) ===== */
.main-sidebar{
    background:rgba(76,29,149,0.85) !important;
    backdrop-filter:blur(12px);
    border-right:1px solid rgba(255,255,255,0.1);
}

.sidebar-menu>li>a{
    color:#e9d5ff !important;
    border-radius:14px;
    margin:6px 12px;
    transition:all .3s ease;
    font-weight:500;
}

.sidebar-menu>li>a:hover{
    background:rgba(255,255,255,0.1);
    transform:translateX(6px);
    box-shadow:0 0 15px rgba(168,85,247,0.4);
}

.sidebar-menu>li.active>a{
    background:linear-gradient(90deg,#a855f7,#c084fc);
    color:#fff !important;
    box-shadow:0 0 20px rgba(168,85,247,0.6);
}

/* ===== CONTENT AREA ===== */
.content-wrapper{
    background:transparent;
    padding:25px;
}

/* ===== GLASS CARD ===== */
.box{
    background:rgba(255,255,255,0.6) !important;
    backdrop-filter:blur(15px);
    border-radius:20px !important;
    border:1px solid rgba(255,255,255,0.3) !important;
    box-shadow:0 10px 40px rgba(124,58,237,0.15) !important;
    transition:all .3s ease;
}

.box:hover{
    transform:translateY(-5px);
    box-shadow:0 15px 45px rgba(124,58,237,0.25) !important;
}

/* ===== BUTTON ===== */
.btn-primary{
    background:linear-gradient(135deg,#7c3aed,#c084fc);
    border:none;
    border-radius:14px;
    font-weight:600;
    padding:8px 18px;
    transition:.3s;
}

.btn-primary:hover{
    transform:translateY(-3px);
    box-shadow:0 0 25px rgba(124,58,237,0.5);
}
/* ==================================
   ULTRA FUTURISTIC PURPLE ADD-ON
   ================================== */

/* ===== ANIMATED NAVBAR ===== */
.main-header .navbar{
    background:linear-gradient(-45deg,#6d28d9,#9333ea,#a855f7,#7c3aed) !important;
    background-size:400% 400%;
    animation:gradientMove 10s ease infinite;
}

@keyframes gradientMove{
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

/* ===== BACKGROUND SOFT GLOW ===== */
body.skin-purple::before{
    content:"";
    position:fixed;
    top:-200px;
    left:-200px;
    width:500px;
    height:500px;
    background:radial-gradient(circle,#c084fc 0%,transparent 70%);
    opacity:0.3;
    z-index:-1;
    animation:floatGlow 12s ease-in-out infinite alternate;
}

@keyframes floatGlow{
    from{transform:translate(0,0)}
    to{transform:translate(200px,200px)}
}

/* ===== STATISTIC CARD PREMIUM ===== */
.small-box{
    border-radius:22px !important;
    backdrop-filter:blur(15px);
    background:rgba(255,255,255,0.5) !important;
    border:1px solid rgba(255,255,255,0.4);
    box-shadow:0 15px 40px rgba(124,58,237,0.2);
    transition:.3s;
}

.small-box:hover{
    transform:translateY(-8px) scale(1.02);
    box-shadow:0 20px 50px rgba(124,58,237,0.3);
}

/* ===== SIDEBAR ICON GLOW ===== */
.sidebar-menu li a i{
    transition:.3s;
}

.sidebar-menu li a:hover i{
    color:#ffffff;
    text-shadow:0 0 12px #c084fc;
    transform:scale(1.2);
}

/* ===== BUTTON RIPPLE EFFECT ===== */
.btn-primary{
    position:relative;
    overflow:hidden;
}

.btn-primary::after{
    content:"";
    position:absolute;
    width:200%;
    height:200%;
    top:100%;
    left:-50%;
    background:rgba(255,255,255,0.2);
    transform:rotate(45deg);
    transition:.6s;
}

.btn-primary:hover::after{
    top:-50%;
}

/* ===== TABLE ROW HOVER PREMIUM ===== */
.table tbody tr:hover{
    background:rgba(168,85,247,0.08);
    transform:scale(1.01);
}

/* ===== SMOOTH SCROLL ===== */
html{
    scroll-behavior:smooth;
}
/* ===== TABLE ===== */
.table>thead{
    background:linear-gradient(90deg,#7c3aed,#a855f7);
    color:#fff;
    border-radius:12px;
}

.table{
    border-radius:15px;
    overflow:hidden;
}

/* ===== MODAL ===== */
.modal-content{
    border-radius:20px;
    border:none;
    backdrop-filter:blur(12px);
}

.modal-header{
    background:linear-gradient(135deg,#7c3aed,#c084fc);
    color:#fff;
    border-top-left-radius:20px;
    border-top-right-radius:20px;
}

/* ===== FOOTER ===== */
.main-footer{
    background:transparent;
    border-top:1px solid rgba(124,58,237,0.2);
    color:#6b21a8;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar{
    width:6px;
}
::-webkit-scrollbar-thumb{
    background:linear-gradient(#7c3aed,#c084fc);
    border-radius:10px;
}

/* ===== SMOOTH TRANSITION GLOBAL ===== */
*{
    transition:all .2s ease-in-out;
}
  table img {
    display: block;
    max-width: 100%;
    height: auto;
  }

  /* ===== TAMBAHAN MODERN ===== */

  body.skin-purple{
      background:#f4f6f9;
      font-family:'Poppins',sans-serif;
  }

  .main-header .navbar{
      background:linear-gradient(135deg,#1e3c72,#2a5298)!important;
      border:none;
  }

  .main-header .logo{
      background:linear-gradient(135deg,#162447,#1f4068)!important;
      font-weight:700;
  }

  .main-sidebar{
      background:#111827!important;
  }

  .sidebar-menu>li>a{
      color:#cbd5e1!important;
      border-radius:8px;
      margin:4px 8px;
      transition:.3s;
  }

  .sidebar-menu>li>a:hover{
      background:linear-gradient(135deg,#1e3c72,#2a5298);
      color:#fff!important;
  }

  .content-wrapper{
      background:#f4f6f9;
      padding:20px;
  }

  .box{
      border-radius:16px!important;
      box-shadow:0 10px 30px rgba(0,0,0,.08)!important;
      border:none!important;
  }

  .btn-primary{
      background:linear-gradient(135deg,#1e3c72,#2a5298);
      border:none;
      border-radius:10px;
      font-weight:600;
  }

</style>
  </script>
  </head>
  <body class="skin-purple sidebar-mini">
    <div class="wrapper">

      <header class="main-header">

        <!-- Logo -->
        <a href="<?php echo site_url(); ?>/manager" class="logo">
          <!-- mini logo for sidebar mini 50x50 pixels -->
          <span class="logo-mini"><b>CBT</b></span>
          <!-- logo for regular state and mobile devices -->
          <span class="logo-lg"><b>INAS EXAM</b></span>
        </a>

        <!-- Header Navbar: style can be found in header.less -->
        <nav class="navbar navbar-static-top" role="navigation">
          <!-- Sidebar toggle button-->
          <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
            <span class="sr-only">Toggle navigation</span>
          </a>
          <!-- Navbar Right Menu -->
          <div class="navbar-custom-menu">
            <ul class="nav navbar-nav">
              <!-- User Account: style can be found in dropdown.less -->
              <li class="dropdown user user-menu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  <img src="<?php echo base_url(); ?>public/plugins/adminlte/img/avatar04.png" class="user-image" alt="User Image"/>
                  
                </a>
                <ul class="dropdown-menu">
                  <!-- User image -->
                  <li class="user-header">
                    <img src="<?php echo base_url(); ?>public/plugins/adminlte/img/avatar04.png" class="img-circle" alt="User Image" />
                    <p>
                      kangrinan
                      <small>Selamat Datang</small>
                    </p>
                  </li>
                  <!-- Menu Footer-->
                  <li class="user-footer">
                    <div class="pull-left">
                      <a data-toggle="modal" href="#modal-password" class="btn btn-default btn-flat">Password</a>
                    </div>
                    <div class="pull-right">
                      <a href="<?php echo site_url(); ?>/manager/welcome/logout" class="btn btn-default btn-flat">Sign out</a>
                    </div>
                  </li>
                </ul>
              </li>
            </ul>
          </div>

        </nav>
      </header>
      <!-- Left side column. contains the logo and sidebar -->
      <aside class="main-sidebar">
        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">
          <!-- Sidebar user panel -->
          <div class="user-panel">
            <div class="pull-left image">
              <img src="<?php echo base_url(); ?>public/plugins/adminlte/img/avatar04.png" class="img-circle" alt="User Image" />
            </div>
            <div class="pull-left info">
              <p>kangrinan</p>

              <a href="#"><i class="fa fa-circle text-success"></i> INAS MOBILE EXAM</a>
            </div>
          </div>
          
          <!-- sidebar menu: : style can be found in sidebar.less -->
          <ul class="sidebar-menu">
            <li class="header">#smk industri nasional 1</li>
			<li><a href="<?php echo site_url(); ?>/manager"><i class="fa fa-dashboard"></i> <span>Dashboard</span></a></li>
            
            <?php 
            if(!empty($sidemenu)){
                echo $sidemenu;
            }
            ?>
            
          </ul>
        </section>
        <!-- /.sidebar -->
      </aside>

      <!-- Content Wrapper. Contains page content -->
      <div class="content-wrapper">
		<?php 
			if(!empty($content)){
				echo $content;
			}
		?>
      </div><!-- /.content-wrapper -->

      <footer class="main-footer">
        <div class="pull-right hidden-xs">
          <b>Version</b> <?php if(!empty($site_version)){ echo $site_version; } ?>
        </div>
        <strong>&copy; kangrinan#mariarumi</strong>
      </footer>

    </div><!-- ./wrapper -->
	
	<div class="modal" id="modal-password" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Change Password</h4>
				</div>
				<div class="modal-body">
						<span id="form-pesan-password">
                        </span>
						<?php echo form_open('manager/dashboard/password','id="form-password"')?>
                            <div class="box-body">
                                <div class="form-group">
                                    <label>Old Password</label>
                                    <input type="password" class="form-control" id="password-old" name="password-old" placeholder="Old Password">
                                </div>
                                <div class="form-group">
                                    <label>New Password</label>
                                    <input type="password" class="form-control" id="password-new" name="password-new" placeholder="New Password">
                                </div>
                                <div class="form-group">
                                    <label>Confirm Password</label>
                                    <input type="password" class="form-control" id="password-confirm" name="password-confirm" placeholder="Confirm Password">
                                </div>
                            </div>
                        <?php echo form_close(); ?>   
				</div>
				<div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="password-submit">Change</button>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
    
    <div class="modal" id="modal-proses" data-backdrop="static">
  		<div class="modal-dialog">
  			<div class="modal-content">
  				<div class="modal-body">
            <div style="text-align: center;">
              <img width="50" src="<?php echo base_url(); ?>public/images/loading.gif" /> <br />Data Sedang diproses...              
            </div>
            <br />
            Catatan : Refresh Halaman jika proses terlalu Lama.
  				</div>
  			</div><!-- /.modal-content -->
  		</div><!-- /.modal-dialog -->
  	</div><!-- /.modal -->
	
	<script>
    $(function () {
                        
      //Form Ubah Password
			$('#modal-password').on('shown.bs.modal', function (e) {
				$('#form-pesan-password').html('');
				$('#password-old').val('');
				$('#password-new').val('');
				$('#password-confirm').val('');
				$('#password-old').focus();
			});
			
			$('#password-submit').click(function(){
        $('#form-password').submit();
			});
			
			$('#form-password').submit(function(){        
        $.ajax({
          url:"<?php echo site_url(); ?>/manager/dashboard/password",
          type:"POST",
          data:$('#form-password').serialize(),
          cache: false,
          success:function(respon){
            var obj = $.parseJSON(respon);
            if(obj.status==1){
              $('#form-pesan-password').html(pesan_succ('Password berhasil diubah !'));
              setTimeout(function(){$('#modal-password').modal('hide')}, 1500);
            }else{
              $('#form-pesan-password').html(pesan_err(obj.error));
            }
          }
        });
        return false;
			});
    });
  </script>
  </body>
</html>
