<!DOCTYPE html>
<html lang="en-us">

<head>
    <title>SYSDesk - Create request</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">
    <!-- Bootstrap Select -->
    <link href="assets/css/bootstrap-select.css" media="all" rel="stylesheet" type="text/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>
    <!-- Fuse Html -->
    <script type="text/javascript" src="assets/fuse-html/fuse-html.min.js"></script>
    <!-- Bootstrap Select -->
    <script src="assets/js/bootstrap-select.js" type="text/javascript"></script>
    <!-- Main JS -->
    <script type="text/javascript" src="assets/js/main.js"></script>
    
    <!-- / JAVASCRIPT -->
</head>

<body class="layout layout-vertical layout-left-navigation layout-below-toolbar layout-below-footer">
    <main>
        <div id="wrapper">
            <div class="content-wrapper">
                <nav id="toolbar" class="bg-white">
                    <div class="row no-gutters align-items-center flex-nowrap">
						<div class="no-gutters align-items-center flex-nowrap">
						<p class="texttoolbar row align-items-center no-gutters px-2 px-sm-4" id="texttoolbar">SYSDesk</p> 
						</div>
                       <div class="col">
                       </div>
                       <div class="col-auto">
                            <div class="row no-gutters align-items-center justify-content-end">
								<a href="backend/login.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">Login</a> 
                            </div>
                        </div>
                    </div>
                </nav>
                <div class="content custom-scrollbar">
                    <div id="login" class="p-8">
                        <div class="form-wrapper md-elevation-8 p-4">
                            <div class="req title">Re-image request</div>
<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='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>

<!-- /PREPEND EXAMPLE -->

<!-- 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-8">
    <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-8 control-label" for="rusername">Your name <span style="color:red">*</span></label>  
  <div class="col-md-8">
  <input id="rusername" name="rusername" type="text" required="" placeholder="" class="form-control input-md">
    
  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-8 control-label" for="remail">Your E-mail addres</label>  
  <div class="col-md-8">
  <input id="remail" name="remail" type="email" placeholder="" class="form-control input-md">
    
  </div>
</div>

<!-- Textarea -->
<div class="form-group">
  <label class="col-md-16 control-label" for="reason">Reason why this system needs a re-image</label>
  <div class="col-md-16">                     
    <textarea class="form-control" id="reason" name="reason"></textarea>
  </div>
</div>

<!-- Button -->
<div>
  <div class="col-md-4">
    <button id="submit" name="submit" class=" btn btn-block btn-secondary my-4 mx-auto fuse-ripple-ready">Send</button>
  </div>
</div>

<input id="requestype" name="requestype" type="hidden" value="reimage">

</fieldset>
</form>

                        </div>
                    </div>

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