<?php
include('../includes/session.php');
include('../includes/config.php');
error_reporting(0);
?>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="Dashboard">
    <meta name="keyword" content="Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">

    <title>AVIT | User Register Complaint</title>

<link href="assets/css/nav.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap-datetimepicker.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="fullcalendar/bootstrap-datetimepicker.js"></script>
<script>
//
//$(document).ready(function () {
//    var calendar = $('#calendar').fullCalendar({
//        editable: false,
//        events: "fetch-event.php",
//        displayEventTime: false,
//        eventRender: function (event, element, view) {
//            if (event.allDay === 'true') {
//                event.allDay = true;
//            } else {
//                event.allDay = false;
//            }
//        },
//        selectable: true,
//        selectHelper: true,
//        select: function (start, end, allDay) {
//			var title = prompt('Enter Event Title:');
//			var dept = prompt('Enter Your Department:');
//			var starttime = prompt('Please Enter Event Starting Time:');
//			var endtime = prompt('Please Enter Event End Time:');
//			var hall = prompt('Please Enter Hall Name (Ex: Auditorium, Digital Rooms etc.,):');
//            if (title) {
//				var start = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss");
//            var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");
//
//                $.ajax({
//                    url: 'add-event.php',
//                    data: 'title=' + title + '&dept=' + dept + '&starttime=' + starttime + '&endtime=' + endtime + '&start=' + start + '&end=' + end + '&hall=' + hall,
//                    type: "POST",
//                    success: function (data) {
//                        displayMessage("Added Successfully");
//                    }
//                });
//                calendar.fullCalendar('renderEvent',
//                        {
//                            title: title,
//                            start: start,
//                            end: end,
//                            allDay: allDay
//                        },
//                true
//                        );
//            }
//            calendar.fullCalendar('unselect');
//        },
//        
////        editable: true,
////        eventDrop: function (event, delta) {
////                   var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
////                    var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
////                    $.ajax({
////                        url: 'edit-event.php',
////                        data: 'title=' + event.title + '&start=' + start + '&end=' + end + '&id=' + event.id + '&dept=' + event.dept + '&hall=' + event.hall,
////                        type: "POST",
////                        success: function (response) {
////                            displayMessage("Updated Successfully");
////                        }
////                    });
////                },
//        eventClick: function (event) {
//            var deleteMsg = confirm("Do you really want to delete?");
//            if (deleteMsg) {
//                $.ajax({
//                    type: "POST",
//                    url: "delete-event.php",
//                    data: "&id=" + event.id,
//                    success: function (response) {
//                        if(parseInt(response) > 0) {
//                            $('#calendar').fullCalendar('removeEvents', event.id);
//                            displayMessage("Deleted Successfully");
//                        }
//                    }
//                });
//            }
//        }
//
//    });
//});

function displayMessages(message) {
	    $(".response").html("<div class='success'>"+message+"</div>");
    setInterval(function() { $(".success").fadeOut(); }, 1000);
}
</script>
  <script type="text/javascript"> 
	 function ajaxCall() {
    $.ajax({
        url: "ajax.php", 
        success: (function (result) {
            $("#div1").html(result);
        })
    })
};

ajaxCall(); // To output when the page loads
setInterval(ajaxCall, (1000)); 
</script>
     <style>
		 body{
background: #757F9A;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #D7DDE8, #757F9A);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #D7DDE8, #757F9A); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

		 }
		label{
			font-weight: bold;
		}
		input{
			text-transform: uppercase;
		}
		#calendar {
    width: 100%;
    margin: 0 auto;
}

.response {
    height: 60px;
}

.success {
    background: #cdf3cd;
    padding: 10px 60px;
    border: #c3e6c3 1px solid;
    display: inline-block;
}
#tabledesign {
/*	font-family: 'Montserrat', sans-serif;*/
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#tabledesign td, #tabledesign th {
  border: 1px solid #ddd;
  padding: 8px;
}

#tabledesign tr:nth-child(even){background-color: none;}

#tabledesign tr:hover {background-color: #ddd;}

#tabledesign th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #081F3F !important;
  color: white !important;
}
		 /*Srcoll Bar*/

	/* Scroll width */
::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #002147; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #002147; 
}

/*End*/

	  </style>
	          <script type="text/javascript">
            $(function () {
                $('#datetimepicker1').datetimepicker();
            });
        </script>
  </head>

  <body>

  <section id="container">
	  <center><img src="../avitlogo1.png"/></center>
     <?php include("../includes/header.php");?>
      <?php //include("../includes/sidebar.php");?>
      <section id="main-content">
          <section class="wrapper">
          	<h3 align="center"><strong>HALL BOOKING FOR UPCOMING EVENTS</strong></h3>
          		<div class="col-lg-12">

   <div class="col-sm-5">
<!-- 	<h3>Book Events here</h3>-->
    <div class="response"></div>
    <div id='calendar' class="alert alert-danger">
    	
    	
    </div>
    <div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>

    </div>
</div>
	   </div>
	   <div class="col-sm-7" >
<!--		   <h3>Booked Events</h3>-->
		   <div class="response"></div>
<div id="div1" height="300px" style="height: 470px !important; overflow: auto; "></div>
	</div>

                          </div>  	
		</section>
      </section>
    <?php include("includes/footer.php");?>
  </section>

  </body>
</html>
