FamilyBook/templates/people/form.php

<?php
/**
 * 成员表单（新增 / 编辑）。
 *
 * 三处与早期版本不同的地方：
 *   · 「小名」没了 —— 称呼是**视角属性**（妈妈叫"明明"、姐姐叫"小弟"），
 *     在「成员详情」页里各自设置自己怎么叫，不写在这个人的档案里。
 *   · 生日变成**三个**：身份证生日（由证件推导、只读）、阳历生日、农历生日。
 *     阳历与农历是同一个人的同一天，所以用「以哪个为准」明确这次填的是哪一个，
 *     服务端据此反推另一个 —— 不靠 JS，避免"JS 没跑到就静默存错"。
 *   · 生日精确到**时分秒**：原生 datetime-local 只有时分、且中文环境会显示成
 *     「下午 03:30」，所以用 _datetime.php 的「日期 + 24 小时制时:分:秒」组合控件。
 */
$isEdit = !empty($person['id']);
$avatarUrl = avatar_url($person['avatar'] ?? null);
// 这张表单有**两个入口**（名册/详情页的「编辑资料」、个人设置里的「编辑我的资料」），
// 但只有一套字段。改自己、且不是能写的人（访客）时，只给属于他自己的那些 ——
// 见 index.php 的 people/update（那条分支调 Person::updateSelf）。
$canEditAll = $canEditAll ?? \App\Auth::canWrite();
$isSelf     = $isSelf ?? false;

$bdSource = old('birthday_source', 'solar');
// 库里这列叫 birthday、表单叫 birthday_solar，一律走 solarOf() 取，别直接下标
$solVal   = old('birthday_solar', \App\Birthday::pretty(\App\Birthday::solarOf($person ?? [])));
$lunVal   = old('birthday_lunar', '');
if ($lunVal === '') {
    // 农历控件的值 = 库里存的农历年月日 + 时间
    $lv = (string)($person['birthday_lunar'] ?? '');
    $lunVal = $lv;
}
$idBd = trim((string)($person['birthday_id_card'] ?? ''));
?>

<div class="page-head">
  <h1><?= $isEdit ? ($isSelf ? '我的资料' : '编辑成员') : '添加成员' ?></h1>
  <span class="sub"><?= $isEdit ? e($person['name']) : '填姓名就行，其他都可以以后再补' ?></span>
</div>

