<%--
Document : StaffReservationDetails
Created on : Oct 27, 2023, 9:32:43 PM
Author : ADMIN
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<style>
.infor-container {
display: flex;
flex-wrap: wrap; /* Cho phép các phần tử con xuống dòng khi không đủ không gian */
justify-content: space-between; /* Các phần tử con sẽ nằm cách xa nhau */
}
/* Định dạng mỗi phần thông tin (cột) */
.infor-column {
flex-basis: calc(50% - 10px); /* Sử dụng khoảng 50% chiều rộng và trừ đi khoảng cách giữa các cột */
margin-right: 20px; /* Tạo khoảng cách bên phải của mỗi cột */
margin-bottom: 20px; /* Tạo khoảng cách bên dưới của mỗi cột */
}
.infor-column {
border: 1px solid #ccc; /* Độ dày và màu sắc của viền */
padding: 10px; /* Khoảng cách bên trong cột để tạo đệm */
margin: 10px; /* Khoảng cách giữa các cột */
border-radius: 5px; /* Bo góc của cột */
background-color: #f9f9f9; /* Màu nền của cột */
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="./marketing/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- font Awesome -->
<link href="./marketing/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="./marketing/css/ionicons.min.css" rel="stylesheet" type="text/css" />
<!-- Morris chart -->
<link href="./marketing/css/morris/morris.css" rel="stylesheet" type="text/css" />
<link href="./marketing/css/jvectormap/jquery-jvectormap-1.2.2.css" rel="stylesheet" type="text/css" />
<link href="./marketing/css/datepicker/datepicker3.css" rel="stylesheet" type="text/css" />
<link href="./marketing/css/daterangepicker/daterangepicker-bs3.css" rel="stylesheet" type="text/css" />
<link href="./marketing/css/iCheck/all.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<!-- Theme style -->
<link href="./marketing/css/style.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body class="skin-black">
<c:if test="${param['index']==null }">
<c:set var = "index" scope = "page" value = "1"/>
</c:if>
<c:if test="${param['index']!=null}">
<c:set var = "index" scope = "page" value = "${param['index']}"/>
</c:if>
<!-- header logo: style can be found in header.less -->
<div class="left-side sidebar-offcanvas" style="height: 1200px;position: fixed; width: 220px; background-color: #39435c;left: 0; top:0;">
</div>
<header class="header">
<a href="" class="logo">
Staff
</a>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top" role="navigation">
<!-- Sidebar toggle button-->
<a href="#" class="navbar-btn sidebar-toggle" data-toggle="offcanvas" role="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="navbar-right">
<a href="logout" class="btn btn-outline-primary" style="text-decoration: none; font-weight: 100;" >
<i class="fa fa-sign-out" style="font-size: 35px;" aria-hidden="true"></i>
</a>
</div>
</nav>
</header>
<div class="wrapper row-offcanvas row-offcanvas-left">
<!-- Left side column. contains the logo and sidebar -->
<aside class="left-side sidebar-offcanvas" id="left-aside" style="height: 100%;">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<c:if test="${sessionScope.u.getAvartar()==null}">
<img src="https://dvdn247.net/wp-content/uploads/2020/07/avatar-mac-dinh-1.png" class="img-circle" alt="User Image" />
</c:if>
<c:if test="${sessionScope.u.getAvartar()!=null}">
<img src="${sessionScope.u.getAvartar()}" class="img-circle" alt="User Image" />
</c:if>
</div>
<div class="pull-left info">
<p>Hello, ${sessionScope.u.getFullname()}</p>
<a href="#"><i class="fa fa-circle text-success"></i> Online</a>
</div>
</div>
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu">
<li class="">
<a href="staffcontroller">
<i class="fa fa-circle"></i> <span>Staff Reservation</span>
</a>
</li>
<li class="">
<a href="reservationhistory">
<i class="fa fa-circle"></i> <span>Reservation History</span>
</a>
</li>
<li class="">
<a href="home">
<i class="fa fa-circle"></i> <span>Go Home</span>
</a>
</li>
</ul>
</section>
<!-- /.sidebar -->
</aside>
<aside class="right-side">
<!-- Main content -->
<section class="content">
<div class="row">
<div class="col-xs-12">
<div class="panel">
<header class="panel-heading">
Staff Reservations
</header>
<div class="panel-body table-responsive">
<div class="sliderList">
<div class="input-group" style="margin-bottom: 10px;width: 100%; ">
<div class="search-slider"
style="width: 100%; display: flex; justify-content: space-between; position: relative;">
<div class="left-search">
<form action="staffexamination">
<input type="text" value="${reser.reservationId}" name="ReId" hidden="">
<input type="text" value="${reser.customerId}" name="CusId" hidden="">
<input type="text" value="${reser.serviceId}" name="SerId" hidden="">
<input type="text" value="${reser.staffId}" name="StaffId" hidden="">
<input type="date" value="${reser.reservedDate}" name="ReserDate" hidden="">
<input type="text" value="exam" name="Status" hidden="">
<input type="submit" value="Examination" name="btnSubmit">
</form>
</div>
<div class="right-search">
</div>
</div>
</div>
<div class="row">
<div class="infor-container ">
<div class="col-md-4">
<div class="infor-column " >
<h1>Reservation Details</h1>
<p>Reservation ID: ${Re.reservationId}</p>
<p>Customer Name: ${Re.customerName}</p>
<p>Customer Email: ${Re.customerEmail}</p>
<p>Customer Phone: ${Re.customerNumber}</p>
<p>Reservation Date: ${Re.reservedDate}</p>
<p>Price: ${Re.costs}</p>
<p>Doctor Name: ${Re.doctorName}</p>
<p>Patient Name: ${Re.patientName}</p>
<p>Status: ${Re.status}</p>
</div>
</div>
<div class="col-md-4">
<div class="infor-column ">
<h1>Customer Information</h1>
<p>Customer Name: ${InfCus.customerName}</p>
<p>Customer Gender:
<c:if test="${InfCus.customerGender}">Male</c:if>
<c:if test="${!InfCus.customerGender}">Female</c:if>
</p>
<p>Customer Email: ${InfCus.customerEmail}</p>
<p>Customer Phone: ${InfCus.customerNumber}</p>
<p>Customer Address: ${InfCus.customerAddress}</p>
</div>
</div>
<div class="col-md-4">
<div class="infor-column ">
<h1>Patient Information</h1>
<p>Patient Name: ${InfPat.patientName}</p>
<p>Patient Gender:
<c:if test="${InfPat.patientGender}">Male</c:if>
<c:if test="${!InfPat.patientGender}">Female</c:if>
</p>
<p>Patient Age: ${InfPat.patientDoB}</p>
<p>Patient RelationShip with Customer: ${InfPat.patientRelation}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</aside>
</div>
</body>
</html>