FamilyBook/templates/movies/form.php

<?php
/**
 * 观影表单（新增 / 编辑，一张表单两用 —— 与 people/form 同一思路）。
 *
 * v9 变化：观影时间改为「开始 / 结束」两个秒级时刻（_datetime.php 控件，
 * 服务端 read_dt_input 取值）；评分与观后感**移出表单** —— 搬到详情页的
 * 「评价与评论」区（MovieLog 同款：每账号一条评价，谁都能评）；影院改为
 * 下拉选择已有影院 + 可选「新建影院」行内三段。
 *
 * 海报与票根是 free 槽位（v8）：不进裁剪器、整图等比缩进框内，普通文件控件即可。
 * 现场照片只在**新增**时提供多选；编辑时在详情页里逐张补/删。
 */
$isEdit = !empty($m['id']);

// 时间回填：校验失败重画时优先用 old() 里的分字段重组（否则用户刚选的时刻会丢）；
// 正常进编辑页时用库里的值。
$dtFromOld = static function (string $name, ?string $dbValue): ?string {
    $date = trim((string)old($name . '_date', ''));
    if ($date !== '') {
        return sprintf('%s %02d:%02d:%02d', $date,
            (int)old($name . '_hour', 0), (int)old($name . '_minute', 0), (int)old($name . '_second', 0));
    }
    return ($dbValue !== null && $dbValue !== '') ? $dbValue : null;
};
$dtStart = $dtFromOld('starts_at', $m['starts_at'] ?? null);
$dtEnd   = $dtFromOld('ends_at',   $m['ends_at'] ?? null);
// 刚用「新建影院」弹框加完一家 → 回到这里要**自动选中**它（见 index.php 的 cinemas_save）。
// 优先级：老输入 > ?cinema=（刚新建的）> 记录里的值。
$selCinema = (int)old('cinema_id', (int)($_GET['cinema'] ?? 0) ?: ($m['cinema_id'] ?? 0));
$curAttendees = array_map('intval', array_column($m['attendees'] ?? [], 'id'));
/* 🔴 v38（用户 2026-10-10）：「同行的人，这里每个人添加的时候，应该默认带上自己，
   也就是自己不用选择就应该已经选上了。」
   ⇒ **新增**时把"我"预置进已选列表；**编辑**时以库里的值为准
     （用户可能就是自己改了，不能每次打开都把"我"塞回去）。
   ⚠️ `old()` 存在（= 刚才这次提交校验失败重画）时，尊重用户上一次的勾选 ——
      否则他取消掉"自己"、填错别处再提交，会发现"自己"又回来了。 */
$meId = (int)\App\Auth::personId();
$hasOld = array_key_exists('attendees', (array)($_SESSION['_old'] ?? []));
if ($hasOld) {
    $selAttendees = array_map('intval', (array)old('attendees', []));
} elseif ($isEdit) {
    $selAttendees = $curAttendees;
} else {
    // 新增：默认带上自己（名册里查得到才加 —— 免得给一个不存在的 id）
    $selAttendees = $meId > 0 ? [$meId] : [];
}
?>
<?php /* 🔴 v37：本模板现在有两种用法 ——
     ① **整页**（`movies/edit` 的编辑页；以及 `movies/new` 的直接访问 / 校验失败重画）；
     ② **弹框片段**（被 `movies/index.php` require，`$mvModalOnly = true`，
        在观影列表页上弹出"记一场电影"）。
   ⚠️ 用法 ② 里**不能**输出 page-head / 设置菜单 —— 否则列表页会莫名多出一个大标题。 */
$mvModalOnly = !empty($mvModalOnly); ?>
<?php if (!$mvModalOnly): ?>
<div class="page-head">
  <h1><?= $isEdit ? '编辑观影记录' : '记一场电影' ?></h1>
  <span class="sub"><?= $isEdit ? e($m['title']) : '片名必填，其他都可以以后再补' ?></span>
  <div class="actions">
    <?php /* 文案一律「返回观影」（用户 2026-10-01 要求：观影模块里不再出现
            「返回观影记录」「返回列表」「返回详情」三种叫法）。
            落地页仍按来路走：从详情页点「编辑」进来的，回去还是那条记录的详情页。 */ ?>
    <a class="btn btn-ghost"
       href="<?= e($isEdit ? url('movies/show', ['id' => (int)$m['id']]) : url('movies')) ?>">
      返回观影
    </a>
    <?php $setCurrent = 'form'; $setCanWrite = \App\Auth::canWrite(); require __DIR__ . '/_settings_menu.php'; ?>
  </div>
</div>
<?php endif; /* /!$mvModalOnly */ ?>

<?php /* 🔴🔴 v37 用户 2026-10-09 第 6 条第 4 点：「观影模块也是一样，新增一部电影时，
       也弹出一个框来输入所有信息。填写完之后，再刷新观影页面就可以了。」
       ⇒ **新增**走弹框（与日程 / 任务同一套形态），**编辑**仍留在页面里
         （编辑是从详情页进来的、本来就不在列表中，没有"被顶走"的问题）。
       ⚠️ 表单本身**一个字没动**（字段名 / 服务端契约 / CSRF / enctype 全照旧），
          只是把它的容器从"页面上的卡片"换成"浮层里的面板"。 */ ?>
<?php
/* ⚠️ 弹框的形态 / 初始显隐 —— 三个开关**分开管**（v40 起）：
     · `$mvModalOnly`  不输出 page-head + 设置菜单（本模板被**别的页面内嵌**时用：
                       观影列表页的"记一场电影"、观影详情页的"编辑"）；
     · `$mvModalForce` **强制**成弹框壳（`$isEdit` 时默认是"整页卡片"，
                       详情页的编辑要弹框，就靠这个翻转）；
     · `$mvOpen`       初始是否打开。默认：弹框形态且非内嵌 → 打开。

   各调用方实际传的：
     · 观影列表页内嵌      → Only=true                （关闭，点按钮才开）
     · `movies/new` 整页   → 都不传                    （打开：校验失败重画要看得见）
     · 观影详情页内嵌      → Only=true + Force=true    （关闭，点"编辑"才开）
     · AJAX 校验失败重画   → Only=true + Force=true + Open=true（重画回弹框里，保持打开） */
