<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!-- 指定JSP页面使用Java语言，并设置页面的内容类型为html以及字符编码为UTF-8 -->

<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!-- 引入JSTL核心标签库，设置前缀为'c'，以便在JSP页面中使用JSTL标签 -->

<%
    // 获取请求的上下文路径，用于构建应用的根路径
    String path = request.getContextPath();
    // 构建基础路径，包含协议、服务器名称、端口号和上下文路径，用于后续资源的路径构建
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!-- JSP脚本片段，用于动态生成basePath变量 -->

<!DOCTYPE html>
<!-- 文档类型声明，指定了HTML的版本 -->

<html>
<!-- HTML文档的根元素开始 -->

<head>
    <!-- head元素开始，用于包含文档的元数据 -->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- 指定页面的字符编码为UTF-8 -->
    <title>根据起点站、终点站、出发时间查询展示车次信息</title>
    <!-- 设置页面标题 -->
    <script type="text/javascript" src="js/moment.js"></script>
    <!-- 引入moment.js库，用于日期时间操作 -->
    <script type="text/javascript" src="js/getDate.js"></script>
    <!-- 引入自定义的getDate.js脚本，用于获取日期 -->
    <!-- 以下是被注释掉的CSS样式链接 -->
    <%-- <link rel="stylesheet" href="<%=basePath%>css/style.css" type="text/css" >
    <link rel="stylesheet" href="<%=basePath%>css/table-style.css" type="text/css" > --%>
    <!-- 引入select-style.css样式表，用于美化select元素 -->
    <link rel="stylesheet" href="<%=basePath%>css/select-style.css" type="text/css" >
    <!-- 引入sumbitButton-style.css样式表，用于美化提交按钮 -->
    <link rel="stylesheet" href="<%=basePath%>css/sumbitButton-style.css" type="text/css" >
    <!-- 引入H-ui前端框架的CSS文件 -->
    <link rel="stylesheet" type="text/css" href="<%=basePath%>static/h-ui/css/H-ui.min.css" />
    <!-- 引入H-ui.admin前端框架的CSS文件 -->
    <link rel="stylesheet" type="text/css" href="<%=basePath%>static/h-ui.admin/css/H-ui.admin.css" />
    <!-- 引入图标字体库 -->
    <link rel="stylesheet" type="text/css" href="<%=basePath%>lib/Hui-iconfont/1.0.8/iconfont.css" />
    <!-- 引入皮肤样式 -->
    <link rel="stylesheet" type="text/css" href="<%=basePath%>static/h-ui.admin/skin/default/skin.css" id="skin" />
    <!-- 引入自定义样式 -->
    <link rel="stylesheet" type="text/css" href="<%=basePath%>static/h-ui.admin/css/style.css" />
</head>
<!-- head元素结束 -->

<body onload="getDate()">
    <!-- body元素开始，包含页面的可见内容，并在加载时执行getDate函数 -->

    <br/><br/>
    <!-- 表单用于提交查询请求 -->
    <form action="<%=basePath%>GetByStartEndStationServlet" method="post">
        <!-- 表单的action属性设置为服务器端的查询Servlet，method设置为post -->
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        起始站:&nbsp;&nbsp;
        <!-- 起始站下拉选择菜单 -->
        <select name="startStation">
            <!-- 使用JSTL的forEach标签遍历起始站列表 -->
            <c:forEach items="${startStationList}" var="train">
                <option value="${train.startStation}">${train.startStation}</option>
                <!-- 为每个起始站创建一个选项 -->
            </c:forEach>
        </select>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        终点站:&nbsp;&nbsp;
        <!-- 终点站下拉选择菜单 -->
        <select name="endStation">
            <!-- 使用JSTL的forEach标签遍历终点站列表 -->
            <c:forEach items="${endStationList}" var="train">
                <option value="${train.endStation}">${train.endStation}</option>
                <!-- 为每个终点站创建一个选项 -->
            </c:forEach>
        </select>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        开车时间:&nbsp;&nbsp;
        <!-- 开车时间输入框，类型为date -->
        <input type="date" id="startTime" id="startTime" name="startTime" min=""/>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <!-- 提交按钮，使用sumbit-button样式 -->
        <input class="sumbit-button" type="submit" value="查询">
    </form>
    
    <br/>
    <!-- 表格用于展示查询结果 -->
    <div class="page-container">
        <div class="mt-20">
            <!-- 表格开始 -->
            <table class="table table-border table-bordered table-bg table-hover table-sort table-responsive">
                <thead>
                    <tr class="text-c">
                        <!-- 表头定义 -->
                        <th width="40">序号</th>
                        <th width="80">车次</th>
                        <th width="80">起始站</th>
                        <th width="80">终点站</th>
                        <th width="120">开车时间</th>
                        <th width="120">到站时间</th>
                        <th width="60">票价/元</th>
                        <th width="60">剩余座位数</th>
                        <th width="60">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- 使用JSTL的forEach标签遍历车次列表 -->
                    <c:forEach items="${trainList}" var="allTrain" varStatus="status">
                    <tr  class="text-c">
                        <td>${status.index+1}</td>
                        <!-- 显示序号，status.index+1用于计算当前序号 -->
                        <td>${allTrain.trainNumber}</td>
                        <!-- 显示车次号 -->
                        <td>${allTrain.startStation}</td>
                        <!-- 显示起始站 -->
                        <td>${allTrain.endStation}</td>
                        <!-- 显示终点站 -->
                        <td>${allTrain.startTime}</td>
                        <!-- 显示开车时间 -->
                        <td>${allTrain.endTime}</td>
                        <!-- 显示到站时间 -->
                        <td>${allTrain.price}</td>
                        <!-- 显示票价 -->
                        <td>${allTrain.seatNumber}</td>
                        <!-- 显示剩余座位数 -->
                        <td><a href="<%=basePath%>CheckLoginServlet?trainId=${allTrain.trainId}&temp=2">订票</a></td>
                        <!-- 订票操作链接 -->
                    </tr>
                    </c:forEach>
                </tbody>
            </table>
        </div>
    </div>

<!--_footer 作为公共模版分离出去-->

<!-- 引入jQuery库 -->

<script type="text/javascript" src="<%=basePath%>lib/jquery/1.9.1/jquery.min.js"></script>

<!-- 引入layer插件，用于弹出层 -->

<script type="text/javascript" src="<%=basePath%>lib/layer/2.4/layer.js"></script>

<!-- 引入H-ui前端框架的JS文件 -->

<script type="text/javascript" src="<%=basePath%>static/h-ui/js/H-ui.min.js"></script> 

<!-- 引入H-ui.admin前端框架的JS文件 -->

<script type="text/javascript" src="<%=basePath%>static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->

<!-- 引入My97DatePicker日期选择器 -->

<script type="text/javascript" src="<%=basePath%>lib/My97DatePicker/4.8/WdatePicker.js"></script> 

<!-- 引入DataTables插件 -->

<script type="text/javascript" src="<%=basePath%>lib/datatables/1.10.0/jquery.dataTables.min.js"></script> 

<!-- 引入laypage分页插件 -->

<script type="text/javascript" src="<%=basePath%>lib/laypage/1.2/laypage.js"></script>

<script type="text/javascript">
  
    <!-- 初始化DataTables插件 -->
  
    $('.table-sort').dataTable({
  
        "aaSorting": [[ 0, "asc" ]],//默认第几个排序