<?php
session_start();
require 'config.php';

// 获取当前登录用户信息（若未登录为 null）
$user = $_SESSION['user'] ?? null;

// 默认今天
$date = $_GET['date'] ?? date('Y-m-d');

// 获取所有教室
$locRes = $conn->query("SELECT name FROM locations ORDER BY id");
$locations = $locRes->fetch_all(MYSQLI_NUM);
?>
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>新昌中学智慧学生会</title>
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet">

<style>
body {
    background-color: #f8f9fa;
    font-size: 1rem;
}

/* 主板布局 */
.board {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.cell {
    flex: 1 1 300px;
    min-width: 200px;
    border-radius: 10px;
    padding: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    cursor: pointer;
    transition: transform 0.15s ease;
    background: #fff;
}

.cell:hover { transform: scale(1.02); }

.cell .title { 
    font-weight: 600; 
    margin-bottom: 6px; 
    font-size: 1.05rem;
}

.cell .item { 
    margin-top: 6px; 
    padding-top: 6px; 
    border-top:1px dashed rgba(0,0,0,0.1); 
    font-size: 0.9rem; 
}

.cell.gray { background:#f1f3f4; color:#555; }
.cell.green { background:#d8f7de; }
.cell.red { background:#f8d7da; }

/* ===== 手机端优化 ===== */
@media (max-width: 767.98px) {
    body {
        font-size: 1.05rem;
        background: #fff;
        padding: 0;
        margin: 0;
    }

    .container {
        padding: 10px 12px;
        max-width: 100%;
    }

    .board {
        flex-direction: column;
        gap: 10px;
    }

    .cell {
        flex: 1 1 100%;
        min-width: auto;
        border-radius: 12px;
        padding: 16px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        font-size: 1rem;
    }

    .cell .title { 
        font-size: 1.1rem; 
        margin-bottom: 8px;
    }

    .cell .item {
        font-size: 0.95rem;
        padding-top: 5px;
        margin-top: 5px;
    }

    input[type="date"] {
        font-size: 1rem;
        padding: 8px;
    }

    .modal-dialog {
        margin: 0;
        width: 100%;
        height: 100%;
        max-width: 100%;
    }
    .modal-content {
        height: 100%;
        border-radius: 0;
        border: none;
    }
}
</style>
</head>
<body class="bg-light">
<?php require 'navbar.php'; ?>
<div class="container py-4">

  <form class="row g-2 align-items-center mb-3">
    <div class="col-auto">
      <input type="date" name="date" value="<?php echo htmlspecialchars($date); ?>" class="form-control" onchange="this.form.submit()">
    </div>
  </form>

  <div id="board" class="board"></div>
</div>

<!-- 活动详情模态 -->
<div class="modal fade" id="detailModal" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content" id="detailContent"></div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
const locations = <?php echo json_encode(array_column($locations,0)); ?>;
const date = "<?php echo $date; ?>";

function loadBoard() {
  $.get('occupancy_ajax.php', {date: date}, function(data) {
    $('#board').empty();
    locations.forEach(loc => {
      const arr = data[loc] || [];
      let cls='gray', inner='';
      if(arr.length>0){
        const school = arr.find(a=>a.is_school_use==1);
        const approved = arr.find(a=>a.status=='approved' && a.is_school_use==0);
        if(school){
          cls='red';
        } else if(approved){
          cls='green';
        }
        inner = arr.map(a=>{
          let statusText = '';
          if(a.is_school_use==1) statusText = '';
          else if(a.status=='approved') statusText = '';
          else if(a.status=='pending') statusText = '（待审批）';
          else if(a.status=='rejected') statusText = '（已驳回）';
          else if(a.status=='recalled') statusText = '（已撤回）';
          return `<div class="item"><div><strong>${a.activity_title}</strong>${statusText}</div><div>${a.dept_name || a.planner}</div><div>${a.time_detail || ''}</div></div>`;
        }).join('');
      } else {
        inner = '<div class="item text-muted">未被占用</div>';
      }

      const $cell = $(`<div class="cell ${cls}" data-loc="${loc}"><div class="title">${loc}</div>${inner}</div>`);
      $cell.on('click', function(){
        $('#detailContent').html('<div class="modal-header"><h5>加载中…</h5></div><div class="modal-body">请稍候</div>');
        $('#detailModal').modal('show');
        $.get('activity_detail.php', {date: date, location: loc}, function(html){
          $('#detailContent').html(html);
        });
      });
      $('#board').append($cell);
    });
  }, 'json');
}

$(function(){ loadBoard(); });
</script>
<?php require 'footer.php'; ?>
</body>
</html>
