<?php session_start();
if($_SESSION){
?>
<!DOCTYPE html>
<html>
 <head>
<title>corporate</title><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" />

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">


<style>



html,body{

background-size: cover;
background-repeat: no-repeat;


font-family: 'Numans', sans-serif;
}


#looo{
text-align: right;
color: #FDFEFE      ;

font-family:Monotype Corsiva;
font-size: 35px;"
 }
#navbar {
 overflow: visible;
  background-color:white;
  padding: 7px 5px;
  transition: 0.2s;
  position: fixed;
  width: 100%;
  top: 0px;
  font-family:Monotype Corsiva;
background-color:#2980B9  ;
color:   brown ;
  z-index: 91;
   flex-direction: row;
}

#navbar a {
  float: left;
  color:  black;

  text-align: center;
  padding: 15px;
  text-decoration: none;
  font-size: 25px; 
  font-family:Monotype Corsiva;
  line-height: 10px;
  padding-right: .5rem !important;
      padding-left: .5rem !important;

}

#navbar #logo {
  font-size: 25px;
 
  transition: 0.4s;
  font-family:Monotype Corsiva;
}

#navbar #logoo {
  font-size: 25px;

  transition: 0.4s;
}

#navbar #loga {
  font-size: 25px;

  transition: 0.4s;
}
#navbar #log{
  font-size: 25px;

  transition: 0.4s;
}
#navbar #lo{
  font-size: 25px;

  transition: 0.4s;
}
#navbar #lgg{
  font-size: 25px;

  transition: 0.4s;

}
#navbar #loo{
  font-size: 25px;

  transition: 0.4s;
  float: right;
}
#navbar #lg{
  font-size: 25px;

  transition: 0.4s;
  float: right;
}
     .navbar-nav {
      flex-direction: row;
    }
    
    .nav-link {
      float: left;
  color:  white;
  text-align: center;
  padding: 10px;
  text-decoration: none;
  font-size: 10px; 
  font-family:Monotype Corsiva;
  line-height: 10px;
  padding-right: .5rem !important;
      padding-left: .5rem !important;
    }
    
    /* Fixes dropdown menus placed on the right side */
    .ml-auto .dropdown-menu {
        padding-right: .5rem !important;
      padding-left: .5rem !important;
    }
#navbar a:hover {
  
  color:  #000080;
}

#navbar a.active {
  background-color: gold;
  color: gold;
    line-height: 10px;


}




@media screen and (max-width: 580px) {
  #navbar {
    padding: 20px 10px !important;
  }
  #navbar a {
    float: none;
    display: block;
    text-align: left;
  }
  #navbar-right {
    float: none;
  }

}

* {
  box-sizing: border-box;
}

body {
  background-color: #f1f1f1;
}

#regForm {
  background-color: #ffffff;
  margin: 100px auto;
  font-family: Raleway;
  padding: 40px;
  width: 70%;
  min-width: 300px;
}

h1 {
  text-align: center;  
}

input {
  padding: 10px;

  font-size: 17px;
  font-family: Raleway;
  border: 1px solid #aaaaaa;
}

/* Mark input boxes that gets an error on validation: */
input.invalid {
  background-color: #ffdddd;
}

select {
  padding: 10px;
  width: 100%;
  font-size: 17px;
  font-family: Raleway;
  border: 1px solid #aaaaaa;
}
select.invalid {
  background-color: #ffdddd;
}
.tab {
  display: none;
}

button {
  background-color: #4CAF50;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  font-size: 17px;
  font-family: Raleway;
  cursor: pointer;
}

button:hover {
  opacity: 0.8;
}

#prevBtn {
  background-color: #bbbbbb;
}

/* Make circles that indicate the steps of the form: */
.step {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbbbbb;
  border: none;  
  border-radius: 50%;
  display: inline-block;
  opacity: 0.5;
}

.step.active {
  opacity: 1;
}

/* Mark the steps that are finished and valid: */
.step.finish {
  background-color: #4CAF50;
}