$mvModalOnly  = !empty($mvModalOnly);
$mvModalForce = !empty($mvModalForce);
$mvModal = $mvModalForce || !$isEdit;
$mvOpen  = isset($mvOpen) ? !empty($mvOpen) : ($mvModal && !$mvModalOnly);
/* 🔴 v81：首页内嵌时挂通用开关属性（`assets/js/add_modal.js`）。
   ⚠️ **只在首页设**（`$fbAddModalAttr` 由 `templates/home.php` 传）：
      模块页（观影列表页）自己有内联开关脚本，再挂通用属性会变成两套一起绑，
      Esc / 点遮罩各关一次 —— 当前虽无害，但那是"两份实现同时生效"，迟早出事。
      所以这里按需挂，模块页行为一个字不变。 */
$fbAdd = !empty($fbAddModalAttr);
?>
<div class="<?= $mvModal ? 'cal-modal' : 'mv-form-wrap' ?>"<?= $mvModal ? ' id="mvAddCard" role="dialog" aria-modal="true" aria-label="' . ($isEdit ? '编辑观影记录' : '记一场电影') . '"' . ($mvOpen ? '' : ' hidden') . ($fbAdd ? ' data-fb-add-modal' : '') : '' ?>>
  <?php if ($mvModal): ?>
    <?php /* 🔴 v40：弹框的标题 / 主按钮文案**随用途变** —— 详情页点「编辑」时进来的是
           同一份模板，标题得写「编辑观影记录」、按钮写「保存」，不能还叫"记下这场电影"。
           ⚠️ 元素 id **保持不变**（`mvAddCard` / `mvAddSubmit`…）：同一页上只会有一个
              这类弹框，改 id 只会让既有的探针与 CSS 一起失效，收益为零。 */ ?>
    <div class="cal-modal-panel mv-panel">
      <div class="cal-modal-head">
        <b><?= $isEdit ? '编辑观影记录' : '记一场电影' ?></b>
        <button type="button" class="cal-modal-x" id="mvAddX" aria-label="关闭"<?= $fbAdd ? ' data-fb-add-close' : '' ?>>✕</button>
      </div>
  <?php endif; ?>
