<? include("../settings.php"); ?>
<? include("session.php"); ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>SP Admin Panel</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Include all CSS/JS -->
        <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/jquery.dataTables.css" rel="stylesheet">
    <link href="http://cdn.datatables.net/responsive/1.0.1/css/dataTables.responsive.css" rel="stylesheet">
    <style>
    #tooltip
    {
        text-align: center;
        color: #fff;
        background: #111;
        position: absolute;
        z-index: 100;
        padding: 15px;
    }
 
    #tooltip:after /* triangle decoration */
    {
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid #111;
        content: '';
        position: absolute;
        left: 50%;
        bottom: -10px;
        margin-left: -10px;
    }
 
        #tooltip.top:after
        {
            border-top-color: transparent;
            border-bottom: 10px solid #111;
            top: -20px;
            bottom: auto;
        }
 
        #tooltip.left:after
        {
            left: 10px;
            margin: 0;
        }
 
        #tooltip.right:after
        {
            right: 10px;
            left: auto;
            margin: 0;
        }
    </style>

    <!-- 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 (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery-2.1.1.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.dataTables.min.js"></script>
    <script src="http://cdn.datatables.net/responsive/1.0.1/js/dataTables.responsive.js"></script>

    <!-- End of all CSS/JS -->

    <script>
    $(document).ready(function() {
        
       // $('#myTable').dataTable({
        //    responsive: true,
        //    "bPaginate": true
       //     
        //} );
        
        $('#myModal').on('hidden.bs.modal', function () {
            $('#myModal').removeData('bs.modal');
            location.reload(true);
        })
        
        
        /* Add a select menu for each TH element in the table footer */
        var oTable = $('#myTable').dataTable({responsive: true,"bPaginate": true });
			$("tfoot th").each( function ( i ) {
				if (i == 2){
					this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i) );
					$('select', this).change( function () {
						oTable.fnFilter( $(this).val(), i );
					} );
				}
			} );        
        
        } );
    
      (function($) {

        /*
         * Function: fnGetColumnData
         * Purpose:  Return an array of table values from a particular column.
         * Returns:  array string: 1d data array
         * Inputs:   object:oSettings - dataTable settings object. This is always the last argument past to the function
         *           int:iColumn - the id of the column to extract the data from
         *           bool:bUnique - optional - if set to false duplicated values are not filtered out
         *           bool:bFiltered - optional - if set to false all the table data is used (not only the filtered)
         *           bool:bIgnoreEmpty - optional - if set to false empty values are not filtered from the result array
         * Author:   Benedikt Forchhammer <b.forchhammer /AT\ mind2.de>
         */
        $.fn.dataTableExt.oApi.fnGetColumnData = function ( oSettings, iColumn, bUnique, bFiltered, bIgnoreEmpty ) {
            // check that we have a column id
            if ( typeof iColumn == "undefined" ) return new Array();

            // by default we only wany unique data
            if ( typeof bUnique == "undefined" ) bUnique = true;

            // by default we do want to only look at filtered data
            if ( typeof bFiltered == "undefined" ) bFiltered = true;

            // by default we do not wany to include empty values
            if ( typeof bIgnoreEmpty == "undefined" ) bIgnoreEmpty = true;

            // list of rows which we're going to loop through
            var aiRows;

            // use only filtered rows
            if (bFiltered == true) aiRows = oSettings.aiDisplay;
            // use all rows
            else aiRows = oSettings.aiDisplayMaster; // all row numbers

            // set up data array
            var asResultData = new Array();

            for (var i=0,c=aiRows.length; i<c; i++) {
                iRow = aiRows[i];
                var aData = this.fnGetData(iRow);
                var sValue = aData[iColumn];

                // ignore empty values?
                if (bIgnoreEmpty == true && sValue.length == 0) continue;

                // ignore unique values?
                else if (bUnique == true && jQuery.inArray(sValue, asResultData) > -1) continue;

                // else push the value onto the result data array
                else asResultData.push(sValue);
            }

            return asResultData;
        }}(jQuery));

		function fnCreateSelect( aData )
		{
			var r="<select class='form-control' ><option value=''></option>", i, iLen=aData.length;
			for ( i=0 ; i<iLen ; i++ )
			{
				r += '<option value="'+aData[i]+'">'+aData[i]+'</option>';
			}
			return r+'</select>';
		}  

    </script>
   </head>
<body>


<? include("nav_menu.php"); ?>
      <div class="well">
<div class="content" bgcolor="#FFFFD0">
<div class="col-12 feature">
<div class="panelCheck">
    <div class="panel-heading">
        <h3 class "panel-title"><strong>Replace Delegate</strong></h3>
    </div>

    <form name="delegate" method='GET' action="" enctype="multipart/form-data" class="form-horizontal" role="form">
    <center>
		      
    <table id='myTable' class="table table-striped table-hover" cellspacing='0' width='100%'>
      <thead>
        <tr>
          <th>Delegate No.</th>
          <th>Full Name</th>
          <th>Organisation</th>
		  <th>Badge Colour</th>
		  <th>Remarks</th>
          <th>Payment Status</th>
          <th>Amount</th>
        </tr>
      </thead>
      <tbody>
        <?
            $results = $db->select("tbl_registrant");
            $i=1;
            foreach ($results as $result){
                $bind = array(":search1"=>$result['registrant_id']);
                $exists = $db->select("tbl_registrant_attendance","registrant_id=:search1",$bind);
                if (count($exists)>0){
                    $class = "success";
                }else{
                    $class = "danger";
                }
                echo "<tr class='$class'><td>".$result['registrant_sn']."</td><td><a data-toggle='modal' href='replace_edit.php?registrant_id=".$result['registrant_id']."' data-height=320 data-width=450  data-target='#myModal'>".$result['registrant_fullname']."</a></td><td>".$result['registrant_organisation']."</td><td>".$result['registrant_badge']."</td><td>".$result['remarks']."</td><td>".$result['registrant_paid']."</td><td>".$result['registrant_amount']."</td></tr>";
                $i++;
            }

        ?>
          
      </tbody>
      <tfoot>
        <tr>
          <th>Delegate No.</th>
          <th>Full Name</th>
          <th>Organisation</th>
		  <th>Badge Colour</th>
		  <th>Remarks</th>
          <th>Payment Status</th>
          <th>Amount</th>
        </tr>
      </tfoot>

    </table>      

        
        
    </center>
    </form>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content modal-lg">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                 <h4 class="modal-title">Modal title</h4>

            </div>
            <div class="modal-body"><div class="te"></div></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</div>
</div>
</div>
</div>
</body>
</html>