</style>


 </head>
 <body  style="background-color: #5499C7    ;">
      
       
<nav class="navbar navbar-expand-lg navbar-dark " id="navbar" >
 <h3  class="text-red" style="text-align:right;color: #FDFEFE;font-family:Monotype Corsiva;
font-size: 20px;"><b>Event management System </b></h3>
<br>
  <ul class="navbar-nav mr-auto">
 <li class="nav-item">
      <a class="nav-link" id="logoo" style="font-family:Rockwell;font-size: 20px;color: black; " href="admin_details.php"><i>My_details</i></a>
    </li>
    <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="navbarDropdown" style="font-family:Rockwell;font-size: 20px;color: black; "><i>Add_venue</i></a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" style="font-family:Rockwell;font-size: 20px;color: black;" href="add_events.php"><i>Add_Place</i></a>
        <a class="dropdown-item" style="font-family:Rockwell;font-size: 20px;color: black;" href="add_eqi1.php">Add_Events</a> 
        <a class="dropdown-item" style="font-family:Rockwell;font-size: 20px;color: black;" href="add_eqi2.php">Add_Events_1</a>
        </div>
    </li>
     <li class="nav-item">
    <a  style="font-family:Rockwell;font-size: 20px;color: black; " href="Customer_book_an_event.php">Book_Event</a></li>
    <li class="nav-item">
      <a class="nav-link" id="logoo" style="font-family:Rockwell;font-size: 20px;color: black; " href="display2.php"><i>View_Bookings</i></a>
    </li>
    <li class="nav-item dropdown">
     
      <a class="nav-link dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="navbarDropdown" style="font-family:Rockwell;font-size: 20px;color: black; " href="all_view_venue.php"><i>view_Venues</i></a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <a class="dropdown-item" style="font-family:Rockwell;font-size: 20px;color: black;" href="all_view_venue.php"><i>Place_details</i></a>
        <a class="dropdown-item" style="font-family:Rockwell;font-size: 20px;color: black;" href="all_view_eqiment1.php">Add_Events</a>
        <a class="dropdown-item" style="font-family:Rockwell;font-size: 20px;color: black;" href="all_view_eqiment2.php">Add_Events_1</a>
      </div>

    </li>

    <li class="nav-item">
                <a class="nav-link"  id="lgg" style="font-family:Rockwell;font-size: 20px;color: black; " href="feedbackdisplay.php"><i>View_Feedback</i></a>
            </li> <li class="nav-item"><br><br></li>
      <li class="nav-item">
                <a class="nav-link"  id="lgg" style="font-family:Rockwell;font-size: 20px;color: black; " href="view_contacts.php"><i>View_contacts</i></a>
            </li>
            <li class="nav-item">
                <a class="nav-link"  id="lgg" style="font-family:Rockwell;font-size: 20px;color: black; " href="Customer_Details_display.php"><i>Customer_Details</i></a>
            </li>
             <li class="nav-item"><br><br></li>
             
  </ul>
  <ul class="navbar-nav ml-auto">
    <li class="nav-item">
     <a id="lg" style="font-family:Rockwell;font-size: 20px;color: black; " href="http://localhost/event_managment_system/event2.php"><i class="fa fa-sign-in" style="font-size:24px"></i><i> Logout</i></a>
    </li>
    
  </ul>
</nav> <br>
  <div class="container" >
    <?php
  error_reporting(0);
     $conn = new mysqli("localhost","root","","event");
     $query="SELECT * FROM add_corporate_event";
      $query1="SELECT * FROM corporate_event_eqi1";
      $query2="SELECT * FROM corporate_event_eqi2";
        $query3="SELECT * FROM music_time";
         $query4="SELECT * FROM signup where role='customer' ";
     //$query="select * from eqi1 join add_event";
     $data=mysqli_query($conn,$query);
    
     $data1=mysqli_query($conn,$query1);
     $data2=mysqli_query($conn,$query2);
      $data3=mysqli_query($conn,$query3);
     
     $data4=mysqli_query($conn,$query4);
     
    
      ?>