<form method="post" enctype="multipart/form-data"
      action="<?= e(url($isEdit ? 'movies/update' : 'movies/create')) ?>"
      id="mvForm">
  <?= csrf_field() ?>
  <?php if ($isEdit): ?>
    <input type="hidden" name="id" value="<?= (int)$m['id'] ?>">
  <?php endif; ?>
  <?php /* 🔴 v81：首页内嵌时提交完回**首页**（不是跳去观影列表/详情 ——
       用户要的是"不离开首页就把事办了"，跳走就等于把他从首页赶出去）。
       取值走服务端白名单（见 index.php 的 movies/create 分支），
       **不把 POST 的字符串直接当跳转地址**（开放重定向）。
       ⚠️ 只在新建时给（编辑没有"回首页"的语义）。 */ ?>
  <?php if (!$isEdit && $fbAdd): ?>
    <input type="hidden" name="back" value="home">
  <?php endif; ?>
  <?php /* ⚠️ 弹框模式下"主要动作在右下角"（与日程 / 任务弹框一致）：
          body 滚、foot 固定。编辑态仍是页面上的普通卡片。 */ ?>
  <?php if ($mvModal): ?><div class="cal-modal-body"><?php endif; ?>

  <div class="<?= $mvModal ? 'mv-form-inner' : 'card card-pad' ?>">
    <?php /* 🔴🔴 v38（用户 2026-10-10）：**标签内联 + 固定宽度对齐**。
       用户原话：「记录一场电影，这个弹框因为标题和下面的输入框都是两行的，
         所以导致弹框非常长。能不能排排版，让前面的标题后面加个冒号，后面的输入框
         直接跟在它后面，这样就变成一行。包括开始、结束时间、影院、同行的人、简介等等，
         能把它排成一行的都排成一行，但是一定要注意对齐的问题，如果不对齐的话可能不好看。」
       ⇒ 换成 `.mv-grid`：每行 "标签(固定 62px，右对齐) ： 控件(占满剩余)"。
         固定宽度是"对齐"的关键 —— 标签长短不一（片名/时间/影院/同行的人）时，
         控件左缘仍然在**同一条竖线**上。
       ⚠️ 不用 `.form-grid`（它是 2 列 grid，本来就是"标题在上、控件在下"）：
          那一套是给普通页面表单用的，别为了弹框把它改掉。 */ ?>
    <div class="mv-grid">
      <div class="mv-row">
        <label class="mv-lb" for="title">片名<i>*</i></label>
        <div class="db-title-row">
          <input class="input" id="title" name="title" value="<?= e(old('title', $m['title'] ?? '')) ?>"
                 required autocomplete="off">
          <button type="button" class="btn btn-ghost btn-sm" id="dbFetch"
                  title="按片名从豆瓣抓取片名、简介、海报等">📡 自动获取</button>
        </div>
        <?php /* v10 豆瓣自动补充：输入片名出下拉候选，点「自动获取」直接抓。
                抓到的元数据整体进隐藏 douban_meta（JSON），海报走服务端落盘的 poster_key。 */ ?>
        <div class="db-suggest" id="dbSuggest" hidden></div>
        <input type="hidden" name="douban_meta" id="dbMeta" value="">
        <input type="hidden" name="poster_key" id="dbPosterKey" value="">
        <div class="db-poster-preview" id="dbPosterWrap" hidden>
          <img id="dbPosterImg" alt="海报预览">
          <span class="tip">海报已从豆瓣取回，保存后生效。</span>
        </div>
        <?php if (!empty($errors['title'])): ?><span class="err"><?= e($errors['title']) ?></span><?php endif; ?>
      </div>

      <?php /* 用户 2026-10-04 第 7 条：起止是一个**范围**。用户 2026-10-09 第 2 次：
               「前面是日期，后面是时和分，只记录到时和分就行了。时和分，是下拉的。」
               ⇒ 形态 = 日期框 + 时/分两个下拉（**没有秒**，见 app.js upgradeRange 的说明）。 */ ?>
      <div class="mv-row dt-range">
        <span class="mv-lb dt-range-label">时间</span>
        <?php /* v37：秒去掉、"散场时间可不填。"那句也删了（用户要求省空间）。
             v38：`$dtPlugin = 'antd'` ⇒ app.js 把这对端点升级成
                  **Ant Design 的 RangePicker**（用户 2026-10-10 点名要的插件，
                  先在观影模块试点）。原生下拉**照旧在**，拉不动时就是它们。 */ ?>
        <?php $dtName = 'starts_at'; $dtValue = $dtStart; $dtId = 'starts_at_date';
              $dtRange = 'start'; $dtPlugin = 'antd';
              require __DIR__ . '/../_datetime.php'; ?>
        <?php if (!empty($errors['starts_at'])): ?><span class="err"><?= e($errors['starts_at']) ?></span><?php endif; ?>
        <?php $dtName = 'ends_at'; $dtValue = $dtEnd; $dtId = '';
              $dtRange = 'end'; $dtPlugin = 'antd';
              require __DIR__ . '/../_datetime.php'; ?>
        <?php if (!empty($errors['ends_at'])): ?><span class="err"><?= e($errors['ends_at']) ?></span><?php endif; ?>
              </div>

      <?php /* 用户 2026-10-04 第 11 批 #4（三件事）：
               ① 「选择影院的时候，影院的颜色要出现在下拉列表中，用来显示不同的影院」
                  → 原生 <option> **画不了色块**（浏览器只渲染纯文本），
                    所以这里换成自定义下拉：按钮 + 弹出列表，每行左侧一个影院色点。
                    真实值仍然提交给隐藏的 <input name="cinema_id">（表单契约不变）。
               ② 「管理影院按钮，改为新建影院，点击后弹框，添加新影院，不要跳转到管理影院的页面」
                  → 弹框里放"地方/名称/颜色"三个字段（影院管理页那张表单的核心），
                    提交时带 back=movies/new，服务端存完回到本页并自动选中新影院。
               ③ 下拉/弹框的样式与全站统一（宣纸底色、品牌色描边）。 */ ?>
      <div class="mv-row">
        <label class="mv-lb" for="cinema_id">影院</label>
        <div class="cinema-select-row">
          <div class="cs" id="cinemaPicker" data-open="0">
            <button type="button" class="cs-btn" id="csBtn" aria-haspopup="listbox" aria-expanded="false">
              <span class="cs-dot" id="csDot"<?= $selCinema > 0 ? '' : ' hidden' ?>></span>
              <span class="cs-text" id="csText">不记录影院</span>
              <span class="cs-caret" aria-hidden="true">▾</span>
            </button>
            <div class="cs-menu" id="csMenu" hidden role="listbox">
              <?php /* 🔴 v39（用户 2026-10-10）：「影院那个地方应该有一个搜索的功能，
                   下拉的地方上面有一个搜索筛选的功能。」
                   ⇒ 弹出列表**顶部**放一个搜索框，输入即过滤（按地点+名称）。
                   ⚠️ 搜索框是**这个列表的一部分**，不放在外面 ——
                      它只在"下拉打开时"才有意义，放在外面会一直占一行高度。
                   ⚠️ 它不是表单字段（没有 name），只是筛选手；
                      选中仍然靠点列表项 → 写进隐藏的 cinema_id。 */ ?>
              <div class="cs-search">
                <input type="text" class="cs-search-input" id="csSearch"
                       placeholder="搜索影院" autocomplete="off"
                       aria-label="搜索影院" role="searchbox">
              </div>
              <div class="cs-list" id="csList">
              <button type="button" class="cs-item" data-id="0" data-color="" role="option">
                <span class="cs-dot is-none" aria-hidden="true"></span><span>不记录影院</span>
              </button>
              <?php foreach ($cinemas as $c): ?>
                <button type="button" class="cs-item" role="option"
                        data-id="<?= (int)$c['id'] ?>"
                        data-color="<?= e((string)($c['color'] ?: '#888888')) ?>"
                        data-text="<?= e(trim(((string)($c['place'] ?? '') !== '' ? $c['place'] . ' · ' : '') . $c['name'])) ?>">
                  <span class="cs-dot" style="background: <?= e((string)($c['color'] ?: '#888888')) ?>;"></span>
                  <span><?= e(trim(((string)($c['place'] ?? '') !== '' ? $c['place'] . ' · ' : '') . $c['name'])) ?></span>
                </button>
              <?php endforeach; ?>
              </div><?php /* /.cs-list */ ?>
              <?php /* 一条都没匹配上时露出来（平时 hidden，不占高度） */ ?>
              <div class="cs-empty" id="csEmpty" hidden>没有匹配的影院</div>
            </div>
            <input type="hidden" id="cinema_id" name="cinema_id" value="<?= (int)$selCinema ?>">
          </div>
          <button type="button" class="btn btn-ghost btn-sm" id="cinemaNewBtn">新建影院</button>
        </div>
      </div>

      <div class="mv-row">
        <span class="mv-lb">同行的人</span>
        <?php /* v24 第 11 条：换成全局人员选择器（templates/_person_picker.php）。
                原来这套是观影页私有的 .att-*，它的「过滤」其实一直是坏的 ——
                .att-item 自己写了 display:flex，压过了浏览器的 [hidden]{display:none}，
                JS 里 el.hidden = true 根本没生效，搜什么都还是一整列。 */ ?>
        <?php if ($people): ?>
          <?php
          $ppName     = 'attendees[]';
          $ppPeople   = $people;
          $ppSelected = $selAttendees;
          $ppMode     = 'multi';
          $ppOpenBtn  = '+ 添加观影人';
          $ppTitle    = '选择观影人';
          $ppTip      = '';
          require __DIR__ . '/../_person_picker.php';
          ?>
        <?php else: ?>
          <span class="tip">名册里还没有人，先把家人加进名册再来记。</span>
        <?php endif; ?>
      </div>

      <?php /* 🔴 v39（用户 2026-10-10）：「简介和备注不要放在一行，也就是说一个字段
           它就占一行。所以简介后面是一行，备注后面是一行。」
           ⇒ 撤销 v38 的 `.mv-pair` 并排，两块各占一整行（回到普通 `.mv-row`）。
           ⚠️ 并排当时是为了压高度，但多行文本框挤半宽后每行都换行、反而更难读 ——
              用户看过真实效果后的选择是"各占一行"，按他说的做。 */ ?>
      <div class="mv-row">
        <label class="mv-lb" for="info">简介</label>
        <textarea class="input" id="info" name="info" rows="3"
                  placeholder="剧情简介"><?= e(old('info', $m['info'] ?? '')) ?></textarea>
      </div>

      <div class="mv-row">
        <label class="mv-lb" for="note">备注</label>
        <textarea class="input" id="note" name="note" rows="2"><?= e(old('note', $m['note'] ?? '')) ?></textarea>
      </div>

      <?php
