FamilyBook/templates/movies/cinemas.php

<?php
/**
 * 影院管理（v9，MovieLog cinemas.php 同款）：上面加/编表单，下面列表。
 *
 * 颜色用「取色器 + 50 色预设板」两路输入（内联小段 JS 只是取色联动，
 * 不依赖 JS 也能手填 hex 或直接用取色器）。删除是 POST 小表单 + confirm；
 * 删掉的影院只把关联观影记录的 cinema_id 置空，记录本身不动。
 *
 * ⚠️ $editing 是路由传进来的「被编辑影院的记录数组」（或 null）。
 *    曾经这里写成 `$editing = !empty($editing);` —— 数组被原地变成布尔值，
 *    表面看标题还会显示「编辑影院」，但 hidden id 变 0、四个字段全部回填为空，
 *    点「编辑」就像没带入一样（v9 线上实测）。布尔化结果必须存进**另一个**变量。
 */
$isEditing = !empty($editing);
$canWrite = \App\Auth::canWrite();
?>
<div class="page-head">
  <h1>影院管理</h1>
  <span class="sub">共 <?= count($cinemas) ?> 家影院</span>
  <div class="actions">
    <a class="btn btn-ghost" href="<?= e(url('movies')) ?>">返回观影</a>
    <?php $setCurrent = 'cinemas'; $setCanWrite = $canWrite; require __DIR__ . '/_settings_menu.php'; ?>
  </div>
</div>

<?php if (!$canWrite): ?>
  <div class="card card-pad empty"><b>只读账号</b>访客只能查看影院列表。</div>
<?php else: ?>
  <div class="card card-pad cinema-form-card">
    <h2 class="cinema-h2"><?= $isEditing ? '编辑影院' : '添加影院' ?></h2>
    <form method="post" action="<?= e(url('movies/cinemas_save')) ?>">
      <?= csrf_field() ?>
      <?php if ($isEditing): ?>
        <input type="hidden" name="id" value="<?= (int)$editing['id'] ?>">
      <?php endif; ?>
      <div class="form-grid">
        <div class="field">
          <label for="cname">影院名称 *</label>
          <input class="input" id="cname" name="name" required
                 value="<?= e(old('name', $editing['name'] ?? '')) ?>" placeholder="如：万达影城（IMAX 店）">
        </div>
        <div class="field">
          <label for="cplace">所在地方</label>
          <input class="input" id="cplace" name="place"
                 value="<?= e(old('place', $editing['place'] ?? '')) ?>" placeholder="如：青岛 · 崂山区">
        </div>
        <div class="field full">
          <label for="caddress">详细地址</label>
          <input class="input" id="caddress" name="address"
                 value="<?= e(old('address', $editing['address'] ?? '')) ?>">
        </div>
        <div class="field full">
          <label for="ccolor">主题颜色</label>
          <div class="color-row">
            <input type="color" id="ccolor" name="color" class="color-picker"
                   value="<?= e(old('color', $editing['color'] ?? '#888888')) ?>">
            <span class="color-hex" id="colorHex"><?= e(old('color', $editing['color'] ?? '#888888')) ?></span>
            <span class="preset-palette">
              <?php foreach (\App\Cinema::PRESET_COLORS as $pc): ?>
                <span class="preset-color" data-color="<?= $pc ?>" style="background: <?= $pc ?>;" title="<?= $pc ?>"></span>
              <?php endforeach; ?>
            </span>
          </div>
        </div>
      </div>
      <div class="btn-row">
        <button type="submit" class="btn"><?= $isEditing ? '保存' : '添加影院' ?></button>
        <?php if ($isEditing): ?>
          <a class="btn btn-ghost" href="<?= e(url('movies/cinemas')) ?>">取消编辑</a>
        <?php endif; ?>
      </div>
    </form>
  </div>
<?php endif; ?>

<div class="card card-pad">
  <h2 class="cinema-h2">影院列表</h2>
  <?php if (!$cinemas): ?>
    <p class="empty-hint">还没有影院，先在上面添加一家。</p>
  <?php else: ?>
    <div class="table-wrap">
      <?php /* 🔴 v40（用户 2026-10-10）：「影院管理部分，注意控制列的宽度，因为最右侧的
           操作、编辑和删除两个按钮，已经被挤成两行了，尝试让编辑和删除排在一行，
           宽度给它留够。编辑使用蓝色的背景，删除使用红色的背景。」
           ⇒ ① 表格加 `.cn-table`：给「操作」列一个**最小宽度 + 不换行**
                （`.cn-ops` 上 `flex-wrap: nowrap` + `white-space: nowrap`）——
                两个按钮被挤成两行正是因为该列没有下限、被长地址挤压；
             ② 编辑 → `.btn-edit`（实心蓝）、删除 → `.btn-del`（实心红）。
           ⚠️ 用 `.btn-edit` / `.btn-del` 而不是复用 `.btn-danger`：后者是**淡红描边**的
              "危险动作"语义，全站十来处删除都在用；用户这次明确要的是**实心色块**。 */ ?>
      <table class="table table-fixed cn-table">
        <thead>
          <tr>
            <th class="cn-col-name">名称</th>
            <th class="cn-col-place">所在地方</th>
            <th class="cn-col-addr">详细地址</th>
            <th class="cn-col-count">观影</th>
            <?php if ($canWrite): ?><th class="cn-col-ops">操作</th><?php endif; ?>
          </tr>
        </thead>
        <tbody>
          <?php foreach ($cinemas as $c): ?>
            <tr>
              <td>
                <span class="color-preview" style="background: <?= e((string)($c['color'] ?: '#888888')) ?>;"></span>
                <b><?= e($c['name']) ?></b>
              </td>
              <td><?= e((string)($c['place'] ?? '')) !== '' ? e($c['place']) : '—' ?></td>
              <td class="cn-addr"><?= !empty($c['address']) ? e($c['address']) : '—' ?></td>
              <td><?= (int)$c['movie_count'] ?> 场</td>
              <?php if ($canWrite): ?>
                <td class="cn-col-ops">
                  <div class="actions cn-ops">
                    <a class="btn btn-edit btn-sm" href="<?= e(url('movies/cinemas', ['edit' => (int)$c['id']])) ?>">编辑</a>
                    <form method="post" action="<?= e(url('movies/cinemas_del')) ?>"
                          onsubmit="return confirm('确定删除「<?= e($c['name']) ?>」吗？关联观影记录的影院信息将置空。')">
                      <?= csrf_field() ?>
                      <input type="hidden" name="id" value="<?= (int)$c['id'] ?>">
                      <button type="submit" class="btn btn-del btn-sm">删除</button>
                    </form>
                  </div>
                </td>
              <?php endif; ?>
            </tr>
          <?php endforeach; ?>
        </tbody>
      </table>
    </div>
  <?php endif; ?>
</div>

<?php if ($canWrite): ?>
<script>
(function () {
  var picker = document.getElementById('ccolor');
  var hex = document.getElementById('colorHex');
  if (!picker || !hex) return;
  function setActive(color) {
    Array.prototype.forEach.call(document.querySelectorAll('.preset-color'), function (el) {
      el.classList.toggle('active', el.getAttribute('data-color') === color);
    });
  }
  picker.addEventListener('input', function () {
    hex.textContent = picker.value;
    setActive(picker.value);
  });
  Array.prototype.forEach.call(document.querySelectorAll('.preset-color'), function (el) {
    el.addEventListener('click', function () {
      picker.value = el.getAttribute('data-color');
      hex.textContent = picker.value;
      setActive(picker.value);
    });
  });
  setActive(picker.value);
})();
</script>
<?php endif; ?>