<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

session_start();
include('db.php');

// 检查用户是否已登录
if (!isset($_SESSION['username'])) {
    header('Location: index.php');
    exit;
}

// 获取设备信息
$equipment_id = isset($_GET['id']) ? intval($_GET['id']) : 0;
$equipment_query = "SELECT * FROM equipment WHERE id = ?";
$stmt = $conn->prepare($equipment_query);
$stmt->bind_param("i", $equipment_id);
$stmt->execute();
$equipment_result = $stmt->get_result();
$equipment = $equipment_result->fetch_assoc();

if (!$equipment) {
    echo "设备不存在。";
    exit;
}

// 获取设备特定的问题
$questions_query = "SELECT * FROM equipment_questions WHERE equipment_id = ?";
$stmt = $conn->prepare($questions_query);
$stmt->bind_param("i", $equipment_id);
$stmt->execute();
$questions_result = $stmt->get_result();
$questions = [];
while ($row = $questions_result->fetch_assoc()) {
    $questions[] = $row;
}
?>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>预约设备</title>
    <!-- 引入Bootstrap CSS 和 FullCalendar -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"></script>
    <style>
        .time-slot {
            display: inline-block;
            width: 80px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            margin: 1px;
            border: 1px solid #ddd;
            cursor: pointer;
        }
        .booked {
            background-color: #ff6666;
            color: white;
            cursor: not-allowed;
        }
        .available {
            background-color: #66ff66;
            color: black;
        }
        .selected {
            background-color: #0066ff;
            color: white;
        }
        #calendar {
            max-width: 500px;
            margin: 0 auto;
            background-color: #f8f9fa;
            padding: 10px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        .calendar-title {
            text-align: center;
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 20px;
            color: #343a40;
        }
        .divider {
            border-top: 2px solid #dee2e6;
            margin: 40px 0;
        }
        .equipment-photo {
            display: block;
            width: auto;
            max-height: 300px;
            margin: 20px 0;
        }
        .equipment-description {
            margin-left: 20px;
            max-width: 300px;
        }
        .photo-description-container {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #booking-info {
            margin-top: 20px;
        }
        #timeSlots {
            margin-top: 20px;
        }
    </style>
</head>

<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <!-- 省略,内容与index.php相同 -->
</nav>

<div class="container mt-3">
    <a href="index.php" class="btn btn-secondary">返回主页</a>
    <button onclick="history.back()" class="btn btn-secondary">返回上一级</button>
</div>

<div class="container mt-4">

    <!-- 添加链接到“我的预约”页面 -->
    <div class="mb-3">
        <a href="equipment_status.php" class="btn btn-secondary">返回设备详细列表</a>
        <a href="equipment_list.php" class="btn btn-secondary">返回设备简表</a>
        <a href="my_bookings.php" class="btn btn-info">查看我的预约</a>
    </div>

    <h2>预约 <?php echo htmlspecialchars($equipment['name'], ENT_QUOTES, 'UTF-8'); ?></h2>

    <form action="submit_booking.php" method="POST">
        <input type="hidden" name="equipment_id" value="<?php echo $equipment['id']; ?>">
        <input type="hidden" id="selectedStartTime" name="start_time">
        <input type="hidden" id="selectedEndTime" name="end_time">
        <input type="hidden" id="selectedDate" name="date">

        <!-- 显示设备照片和描述 -->
        <div class="row mb-4">
            <div class="col-md-6">
                <?php if (!empty($equipment['photo'])) { ?>
                    <img src="<?php echo htmlspecialchars($equipment['photo'], ENT_QUOTES, 'UTF-8'); ?>" alt="设备照片" class="img-fluid equipment-photo">
                <?php } ?>
            </div>
            <div class="col-md-6">
                <?php if (!empty($equipment['description'])) { ?>
                    <p><?php echo nl2br(htmlspecialchars($equipment['description'], ENT_QUOTES, 'UTF-8')); ?></p>
                <?php } ?>
            </div>
        </div>

        <!-- FullCalendar -->
        <div class="form-group row">
            <div class="col-md-6">
                <div class="divider"></div>
                <div class="calendar-title">请选择日期:</div>
                <div id="calendar"></div>
            </div>
            <div class="col-md-6">
                <div class="divider"></div>
                <div id="booking-info">
                    <h5>
                       >> 先从左侧日历选择日期,再选择时间段<br />
                       >> 请在时间表上选择起始时间,结束时间必须在开始时间之后,否则会取消所选时间。<br />
                       >> 预约的时长=结束时间-起始时间,最短预约时间为半小时。<br />
                       >> 例如:如果起始时间为10:00,结束时间是11:00,虽然显示占据了3个格子,但实际预约的时长仅为1小时!
                    </h5>
                </div>
                <div id="timeSlots" class="mt-4"></div>
            </div>
        </div>
        
        <div class="form-group">
            <div class="divider"></div>
            <label for="title" style="font-size: 20px">实验目的(一句话概括本次预约的实验目的。例如:AliCPT微波复用读出电路刻蚀工艺研究)</label>
            <textarea class="form-control" id="title" name="title" rows="1" required></textarea>
        </div>

        <!-- 设备特定的问题 -->
        <?php foreach ($questions as $question) { ?>
            <div class="form-group mt-3">
                <label for="question_<?php echo $question['id']; ?>" style="font-size: 20px">
                    <?php echo htmlspecialchars($question['question'], ENT_QUOTES, 'UTF-8'); ?>
                </label>
                <input type="text" class="form-control" id="question_<?php echo $question['id']; ?>" name="answers[<?php echo $question['id']; ?>]" required>
            </div>
        <?php } ?>

        <!-- 提交预约 -->
        <button type="submit" class="btn btn-success mt-4" id="submitBookingForm" disabled>提交预约</button>
    </form>
