@extends('layouts.app')

@section('title', '⏰ 簽到退')

@push('styles')
<style>
/* ── 簽到退按鈕 ── */
.punch-wrap {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    margin: 2rem 0;
}
.punch-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
}
.punch-btn {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 3px solid currentColor;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    cursor: pointer;
    transition: all .2s ease;
    font-size: .9rem;
    font-weight: 600;
    position: relative;
    user-select: none;
}
.punch-btn:hover:not(:disabled) {
    transform: scale(1.07);
    box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
.punch-btn:active:not(:disabled) {
    transform: scale(.97);
}
.punch-btn i {
    font-size: 2.2rem;
    display: block;
}
.punch-btn.punched {
    color: #fff !important;
    border-color: transparent;
}
.punch-btn.punched-success  { background: #198754; }
.punch-btn.punched-danger   { background: #dc3545; }
.punch-btn.punched-primary  { background: #0d6efd; }

.punch-btn.outline-success  { color: #198754; border-color: #198754; }
.punch-btn.outline-danger   { color: #dc3545; border-color: #dc3545; }
.punch-btn.outline-primary  { color: #0d6efd; border-color: #0d6efd; }

.punch-time {
    font-size: .8rem;
    font-weight: 600;
    opacity: .85;
}
.punch-count-badge {
    position: absolute;
    top: 6px; right: 6px;
    background: rgba(0,0,0,.3);
    color: #fff;
    border-radius: 50%;
    width: 22px; height: 22px;
    font-size: .7rem;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
}

/* ── 時鐘 ── */
#live-clock {
    font-size: 2.8rem;
    font-weight: 700;
    letter-spacing: 3px;
    font-variant-numeric: tabular-nums;
}
#live-date {
    font-size: 1rem;
    opacity: .7;
}

/* ── 今日列表 ── */
.today-timeline {
    position: relative;
    padding-left: 1.8rem;
}
.today-timeline::before {
    content: '';
    position: absolute; left: .6rem; top: 0; bottom: 0;
    width: 2px; background: #dee2e6;
}
.timeline-item {
    position: relative;
    margin-bottom: .75rem;
}
.timeline-dot {
    position: absolute;
    left: -1.8rem; top: .25rem;
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 2px solid #fff;
}

/* ── 公出 note input ── */
#businessModal .modal-body textarea {
    resize: none;
}

/* ── 行事曆 ── */
.att-cal { user-select: none; }
.att-cal-head {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-weight: 600;
    font-size: .75rem;
    padding: 4px 0;
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 2px;
}
.att-cal-wday { padding: 2px 0; }
.att-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.att-cal-cell {
    min-height: 72px;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 4px 5px;
    font-size: .72rem;
    background: #fff;
    transition: box-shadow .15s;
    overflow: hidden;
}
.att-cal-cell.has-records {
    cursor: pointer;
}
.att-cal-cell.has-records:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    border-color: #adb5bd;
}
.att-cal-cell.out-month {
    background: #f8f9fa;
    opacity: .45;
}
.att-cal-cell.is-today {
    border-color: #0d6efd;
    border-width: 2px;
    background: #f0f5ff;
}
.att-cal-cell.is-today .att-cal-day-num {
    color: #0d6efd;
    font-weight: 700;
}
.att-cal-cell.is-sun .att-cal-day-num { color: #dc3545; }
.att-cal-cell.is-sat .att-cal-day-num { color: #0d6efd; }
.att-cal-day-num {
    font-weight: 600;
    font-size: .8rem;
    line-height: 1.4;
    margin-bottom: 2px;
}
.att-event {
    padding: 1px 3px;
    border-radius: 3px;
    color: #fff;
    font-size: .68rem;
    margin-bottom: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.event-in  { background: #198754; }
.event-out { background: #dc3545; }
.event-biz { background: #0d6efd; }
.att-legend-dot {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    margin-right: 3px;
}

[data-bs-theme="dark"] .today-timeline::before { background: #3a3f4b; }
[data-bs-theme="dark"] .timeline-dot           { border-color: #1c1f26; }
[data-bs-theme="dark"] .att-cal-head           { border-bottom-color: #3a3f4b; }
[data-bs-theme="dark"] .att-cal-cell           { background: #1c1f26; border-color: #2e3340; }
[data-bs-theme="dark"] .att-cal-cell.out-month { background: #161b22; }
[data-bs-theme="dark"] .att-cal-cell.is-today  { background: rgba(13,110,253,.12); }
[data-bs-theme="dark"] .att-cal-cell.has-records:hover { border-color: #6b7280; }
</style>
@endpush

@section('content')
<div class="container py-4" style="max-width:720px">

  {{-- 簽到退成功提示 --}}
  @if(session('punch_success'))
  @php $ps = session('punch_success'); @endphp
  <div class="alert alert-success alert-dismissible fade show d-flex align-items-center gap-2" role="alert">
    <i class="bi bi-check-circle-fill fs-5"></i>
    <div><strong>{{ $ps['label'] }} 簽到退成功！</strong>　簽到退時間：{{ $ps['time'] }}</div>
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  </div>
  @endif

  {{-- IP 錯誤提示 --}}
  @if(session('punch_error'))
  <div class="alert alert-danger alert-dismissible fade show d-flex align-items-center gap-2" role="alert">
    <i class="bi bi-shield-x fs-5"></i>
    <div>{{ session('punch_error') }}</div>
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  </div>
  @endif

  {{-- 免打卡提示 --}}
  @if($attendanceExempt)
  <div class="alert alert-info d-flex align-items-center gap-2">
    <i class="bi bi-person-check fs-5"></i>
    <div>
      <strong>您已設定為免打卡人員，</strong>不列入出缺席統計與工時計算。仍可視需要自行簽到退作為記錄。
    </div>
  </div>
  @endif

  {{-- IP 限制警告（可見但尚未簽到退） --}}
  @if($ipRestrict && !$ipAllowed)
  <div class="alert alert-warning d-flex align-items-center gap-2">
    <i class="bi bi-wifi-off fs-5"></i>
    <div>
      <strong>IP 限制：</strong>您目前的 IP <code>{{ $clientIp }}</code> 不在允許的簽到退範圍內，簽到退按鈕已停用。
    </div>
  </div>
  @endif

  {{-- 時鐘區 --}}
  <div class="text-center mb-2">
    <div id="live-clock">00:00:00</div>
    <div id="live-date"></div>
  </div>

  {{-- 三個簽到退按鈕 --}}
  <div class="punch-wrap">
    @foreach(\App\Models\Attendance::TYPES as $typeKey => $typeMeta)
    @php
        $records = $todayRecords->where('type', $typeKey);
        $last    = $todayMap[$typeKey] ?? null;
        $count   = $records->count();
        $color   = $typeMeta['color'];
        $isPunched = $last !== null;
        $btnClass  = $isPunched
            ? "punched punched-{$color}"
            : "outline-{$color}";
    @endphp
    <div class="punch-card">
      {{-- 非公出：直接送出表單；公出：開 modal 填備註 --}}
      @php $disabled = ($ipRestrict && !$ipAllowed) ? 'disabled' : ''; @endphp
      @if($typeKey !== 'business_out')
        @php
          $hasClockIn = isset($todayMap['clock_in']);
        @endphp
        <form method="POST" action="{{ route('attendance.store') }}"
              data-type="{{ $typeKey }}"
              data-label="{{ $typeMeta['label'] }}"
              data-already="{{ $last ? $last->clocked_at->format('H:i') : '' }}"
              data-has-in="{{ $hasClockIn ? 'true' : 'false' }}"
              onsubmit="return punchConfirm(this)">
          @csrf
          <input type="hidden" name="type" value="{{ $typeKey }}">
          <button type="submit" {{ $disabled }} class="punch-btn {{ $btnClass }}">
            <i class="bi {{ $typeMeta['icon'] }}"></i>
            <span>{{ $typeMeta['label'] }}</span>
            @if($count > 1)
            <span class="punch-count-badge">{{ $count }}</span>
            @endif
          </button>
        </form>
      @else
        <button type="button" {{ $disabled }} class="punch-btn {{ $btnClass }}"
                onclick="openBusinessModal()">
          <i class="bi {{ $typeMeta['icon'] }}"></i>
          <span>{{ $typeMeta['label'] }}</span>
          @if($count > 1)
          <span class="punch-count-badge">{{ $count }}</span>
          @endif
        </button>
      @endif

      {{-- 最後簽到退時間 --}}
      <div class="punch-time text-{{ $color }}">
        @if($last)
          <i class="bi bi-check-lg me-1"></i>{{ $last->clocked_at->format('H:i') }}
          @if($count > 1)<span class="text-muted">（共 {{ $count }} 次）</span>@endif
        @else
          <span class="text-muted">尚未簽到退</span>
        @endif
      </div>
    </div>
    @endforeach
  </div>

  {{-- 遲到補請假提示 --}}
  @if($showLeaveLinkButton)
  <div class="alert alert-warning d-flex align-items-start gap-3 mt-3" id="lateLinkAlert">
    <i class="bi bi-clock-history fs-5 mt-1 flex-shrink-0"></i>
    <div class="flex-grow-1">
      <strong>您今天遲到約 {{ $lateLinkMinutes }} 分鐘</strong>，超過設定閾值。
      <br>
      <span class="small text-muted">如需以請假補充遲到時數，可點右側按鈕申請今天的請假。</span>
    </div>
    <a href="{{ route('leave.create', ['start_date' => now()->toDateString(), 'end_date' => now()->toDateString(), 'start_half' => 1]) }}"
       class="btn btn-warning btn-sm flex-shrink-0">
      <i class="bi bi-calendar-plus me-1"></i>補請假
    </a>
  </div>
  @endif

  {{-- 公出 Modal --}}
  <div class="modal fade" id="businessModal" tabindex="-1">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title"><i class="bi bi-briefcase me-2"></i>公出簽到退</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        @php $bizLast = $todayMap['business_out'] ?? null; @endphp
        <form method="POST" action="{{ route('attendance.store') }}"
              data-type="business_out"
              data-label="公出"
              data-already="{{ $bizLast ? $bizLast->clocked_at->format('H:i') : '' }}"
              data-has-in="{{ isset($todayMap['clock_in']) ? 'true' : 'false' }}"
              onsubmit="return punchConfirm(this)">
          @csrf
          <input type="hidden" name="type" value="business_out">
          <div class="modal-body">
            <label class="form-label small fw-semibold">公出原因（選填）</label>
            <textarea name="note" class="form-control" rows="3"
                      placeholder="例：拜訪客戶、外部會議…"></textarea>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">取消</button>
            <button type="submit" class="btn btn-primary btn-sm">
              <i class="bi bi-geo-alt me-1"></i>公出簽到退
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>

  {{-- 行事曆點擊詳情 Modal --}}
  <div class="modal fade" id="dayDetailModal" tabindex="-1">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header py-2">
          <h6 class="modal-title fw-bold" id="day-detail-title"></h6>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body p-2" id="day-detail-body"></div>
      </div>
    </div>
  </div>

  {{-- 本月工時摘要 --}}
  <div class="row g-2 mb-3 text-center">
    <div class="col-4">
      <div class="card border-0 shadow-sm py-2">
        <div class="fw-bold fs-5 text-success">{{ $monthlyStats['work_days'] }}</div>
        <div class="small text-muted">出勤天數</div>
      </div>
    </div>
    <div class="col-4">
      <div class="card border-0 shadow-sm py-2">
        <div class="fw-bold fs-5 text-primary">{{ $monthlyStats['total_hours'] }}小時</div>
        <div class="small text-muted">累計工時</div>
      </div>
    </div>
    <div class="col-4">
      <div class="card border-0 shadow-sm py-2">
        <div class="fw-bold fs-5 {{ $monthlyStats['missing_out'] > 0 ? 'text-danger' : 'text-muted' }}">
          {{ $monthlyStats['missing_out'] }}
        </div>
        <div class="small text-muted">漏打下班</div>
      </div>
    </div>
  </div>

  {{-- Tabs --}}
  <ul class="nav nav-tabs mb-3" role="tablist">
    <li class="nav-item">
      <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-today">
        <i class="bi bi-calendar-check me-1"></i>今日紀錄
      </button>
    </li>
    <li class="nav-item">
      <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-history">
        <i class="bi bi-clock-history me-1"></i>歷史查詢
      </button>
    </li>
  </ul>

  <div class="tab-content">

    {{-- 今日紀錄 Tab --}}
    <div class="tab-pane fade show active" id="tab-today">
      @if($todayRecords->isEmpty())
        <p class="text-muted text-center py-4"><i class="bi bi-inbox fs-3 d-block mb-2"></i>今天還沒有簽到退紀錄</p>
      @else
        <div class="today-timeline">
          @foreach($todayRecords as $r)
          <div class="timeline-item">
            <div class="timeline-dot bg-{{ $r->typeColor() }}"></div>
            <div class="d-flex align-items-start gap-2">
              <span class="badge bg-{{ $r->typeColor() }} mt-1">{{ $r->typeLabel() }}</span>
              <div>
                <div class="fw-semibold">{{ $r->clocked_at->format('H:i:s') }}</div>
                @if($r->note)
                <div class="text-muted small">{{ $r->note }}</div>
                @endif
              </div>
            </div>
          </div>
          @endforeach
        </div>
      @endif
    </div>

    {{-- 歷史查詢 Tab --}}
    <div class="tab-pane fade" id="tab-history">
      {{-- 月份篩選 + 檢視切換 --}}
      <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-3">
        <form method="GET" class="d-flex align-items-center gap-2" id="history-form">
          <input type="hidden" name="tab" value="history">
          <input type="month" name="month" class="form-control form-control-sm" style="width:160px"
                 value="{{ $month }}" max="{{ now()->format('Y-m') }}">
          <button class="btn btn-sm btn-primary">查詢</button>
        </form>
        {{-- 切換按鈕 --}}
        <div class="btn-group btn-group-sm" role="group">
          <button type="button" id="btn-list-view" class="btn btn-outline-secondary active"
                  onclick="switchHistView('list')">
            <i class="bi bi-list-ul me-1"></i>條列
          </button>
          <button type="button" id="btn-cal-view" class="btn btn-outline-secondary"
                  onclick="switchHistView('cal')">
            <i class="bi bi-calendar3 me-1"></i>行事曆
          </button>
        </div>
      </div>

      @if($historyByDay->isEmpty())
        <p class="text-muted text-center py-4"><i class="bi bi-inbox fs-3 d-block mb-2"></i>該月份無簽到退紀錄</p>
      @else

      {{-- ── 條列 View ── --}}
      <div id="history-list-view">
        <div class="accordion" id="histAcc">
          @foreach($historyByDay as $date => $dayRecords)
          @php
              $d = \Carbon\Carbon::parse($date);
              $isToday = ($date === now()->toDateString());
          @endphp
          <div class="accordion-item">
            <h2 class="accordion-header">
              <button class="accordion-button {{ $isToday ? '' : 'collapsed' }} py-2" type="button"
                      data-bs-toggle="collapse" data-bs-target="#day-{{ str_replace('-','_',$date) }}">
                <span class="me-2">{{ $d->format('m/d') }}</span>
                <span class="text-muted small me-2">{{ $d->isoFormat('ddd') }}</span>
                @foreach($dayRecords->groupBy('type') as $t => $tRecs)
                <span class="badge bg-{{ \App\Models\Attendance::TYPES[$t]['color'] }} me-1">
                  {{ \App\Models\Attendance::TYPES[$t]['label'] }}
                  @if($tRecs->count() > 1)×{{ $tRecs->count() }}@endif
                </span>
                @endforeach
              </button>
            </h2>
            <div id="day-{{ str_replace('-','_',$date) }}"
                 class="accordion-collapse collapse {{ $isToday ? 'show' : '' }}">
              <div class="accordion-body py-2 px-3">
                <div class="table-responsive"><table class="table table-sm mb-0 small">
                  <tbody>
                    @foreach($dayRecords->sortBy('clocked_at') as $r)
                    <tr>
                      <td style="width:60px">
                        <span class="badge bg-{{ $r->typeColor() }}">{{ $r->typeLabel() }}</span>
                      </td>
                      <td class="fw-semibold">{{ $r->clocked_at->format('H:i:s') }}</td>
                      <td class="text-muted">{{ $r->note ?? '—' }}</td>
                    </tr>
                    @endforeach
                  </tbody>
                </table></div>
              </div>
            </div>
          </div>
          @endforeach
        </div>
      </div>{{-- /history-list-view --}}

      {{-- ── 行事曆 View ── --}}
      @php
        $calMonth   = \Carbon\Carbon::parse($month . '-01');
        $startOfCal = $calMonth->copy()->startOfWeek(\Carbon\Carbon::SUNDAY);
        $endOfCal   = $calMonth->copy()->endOfMonth()->endOfWeek(\Carbon\Carbon::SATURDAY);
        $todayStr   = now()->toDateString();
        // 把 $historyByDay 轉成 date => records 的普通陣列
        $dayMap = $historyByDay->all();
        $typeConfig = \App\Models\Attendance::TYPES;
      @endphp
      <div id="history-cal-view" class="d-none">
        {{-- 星期標題 --}}
        <div class="att-cal">
          <div class="att-cal-head">
            @foreach(['日','一','二','三','四','五','六'] as $wd)
            <div class="att-cal-wday {{ $loop->first ? 'text-danger' : ($loop->last ? 'text-primary' : '') }}">{{ $wd }}</div>
            @endforeach
          </div>
          <div class="att-cal-grid">
            @php $cursor = $startOfCal->copy(); @endphp
            @while($cursor->lte($endOfCal))
            @php
              $dateStr  = $cursor->toDateString();
              $inMonth  = $cursor->month === $calMonth->month;
              $isToday  = ($dateStr === $todayStr);
              $records  = $dayMap[$dateStr] ?? collect();
              $isSun    = $cursor->dayOfWeek === 0;
              $isSat    = $cursor->dayOfWeek === 6;
              // 取各類型第一筆時間
              $clockIn  = $records->where('type','clock_in')->sortBy('clocked_at')->first();
              $clockOut = $records->where('type','clock_out')->sortBy('clocked_at')->last();
              $bizOut   = $records->where('type','business_out')->sortBy('clocked_at')->first();
            @endphp
            <div class="att-cal-cell
                        {{ !$inMonth ? 'out-month' : '' }}
                        {{ $isToday  ? 'is-today'  : '' }}
                        {{ $isSun    ? 'is-sun'    : '' }}
                        {{ $isSat    ? 'is-sat'    : '' }}
                        {{ $records->isNotEmpty() ? 'has-records' : '' }}"
                 @if($records->isNotEmpty()) data-date="{{ $dateStr }}" onclick="showDayDetail('{{ $dateStr }}')" @endif>
              <div class="att-cal-day-num">{{ $cursor->day }}</div>
              @if($clockIn)
              <div class="att-event event-in">
                <i class="bi bi-box-arrow-in-right"></i> {{ $clockIn->clocked_at->format('H:i') }}
              </div>
              @endif
              @if($clockOut)
              <div class="att-event event-out">
                <i class="bi bi-box-arrow-right"></i> {{ $clockOut->clocked_at->format('H:i') }}
              </div>
              @endif
              @if($bizOut)
              <div class="att-event event-biz">
                <i class="bi bi-briefcase"></i> {{ $bizOut->clocked_at->format('H:i') }}
              </div>
              @endif
            </div>
            @php $cursor->addDay(); @endphp
            @endwhile
          </div>
        </div>

        {{-- 圖例 --}}
        <div class="d-flex gap-3 mt-2 small text-muted justify-content-center flex-wrap">
          <span><span class="att-legend-dot bg-success"></span> 上班簽到</span>
          <span><span class="att-legend-dot bg-danger"></span> 下班簽退</span>
          <span><span class="att-legend-dot bg-primary"></span> 公出</span>
        </div>
      </div>{{-- /history-cal-view --}}

      @endif
    </div>

  </div>{{-- tab-content --}}
</div>
@endsection

@push('scripts')
<script>
// ── 打卡確認對話框 ─────────────────────────────────────────────
function punchConfirm(form) {
    const type    = form.dataset.type;
    const label   = form.dataset.label;
    const already = form.dataset.already;   // 'HH:MM' 或空字串
    const hasIn   = form.dataset.hasIn === 'true';
    const now     = new Date().toLocaleTimeString('zh-TW', {hour:'2-digit', minute:'2-digit', second:'2-digit'});

    // 未簽到就按簽退 → 警告，需確認才能送出
    if (type === 'clock_out' && !hasIn) {
        return confirm('⚠️ 您今日尚未簽到，確認是否仍要簽退？\n\n按「確定」繼續簽退，按「取消」放棄。');
    }

    // 已打過同類型 → 覆蓋確認
    if (already) {
        return confirm(`您今日已於 ${already} 完成「${label}」，\n是否覆蓋為現在時間（${now}）？\n\n按「確定」覆蓋，按「取消」放棄。`);
    }

    // 一般確認
    return confirm(`確定「${label}」？\n時間：${now}`);
}

// 即時時鐘
function updateClock() {
    const now = new Date();
    const hh  = String(now.getHours()).padStart(2,'0');
    const mm  = String(now.getMinutes()).padStart(2,'0');
    const ss  = String(now.getSeconds()).padStart(2,'0');
    document.getElementById('live-clock').textContent = `${hh}:${mm}:${ss}`;

    const days = ['日','一','二','三','四','五','六'];
    const yy   = now.getFullYear();
    const mo   = String(now.getMonth()+1).padStart(2,'0');
    const dd   = String(now.getDate()).padStart(2,'0');
    document.getElementById('live-date').textContent =
        `${yy}年${mo}月${dd}日（星期${days[now.getDay()]}）`;
}
updateClock();
setInterval(updateClock, 1000);

// 公出 Modal
let bsModal;
function openBusinessModal() {
    if (!bsModal) bsModal = new bootstrap.Modal(document.getElementById('businessModal'));
    bsModal.show();
}

// 若帶 ?tab=history 自動切換
@if(request('tab') === 'history')
document.addEventListener('DOMContentLoaded', () => {
    const btn = document.querySelector('[data-bs-target="#tab-history"]');
    if (btn) new bootstrap.Tab(btn).show();
});
@endif

// ── 行事曆 / 條列 切換 ─────────────────────────────
const HIST_VIEW_KEY = 'att_hist_view';

function switchHistView(mode) {
    const listEl  = document.getElementById('history-list-view');
    const calEl   = document.getElementById('history-cal-view');
    const btnList = document.getElementById('btn-list-view');
    const btnCal  = document.getElementById('btn-cal-view');
    if (!listEl || !calEl) return;

    if (mode === 'cal') {
        listEl.classList.add('d-none');
        calEl.classList.remove('d-none');
        btnList.classList.remove('active');
        btnCal.classList.add('active');
    } else {
        calEl.classList.add('d-none');
        listEl.classList.remove('d-none');
        btnCal.classList.remove('active');
        btnList.classList.add('active');
    }
    try { localStorage.setItem(HIST_VIEW_KEY, mode); } catch(e) {}
}

// 記憶上次選的檢視
document.addEventListener('DOMContentLoaded', () => {
    try {
        const saved = localStorage.getItem(HIST_VIEW_KEY);
        if (saved === 'cal') switchHistView('cal');
    } catch(e) {}
});

// ── 點擊日期格子顯示詳情 ────────────────────────────
@php
// 把 historyByDay 序列化成 JS 可用的格式
$jsRecords = [];
foreach ($historyByDay as $date => $recs) {
    $jsRecords[$date] = $recs->sortBy('clocked_at')->map(fn($r) => [
        'label' => $r->typeLabel(),
        'color' => $r->typeColor(),
        'time'  => $r->clocked_at->format('H:i:s'),
        'note'  => $r->note ?? '',
    ])->values()->all();
}
@endphp
const DAY_RECORDS = @json($jsRecords);

let dayDetailModal;
function showDayDetail(date) {
    if (!dayDetailModal) {
        dayDetailModal = new bootstrap.Modal(document.getElementById('dayDetailModal'));
    }
    const records = DAY_RECORDS[date] || [];
    const d = new Date(date + 'T00:00:00');
    const days = ['日','一','二','三','四','五','六'];
    const title = `${d.getMonth()+1}月${d.getDate()}日（星期${days[d.getDay()]}）`;
    document.getElementById('day-detail-title').textContent = title;

    const colorMap = { success: '#198754', danger: '#dc3545', primary: '#0d6efd', secondary: '#6c757d', warning: '#fd7e14' };
    let html = '<div class="table-responsive"><table class="table table-sm mb-0 small"><tbody>';
    records.forEach(r => {
        const c = colorMap[r.color] || '#6c757d';
        html += `<tr>
            <td><span class="badge" style="background:${c}">${r.label}</span></td>
            <td class="fw-semibold">${r.time}</td>
            <td class="text-muted">${r.note || '—'}</td>
        </tr>`;
    });
    html += '</tbody></table></div>';
    document.getElementById('day-detail-body').innerHTML = html;
    dayDetailModal.show();
}
</script>
@endpush