<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AdminKW | Karat Card</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">
    <!-- bootstrap datepicker -->
		<link rel="stylesheet" href="adminlte/plugins/datepicker/datepicker3.css">
    <!-- Select2 -->
    <link rel="stylesheet" href="adminlte/plugins/select2/select2.min.css">
    <!-- DataTables -->
    <link rel="stylesheet" href="adminlte/plugins/datatables/dataTables.bootstrap.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="mdlAddNewCustomerCard" 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">Karat Card Transactions</h4>
            </div>
            <!-- form start -->
            <form id="frmAddNewCustomerCard">
              <div class="modal-body">
                  <div class="row">
                      <div class="col-lg-12">
                          <h3>Customer Information</h3>
                          <p>Add customer information for new customer. Otherwise, select "New Card for Existing Customer".</p>
                      </div>
                  </div>
                  <div class="row">
                      <div class="col-lg-6 col-xs-12">
                      <div class="form-group">
                          <label>Enter Full Name <i>(Last name, first name)</i></label>
                          <input type="text" class="form-control" id="txtLastName" name="txtLastName" placeholder="Last Name">
                      </div>
                      </div>
                      <div class="col-lg-6 col-xs-12">
                      <div class="form-group">
                          <label>&nbsp;</label>
                          <input type="text" class="form-control" id="txtFirstName" name="txtFirstName" placeholder="First Name">
                      </div>
                      </div>
                  </div>
                  <div class="row">
                      <div class="col-lg-4 col-xs-12">
                          <div class="form-group">
                              <label>Select Date of Birth</label>
                              <input id="dtDOB" name="dtDOB" type="text" class="form-control datepicker" data-inputmask="'alias': 'mm/dd/yyyy'" data-mask>
                          </div>
                      </div>
                      <div class="col-lg-4 col-xs-12">
                          <div class="form-group">
                              <label>Enter Contact Information</label>
                              <input type="text" class="form-control" id="txtContactInfo" name="txtContactInfo" placeholder="Mobile or Landline">
                          </div>
                      </div>
                      <div class="col-lg-4 col-xs-12">
                          <div class="form-group">
                              <label>Enter e-Mail Address</label>
                              <input type="text" class="form-control" id="txtEmail" name="txtEmail" placeholder="myemail@gmail.com">
                          </div>
                      </div>
                  </div>  
                  <div class="row">
                    <div class="form-group col-lg-12">
                      <label for="txtAddress">Address</label>
                      <input type="text" class="form-control" id="txtAddress" name="txtAddress" placeholder="Enter customer address">
                    </div>
                  </div>
                  <div class="row">
                      <div class="col-lg-12"><h3>Karat Card Information for Branch <?php echo $this->session->user["branch"]; ?></h3></div>
                  </div>
                  <div class="row">
                      <div class="col-lg-6 col-xs-12">
                          <div class="form-group">
                              <label>Karat Card Number</label>
                              <input type="text" class="form-control" id="txtCardNo" name="txtCardNo" placeholder="karat Card numbeNumber">
                              <input type="hidden" id="hdBranch" name="hdBranch" value="<?php echo $this->session->user["branch"]; ?>">
                          </div>
                      </div>
                      <div class="col-lg-6 col-xs-12">
                          <div class="form-group">
                              <label>Invoice Number</label>
                              <input type="text" class="form-control" id="txtInvoiceNo" name="txtInvoiceNo" placeholder="Invoice Number">
                          </div>
                      </div>
                  </div> 
                  <div class="row">
                      <div class="col-lg-6 col-xs-12">
                          <div class="form-group">
                              <label>Purchase Date</label>
                              <input id="dtPurchaseDate" name="dtPurchaseDate" type="text" class="form-control datepicker" data-inputmask="'alias': 'mm/dd/yyyy'" data-mask>
                          </div>
                      </div>
                      <div class="col-lg-6 col-xs-12">
                          <div class="form-group">
                              <label>Expiry Date</label>
                              <input id="dtExpiry" name="dtExpiry" type="text" class="form-control datepicker" data-inputmask="'alias': 'mm/dd/yyyy'" data-mask>
                          </div>
                      </div>
                  </div>       
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Save changes</button>
              </div>
            </form>
          </div>
          <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
      </div>
      <!-- /.modal -->
      <!-- /.Modal Member Enrolment -->
    
      <!-- Place top bar here -->


    <!-- 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>A</b>KW</span>
          <!-- logo for regular state and mobile devices -->
          <span class="logo-lg"><b><?php echo $this->session->user["branch"]; ?></b>&nbsp;Branch</span>
        </a>
        
        <?php $this->load->view('pages/topnav'); ?>

      </header>

      <!-- Left navigation -->
      <?php $this->load->view('pages/leftnav'); ?>

      <!-- Content Wrapper. Contains page content -->
      <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
          <h1>
            Karat Card Transaction
            <small>Manage Karat Card Transaction</small>
          </h1>
          <ol class="breadcrumb">
            <li><a href="<?php echo site_url(); ?>"><i class="fa fa-dashboard"></i> Home</a></li>
            <li class="active">Karat Card</li>
          </ol>
        </section>

        <!-- Main content -->
        <section class="content">
          <!-- Default box -->
          <div class="box">
            <div class="box-header with-border">
              <h3 class="box-title">Listing of Customer Information with Cards</h3>
            </div>
            <div class="box-body">
              <div class="row">
                <div class="col-xs-12">
                  <div class="table-responsive">
                    <table id="dtCustomerCardList" class="table table-bordered table-striped">
                      <thead><th>No</th><th>Customer ID</th><th>Last Name</th><th>First Name</th><th>Karat Card</th><th>Invoice Number</th><th>Date Purchase</th><th>Expiry Date</th><th>Last Update</th><th>Action</th></thead>
                      <tbody><?php echo $htmlTableList; ?></tbody>
                    </table>
                  </div>
                  
                </div>
              </div>
            </div><!-- /.box-body -->
            <div class="box-footer">
              <button type="button" class="btn btn-primary" data-dismiss="modal" data-toggle="modal" data-target="#mdlAddNewCustomerCard">Add New Card</button>
              <button type="button" class="btn btn-primary" data-dismiss="modal" data-toggle="modal" data-target="#mdlNewCustomer">Add New Card for Existing Customer</button>
            </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>
    <!-- Select2 -->
	  <script src="adminlte/plugins/select2/select2.full.min.js"></script>
    <script>

      function errorMessage(msg)
      {
        return '<div class="alert alert-danger alert-dismissable">'+
                  '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>'+
                  '<h4><i class="icon fa fa-ban"></i> Opppppps!</h4>'+
                  '<div>' + msg + '</div>'+
                '</div>'
      }

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

        //Money Euro
        $("[data-mask]").inputmask();

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

        $("#btnRefresh").on("click", function(e){
            $("#dtCustomerCardList").load("kcardtransaction #dtCustomerCardList");
        });


        // Save new customer
        $("#frmAddNewCustomerCard").on("submit", function(e){
          e.preventDefault();

          $("#frmAddNewCustomerCard :button").prop("disabled", true);

          var inputdata = {
            lastname:$("#txtLastName").val(),
            firstname:$("#txtFirstName").val(),
            dob:$("#dtDOB").val(),
            contactinfo:$("#txtContactInfo").val(),
            emailadd:$("#txtEmail").val(),
            address:$("#txtAddress").val(),
            kcardno:$("#txtCardNo").val(),
            invoiceno:$("#txtInvoiceNo").val(),
            purchasedate:$("#dtPurchaseDate").val(),
            expirydate:$("#dtExpiry").val(),
            brcode:$("#hdBranch").val()
          };

          $.post("addNewCustomerCard", inputdata, function(data){
            $("#frmAddNewCustomerCard :button").prop("disabled", false);

            if(data["success"] == true)
            {
              $("#mdlAddNewCustomerCard").modal("hide");
              $("#dtCustomerCardList").load("kcardtransaction #dtCustomerCardList");
            }
            else
            {
              $("#frmAddNewCustomerCard .modal-body").prepend(errorMessage("Error saving data. " + data["data"]));
            }
          }, "json");

        });

      });
    </script>
  </body>
</html>
