<? 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>Abstract Submission Portal</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>
<script>
    $( function(){
        var targets = $( '[rel~=tooltip]' ),
            target  = false,
            tooltip = false,
            title   = false;

        targets.bind( 'mouseenter', function()
        {
            target  = $( this );
            tip     = target.attr( 'title' );
            tooltip = $( '<div id="tooltip"></div>' );

            if( !tip || tip == '' )
                return false;

            target.removeAttr( 'title' );
            tooltip.css( 'opacity', 0 )
                   .html( tip )
                   .appendTo( 'body' );

            var init_tooltip = function()
            {
                if( $( window ).width() < tooltip.outerWidth() * 1.5 )
                    tooltip.css( 'max-width', $( window ).width() / 2 );
                else
                    tooltip.css( 'max-width', 340 );

                var pos_left = target.offset().left + ( target.outerWidth() / 2 ) - ( tooltip.outerWidth() / 2 ),
                    pos_top  = target.offset().top - tooltip.outerHeight() - 20;

                if( pos_left < 0 )
                {
                    pos_left = target.offset().left + target.outerWidth() / 2 - 20;
                    tooltip.addClass( 'left' );
                }
                else
                    tooltip.removeClass( 'left' );

                if( pos_left + tooltip.outerWidth() > $( window ).width() )
                {
                    pos_left = target.offset().left - tooltip.outerWidth() + target.outerWidth() / 2 + 20;
                    tooltip.addClass( 'right' );
                }
                else
                    tooltip.removeClass( 'right' );

                if( pos_top < 0 )
                {
                    var pos_top  = target.offset().top + target.outerHeight();
                    tooltip.addClass( 'top' );
                }
                else
                    tooltip.removeClass( 'top' );

                tooltip.css( { left: pos_left, top: pos_top } )
                       .animate( { top: '+=10', opacity: 1 }, 50 );
            };

            init_tooltip();
            $( window ).resize( init_tooltip );

            var remove_tooltip = function()
            {
                tooltip.animate( { top: '-=10', opacity: 0 }, 50, function()
                {
                    $( this ).remove();
                });

                target.attr( 'title', tip );
            };

            target.bind( 'mouseleave', remove_tooltip );
            tooltip.bind( 'click', remove_tooltip );
        });
    });
</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,"columnDefs": [{ "width": "100px", "targets": 2 }, { "width": "125px", "targets": 3 }] });
			$("tfoot th").each( function ( i ) {
				if (i==2 || i==3){
					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>Abstract Portal</strong></h3>
    </div>

    <form name="children" 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>#</th>
          <th>Abstract Title</th>
          <th>Category</th>
          <th>Status</th>
          <th>Presentation Type</th>
          <th>Date of Submission</th>
          <th>Full Name</th>
        </tr>
      </thead>
      <tbody>
        <?
			if ($_SESSION['user_admin']==1)
				$results = $db->run("select * from tbl_abstract as a, tbl_abstract_status as b, tbl_topic as c where a.abstract_status=b.status_id AND a.topic_id=c.topic_id AND abstract_deleted=0");
            else{
				$results = $db->run("select * from tbl_abstract as a, tbl_abstract_status as b, tbl_topic as c, tbl_topic_user as d where a.abstract_status=b.status_id AND a.topic_id=c.topic_id AND d.user_id = ".$_SESSION['user_id']." AND d.topic_id = c.topic_id AND abstract_deleted=0");
			}
			//$results = $db->select("tbl_abstract as a, tbl_abstract_status as b, tbl_topic as c","a.abstract_status=b.status_id AND a.topic_id=c.topic AND a.abstract_deleted='0'");
            foreach ($results as $result){
				if ($_SESSION['user_admin']==1){
					switch($result['abstract_status']){
                    case "1":
                        $class = "info";
                        break;
                    case "2":
                        $class = "success";
                        break;
                    case "3":
                        $class = "danger";
                        break;
                    case "4":
                        $class = "warning";
                        break;
					}
				}else{
					$bind = array(
						":search1" => $result['abstract_id']
					);
					$reviews = $db->select("tbl_abstract_remarks","abstract_id = :search1",$bind);
					if (count($reviews)>0)
						$class = "success";
					else
						$class = "danger";
				}
				if ($result['abstract_op']=="P")
					$abstractop = "Poster";
				else
					$abstractop = "Oral";
				if ($_SESSION['user_admin']==1)
					$fullname = $result['registrant_firstname']." ".$result['registrant_lastname'];
				else
					$fullname = "*****";
                echo "<tr class='$class'><td>".$result['abstract_id']."</td><td width='25%'><a data-toggle='modal' href='abstract_edit.php?abstract_id=".$result['abstract_id']."' data-height=320 data-width=450  data-target='#myModal'>".$result['abstract_title']."</a></td><td>".$result['topic']."</td><td>".$result['status_name']."</td><td>".$abstractop."</td><td>".$result['abstract_datetime']."</td><td><a data-toggle='modal' href='abstract_edit.php?abstract_id=".$result['abstract_id']."' data-height=320 data-width=450  data-target='#myModal'>".$fullname."</a></td></tr>";
            }

        ?>
          
      </tbody>
      <tfoot>
        <tr>
          <th>#</th>
          <th>Abstract Title</th>
          <th>Category</th>
          <th>Status</th>
          <th>Presentation Type</th>
          <th>Date of Submission</th>
          <th>Full Name</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>