/**
 * v24 第 20 批 第 1 条：编辑页把**已经存过的**海报 / 观影照片**显示出来**。
 *
 * 用户原话：「观影模块，编辑观影，已经保存的海报和票根、合影，都没带进来。」
 * ⚠️ 原来这里只有两句灰字提示（"已有海报，不选新图就保留原图。"）——
 *    也就是说**图上你根本看不见图**：想确认"当时选的是哪张"、或想换掉它，
 *    都得先回到详情页看一眼。用户要的是"带进来"，即**看得见**。
 *
 * 做法：能预览的（图片）给缩略图 + 删除；不可预览的给一个下载入口。
 * ⚠️ 换图仍然靠"选新文件"（服务端换新图时会顺手删掉旧对象，见 index.php movies/update），
 *    所以这里**不需要**"确认换这张"之类的中间态。
 * ⚠️ 每一块的删除按钮都关联到一个**独立的表单** —— 它们必须在**外层表单之外**
 *    （form 嵌套会让外层表单提前关闭，"保存"键就失效了，第 20 批 第 3 条刚栽过）。
 *    按钮留在原位、用 HTML5 的 `form="id"` 关联到外面那个表单。
 */
$mHasPoster = $isEdit && !empty($m['poster_key']);
$mHasTicket = $isEdit && !empty($m['ticket_key']);
$mPhotos    = $isEdit ? (array)($m['photos'] ?? []) : [];
$mDelForms  = [];   // 收集起来，在表单**外面**统一渲染
?>
<?php /* 🔴🔴 v39（用户 2026-10-10）：「海报和观影照片为什么和上面的标题不一样呢？
     海报的字体和简介是一样的，也带一个冒号。然后把后面点击或拖动进行上传往后放，
     和简介后面的输入框保持一样大小。观影照片也是类似的，观影照片也是加粗。
     和简介的字体保持一致，不带冒号，后面放上点击或拖动进行上传。」

   ⇒ 两块都改成**与简介完全相同的 `.mv-row`**：
       · 标签用 `.mv-lb`（= 简介那个：14px / 600 / var(--ink) / 固定 62px / 右对齐），
         冒号由 `.mv-lb::after` 统一给 —— 所以**海报自带冒号**、
         而观影照片的标签多一个 `.no-colon`（用户明确说"不带冒号"）。
       · 内容（缩略图 + 上传框）包一层 `.mv-media-body`，它是 `.mv-row` 里
         **唯一**参与弹性布局的项 ⇒ 左缘与简介输入框同为 444、宽度也同为"占满剩余"。

   ⚠️ 为什么不再用 v38 那套 `.mv-media`（标签一行、内容另起一行 + `margin-left:72px`）：
      · 那套是靠"手填 72px"去凑对齐的，75px/72px 这类数字一旦改标签宽度就散；
      · 更关键的是**海报那块当时被误包进了一个"并排网格"**
        （`.mv-grid.mv-pair` 里面只有它一个孩子）⇒ grid 的两列布局让它只占**半宽**，
        于是它的上传框明显比简介的输入框窄 —— 用户看到的正是这个。
      ⇒ 现在回归 `.mv-row`，宽度/左缘/字号全部与上面各字段**同一套规则**，
        "看起来一样"不是靠对齐数字，而是因为它们本来就是同一种行。
   ⚠️ `.sr-only` 的文件框是 `position:absolute`（脱离文档流），**不会**参与
      flex 分配；v38 说的"1px 隐框占掉一份宽度"其实是当时**探针量错了元素**
      （它按文档序取"第一个非标签子元素"，正好取到那个绝对定位的 input）。
      这一轮用真机逐行量左缘来验证，不靠推断。 */ ?>
  <?php /* ---- 观影照片（v35：不再分类，合并成一块）----
       用户原话：「除了海报之外，票根、现场照片等等都不分类别，都只分一个类，
                  放在一块。…只有海报是单独的…其他的都放在一个模块就行，
                  然后所有照片都上传到一起，直接写"观影照片"就可以了。」
       ⚠️ 数据层本来就是平的（`event_photos` 只有 key/position，没有类别列），
          票根以前是存 `movie_details.ticket_key` 的**单张**槽位。
          ⇒ 归并 = 把票根也当成 `event_photos` 里的一张，页面上只留"观影照片"一块。
          ⚠️ **旧的 ticket_key 仍然要显示**（历史数据不能丢）：编辑页把已有票根
             列进下面这块的网格里（它没有 `event_photos` 行 id，所以只能"看"、
             不能用照片的删除按钮删；要换就直接上传新的）。 */ ?>
  <div class="mv-row mv-row-media">
    <span class="mv-lb">海报</span>
    <div class="mv-media-body">
    <?php if ($mHasPoster): ?>
      <?php $mDelForms['poster'] = 'movies/media_del'; ?>
      <div class="mv-slot">
        <a href="<?= e(media_url((string)$m['poster_key'])) ?>" data-prev="image"
           data-src="<?= e(media_url((string)$m['poster_key'])) ?>"
           data-dl="<?= e(media_url((string)$m['poster_key'], ['dl' => 1])) ?>"
           data-name="海报">
          <img src="<?= e(media_url((string)$m['poster_key'])) ?>" alt="海报">
        </a>
        <button class="btn btn-ghost btn-sm" type="submit" form="mv-del-poster"
                onclick="return confirm('删掉现在这张海报？')">删除这张</button>
      </div>
    <?php endif; ?>
    <?php /* v24 第 21 批 第 7 条：一个「点击或拖动」的框，取代原来的原生文件框。
             换图仍然靠"选/拖一张新的"（服务端换新图时会顺手删掉旧对象）。 */
          $sdName = 'poster'; $sdSlot = 'poster'; $sdAccept = 'image/*';
          $sdMultiple = false;
          $sdMsg = $mHasPoster ? '点击或拖动进行上传（换一张海报）' : '点击或拖动进行上传';
          require __DIR__ . '/../_stage_drop.php'; ?>
    </div><?php /* /.mv-media-body */ ?>
  </div>

