<?php
// Initialize the session
session_start();
// Check if the user is logged in, if not then redirect him to login page
if(!isset($_SESSION["loggedin"]) || $_SESSION["loggedin"] !== true){
    header("location: login.php");
    exit;
}
?>
<!DOCTYPE html>
<html lang="en-us">

<head>
    <title>SYSDesk - Create ticket</title>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" type="image/x-icon" href="../assets/favicon.ico" />
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700italic,700,900,900italic" rel="stylesheet">
    <!-- STYLESHEETS -->
    <style type="text/css">
            [fuse-cloak],
            .fuse-cloak {
                display: none !important;
            }
        </style>
    <!-- Icons.css -->
    <link type="text/css" rel="stylesheet" href="../assets/icons/fuse-icon-font/style.css">
    <!-- Animate.css -->
    <link type="text/css" rel="stylesheet" href="../assets/node_modules/animate.css/animate.min.css">
    <!-- Perfect Scrollbar -->
    <link type="text/css" rel="stylesheet" href="../assets/node_modules/perfect-scrollbar/css/perfect-scrollbar.css" />
    <!-- Fuse Html -->
    <link type="text/css" rel="stylesheet" href="../assets/fuse-html/fuse-html.min.css" />
    <!-- Main CSS -->
    <link type="text/css" rel="stylesheet" href="../assets/css/main.css">
	<!-- Custom CSS -->
	<link type="text/css" rel="stylesheet" href="../assets/css/custom.css">
    <!-- / STYLESHEETS -->

    <!-- JAVASCRIPT -->
    <!-- jQuery -->
    <script type="text/javascript" src="../assets/node_modules/jquery/dist/jquery.min.js"></script>
    <!-- Mobile Detect -->
    <script type="text/javascript" src="../assets/node_modules/mobile-detect/mobile-detect.min.js"></script>
    <!-- Perfect Scrollbar -->
    <script type="text/javascript" src="../assets/node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
    <!-- Popper.js -->
    <script type="text/javascript" src="../assets/node_modules/popper.js/dist/umd/popper.min.js"></script>
    <!-- Bootstrap -->
    <script type="text/javascript" src="../assets/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <!-- Data tables -->
    <script type="text/javascript" src="../assets/node_modules/datatables.net/js/jquery.dataTables.js"></script>
    <script type="text/javascript" src="../assets/node_modules/datatables-responsive/js/dataTables.responsive.js"></script>
    <!-- Bootstrap Select -->
    <script src="../assets/js/bootstrap-select.js" type="text/javascript"></script>
    <!-- Fuse Html -->
    <script type="text/javascript" src="../assets/fuse-html/fuse-html.min.js"></script>
    <!-- Main JS -->
    <script type="text/javascript" src="../assets/js/main.js"></script>
    <!-- Custom JS -->
    <script>
    function yesnoCheck(that) {
    if (that.value == "other") {
        document.getElementById("ifYes").style.display = "block";
    } else {
        document.getElementById("ifYes").style.display = "none";
    }
}
</script>
<!-- /Custom JS -->
    <!-- / JAVASCRIPT -->
</head>
<body class="layout layout-vertical layout-left-navigation layout-below-toolbar layout-below-footer">
    <main>
        <div id="wrapper">
            <aside id="aside" class="aside aside-left" data-fuse-bar="aside" data-fuse-bar-media-step="md" data-fuse-bar-position="left">
                <div class="aside-content bg-primary-700 text-auto">
                    <div class="aside-toolbar">
                        <div class="logo">
                            <span class="logo-icon icon-desktop-mac"></span>
                            <p class="logo-text texttoolbar">SYSDesk</p>
                        </div>
                        <button id="toggle-fold-aside-button" type="button" class="btn btn-icon d-none d-lg-block" data-fuse-aside-toggle-fold>
                            <i class="icon icon-backburger"></i>
                        </button>
                    </div>
                    <ul class="nav flex-column custom-scrollbar" id="sidenav" data-children=".nav-item">
                        <li class="nav-item">
                            <a class="nav-link ripple " href="systems.php" data-url="index.html">
                                <i class="icon s-4 icon-desktop-tower"></i>
                                <span>Systems</span>
                            </a>
                        </li>
						<li class="nav-item">
                            <a class="nav-link ripple" href="tickets.php">
                                <i class="icon s-4 icon-message-bulleted"></i>
                                <span>Tickets</span>
                            </a>
                        </li>

                        <li class="nav-item" role="tab" id="heading-ecommerce">

                            <a class="nav-link ripple with-arrow collapsed" data-toggle="collapse" data-target="#collapse-ecommerce" href="#" aria-expanded="false" aria-controls="collapse-ecommerce">

                                <i class="icon s-4 icon-settings"></i>

                                <span>Settings</span>
                            </a>
                            <ul id="collapse-ecommerce" class='collapse ' role="tabpanel" aria-labelledby="heading-ecommerce" data-children=".nav-item">

                                <li class="nav-item">
                                    <a class="nav-link ripple " href="users.php" data-url="index.html">

                                        <span>Users</span>
                                    </a>
                                </li>
                                 <li class="nav-item">
                                    <a class="nav-link ripple " href="reset-password.php">

                                        <span>Reset Password</span>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link ripple " href="other-settings.php" data-url="index.html">

                                        <span>Other settings</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </aside>
            <div class="content-wrapper">
                <nav id="toolbar" class="bg-white">
                    <div class="row no-gutters align-items-center flex-nowrap">
                        <div class="col">
                            <div class="row no-gutters align-items-center flex-nowrap">
                                <button type="button" class="toggle-aside-button btn btn-icon d-block d-lg-none fuse-ripple-ready" data-fuse-bar-toggle="aside">
                                    <i class="icon icon-menu"></i>
                                </button>
                                <div class="toolbar-separator d-block d-lg-none"></div>
                            </div>
                        </div>
                        <div class="col-auto">
                            <div class="row no-gutters align-items-center justify-content-end">
							<a href="logout.php" class="logintoolbar ripple icon row align-items-center no-gutters px-2 px-sm-4" role="button" id="logintoolbar" aria-haspopup="true" aria-expanded="false">Logout</a>
                            </div>
                        </div>
                    </div>
                </nav>
					   <div class="content custom-scrollbar">
						<div class="page-layout simple full-width">
						 <div class="page-content-wrapper custom-scrollbar">
						 
						 
						  <!-- CONTENT -->
      <div class="clearfix" style="background:white; padding:20px;">
       <button class="headbnt btn btn-secondary btn-fab pull-left icon icon-arrow-left" onclick="window.history.back();"></button>
       <h2 class="pull-right">Create a ticket</h2>
      </div>
     <div class="form-wrapper md-elevation-8 p-4">  
     <center><form method="POST" action="../assets/php/sent-request.php">
     <fieldset>

