<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Request Management</title>
<link
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
rel="stylesheet">
<link rel="stylesheet" type="text/css"
href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
<link
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css"
rel="stylesheet" type="text/css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript"
src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAr8dTx4IzkKUAQq2oEFwdM9OtT9nh1Soo&signed_in=true"
async defer></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script>
<script src="scripts/manageRequests.js"></script>
<style type="text/css">
.table {
border: 2px solid #eee;
}
.table thead>tr>th {
border-bottom: none;
}
.area_map {
background-image: url("images/Google-Maps-Logo.png");
background-size: contain;
background-repeat: no-repeat;
border: 0px;
}
.long-dialog .modal-dialog {
width: 92%;
}
#display_map {
height: 60vh;
width: 80vw;
}
</style>
</head>
<body>
<jsp:include page="header.jsp"></jsp:include>
<c:if test="${empty loggedInUser}">
<c:redirect url="." />
</c:if>
<div class="container">
<form action="getRequests">
<input type="hidden" name="target" value="manageRequests.jsp">
<div class="row">
<div class="col-sm-1">Status</div>
<div class="col-sm-3 form-group">
<select class="form-control" name="status">
<option value="Pending" selected="selected">Pending</option>
<option value="In Progress">In Progress</option>
<option value="Completed">Completed</option>
</select>
</div>
<div class="col-sm-1">Range</div>
<div class="col-sm-4">
<div id="reportrange" class="pull-right"
style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
<span></span> <b class="caret"></b>
</div>
<input type="hidden" name="range" id="range">
</div>
<div class="col-sm-2" style="height: 100%">
<input type="submit" class="form-control" value="Get Requests">
</div>
</div>
</form>
</div>
<c:if test="${not empty requestDetailsList}">
<form action="updateRequests" method="post">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>Request Id</th>
<th>Requester Name</th>
<th>Requester Phone</th>
<th>Area</th>
<th>Map</th>
<th>Request Time</th>
<th>Details</th>
<th>Status</th>
<th>Emergency Type</th>
<th>Vehicle Number</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<c:forEach items="${requestDetailsList}" var="requestItem">
<tr>
<td>${requestItem.id}</td>
<td>${requestItem.name}</td>
<td>${requestItem.phone}</td>
<td>${requestItem.area}</td>
<td><c:if test="${not empty requestItem.location}">
<button type="button" class="area_map form-control"
location="${requestItem.location}"></button>
</c:if></td>
<td>${requestItem.requestTime}</td>
<td>${requestItem.details}</td>
<td>${requestItem.status}</td>
<td>${requestItem.emergencyType}</td>
<c:if
test="${not empty requestItem.vehicleAssigned.registrationNumber}">
<td>${requestItem.vehicleAssigned.registrationNumber}</td>
<c:if test="${requestItem.status eq 'In Progress'}">
<td><input type="checkbox"
name="request_status_${requestItem.id}" class="form-control">Completed
</td>
</c:if>
<c:if test="${requestItem.status eq 'Completed'}">
<td>Completed</td>
</c:if>
</c:if>
<c:if
test="${empty requestItem.vehicleAssigned.registrationNumber}">
<td colspan="2">
<div class="form-group">
<span> Assign Vehicle</span> <select class="form-control"
name="request_vehicle_${requestItem.id}">
<option value="None" selected="selected">None</option>
<c:forEach items="${availableVehicles}" var="vehicle">
<option value="${vehicle.id}">${vehicle.registrationNumber}</option>
</c:forEach>
</select>
</div>
</td>
</c:if>
</tr>
</c:forEach>
</tbody>
</table>
</div>
<div class="row">
<div class="col-sm-2 col-sm-offset-5">
<input type="submit" value="Update" class="form-control">
</div>
</div>
</form>
</c:if>
</body>
</html>