<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AdminKW | Email Sending</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">
    <!-- 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 Customer Information -->
    <div id="mdlCustomer" class="modal fade" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg">
          <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">Assign Customer to Sales Transaction</h4>
            </div>
            <!-- form start -->
            <div class="modal-body">
              <div class="box box-success">
                <div class="box-header with border">
                  <h4 class="box-title">Search for Existing Customer</h4>
                </div>
                <div class="box-body">
                  <div class="row">
                    <div class="col-xs-12">
                        <div class="form-group">
                            <label for="txtCustomerSearch">Customer Name</label>
                            <div class="input-group">
                                <input type="text" class="form-control" id="txtCustomerSearch" name="txtCustomerSearch">
                                <span class="input-group-btn">
                                    <button type="button" class="btn btn-info btn-flat" onclick="searchCustomerByName()">Search</button>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12">
                      <table id="dtCustomerList" class="table table-bordered table-striped">
                        <thead><th>ID</th><th>Name</th><th>Date of Birth</th><th>Contact Info</th><th>e-Mail Address</th><th>Address</th><th>&nbsp;</th></thead>
                        <tbody id="dtCustomerListBody">
                          <tr><td colspan="7">No data</td></tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
              <p>You may search for an existing customer above by searching for the last name and first name <i>(FORMAT: Dela Cruz, Juan)</i> or you can add a new record below.</p>
              <div class="box box-warning">
                <div class="box-header with border">
                  <h4 class="box-title">OR Add New Customer</h4>
                </div>
                <div class="box-body">
                  <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="col-lg-12 col-xs-12">
                      <div class="form-group">
                        <label>Home Address</label>
                        <input type="text" class="form-control" id="txtAddress" name="txtAddress" placeholder="Address">
                      </div>
                    </div>
                  </div>
                </div>
                <div class="box-footer">
                  <div class="row">
                    <div class="col-lg-12 col-xs-12">
                      <button id="btnAddCustomer" type="button" class="btn btn-primary" onclick="addCustomer()">Add Customer</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close Customer Selection</button>
            </div>
          </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>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>
            Add Sales
            <small>it all starts here</small>
          </h1>
          <ol class="breadcrumb">
            <li><a href="<?= site_url(); ?>"><i class="fa fa-dashboard"></i> Home</a></li>
            <li><a href="<?= site_url(); ?>salesnew">Sales Transaction</a></li>
            <li class="active">New Sales</li>
          </ol>
        </section>

        <!-- Main content -->
        <section class="content">
        <div class="box box-info">
            <div class="box-body">
                <div class="row">
                <div class="col-xs-12">
                    <form method="get">
                    <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="<?= $selectedDate ?>">
                        <span class="input-group-btn">
                            <button class="btn btn-info btn-flat" type="submit">View Report</button>
                        </span>
                    </div>
                    <!-- /.input group -->
                    </div>
                    </form>
                </div>
                </div>
            </div>
        </div>

          <!-- Default box -->
          
          <!-- /.box -->

        <?php 
        if($this->input->get("transDate", true) != null)
        {
        ?>
        <form action="<?= site_url(); ?>addSalesNew?transDate=<?= $selectedDate ?>" method="post">
          <div class="box">
            <div class="box-header">
                <h3>New Sales for date <?= $selectedDate ?></h3>
            </div>
            <div class="box-body">
                <div class="row">
                    <div class="col-lg-5 col-xs-12">
                        <div class="form-group">
                            <label>Invoice No</label>
                            <input type="text" class="form-control" id="txtInvoiceNo" name="txtInvoiceNo" >
                        </div>
                    </div>
                    <div class="col-lg-7 col-xs-12">
                        <div class="form-group">
                            <label for="txtCustomerName">Customer Name</label>
                            <div class="input-group">
                              <input type="hidden" name="txtCustomerID" id="txtCustomerID">
                              <input type="hidden" name="txtCustomer" id="txtCustomer">
                              <input type="text" class="form-control" id="txtCustomerName" name="txtCustomerName" disabled="true">
                              <span class="input-group-btn">
                                  <button type="button" class="btn btn-info btn-flat" data-dismiss="modal" data-toggle="modal" data-target="#mdlCustomer">Customer Info</button>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                  <div class="col-xs-12">
                    <label for="dtCustomerPurchaseList">Customer Purchase History</label>
                      <div class="table-responsive">
                        <table id="dtCustomerPurchaseList" class="table table-bordered table-striped">
                          <thead>
                            <th>No</th>
                            <th>Record ID</th>
                            <th>Transaction ID</th>
                            <th>Branch</th>
                            <th>Invoice</th>
                            <th>Category</th>
                            <th>Model No.</th>
                            <th>Price</th>
                            <th>Purchase Price</th>
                            <th>Transaction Type</th>
                            <th>Date</th>
                          </thead>
                          <tbody id="dtCustomerPurchaseListBody">
                            <tr><td colspan="10">No data</td></tr>
                          </tbody>
                        </table>
                    </div>
                  </div>
                </div>
                <div class="row">
                    <div class="col-xs-12">
                    <div class="form-group">
                        <label>Select Transaction Type</label>
                        <select id="cmbTransType" name="cmbTransType" class="form-control" style="width: 100%;">
                        <option value="salesTrans">Sales Transaction</option>
                        <option value="layawayDP">Layaway Deposit</option>
                        <option value="layawaySP">Layaway Subsequent Payment</option>
                        <option value="layawayFP">Layaway Full Payment</option>
                        <option value="others">Others (Repair, Sulda, Dorado, etc...)</option>
                        </select>
                    </div>
                    </div>
                </div>
                <h4>Item Information</h4>
                <p><small>Enter item information. Value inside Item Price field is a price of an item after discount.</small></p>
                <div class="row">
                    <div class="col-lg-7 col-xs-12">
                    <div class="form-group">
                        <label>Select Category</label>
                        <select id="cmbCategory" name="cmbCategory" class="form-control select2" style="width: 100%;" onchange="onCategoryChange()">
                        <?php if(isset($htmlCategoryList)) echo $htmlCategoryList; else echo "<option>none</option>" ?>
                        </select>
                    </div>
                    </div>
                    <div class="col-lg-5 col-xs-12">
                    <div class="form-group">
                        <label>Model Number</label>
                        <input type="text" class="form-control" id="txtModelNo" name="txtModelNo" >
                    </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-7 col-xs-12">
                    <div class="form-group">
                        <label>Item Price</label>
                        <input type="number" class="form-control" id="txtPrice" name="txtPrice" value="0" min="0" onwheel="this.blur()" step="0.01" onchange="amountPaidSummation()" >
                    </div>
                    </div>
                    <div class="col-lg-5 col-xs-12">
                    <div class="form-group">
                        <label>Quantity</label>
                        <input type="number" class="form-control" id="txtQty" name="txtQty" value="1" min="0" onwheel="this.blur()" step="0.25" onchange="amountPaidSummation()" >
                    </div>
                    </div>
                </div>
                <h4>Customer Payment</h4>
                <p><small>Enter the amount paid by the customer in various mode of payment. Leave field as zero (0) if not applicable.</small></p>
                <div class="row">
                    <div class="col-lg-3 col-xs-12">
                    <div class="form-group">
                        <label>Cash</label>
                        <input type="number" class="form-control" id="txtCash" name="txtCash" value="0" min="0" onwheel="this.blur()" step="0.01" onchange="amountPaidSummation()" >
                    </div>
                    </div>
                    <div class="col-lg-3 col-xs-12">
                    <div class="form-group">
                        <label>Credit Card</label>
                        <input type="number" class="form-control" id="txtCard" name="txtCard" value="0" min="0" onwheel="this.blur()" step="0.01" onchange="amountPaidSummation()" >
                    </div>
                    </div>
                    <div class="col-lg-3 col-xs-12">
                    <div class="form-group">
                        <label>Check</label>
                        <input type="number" class="form-control" id="txtCheck" name="txtCheck" value="0" min="0" onwheel="this.blur()" step="0.01" onchange="amountPaidSummation()" >
                    </div>
                    </div>
                    <div class="col-lg-3 col-xs-12">
                    <div class="form-group">
                        <label>Dollar</label>
                        <input type="number" class="form-control" id="txtDollar" name="txtDollar" value="0" min="0" onwheel="this.blur()" step="0.01" onchange="amountPaidSummation()" >
                    </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-6 col-xs-12">
                    <div class="form-group">
                        <label>Total Amount Paid</label>
                        <input type="text" class="form-control" id="txtTotalAmount" name="txtTotalAmount" value="0"  readonly >
                    </div>
                    </div>
                    <div class="col-lg-6 col-xs-12">
                    <div class="form-group">
                        <label>Balance&nbsp;</label><small>(Applicable with Layaway only)</small>
                        <input type="text" class="form-control" id="txtBalance" name="txtBalance" value="0"  readonly >
                    </div>
                    </div>
                </div>
                <h4>Bank and Tax Information</h4>
                <p><small>Enter bank share and withholding tax information.</small></p>
                <div class="row">
                    <div class="col-lg-5 col-xs-12">
                    <div class="form-group">
                        <label>Bank Share %</label>
                        <input type="number" class="form-control" id="txtBankShare" name="txtBankShare" value="0" min="0" onwheel="this.blur()" step="any" >
                    </div>
                    </div>
                    <div class="col-lg-7 col-xs-12">
                    <div class="form-group">
                        <label>Withholding Tax</label>
                        <select id="cmbWTaxOptn" name="cmbWTaxOptn" class="form-control" style="width: 100%;">
                        <option value="0">Others</option>
                        <option value="1">Union Bank</option>
                        <option value="2">Debit Card</option>
                        </select>
                    </div>
                    </div>
                </div>   
                <div class="row">
                    <div class="col-xs-12">
                    <label>Remarks</label>
                    <textarea class="form-control" id="txtRemarks" name="txtRemarks" rows="3"></textarea>
                    </div>
                </div> 
            </div>
            <div class="box-footer">
                <button type="submit" class="btn btn-primary">Save changes</button>
                <a href="<?= site_url(); ?>salesnew?transDate=<?= $selectedDate ?>" class="btn btn-default">Back to Sales</a>
            </div>
          </div>
        </form>
        <?php
        }
        else
        {
        ?>
        <div class="box">
            <div class="box-body">
                <a href="<?= site_url(); ?>salesnew?transDate=<?= $selectedDate ?>">Back to Sales</a>
            </div>
        </div>
        <?php
          }
          ?>
        </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>
    <!-- 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 () {
        //Initialize Select2 Elements
    	  $(".select2").select2();

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

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

      });

      function onCategoryChange()
      {
        $("#txtModelNo").val($('#cmbCategory').find(":selected").val() + "-");
      }

      function amountPaidSummation()
      {
        var totalAmount = parseFloat($("#txtCash").val()) + parseFloat($("#txtCard").val()) + parseFloat($("#txtCheck").val()) + parseFloat($("#txtDollar").val());
        var balance = (parseFloat($("#txtPrice").val()) * parseFloat($("#txtQty").val())) - totalAmount;

        $("#txtTotalAmount").val(totalAmount.toFixed(2));
        $("#txtBalance").val(balance.toFixed(2));
      }

      function searchCustomerByName()
      {
        $("#dtCustomerListBody").html('<tr><td colspan="7">Searching for data. Please wait...</td></tr>');
        
        var dtCustomerListBodyHtml = "";
        
        $.get("/customerSearch", {s:$("#txtCustomerSearch").val()}, function(data){
          
          if(data["success"])
          {
            data["data"].forEach(function(data){
              dtCustomerListBodyHtml += "<tr>" + 
                                          "<td>"+data.customerid+"</td>" + 
                                          "<td>"+data.lastname+", "+data.firstname+"</td>" + 
                                          "<td>"+data.dob+"</td>" + 
                                          "<td>"+data.contactinfo+"</td>" + 
                                          "<td>"+data.emailadd+"</td>" + 
                                          "<td>"+data.address+"</td>" + 
                                          '<td><button class="btn btn-default" data-customerid="'+data.customerid+'" data-customername="['+data.customerid+'] '+data.lastname+', '+data.firstname+'" onclick="selectCustomer(this)">Use This record</button></td>' + 
                                        "</tr>"
            });

            $("#dtCustomerListBody").html(dtCustomerListBodyHtml);
          }
          else
          {
            $("#dtCustomerListBody").html('<tr><td colspan="7">No records found.</td></tr>');
          }
        }, "json");
      }

      function selectCustomer(customer)
      {
        $("#txtCustomerID").val($(customer).data("customerid"));
        $("#txtCustomer").val($(customer).data("customername"));
        $("#txtCustomerName").val($(customer).data("customername"));
        $("#mdlCustomer").modal('hide');


        $("#dtCustomerPurchaseListBody").html('<tr><td colspan="10">Loading data. Please wait.</td></tr>');

        var dtCustomerPurchaseListBodyHtml = "";

        $.get("/salesCustomerSearch", {s:$(customer).data("customerid")}, function(data){
          if(data["success"])
          {
            var i = 1;
            data["data"].forEach(function(data)
            {
              dtCustomerPurchaseListBodyHtml += "<tr>" + 
                                          "<td>"+i+"</td>" + 
                                          "<td>"+data.recordID+"</td>" + 
                                          "<td>"+data.transID+"</td>" + 
                                          "<td>"+data.brCode+"</td>" + 
                                          "<td>"+data.invoiceNum+"</td>" + 
                                          "<td>"+data.catCode+"</td>" + 
                                          "<td>"+data.modelno+"</td>" + 
                                          "<td>"+data.price+"</td>" +
                                          "<td>"+(parseFloat(data.cash) + parseFloat(data.dollar) + parseFloat(data.creditCard) + parseFloat(data.checque))+"</td>" + 
                                          "<td>"+data.transType+"</td>" + 
                                          "<td>"+data.transDate+"</td>" + 
                                        "</tr>";
              i++;
            });

            $("#dtCustomerPurchaseListBody").html(dtCustomerPurchaseListBodyHtml);

          }
          else
          {
            $("#dtCustomerPurchaseListBody").html('<tr><td colspan="10">No purchase record.</td></tr>');
          }
        }, "json");
      }

      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 addCustomer()
      {
        $("#btnAddCustomer").prop("disabled", true);

        var inputdata = {
          lastname:$("#txtLastName").val(),
          firstname:$("#txtFirstName").val(),
          dob:$("#dtDOB").val(),
          contactinfo:$("#txtContactInfo").val(),
          emailadd:$("#txtEmail").val(),
          address:$("#txtAddress").val()
        };

        $.post("addNewCustomer", inputdata, function(data){
          $("#btnAddCustomer").prop("disabled", false);

          if(data["success"] == true)
          {
            $("#mdlCustomer").modal("hide");
            $("#txtCustomerID").val(data["data"]);
            $("#txtCustomer").val('['+data["data"]+'] ' + $("#txtLastName").val() + ', ' + $("#txtFirstName").val());
            $("#txtCustomerName").val('['+data["data"]+'] ' + $("#txtLastName").val() + ', ' + $("#txtFirstName").val());
          }
          else
          {
            $("#mdlCustomer .modal-body").prepend(errorMessage("Error saving data. " + data["data"]));
          }
        
        }, "json");
      }

    </script>
  </body>
</html>