<form id="regForm" method="post"  action="book_process.php">
   <h3 class="text-red" style="text-align: center;color:red;font-family:Monotype Corsiva;font-size: 50px;"><b>Book Venue </b></h3>
<div class="tab">
<div class="form-group row col-lg-30">
            
        <label for="email"  style="font-size: 25px; color: black "><b>Customer  Name:</b></label>
        <select class="form-control" onchange="book(this)" name="customer_name" id="customer_name" required>
          <option value="">---select---</option>
         <?php
    
      while ( $result4 =mysqli_fetch_assoc($data4)) {
      ?>
       
        <option data-price="<?php echo $result4['id']?>" value="<?php echo $result4['fname']." ".$result4['lname']?>" ><?php echo $result4['fname']?> <?php echo $result4['lname']?></option>
       
         <?php } ?> 
   
          
        </select>
         
      </div>
      <div class=" form-group row col-lg-30" >
          <label for="id"  style="font-size: 25px; color: black "><b>Customer ID: </b> </label>
          <input class="form-control" readonly=""  autocomplete="off" id="iid" name="id" placeholder="Customer ID" type="text" >
      </div>
  </div>

   <div class="tab">

   <div class=" form-group row col-lg-30" >
          <label for="email"  style="font-size: 20px; color: black "><b>Event Name:</b></label>
        
     <input type="text" name="name" value="Commercial event organisers" id="name" class="form-control" placeholder="Commercial event organisers" readonly=""  required>
      </div>


 <div class=" form-group row col-lg-30" >
          <label for="Date"  style="font-size: 25px; color: black "><b>Date: </b> </label>
           <input class="form-control"  autocomplete="off" type="text" id="datepicker" name="date" placeholder="dd/mm/yyyy" >
      </div>
     
  </div>
  <div class="tab">
    
    <table>
      <tr> <td>
    <div class="form-group row col-lg-30">
          
        <label for="email"  style="font-size: 20px; color: black "><b>Event place:</b></label>
        <select name="place" id="image" value="" class="form-control" size="1" required>
        <?php
    
      while ( $result =mysqli_fetch_assoc($data)) {
      ?>
        <option value="" hidden=""> - Select hotal - </option>
        <option value="<?php echo $result['image']?>" data-price="<?php echo $result['rs']?>"><?php echo $result['name']?></option>
       
         <?php } ?> 
    </select><br></td><td><center>
    <div id="imagePreview" class=" form-group row col-lg-6">
         
    </div></td></center>
      </div>
    </tr>
      </table>
  </div>
 
  <div class="tab">
       <div class="form-group row col-lg-8"">
    <strong style="font-size: 25px; color: black ">Select Event :</strong>
     <select class="form-control" id="framework2" size="1" multiple class="form-control" name="eqi1[]" required>
      
     
      <?php
    
      while ( $result1 =mysqli_fetch_assoc($data1)) {
      ?>
       
        <option value="<?php echo $result1['eqi1']?>" ><?php echo $result1['eqi1']?></option>
       
         <?php } ?> 
     </select>

    </div>
</div>
<div class="tab">
    
   <div class="form-group row col-lg-8">
            
        <label for="email"  style="font-size: 25px; color: black "><b>Expect Time:</b></label>
        <select class="form-control" name="guests" id="guests" required>
          <option value="">---select---</option>
          <?php
    
      while ( $result3 =mysqli_fetch_assoc($data3)) {
      ?>
       
        <option value="<?php echo $result3['time']?>" ><?php echo $result3['time']?></option>
       
         <?php }?>
          
        </select>
      </div>
  </div>
   <div class="tab">
    <div class="form-group row col-lg-8"">
    <strong style="font-size: 25px; color: black ">Select Event_1:</strong>
     <select class="form-control" name="eqi2[]" id="framework" size="1" multiple class="form-control" required>

      <?php
    
      while ( $result2 =mysqli_fetch_assoc($data2)) {
      ?>
       
        <option value="<?php echo $result2['eqi2']."  Rs.".$result2['rs']?>" data-price="<?php echo $result2['rs']?>"><?php echo $result2['eqi2']."  Rs.".$result2['rs']?></option>
       
         <?php } ?> 
      
     </select>