</div>

<script>
$(document).ready(function () {

    let submitButton = document.getElementById("submitBookingForm");
    submitButton.disabled = true;

    // 初始化 FullCalendar
    var calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
        initialView: 'dayGridMonth',
        locale: 'zh-cn',
        selectable: true, // 允许选择日期
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth'
        },
        aspectRatio: 1.5, // 调整日历的宽高比
        windowResize: function(view) {  // 动态调整日历大小
            if (window.innerWidth < 600) {
                calendar.setOption('aspectRatio', 1);  // 小屏幕设备
            } else {
                calendar.setOption('aspectRatio', 1.5);  // 普通设备
            }
        },
        dateClick: function (info) {
            // 禁止选择今天之前的日期
            var today = new Date();
            today.setHours(0, 0, 0, 0);
            var selectedDate = new Date(info.dateStr);

            if (selectedDate < today) {
                alert('不能选择过去的日期,请选择今天或之后的日期。');
                return;
            }

            // 用户选择了日期,自动触发检查预约情况
            var equipmentId = <?php echo $equipment['id']; ?>;

            // 清空之前的时间段
            $('#timeSlots').html('');

            // 发送 AJAX 请求,获取当天的预约情况
            $.ajax({
                url: 'fetch_bookings.php',
                type: 'POST',
                data: {
                    equipment_id: equipmentId,
                    date: info.dateStr
                },
                success: function (data) {
                    var bookings = JSON.parse(data);
                    var startTime = new Date(info.dateStr + 'T08:00:00');
                    var endTime = new Date(info.dateStr + 'T21:00:00');

                    // 以 30 分钟间隔生成时间段
                    for (var time = startTime; time < endTime; time.setMinutes(time.getMinutes() + 30)) {
                        var timeString = time.toTimeString().substring(0, 5);
                        var isBooked = false;

                        // 检查该时间段是否已被预约
                        for (var i = 0; i < bookings.length; i++) {
                            var bookingStart = new Date(bookings[i].start_time);
                            var bookingEnd = new Date(bookings[i].end_time);
                            if (time >= bookingStart && time < bookingEnd) {
                                isBooked = true;
                                break;
                            }
                        }

                        // 显示时间段
                        if (isBooked) {
                            $('#timeSlots').append('<div class="time-slot booked">' + timeString + '</div>');
                        } else {
                            $('#timeSlots').append('<div class="time-slot available" data-time="' + timeString + '">' + timeString + '</div>');
                        }
                    }

                    // 允许用户选择多个连续的时间段
                    var selectedSlots = [];
                    $('.available').click(function () {
                        var time = $(this).data('time');
                        var index = selectedSlots.indexOf(time);

                        if (selectedSlots.length === 0) {
                            // 第一次选择,添加时间段
                            selectedSlots.push(time);
                            $(this).addClass('selected');
                        } else {
                            // 获取第一个选择的时间段和当前点击的时间段的索引
                            var firstIndex = $('.available').index($('.available[data-time="' + selectedSlots[0] + '"]'));
                            var currentIndex = $('.available').index($(this));

                            // 清除之前的选择
                            $('.available').removeClass('selected');
                            selectedSlots = [];

                            // 选择第一个和当前点击的之间的所有时间段
                            if (currentIndex > firstIndex) {
                                for (var i = firstIndex; i <= currentIndex; i++) {
                                    var slotTime = $('.available').eq(i).data('time');
                                    selectedSlots.push(slotTime);
                                    $('.available').eq(i).addClass('selected');
                                }
                            }
                        }

                        if (selectedSlots.length > 1){
                            var firstSlot = selectedSlots[0];
                            var lastSlot = selectedSlots[selectedSlots.length - 1];
                            var start = new Date(info.dateStr + ' ' + firstSlot + ':00');
                            var end = new Date(info.dateStr + ' ' + lastSlot + ':00');

                            var duration = (end - start) / (1000 * 60 * 60); // 时长,以分钟为单位

                            if (duration > 5) {
                                alert('每次预约的时长不能超过5小时。');
                                submitButton.disabled = true;
                            } else {
                                // 更新隐藏的表单值
                                $('#selectedStartTime').val(info.dateStr + ' ' + firstSlot + ':00');
                                $('#selectedEndTime').val(info.dateStr + ' ' + lastSlot + ':00');
                                $('#selectedDate').val(info.dateStr);
                                submitButton.disabled = false;
                            }
                        }else{
                            submitButton.disabled = true;
                        }
                    });
                },
                error: function () {
                    $('#booking-info').html('<p class="text-danger">无法获取预约信息,请稍后重试。</p>');
                }
            });
        }
    });

    calendar.render();
});
</script>
</body>
</html>