<!-- Prepended text-->

<div class='control-group'>
 <label class="col-md-8 control-label" >System ID <span style="color:red">*</span></label>
  <div class='controls'>
    <div class="col-md-4">
   <div class='input-prepend dropdown' id="sysType" name="sysType" data-select='true'>
    <!-- there must not be a space between the prepend toggle and the input field -->
    <a class='add-on dropdown-toggle' data-toggle='dropdown' href='#'>
     <!-- span.dropdown-display will be updated with the text from the selected option -->
     <span class='dropdown-display'>DT</span>
     <i class='caret'></i>
    </a>
    <input type='text' placeholder='000' id="sysID" required="" minlength="3" maxlength="3" name="sysID" class='col-md-4 control-label' />
    <!-- this hidden field is used to contain the selected option from the dropdown -->
    <input type='hidden' id="sysType" name="sysType" value='DT' class='dropdown-field' />
     <!-- unordered list of options -->
      <ul class='dropdown-menu'>
       <li>
        <a href="#" class="idlist" id="sysType" name="sysType" data-value="DT">DT</a>
       </li>
       <li>
        <a href="#" class="idlist" id="sysType" name="sysType" data-value="LT">LT</a>
       </li>
       <li>
        <a href="#" class="idlist" data-value="TC">TC</a>
       </li>
      </ul>
     </div>
    </div>
</div>
<!-- /PREPEND EXAMPLE -->

<!-- Select Basic -->
<div class="form-group">
  <label class="col-md-4 control-label" for="requestype">Your request <span style="color:red">*</span></label>
  <div class="col-md-4">
    <select onchange="yesnoCheck(this);" id="requestype" name="requestype" class="form-control">
      <option value="Add system user">Add system user</option>
      <option value="Install software">Install software</option>
      <option value="Reqest a license">Reqest a license</option>
      <option value="Install software">Install dualboot</option>
      <option value="reimage">Reimage</option>
      <option value="other">Somthing else</option>
    </select>
  </div>
</div>

<div id="ifYes" style="display: none;">
<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="otherrequest">Other request <span style="color:red">*</span></label>  
  <div class="col-md-4">
  <input id="otherrequest" name="otherrequest" type="text" placeholder="" class="form-control input-md">
    
  </div>
</div>
</div>

<!-- Select Basic -->
<div class="form-group">
  <label class="col-md-4 control-label" for="location">Location <span style="color:red">*</span></label>
  <div class="col-md-4">
    <select id="location" name="location" class="form-control">
      <option value="Arnhem">Arnhem</option>
      <option value="Doetinchem">Doetinchem</option>
      <option value="Nijmegen">Nijmegen</option>
    </select>
  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="rusername">Your name <span style="color:red">*</span></label>  
  <div class="col-md-4">
  <input id="rusername" name="rusername" type="text" placeholder="" class="form-control input-md" required="">  
  </div>
</div>
<!-- Textarea -->
<div class="form-group">
  <label class="col-md-4 control-label" for="reason">Reason why you are making this request</label>
  <div class="col-md-4">                     
    <textarea class="form-control" id="reason" name="reason"></textarea>
  </div>
</div>

<!-- Button -->
<div>
  <div class="col-md-2">
    <button id="submit" name="submit" class="btn btn-block btn-secondary my-4 mx-auto fuse-ripple-ready">Add</button>
  </div>
</div>
<input id="requestype" name="backendreq" type="hidden" value="1">
</fieldset>
</form></center>
</div>
						  <!-- / CONTENT -->
						  
						  
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
</body>

</html>