<input type="text" readonly  size="30" name="main_price" id="main_price">
    </div>
  </div>  
<div style="overflow:auto;">
    <div style="float:right;">
      <button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
      <button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
    </div>
  </div>
  <!-- Circles which indicates the steps of the form: -->
  <div style="text-align:center;margin-top:40px;">
    <span class="step"></span>
    <span class="step"></span>
    <span class="step"></span>
    <span class="step"></span>
    <span class="step"></span>
     <span class="step"></span>
  </div>
  </form>

   
  </div>
 </body>
</html>

<script type="text/javascript">

$(document).ready(function(){
        var hallrent=0;
        $("#image").change(function() {
            var src = $(this).val();
            
            var price = parseInt($('option:selected', this).data('price'));
            hallrent= price;
            $("#imagePreview").html(src ? "<img src='" + src + "'><br> <h4>Rs."+price+"</h4>" : "");
        });


var a=0;
        $("#customer_name").change(function() {
            var b = $(this).val();
            
            var price = parseInt($('option:selected', this).data('price'));
            hallrent= price;
            $("#imagePreview").html(src ? "<img src='" + src + "'><br> <h4>Rs."+price+"</h4>" : "");
        });

          


        var hallrent;
        var main_price = 0;
        $('#framework').multiselect({
 nonSelectedText: 'Select Event_1',
            onChange: function(element, checked) {
     
                
                if(checked == true){
                 
                  main_price += parseInt (element.attr("data-price"));
               
                }
                else{
                  main_price -= parseInt(element.attr("data-price"));

                }
                var total = main_price+ hallrent;
             
                $("#main_price").val("Rs."+hallrent+"+ Rs."+main_price+"= Rs."+total);


            }
        });



 $('#framework2').multiselect({
  nonSelectedText: 'Select Event',

    
  buttonWidth:'300px'
 });

   var today ='+2m';
        var past='0';

   //var dateInput = $('input[name="date"]'); // Our date input has the name "date"
  //var container = $('.bootstrap-iso form').length > 0 ? $('.bootstrap-iso form').parent() : 'body';


   $('#datepicker').datepicker({
            format: 'yyyy/mm/dd',
            
            autoclose:true,
            endDate: "today",
            maxDate: today,
            minDate:past,
        }).on('changeDate', function (ev) {
          format: 'yyyy/mm/dd',
                $(this).datepicker('hide');
            });


        

 });

 



  window.onscroll = function() {scrollFunction()};

          function scrollFunction() {
        if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50)    
        {
          document.getElementById("navbar").style.padding = "10px 5px";
          document.getElementById("logo").style.fontSize = "25px";
          document.getElementById("navbar").style.padding = "10px 5px";
          document.getElementById("logoo").style.fontSize = "25px";
          document.getElementById("navbar").style.padding = "10px 5px";
          document.getElementById("log").style.fontSize = "25px";
          document.getElementById("navbar").style.padding = "10px 5px";
          document.getElementById("lo").style.fontSize = "25px";
          document.getElementById("navbar").style.padding = "10px 5px";
          document.getElementById("lgg").style.fontSize = "25px";
          document.getElementById("navbar").style.padding = "10px 5px";
          document.getElementById("loo").style.fontSize = "25px";
          document.getElementById("navbar").style.padding = "10px 5px";
          document.getElementById("lg").style.fontSize = "25px";
        } else 
        {
          document.getElementById("navbar").style.padding = "10px 10px";
          document.getElementById("logo").style.fontSize = "27px";
          document.getElementById("navbar").style.padding = "10px 10px";
          document.getElementById("logoo").style.fontSize = "27px";
          document.getElementById("navbar").style.padding = "10px 10px";
          document.getElementById("log").style.fontSize = "27px";
          document.getElementById("navbar").style.padding = "10px 10px";
          document.getElementById("lo").style.fontSize = "27px";
          document.getElementById("navbar").style.padding = "10px 10px";
          document.getElementById("lgg").style.fontSize = "27px";
          document.getElementById("navbar").style.padding = "10px 10px";
          document.getElementById("loo").style.fontSize = "27px";
          document.getElementById("navbar").style.padding = "10px 10px";
          document.getElementById("lg").style.fontSize = "27px";
        }
      }

