<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
      <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TLS2U.COM | Vip</title>
    <link rel="shortcut icon" href="assets2/ico/tls2u.png">

    <!-- BOOTSTRAP STYLES-->
    <link href="assets2/bootstrap/css/bootstrap.css" rel="stylesheet" />
     <!-- FONTAWESOME STYLES -->
    <link rel="stylesheet" href="assets2/fontawesome/css/all.css">  
     <!-- MORRIS CHART STYLES-->
    <link href="assets/js/morris/morris-0.4.3.min.css" rel="stylesheet" />
        <!-- CUSTOM STYLES-->
    <link href="assets/css/custom.css" rel="stylesheet" />
     <!-- GOOGLE FONTS-->
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
     <!-- TABLE STYLES-->
    <link rel="stylesheet" href="assets/css/jquery.dataTables.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.1.0/css/buttons.dataTables.min.css">
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
      <script type="text/javascript" src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>
      <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.1.0/js/dataTables.buttons.min.js"></script>
      <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.1.0/js/buttons.flash.min.js"></script>
      <script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
      <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.1.0/js/buttons.print.min.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.js"></script>
      <script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
      <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.1.0/js/buttons.html5.min.js"></script>
      
      <!-- WAJIB: jQuery dulu -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    
    <!-- LEPAS TU: DataTables -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>



  <style id="compiled-css" type="text/css">
        .navbar-side { background: #222d32; color: #b8c7ce; }
        .navbar-side .nav > li > a {
            display: flex; align-items: center;
            padding: 12px 15px; color: #b8c7ce;
            text-decoration: none; transition: background 0.3s, color 0.3s;
        }
        .navbar-side .nav > li > a:hover,
        .navbar-side .nav > li > a.active-menu { background: #1a2226; color: #fff; }
        .navbar-side .nav > li > a > i { width: 22px; text-align: center; margin-right: 10px; }
        .nav-second-level, .nav-third-level {
            list-style: none; padding: 0; margin: 0; background: #2c3b41;
        }
        .nav-second-level li a, .nav-third-level li a {
            display: flex; align-items: center;
            padding: 10px 40px 10px 45px; color: #b8c7ce;
            text-decoration: none; transition: background 0.3s, color 0.3s;
        }
        .nav-second-level li a i, .nav-third-level li a i {
            width: 18px; text-align: center; margin-right: 8px;
        }
        .nav-second-level li a:hover, .nav-third-level li a:hover {
            background: #1a2226; color: #fff;
        }
        .nav-third-level li a { padding-left: 65px; }
        .fa.arrow { margin-left: auto; transition: transform 0.3s; }
        .active-menu .fa.arrow { transform: rotate(-90deg); }
        #orderBadge { font-size: 12px; padding: 2px 6px; border-radius: 12px; margin-left: 5px; }
        .blink { animation: blinkAnim 0.6s step-start 3; }
        @keyframes blinkAnim { 50% { opacity: 0; } }
        
        /* First level submenu (slightly indented) */
        .nav-second-level li a {
            padding-left: 40px !important;  /* move submenu items to the right */
        }
        
        /* Second level submenu (indented even more) */
        .nav-third-level li a {
            padding-left: 60px !important;
        }
  </style>


  <script type="text/javascript">
//<![CDATA[

    window.onload=function(){

$('#example').DataTable({
            lengthMenu : [[10, 25, 50, -1], [10, 25, 50, "All"]],
			dom : 'lBfrtip',
			buttons : [ 'copy', 'csv', 'pdf', 'print',{
	            extend: 'excel',
	            text: 'Export To Excel'
	        } ]
		});

    }

//]]></script>


</head>
<body>
    <div id="wrapper">