<?php /* ---- 观影照片：票根 + 合影 + 其它相关图片，**全部放这一块** ---- */ ?>
  <div class="mv-row mv-row-media">
    <span class="mv-lb no-colon">观影照片</span>
    <div class="mv-media-body">
  <?php if ($mHasTicket || $mPhotos): ?>
    <div class="photo-grid">
      <?php if ($mHasTicket): /* 历史数据：旧票根（不在 event_photos 里，只展示） */ ?>
        <?php $mDelForms['ticket'] = 'movies/media_del'; ?>
        <figure class="photo-cell">
          <a href="<?= e(media_url((string)$m['ticket_key'])) ?>" data-prev="image"
             data-src="<?= e(media_url((string)$m['ticket_key'])) ?>"
             data-dl="<?= e(media_url((string)$m['ticket_key'], ['dl' => 1])) ?>"
             data-name="票根">
            <img src="<?= e(media_url((string)$m['ticket_key'])) ?>" alt="票根">
          </a>
          <button class="btn btn-ghost btn-sm" type="submit" form="mv-del-ticket"
                  onclick="return confirm('删掉这张旧票根？')">删除</button>
        </figure>
      <?php endif; ?>
      <?php foreach ($mPhotos as $mp): $mpId = (int)$mp['id']; ?>
        <figure class="photo-cell">
          <a href="<?= e(media_url((string)$mp['key'])) ?>" data-prev="image"
             data-src="<?= e(media_url((string)$mp['key'])) ?>"
             data-dl="<?= e(media_url((string)$mp['key'], ['dl' => 1])) ?>"
             data-name="观影照片">
            <img src="<?= e(media_url((string)$mp['key'])) ?>" alt="">
          </a>
          <button class="btn btn-ghost btn-sm" type="submit" form="mv-del-photo-<?= $mpId ?>"
                  onclick="return confirm('删掉这张照片？')">删除</button>
        </figure>
      <?php endforeach; ?>
    </div>
  <?php endif; ?>
  <?php /* 观影照片（票根/合影/其它）都从这里进（可多选、可多次拖） */ ?>
  <?php $sdName = 'photo[]'; $sdSlot = 'photo'; $sdAccept = 'image/*';
        $sdMsg = '点击或拖动进行上传';
        require __DIR__ . '/../_stage_drop.php'; ?>
  </div><?php /* /.mv-media-body */ ?>
  </div><?php /* /.mv-row（观影照片） */ ?>
</div><?php /* /.mv-grid */ ?>
    </div><?php /* /.mv-form-inner */ ?>
    <?php /* 🔴🔴 下面这一段**严格按分支配对**，别再把 </div> 与 <?php if ?> 混着写 ——
           v37 前两版就是在这里把 `.mv-form-inner` / `.cal-modal-body` 关错了层数，
           结果编辑态的「保存」按钮被甩到 form **外面**：
             点它不提交表单、也不报错（用户看到的是"保存没反应"）。
           修一次的成本远大于把结构写直白。每一层都标了名字，
           以后动这里只要保证：**开的数量 = 关的数量，且顺序一致**。 */ ?>
    <?php if ($mvModal): ?>
      </div><?php /* /.cal-modal-body（仅弹框形态） */ ?>
      <?php /* 🔴 v41（用户 2026-10-10）：「观影模块弹出的框下面的按钮也是确定和取消。」
             两处变化：① 提交按钮文案 保存/记下这场电影 → **「确定」**（统一口径）；
             ② **顺序改成「确定」在前、「取消」在后**（用户明确"下面的按钮就是确定和取消
                两个"，与旅程那边同一口径）。id 保持不变（详情页的 AJAX 主路挂的是
                `#mvAddSubmit`，改文案不影响）。 */ ?>
      <div class="cal-modal-foot">
        <span class="cal-modal-tip" id="mvAddTip"></span>
        <button class="btn btn-sm" type="submit" form="mvForm" id="mvAddSubmit">确定</button>
        <button class="btn btn-ghost btn-sm" type="button" id="mvAddCancel"<?= $fbAdd ? ' data-fb-add-close' : '' ?>>取消</button>
      </div>
    </div><?php /* /.cal-modal-panel（仅弹框形态） */ ?>
    <?php else: ?>
      <div class="btn-row">
        <?php /* ⚠️ 整页形态的提交按钮**也要 id**：两种形态的按钮语义完全相同，
               给同一个 id 让"按 id 定位"对两种形态都成立（同一时刻只渲染其一，不会冲突）。
               v41 实测：探针原来按**文案**（"保存"）找按钮，用户要求改成「确定」后
               探针找不到按钮 ⇒ 三条落库断言全 NULL（看着像功能坏了）。⇒ id 才是契约。 */ ?>
        <button type="submit" class="btn" id="mvAddSubmit">确定</button>
        <a class="btn btn-ghost"
           href="<?= e(url('movies/show', ['id' => (int)$m['id']])) ?>">取消</a>
      </div>
    <?php endif; ?>
  <?php /* 🔴🔴 v41：**这一层只在整页形态存在**。
       弹框形态下 `.mv-form-inner` 已经在上面（`</div><!-- /.mv-form-inner -->`）
       关掉了 —— 原来这里**无条件**又关一次 ⇒ 弹框形态**多一个 `</div>`**，
       把 `</form>` 挤到了容器外面（`_fb_divdepth.py` 当场抓到：
       "深度结束时 -1，首个负深度在 `</div></form>`"）。
       ⚠️ 这与 v37 那次"保存按钮被甩到 form 外面"是**同一个结构性坑**，
          而 v40 那轮只跑了 `php -l`（它对此完全无感）所以没发现
          —— 这一轮补上"按形态逐一量 div 深度"才暴露出来。 */ ?>
  <?php if (!$mvModal): ?>
  </div><?php /* /.card.card-pad（整页形态） */ ?>
  <?php endif; ?>