var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the current tab

function showTab(n) {
  // This function will display the specified tab of the form...
  var x = document.getElementsByClassName("tab");
  x[n].style.display = "block";
  //... and fix the Previous/Next buttons:
  if (n == 0) {
    document.getElementById("prevBtn").style.display = "none";
  } else {
    document.getElementById("prevBtn").style.display = "inline";
  }
  if (n == (x.length - 1)) {
    document.getElementById("nextBtn").innerHTML = "Submit";
  } else {
    document.getElementById("nextBtn").innerHTML = "Next";
  }
  //... and run a function that will display the correct step indicator:
  fixStepIndicator(n)
}

function nextPrev(n) {
  // This function will figure out which tab to display
  var x = document.getElementsByClassName("tab");
  // Exit the function if any field in the current tab is invalid:
  if (n == 1 && !validateForm()) return false;
  // Hide the current tab:
  x[currentTab].style.display = "none";
  // Increase or decrease the current tab by 1:
  currentTab = currentTab + n;
  // if you have reached the end of the form...
  if (currentTab >= x.length) {
    // ... the form gets submitted:
    document.getElementById("regForm").submit();
    return false;
  }
  // Otherwise, display the correct tab:
  showTab(currentTab);
}

function validateForm() {
  // This function deals with validation of the form fields
  var b,a, x, y, i, valid = true;
  x = document.getElementsByClassName("tab");
  //a = document.getElementsByClassName("tab");
   a= x[currentTab].getElementsByTagName("input");
  //document.getElementById("demo").innerHTML = x;
  y = x[currentTab].getElementsByTagName("input");
  b = x[currentTab].getElementsByTagName("select");
  //a = x[currentTab].getElementsByClassName("input[type='checkbox']");

  //y = x[currentTab].getElementsByTagName("input");

  // A loop that checks every input field in the current tab:
  for (i = 0; i < y.length; i++) {
    // If a field is empty...
    if (y[i].value == "") {
      // add an "invalid" class to the field:
      y[i].className += " invalid";
      // and set the current valid status to false
      valid = false;
    }
  }
    for (i = 0; i < b.length; i++) {
    // If a field is empty...
    if (b[i].value == "") {
      // add an "invalid" class to the field:
      b[i].className += " invalid";
      // and set the current valid status to false
      valid = false;
    }

  }
   for (i = 0; i < a.length; i++) {
    // If a field is empty...
    if (a[i].type == "") {
      // add an "invalid" class to the field:
      a[i].className += " invalid";
      // and set the current valid status to false
      valid = false;
    }

  }

  // If the valid status is true, mark the step as finished and valid:
  if (valid) {
    document.getElementsByClassName("step")[currentTab].className += " finish";
  }
  return valid; // return the valid status
}


function fixStepIndicator(n) {
  // This function removes the "active" class of all steps...
  var i, x = document.getElementsByClassName("step");
  for (i = 0; i < x.length; i++) {
    x[i].className = x[i].className.replace(" active", "");
  }
  //... and adds the "active" class on the current step:
  x[n].className += " active";
}
$('#customer_name').on('change', function() {
          var a;
          var option = $(this).find('option:selected');
          a=option.data('price');
          document.getElementById('iid').value=a;

          });

</script>
<?php
  }
  else{
    echo "<script>
   alert('You have to  login first...!');
   window.location.href='event2.php';
   </script>";
  }
  
?>