<form method="post" enctype="multipart/form-data"
      action="<?= e(url($isEdit ? 'people/update' : 'people/create')) ?>">
  <?= csrf_field() ?>
  <?php if ($isEdit): ?>
    <input type="hidden" name="id" value="<?= (int)$person['id'] ?>">
  <?php endif; ?>

  <div class="card card-pad">
    <div class="form-grid">

      <div class="field">
        <label for="name">姓名 *</label>
        <input class="input" id="name" name="name" value="<?= e(old('name', $person['name'] ?? '')) ?>" required>
        <?php if (!empty($errors['name'])): ?><span class="err"><?= e($errors['name']) ?></span><?php endif; ?>
      </div>

      <div class="field">
        <label for="gender">性别</label>
        <select class="select" id="gender" name="gender">
          <?php $g = old('gender', $person['gender'] ?? ''); ?>
          <option value=""   <?= $g === ''  ? 'selected' : '' ?>>不填</option>
          <option value="m"  <?= $g === 'm' ? 'selected' : '' ?>>男</option>
          <option value="f"  <?= $g === 'f' ? 'selected' : '' ?>>女</option>
        </select>
      </div>

      <?php if ($canEditAll): ?>
      <div class="field">
        <label for="birth_rank">家中排行</label>
        <input class="input" id="birth_rank" name="birth_rank" type="number" min="1" max="99"
               value="<?= e(old('birth_rank', $person['birth_rank'] ?? '')) ?>" placeholder="老大填 1">
        <span class="tip">用来认兄弟姐妹的长幼：长子、次女、三弟…</span>
        <?php if (!empty($errors['birth_rank'])): ?><span class="err"><?= e($errors['birth_rank']) ?></span><?php endif; ?>
      </div>
      <?php endif; ?>

      <?php /* ⚠️ 这里**没有**「排序号」，也**没有**「关系分组」：
               ① 排序号已经彻底取消（用户原话：「排序号，不要让用户填写」），
                  名册里的先后靠**拖动卡片**调，存在我自己的 person_roster.sort_order 上；
               ② 分组是「我和他的关系」，写在我自己的名册条目上 ——
                  只能在名册里拖到那一栏，或在那张卡片的「调整分组」里改。
                  写进这张（全家人共用的）资料表单里是错的：我把他归成"同事"
                  不该把妈妈那边的归类也改掉。 */ ?>

      <!-- ==================== 三个生日 ==================== -->
      <div class="field full">
        <label>生日</label>
        <p class="small muted" style="margin:0 0 12px">
          一个人有三个生日：<b>身份证上的</b>（由证件推导，系统永远不会改它）、
          <b>真实阳历生日</b>、<b>农历生日</b>。填了身份证号会自动读出第一个；
          阳历与农历只要填一个，另一个自动算出来。三个不在同一天时，首页会分别提醒。
        </p>

        <div class="field" style="margin-bottom:12px">
          <label for="birthday_id_card_display">身份证生日（只读）</label>
          <span class="bd-readonly" id="birthday_id_card_display"><?= $idBd !== '' ? e($idBd) : '填了身份证号后自动读出' ?></span>
        </div>

        <div class="bd-source">
          <label for="bdSource">我这次填的是</label>
          <select class="select" id="bdSource" name="birthday_source" style="width:auto">
            <option value="solar" <?= $bdSource === 'solar' ? 'selected' : '' ?>>阳历（公历）</option>
            <option value="lunar" <?= $bdSource === 'lunar' ? 'selected' : '' ?>>农历（阴历）</option>
          </select>
          <span class="small muted">选中的那一边为准，另一边自动算</span>
        </div>

        <div class="bd-pane" id="bdSolarWrap">
          <p class="bd-pane-k">阳历生日</p>
          <?php
          $dtName = 'birthday_solar';
          $dtValue = $solVal;
          $dtId = 'birthday_solar_date';
          $dtRequired = false;
          require __DIR__ . '/../_datetime.php';
          ?>
          <span class="tip">精确到时分秒。不填时分秒就按 00:00:00 记。</span>
          <?php if (!empty($errors['birthday_solar'])): ?><span class="err"><?= e($errors['birthday_solar']) ?></span><?php endif; ?>
        </div>

        <div class="bd-pane" id="bdLunarWrap">
          <p class="bd-pane-k">农历生日</p>
          <?php
          $dtName = 'birthday_lunar';
          $dtValue = $lunVal;
          $dtId = 'birthday_lunar_date';
          $dtRequired = false;
          require __DIR__ . '/../_datetime.php';
          ?>
          <label class="check-item" style="margin-top:8px">
            <input type="checkbox" name="birthday_lunar_leap" value="1"
                   <?= old('birthday_lunar_leap', $person['birthday_lunar_leap'] ?? 0) ? 'checked' : '' ?>>
            <span>这个月是<b>闰月</b>（如「闰六月」）</span>
          </label>
          <?php if (!empty($errors['birthday_lunar'])): ?><span class="err"><?= e($errors['birthday_lunar']) ?></span><?php endif; ?>
        </div>
      </div>

      <div class="field full">
        <label for="slogan">这个人的一句话</label>
        <input class="input" id="slogan" name="slogan" maxlength="200"
               value="<?= e(old('slogan', $person['slogan'] ?? '')) ?>"
               placeholder="可留空；留空时用家庭统一的那句">
        <span class="tip">显示在这个人自己的首页标题下面。本人也可以在自己的资料页里改。</span>
        <?php if (!empty($errors['slogan'])): ?><span class="err"><?= e($errors['slogan']) ?></span><?php endif; ?>
      </div>

      <?php if ($canEditAll): ?>
      <div class="field">
        <label for="phone">手机号</label>
        <input class="input" id="phone" name="phone" inputmode="numeric"
               value="<?= e(old('phone', $phoneValue ?? '')) ?>" placeholder="可留空">
        <span class="tip">开通登录后用它登录；加密存储，列表里只显示部分。</span>
        <?php if (!empty($errors['phone'])): ?><span class="err"><?= e($errors['phone']) ?></span><?php endif; ?>
      </div>
      <?php endif; ?>

      <div class="field">
        <label for="email">邮箱</label>
        <input class="input" id="email" name="email" type="email"
               value="<?= e(old('email', $person['email'] ?? '')) ?>">
        <?php if (!empty($errors['email'])): ?><span class="err"><?= e($errors['email']) ?></span><?php endif; ?>
      </div>

      <?php if ($canEditAll): ?>
      <div class="field full">
        <label for="id_card">身份证号</label>
        <input class="input mono" id="id_card" name="id_card"
               value="<?= e(old('id_card', $idCardValue ?? '')) ?>" placeholder="可留空">
        <span class="tip">
          加密存储，页面上一律只显示前 6 后 4 位。
          <b>填了它，上面的「身份证生日」会自动读出来</b>（当前：<span id="idCardBirthday"><?= $idBd !== '' ? e($idBd) : '' ?></span>），
          这个日期系统永远不会改动。家庭场景里真正需要它的场合很少 —— 能不填就别填。
        </span>
        <?php if (!empty($errors['id_card'])): ?><span class="err"><?= e($errors['id_card']) ?></span><?php endif; ?>
      </div>
      <?php endif; ?>

      <div class="field full">
        <label for="address">住址</label>
        <input class="input" id="address" name="address"
               value="<?= e(old('address', $person['address'] ?? '')) ?>">
      </div>

      <div class="field full">
        <label for="note">备注</label>
        <textarea class="input" id="note" name="note" placeholder="爱吃辣、对芒果过敏、怕坐过山车……"><?= e(old('note', $person['note'] ?? '')) ?></textarea>
      </div>

      <?php
      // 裁剪比例不是拍脑袋定的，而是由「这个位置显示成什么形状」决定（见 App\ImageSlot）。
      // 前端拿这些 data-* 去生成裁剪框，服务端拿同一个槽位去最终裁切 —— 一处定义、两处使用。
      $avSlot = \App\ImageSlot::get('avatar');
      ?>
      <div class="field">
        <label for="avatar">头像</label>
        <input class="input" id="avatar" name="avatar" type="file" accept="image/*"
               data-crop-ratio="<?= e((string)$avSlot['ratio']) ?>"
               data-crop-w="<?= (int)$avSlot['w'] ?>"
               data-crop-h="<?= (int)$avSlot['h'] ?>"
               data-crop-label="<?= e((string)$avSlot['label']) ?>"
               data-crop-hint="<?= e((string)$avSlot['hint']) ?>"
               data-crop-preview="#avatar-preview">
        <?php /* 用户挑的裁剪框（归一化的，相对原图 0..1）；不裁就留空 = 居中裁切 */ ?>
        <input type="hidden" name="avatar_crop" value="">
        <span class="tip">选好图片后会弹出裁剪框，把要留的部分框住。<b>比例按它在页面上的形状定</b>（头像是 1:1 正方形）。上限 5MB。</span>
      </div>
      <div class="field">
        <label>当前头像</label>
        <img id="avatar-preview" src="<?= e($avatarUrl) ?>" alt=""
             style="width:88px;height:88px;border-radius:12px;object-fit:cover;border:1px solid var(--line)">
      </div>

      <?php if ($canEditAll): ?>
      <div class="field full">
        <label class="check-item">
          <input type="checkbox" name="is_placeholder" value="1"
                 <?= old('is_placeholder', $person['is_placeholder'] ?? 0) ? 'checked' : '' ?>>
          <span>
            <b>这是「虚拟人物」</b><br>
            <span class="muted small">
              还没弄清真实身份时先占个位，比如起名「我的父亲」「外婆」。
              他能参与亲属关系，等弄清真名再改过来即可；家谱上会标「待确认」。
            </span>
          </span>
        </label>
      </div>
      <?php endif; ?>

    </div>

    <div class="btn-row">
      <button class="btn" type="submit"><?= $isEdit ? '保存' : '加入名册' ?></button>
      <?php
      // 取消：改自己的话回「个人设置」更顺手（那是他来的地方），
      // 改别人 / 新增则回他的详情页 / 名册。
      $cancelUrl = $isEdit
          ? ($isSelf ? url('settings/me') : url('people/show', ['id' => (int)$person['id']]))
          : url('people');
      ?>
      <a class="btn btn-ghost" href="<?= e($cancelUrl) ?>">取消</a>
      <?php if ($isSelf): ?>
        <a class="btn btn-ghost" href="<?= e(url('people/show', ['id' => (int)$person['id']])) ?>">看我的详情页</a>
      <?php endif; ?>
    </div>
  </div>
</form>