</form>
<?php if ($mvModal): ?>
  </div><?php /* /.cal-modal（弹框壳） */ ?>
<?php else: ?>
  </div><?php /* /.mv-form-wrap（编辑态包装） */ ?>
<?php endif; ?>

<?php /* ---- 删除海报 / 票根 / 合影的**独立表单**（必须在外层表单之外）----
   ⚠️ 见本文件顶部关于 form 嵌套的说明：按钮用 `form="id"` 指过来，按钮位置不变。
   ⚠️ 关联表单要自带全部字段（csrf / 记录 id / 照片 id）—— 提交的是**它自己**的字段。 */ ?>
<?php if ($mHasPoster): ?>
  <form id="mv-del-poster" method="post" action="<?= e(url('movies/media_del')) ?>" class="form-outside">
    <?= csrf_field() ?>
    <input type="hidden" name="id" value="<?= (int)$m['id'] ?>">
    <input type="hidden" name="slot" value="poster">
  </form>
<?php endif; ?>
<?php if ($mHasTicket): ?>
  <form id="mv-del-ticket" method="post" action="<?= e(url('movies/media_del')) ?>" class="form-outside">
    <?= csrf_field() ?>
    <input type="hidden" name="id" value="<?= (int)$m['id'] ?>">
    <input type="hidden" name="slot" value="ticket">
  </form>
<?php endif; ?>
<?php foreach ($mPhotos as $mp): ?>
  <form id="mv-del-photo-<?= (int)$mp['id'] ?>" method="post"
        action="<?= e(url('movies/photo_del')) ?>" class="form-outside">
    <?= csrf_field() ?>
    <input type="hidden" name="id" value="<?= (int)$m['id'] ?>">
    <input type="hidden" name="photo_id" value="<?= (int)$mp['id'] ?>">
    <?php /* 从编辑页删的 → 删完回编辑页（见 index.php movies/photo_del 的说明） */ ?>
    <input type="hidden" name="back" value="edit">
  </form>
<?php endforeach; ?>
<?php unset($mHasPoster, $mHasTicket, $mPhotos, $mDelForms, $mp, $mpId); ?>

  <?php /* ---- 新建影院：弹框（不跳转，见上）---- */ ?>
  <div class="cn-modal" id="cinemaNewModal" hidden>
    <div class="cn-mask" data-cn-close></div>
    <div class="cn-panel" role="dialog" aria-modal="true" aria-label="新建影院">
      <div class="cn-head"><b>新建影院</b>
        <button type="button" class="cn-x" data-cn-close aria-label="关闭">✕</button></div>
      <form method="post" action="<?= e(url('movies/cinemas_save')) ?>" id="cinemaNewForm">
        <?= csrf_field() ?>
        <?php /* back=movies/new 让服务端存完回到**本页**（而不是甩去影院管理页） */ ?>
        <input type="hidden" name="back" value="movies/new">
        <div class="cn-body">
          <div class="field">
            <label>地方（可不填）</label>
            <input class="input" name="place" placeholder="如：青岛" maxlength="100">
          </div>
          <div class="field">
            <label>影院名称 *</label>
            <?php /* 🔴 v47（用户 2026-10-13）：与影院管理页同一套 —— 输入名称即联想，
                     选中后自动补齐「所在地方」与「详细地址」。
                     ⚠️ 字段查找范围限定在本弹框内（`#cinemaNewForm`）：
                        观影新增页本身也有一个「影院」下拉，不限定会抓错字段。 */ ?>
            <input class="input" name="name" required placeholder="如：万象城 CGV" maxlength="100"
                   data-addr data-addr-fill="place,address" data-addr-for="#cinemaNewForm">
          </div>
          <?php /* 🔴 v41（用户 2026-10-10）：「这里新建影院这个地方好像没有详细地址啊。
                   应该把详细地址加上。」—— 影院管理页的表单一直有 address 字段，
                   但这个**快捷弹框**漏了它 ⇒ 从这里新建的影院永远没有详细地址。
                   字段名与影院管理页保持一致（`address`），服务端 Cinema::save 已经收它。 */ ?>
          <div class="field">
            <label>详细地址（可不填）</label>
            <input class="input" name="address" placeholder="如：香港中路 10 号万象城 4 层"
                   maxlength="200">
          </div>
          <div class="field">
            <label>主题颜色</label>
            <div class="color-row">
              <input type="color" name="color" class="color-picker cn-color" value="#A65C30">
              <span class="color-hex cn-hex">#A65C30</span>
              <span class="cn-presets">
                <?php foreach (['#A63030','#A65C30','#A68930','#6BA630','#30A67A','#3078A6','#6B30A6','#A6305C'] as $pc): ?>
                  <button type="button" class="preset-color cn-preset" data-color="<?= $pc ?>"
                          style="background: <?= $pc ?>;" title="<?= $pc ?>"></button>
                <?php endforeach; ?>
              </span>
            </div>
            <span class="tip">这个颜色会出现在下拉、日历与观影列表上。</span>
          </div>
        </div>
        <div class="cn-foot">
          <button class="btn" type="submit">添加</button>
          <button class="btn btn-ghost" type="button" data-cn-close>取消</button>
        </div>
      </form>
    </div>
  </div>

