pgr/src/main/resources/templates/staff/createorder.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="UTF-8">
	<title>Create Order</title>
	<!-- Google Font -->
	<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
	<!-- Bootstrap CSS -->
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
	<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
	<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
	<!-- Include Font Awesome -->
	<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
	<style>
		label {
			font-weight: 700;
			color: #2d5263;
		}

		/*for uploading fields*/
		.custom-file-upload {
			position: relative;
			display: flex;
			align-items: center;
			border: 1px solid #d9dde4;
			border-radius: 5px;
			padding: 5px;
			background-color: #f9fafb;
			cursor: pointer;
			margin-top: 5px;
		}

		.custom-file-upload input[type="file"] {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
			cursor: pointer;
		}

		.custom-file-upload label {
			display: flex;
			justify-content: space-between;
			width: 100%;
			align-items: center;
		}

		.upload-text {
			color: #a6adb5;

			font-weight: 700;
		}

		.upload-icon i {
			color: #a6adb5;
			font-size: 18px;
		}

		.file-name {
			margin-left: 10px;
			color: #414f69;
			font-size: 14px;

		}
	</style>
</head>

<body>

	
<div class="row align-items-center justify-content-center" style="color: white;background-color:#414f69 ;padding: 10px;">
				<h3 class="title resizable-content" >Create Order</h3>
			</div>
	<div class="container mt-4">

		<div class="mt-1">
			
		</div>
		<!-- Card Section -->
		<div class="card p-3 resizable-content" style="margin-bottom: 8px;color: #414f69;">


			<!-- Add the resizable-content class to the card sections -->
			<div class="card mb-3 resizable-content">
				<div class="card-header text-white" style="background-color: #414f69;">Order Details
				</div>
				<div class="card-body">
					<div class="row">
						<div class="col-md-6">
							<label>Order Number:</label>
							<input type="text" class="form-control" value="" placeholder="Enter Order Number">
						</div>
						<div class="col-md-6">
							<label>Order Date:</label>
							<input type="date" class="form-control" value="">
						</div>
						<div class="col-md-6">
							<label>Order Title:</label>
							<input type="email" class="form-control" value="" placeholder="Enter Order Title">
						</div>
						
						<div class="col-md-6">
							<label>Number Of Staff Required:</label>
							<input type="number" class="form-control" value="" placeholder="Enter Staff Required...">
						</div>
						<div class="col-md-6">
							<label>Order Description:</label>
							<textarea class="form-control" id="details" rows="3" placeholder="description..."
								maxlength="400"></textarea>
						</div>

						<div class="col-md-6">
							<label>Order Document:</label>
							<div class="custom-file-upload">
								<input type="file" id="file-upload" class="form-control" onchange="displayFileName()">
								<label for="file-upload" id="file-label">
									<span class="upload-text" id="upload-text">Upload Order Document</span>
									<span class="upload-icon">
										<i class="fas fa-file-upload"></i>
									</span>
								</label>
								<span id="file-name" class="file-name"></span>
							</div>
						</div>


					</div>
				</div>

			</div>
 <button class="btn btn-sm" style="background-color: #414f69; color: white;" id="createorder">Create Order</button>



		</div>




	</div>

	<!-- Bootstrap JS -->
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

	<!-- JavaScript to handle button clicks -->

	<script>
		function displayFileName() {
			const fileInput = document.getElementById('file-upload');
			const fileNameSpan = document.getElementById('file-name');
			const fileName = fileInput.files[0].name;
			fileNameSpan.textContent = fileName;
		}
		 $(document).ready(function () {
            $('#createorder').click(function () {
                Swal.fire({
                    title: 'Success!',
                    text: 'Order Created Successfully',
                    icon: 'success',
                    confirmButtonText: 'OK',
                    background: '#f5f5f5',
                    confirmButtonColor: '#414f69'
                });
            });
        });

	</script>
</body>

</html>