<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>AdminKW | Mobile</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="../../adminlte/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">
  <!-- Theme style -->
  <link rel="stylesheet" href="../../adminlte/dist/css/AdminLTE.min.css">
  <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
  <link rel="stylesheet" href="../../adminlte/dist/css/skins/_all-skins.min.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.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body class="hold-transition skin-blue sidebar-mini">
  <!-- Modal Stock In -->
  <div id="mdlTransactionDate" class="modal fade" role="dialog" 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">Transaction Date</h4>
        </div>
        <!-- form start -->
        <form method="GET">
          <div class="modal-body">
            <div class="row">
				<div class="col-xs-12">
					<div class="form-group">
						<label for="transDate">Set Transaction Date</label>
						<div class="input-group">
						<div class="input-group-addon">
							<i class="fa fa-calendar"></i>
						</div>
						<input id="transDate" name="transDate" type="text" class="form-control datepicker" data-inputmask="'alias': 'mm/dd/yyyy'" data-mask value="<?php echo $selectedDate; ?>">
						<span class="input-group-btn">
							<button class="btn btn-info btn-flat" type="submit">OK</button>
						</span>
						</div>
						<!-- /.input group -->
					</div>
				</div>
            </div>
		   </div>
        </form>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>
  <!-- /.modal -->
  <!-- Site wrapper -->
  <div class="wrapper">

    <header class="main-header">
      <!-- Logo -->
      <a href="<?php site_url(); ?>" class="logo">
        <!-- mini logo for sidebar mini 50x50 pixels -->
        <span class="logo-mini"><b>Exec</b>KW</span>
        <!-- logo for regular state and mobile devices -->
        <span class="logo-lg"><b>Karat World</b>&nbsp;Viewer</span>
      </a>

      <?php $this->load->view('executiveview/topnav'); ?>

    </header>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
      <!-- Content Header (Page header) -->
      <section class="content-header">
        <h1>
          Dashboard
          <small>View of sales summary</small>
        </h1>
      </section>

      <!-- Main content -->
      <section class="content">

        <!-- Default box for Recent Update -->
        <div class="box">
          <div class="box-header with-border">
            <h3 class="box-title">Selected Transaction Date</h3>
            <div class="box-tools pull-right">
              <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button>
            </div>
          </div>
          <div class="box-body">
            <p>Your selected transaction date is <b><?php echo $selectedDate; ?></b></p>
			<button type="button" class="btn btn-info btn-flat" data-toggle="modal" data-target="#mdlTransactionDate">Change Date</button>
          </div><!-- /.box-body -->
        </div><!-- /.box -->

        <!-- Default box for Item Store Inquiry -->
        <div class="box">
          <div class="box-header with-border">
            <h3 class="box-title">Branch Sales for date: <b><?php echo $selectedDate; ?></b></h3>
            <div class="box-tools pull-right">
              <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button>
            </div>
          </div>
          <div class="box-body">
			<div class="row">
				<div class="col-xs-12">
					<div class="table-responsive">
						<table id="dtBranchSales" class="table table-bordered table-striped">
							<thead><th>Branch</th><th>Sales</th><th>SR1</th><th>SIR</th></thead>
							<tbody><?php echo $htmlTableList; ?></tbody>
						</table>
                	</div>
				</div>
			</div>
          </div><!-- /.box-body -->
          <div class="box-footer">

          </div><!-- /.box-footer-->
        </div><!-- /.box -->

        

        

      </section><!-- /.content -->
    </div><!-- /.content-wrapper -->

    <footer class="main-footer">
      <div class="pull-right hidden-xs">
        <b>Version</b> 2.3.0
      </div>
      <strong>Copyright &copy; 2014-2015 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights reserved.
    </footer>
  </div><!-- ./wrapper -->

  <!-- jQuery 2.1.4 -->
  <script src="../../adminlte/plugins/jQuery/jQuery-2.1.4.min.js"></script>
  <!-- Bootstrap 3.3.5 -->
  <script src="../../adminlte/bootstrap/js/bootstrap.min.js"></script>
  <!-- InputMask -->
  <script src="../../adminlte/plugins/input-mask/jquery.inputmask.js"></script>
  <script src="../../adminlte/plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
  <script src="../../adminlte/plugins/input-mask/jquery.inputmask.extensions.js"></script>
  <!-- datepicker -->
  <script src="../../adminlte/plugins/datepicker/bootstrap-datepicker.js"></script>
  <!-- DataTables -->
  <script src="adminlte/plugins/datatables/jquery.dataTables.min.js"></script>
    <script src="adminlte/plugins/datatables/dataTables.bootstrap.min.js"></script>
  <!-- SlimScroll -->
  <script src="../../adminlte/plugins/slimScroll/jquery.slimscroll.min.js"></script>
  <!-- FastClick -->
  <script src="../../adminlte/plugins/fastclick/fastclick.min.js"></script>
  <!-- AdminLTE App -->
  <script src="../../adminlte/dist/js/app.min.js"></script>

  <script>
	$(function(){
		//Datemask dd/mm/yyyy
        //$("#dtTransDate").inputmask("mm/dd/yyyy", {"placeholder": "mm/dd/yyyy"});
        $('.datepicker').datepicker({
            format: 'mm/dd/yyyy',
			autoclose: true
        });

		$('#dtBranchSales').DataTable({
          "paging": true,
          "lengthChange": false,
          "searching": true,
          "ordering": true,
          "info": true,
          "autoWidth": false
        });

	});
  </script>
</body>

</html>