<!-- 豆瓣自动补充：下拉联想（320ms 防抖 + 中文输入法组字期不请求）+ 一键抓取 -->
<script>
(function () {
  var DB_URL = <?= json_encode(url('movies/douban')) ?>;
  var titleEl = document.getElementById('title');
  var box = document.getElementById('dbSuggest');
  var fetchBtn = document.getElementById('dbFetch');
  var metaEl = document.getElementById('dbMeta');
  var posterKeyEl = document.getElementById('dbPosterKey');
  var posterWrap = document.getElementById('dbPosterWrap');
  var posterImg = document.getElementById('dbPosterImg');
  var infoEl = document.getElementById('info');
  if (!titleEl || !box || !fetchBtn || !metaEl) return;

  var lastPosterKey = '';      // 本次会话里最近一次抓到的海报键（下次抓取时回传清理）
  var timer = null;
  var composing = false;
  var seq = 0;                 // 丢弃过期响应

  titleEl.addEventListener('compositionstart', function () { composing = true; });
  titleEl.addEventListener('compositionend', function () { composing = false; schedule(); });
  titleEl.addEventListener('input', function () {
    if (composing) return;    // 组字期间的拼音串没有意义，也不劫持回车
    schedule();
  });
  document.addEventListener('click', function (e) {
    if (!box.hidden && !box.contains(e.target) && e.target !== titleEl) hideBox();
  });
  document.addEventListener('keydown', function (e) {
    if (e.key === 'Escape') hideBox();
  });

  function schedule() {
    clearTimeout(timer);
    timer = setTimeout(suggest, 320);
  }
  function hideBox() { box.hidden = true; box.innerHTML = ''; }

  function suggest() {
    var q = titleEl.value.trim();
    if (q === '') { hideBox(); return; }
    var my = ++seq;
    getJson(DB_URL + '&action=suggest&q=' + encodeURIComponent(q), function (data, err) {
      if (my !== seq) return;                     // 过期响应丢弃
      if (err) return;                            // 联想失败静默（正片抓取会给出明确报错）
      renderItems(data && data.items ? data.items : []);
    });
  }

  function renderItems(items) {
    box.innerHTML = '';
    if (!items.length) { hideBox(); return; }
    items.forEach(function (it) {
      var btn = document.createElement('button');
      btn.type = 'button';
      btn.className = 'db-item';
      if (it.thumb) {
        var im = document.createElement('img');
        im.src = it.thumb; im.alt = ''; im.loading = 'lazy';
        btn.appendChild(im);
      }
      var tx = document.createElement('span');
      tx.className = 'db-item-tx';
      var b = document.createElement('b');
      // 候选文本来自豆瓣 —— 一律 textContent 插入，绝不拼 innerHTML（豆瓣侧内容可注入脚本）
      b.textContent = it.title || '(无片名)';
      tx.appendChild(b);
      var bits = [];
      if (it.sub_title && it.sub_title !== it.title) bits.push(it.sub_title);
      if (it.year) bits.push(it.year);
      if (it.kind) bits.push(it.kind);
      if (bits.length) {
        var sm = document.createElement('small');
        sm.textContent = bits.join(' · ');
        tx.appendChild(sm);
      }
      btn.appendChild(tx);
      btn.addEventListener('click', function () { hideBox(); fetchById(it.id); });
      box.appendChild(btn);
    });
    box.hidden = false;
  }

  function fetchById(id) {
    doFetch(DB_URL + '&id=' + encodeURIComponent(id));
  }
  fetchBtn.addEventListener('click', function () {
    var q = titleEl.value.trim();
    if (q === '') { titleEl.focus(); return; }
    doFetch(DB_URL + '&q=' + encodeURIComponent(q));
  });

  function doFetch(urlWithQ) {
    if (lastPosterKey) urlWithQ += '&old_poster=' + encodeURIComponent(lastPosterKey);
    fetchBtn.disabled = true;
    var my = ++seq;
    getJson(urlWithQ, function (data, err) {
      fetchBtn.disabled = false;
      if (my !== seq) return;
      if (err || !data) { alert(err || '抓取失败，请稍后再试'); return; }
      if (data.error) { alert(data.error); return; }
      apply(data);
    });
  }

  function apply(data) {
    if (data.title) titleEl.value = data.title;
    if (data.meta) {
      metaEl.value = JSON.stringify(data.meta);
    }
    /* 简介：用服务端拼好的 summary（**含导演/主演/年份/类型/片长/国家/评分 + 剧情原文**），
       而不是只塞剧情那一小段。用户 2026-10-03：「从豆瓣获取的信息不够，
       应该把导演、主要演员，上映年份等主要信息，也都放在简介中。」
       ⚠️ 仍然**只填空白的**：用户已经写过的内容不能被抓取覆盖。
       ⚠️ 而且要把"有东西但没写进简介"这件事说清楚 —— 以前只塞 plot，
          遇到豆瓣没有 plot 的电影就**什么都不填而且没有提示**，用户会以为抓取坏了。
          现在：抓到了但简介非空 → 明确提示；什么都没抓到 → 也明确说一声。 */
    if (infoEl) {
      var summary = (data.summary || '').trim();
      if (summary !== '') {
        if (infoEl.value.trim() === '') {
          infoEl.value = summary;
        } else {
          infoEl.setAttribute('data-db-summary', summary);
          alert('豆瓣信息已抓取。\n\n「简介」里已经有你写的内容，我没有覆盖它。\n'
              + '如果想用豆瓣的简介（含导演/主演/年份等），请先清空「简介」再点一次「自动获取」。');
        }
      } else if ((data.meta && (data.meta.plot || data.meta.director)) || data.title) {
        alert('豆瓣信息已抓取（片名/海报/元数据），但这部电影豆瓣没有可用的简介文本。');
      }
    }
    if (data.poster_key) {
      lastPosterKey = data.poster_key;
      posterKeyEl.value = data.poster_key;
      if (data.poster) {
        posterImg.src = data.poster;
        posterWrap.hidden = false;
      }
    }
  }

  function getJson(u, cb) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', u, true);
    xhr.onload = function () {
      var data = null, err = '';
      try { data = JSON.parse(xhr.responseText); }
      catch (e) { err = '返回内容异常'; }
      if (xhr.status >= 400) err = (data && data.error) ? data.error : ('请求失败（' + xhr.status + '）');
      cb(data, err);
    };
    xhr.onerror = function () { cb(null, '网络异常'); };
    xhr.send();
  }
})();

/* ==================== 影院自定义下拉 + 新建影院弹框（第 11 批 #4）====================
   ① 下拉：原生 <option> 画不了色块，所以自己做一个"按钮 + 弹出列表"。
      ⚠️ 值仍然写进隐藏的 <input name="cinema_id">，服务端与既有测试都不用改。
   ② 新建影院：弹框里提交到 movies/cinemas_save（带 back=movies/new），
      存完服务端会跳回本页并把新影院 id 放在 ?cinema= 上 → 模板已自动选中它。 */
