Untitled

mail@pastecode.io avatar
unknown
plain_text
7 months ago
13 kB
3
Indexable
Never
<%-- 
    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 */
            }
            p {
                font-family: "Arial", sans-serif; /* Sử dụng font Arial hoặc font sans-serif nếu Arial không tồn tại */
                font-size: 16px; /* Kích thước chữ */
                margin: 0; /* Xóa khoảng cách thừa giữa các đoạn văn bản */
            }

            /* Định dạng phần tử p có class là "reservation-id" */
            p.reservation-id {
                font-weight: bold; /* Làm đậm văn bản */
                color: #007bff; /* Màu chữ xanh dương */
            }

            /* Định dạng phần tử p có class là "examination-info" */
            p.examination-info {
                font-style: italic; /* Làm nghiêng văn bản */
            }
            .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">

                                                </div>
                                                <div class="right-search">

                                                </div>
                                            </div>
                                        </div>
                                        <h1>Examination Details</h1>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <h4>Conclude</h4>
                                                <textarea readonly name="conclude" class="custom-input" style="width: 500px; height: 100px; font-size: 18px;">${Re.note}</textarea>
                                            </div>
                                            <div class="col-md-6">
                                                <h4>Medical Prescription</h4>
                                                <textarea readonly name="medicprep" class="custom-input" style="width: 500px; height: 100px; font-size: 18px;">${Re.medicalPrep}</textarea>
                                            </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>Reservation Date: ${Re.reservedDate}</p>
                                                        <p>Examination Date: ${Re.workday} Slot: ${Re.slot}</p>
                                                        <p>Service: ${Re.serviceName}</p>
                                                        <p>Price: ${Re.costs}</p>
                                                        <p>Doctor Name: ${Re.doctorName}</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.customerMobile}</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>