(function () {
  var picker = document.getElementById('cinemaPicker');
  if (!picker) { return; }
  var btn   = document.getElementById('csBtn');
  var menu  = document.getElementById('csMenu');
  var dot   = document.getElementById('csDot');
  var text  = document.getElementById('csText');
  var input = document.getElementById('cinema_id');
  var search = document.getElementById('csSearch');   /* v39：下拉顶部的搜索框 */
  var list   = document.getElementById('csList');
  var empty  = document.getElementById('csEmpty');

  function close() {
    menu.hidden = true;
    btn.setAttribute('aria-expanded', 'false');
    /* 🔴 v39：收起时把搜索词**清掉并恢复全部项** ——
       否则下次打开会带着上次的过滤结果，用户以为"影院丢了"。
       （不做成"保留搜索词"，因为这里的搜索是"临时找人"，不是"长期筛选"。） */
    if (search) { search.value = ''; }
    filter('');
  }
  function openMenu() {
    menu.hidden = false;
    btn.setAttribute('aria-expanded', 'true');
    /* 打开即聚焦搜索框 —— 用户要的"上面有一个搜索筛选"，
       多一次点击才用得上就白加了。 */
    if (search) {
      try { search.focus({ preventScroll: true }); } catch (e) { search.focus(); }
    }
  }

  /* v39：按关键词过滤列表。
     ⚠️ 过滤的是**列表项**（`.cs-item`），"不记录影院"那一项**永远保留** ——
        它是"清空选择"的出口，被搜没了用户就取消不掉了。
     ⚠️ 用 `hidden` 属性而不是内联 display —— CSS 里 `.cs-item` 写了 display:flex，
        内联 display 会被它覆盖（这个坑项目里踩过：见第 11 批"过滤一直是坏的"）。 */
  function filter(q) {
    if (!list) { return; }
    var kw = (q || '').trim().toLowerCase();
    var items = list.querySelectorAll('.cs-item');
    var shown = 0;
    for (var i = 0; i < items.length; i++) {
      var it = items[i];
      var keep = it.getAttribute('data-id') === '0';   // "不记录影院"恒显
      var hay = (it.getAttribute('data-text') || it.textContent || '').toLowerCase();
      var hit = !kw || keep || hay.indexOf(kw) !== -1;
      it.hidden = !hit;
      if (hit && !keep) { shown++; }
    }
    if (empty) { empty.hidden = shown > 0 || !kw; }
  }

  function apply(id, color, label) {
    input.value = String(id);
    text.textContent = label || '不记录影院';
    if (color) {
      dot.hidden = false;
      dot.style.background = color;
      dot.classList.remove('is-none');
    } else {
      dot.hidden = true;
    }
  }

  // 初始状态：按当前值把按钮上的色点/文字同步过来
  (function init() {
    var cur = String(input.value || '0');
    var items = menu.querySelectorAll('.cs-item');
    for (var i = 0; i < items.length; i++) {
      if (items[i].getAttribute('data-id') === cur) {
        var lbl = items[i].querySelector('span:last-child');
        apply(cur, items[i].getAttribute('data-color'), lbl ? lbl.textContent : '');
        break;
      }
    }
  })();

  btn.addEventListener('click', function (e) {
    e.stopPropagation();
    if (menu.hidden) { openMenu(); } else { close(); }
  });

  menu.addEventListener('click', function (e) {
    var it = e.target.closest ? e.target.closest('.cs-item') : null;
    if (!it) { return; }
    e.stopPropagation();
    var lbl2 = it.querySelector('span:last-child');
    apply(it.getAttribute('data-id'), it.getAttribute('data-color'), lbl2 ? lbl2.textContent : '');
    close();
  });

  /* v39：搜索框的输入 / 键盘。
     ⚠️ 三个事件都要 stopPropagation —— 否则会冒到 document 上那个"点外面关"，
        一点搜索框下拉就没了（这是"加搜索"最容易踩的一脚）。 */
  if (search) {
    search.addEventListener('input', function () { filter(search.value); });
    search.addEventListener('mousedown', function (e) { e.stopPropagation(); });
    search.addEventListener('click', function (e) { e.stopPropagation(); });
    search.addEventListener('keydown', function (e) {
      e.stopPropagation();
      if (e.key === 'Escape') { close(); return; }
      if (e.key !== 'Enter') { return; }
      // 回车 = 选中**第一个可见**的项（除"不记录影院"外优先真实影院）
      e.preventDefault();
      var vis = list ? list.querySelectorAll('.cs-item:not([hidden])') : [];
      var pick = null;
      for (var i = 0; i < vis.length; i++) {
        if (vis[i].getAttribute('data-id') !== '0') { pick = vis[i]; break; }
      }
      if (!pick && vis.length) { pick = vis[0]; }
      if (pick) {
        var lb = pick.querySelector('span:last-child');
        apply(pick.getAttribute('data-id'), pick.getAttribute('data-color'), lb ? lb.textContent : '');
        close();
      }
    });
  }

  // 点外面关（冒泡阶段，只关下拉本身）
  document.addEventListener('click', function () { close(); });

  // ---- 新建影院弹框 ----
  var modal = document.getElementById('cinemaNewModal');
  var nbtn  = document.getElementById('cinemaNewBtn');
  if (modal && nbtn) {
    nbtn.addEventListener('click', function () {
      modal.hidden = false;
      var f = modal.querySelector('input[name="name"]');
      if (f) { f.focus(); }
    });
    modal.addEventListener('click', function (e) {
      if (e.target.closest && e.target.closest('[data-cn-close]')) { modal.hidden = true; }
    });
    document.addEventListener('keydown', function (e) {
      if (e.key === 'Escape') { modal.hidden = true; }
    });
    // 颜色选择器与预设色（复刻影院管理页那套，只是缩在弹框里）
    var cp = modal.querySelector('.cn-color');
    var hx = modal.querySelector('.cn-hex');
    if (cp && hx) {
      cp.addEventListener('input', function () { hx.textContent = cp.value; });
    }
    modal.addEventListener('click', function (e) {
      var pv = e.target.closest ? e.target.closest('.cn-preset') : null;
      if (!pv || !cp) { return; }
      cp.value = pv.getAttribute('data-color');
      if (hx) { hx.textContent = cp.value; }
    });
  }
})();
</script>