{{-- resources/views/punchcard/mobile.blade.php --}}
@extends('layout2')

@section('pageTitle', "首頁｜".config('globals.app_name'))


@section('content')
<style>
    :root{
      --bg:#F6F7FB;
      --card:#FFFFFF;
      --text:#111827;
      --muted:#6B7280;
      --line:#E5E7EB;
      --shadow: 0 12px 28px rgba(17,24,39,.08);
      --radius: 18px;
    }
    body{ background:var(--bg); color:var(--text); margin:0; font-family: system-ui, -apple-system, "Segoe UI", Arial; }
    .wrap{ max-width:520px; margin:0 auto; padding:14px 14px 90px; }

    .appbar{
      position: sticky; top:0; z-index:10;
      background: rgba(246,247,251,.86); backdrop-filter: blur(10px);
      padding: 10px 2px; margin-bottom: 10px;
      display:flex; align-items:center; justify-content:space-between;
    }
    .brand{ font-weight:900; letter-spacing:.2px; font-size:16px; }
    .pill{
      display:inline-flex; align-items:center; gap:8px;
      background:#F3F4F6;
      border:1px solid rgba(229,231,235,.9);
      padding:7px 10px;
      border-radius:999px;
      font-size:13px;
      color:var(--text);
      white-space:nowrap;
    }

    .card{
      background:var(--card);
      border:1px solid rgba(229,231,235,.85);
      box-shadow:var(--shadow);
      border-radius:var(--radius);
      padding: 16px;
    }
    .stack{ display:flex; flex-direction:column; gap:12px; }

    .row{ display:flex; justify-content:space-between; align-items:flex-end; gap:12px; }
    .title{ font-size:20px; font-weight:900; margin:0; }
    .sub{ font-size:13px; color:var(--muted); }

    .clock{ font-size:34px; font-weight:900; font-variant-numeric: tabular-nums; margin-top:8px; }
    .grid2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
    .stat{
      border:1px solid rgba(229,231,235,.85);
      border-radius: 14px;
      padding: 12px;
      background: linear-gradient(180deg,#fff,#fafafa);
    }
    .stat .k{ font-size:12px; color:var(--muted); margin-bottom:6px; }
    .stat .v{ font-size:16px; font-weight:900; font-variant-numeric: tabular-nums; }

    .badge{
      display:inline-flex; align-items:center; gap:6px;
      padding:4px 9px; border-radius:999px;
      border:1px solid rgba(229,231,235,.9);
      font-size:12px; color:var(--muted); background:#F9FAFB;
    }
    .badge.ok{ color:#065F46; background:#ECFDF5; border-color:#A7F3D0; }
    .badge.run{ color:#92400E; background:#FFFBEB; border-color:#FDE68A; }
    .badge.wrong{ color: #92400E; background: #ffd4e3; border-color: #f183a9; }

    .btnGrid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
    .btn{
      height:54px; border-radius:16px; border:0;
      font-weight:900; font-size:17px; letter-spacing:.2px;
      color:#fff; cursor:pointer;
      transition: transform .06s ease, filter .12s ease;
      box-shadow: 0 10px 20px rgba(0,0,0,.10);
    }
    .btn:active{ transform: translateY(1px) scale(.99); filter: brightness(.98); }
    .btn-in{ background: linear-gradient(180deg,#22C55E,#16A34A); }
    .btn-out{ background: linear-gradient(180deg,#FB7185,#E11D48); }
    .btn:disabled{ background:#E5E7EB; color:#9CA3AF; cursor:not-allowed; box-shadow:none; }

    .listHead{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
    .listTitle{ font-size:16px; font-weight:900; margin:0; }
    .item{ padding: 12px 0; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:12px; }
    .item:first-child{ border-top:0; padding-top:6px; }
    .mono{ font-variant-numeric: tabular-nums; }
  </style>

  <div class="wrap">
    {{-- AppBar：登入者名稱 --}}
    <div class="appbar">
      <div class="brand">{{ config('globals.app_name') }}打卡系統</div>
      <div class="pill">👤 {{ $user['name'] ?? '登入者' }}</div>
    </div>

    <div class="stack">
      {{-- 今日卡片 --}}
      <div class="card">
        <div class="row">
          <div>
            <p class="title">今天打卡</p>
            <div class="sub">{{ $todayText ?? date('Y/m/d') }}</div>
          </div>

          {{-- 狀態（你可以用後端判斷塞字串） --}}
          <div class="badge {{ $badgeClass }}">
            {{ $badgeText }}
          </div>
        </div>

        <div class="sub" style="margin-top:10px;">現在時間</div>
        <div class="clock mono" id="nowClock">--:--:--</div>

        <div class="grid2">
          <div class="stat">
            <div class="k">上班時間</div>
            <div class="v mono">{{ $clockIn ?? '--:--' }}</div>
          </div>
          <div class="stat">
            <div class="k">下班時間</div>
            <div class="v mono">{{ $clockOut ?? '--:--' }}</div>
          </div>
        </div>

        <div class="row" style="margin-top:10px;">
          <div class="sub">今日工時</div>
          <div style="font-weight:900;" class="mono">{{ $workHours ?? '--:--' }}</div>
        </div>
      </div>

      @php
            $canClockIn = true;
            $canClockOut = false;
            if($clockIn != ''){
                $canClockIn = false;
            }
            else{
                $clockInAction = 'process/clockInAction';
            }

            if($canClockIn == false && $clockOut == ''){
                $canClockOut = true;
                $clockOutAction = 'process/clockOutAction';

            }
      @endphp

      {{-- 打卡按鈕 --}}
      <div class="card">
        <div class="btnGrid">
          <form method="POST" action="{{ $clockInAction ?? '#' }}">
            @csrf
            <button class="btn btn-in" type="submit" {{ ($canClockIn ?? true) ? '' : 'disabled' }}>
              上班打卡
            </button>
          </form>

          <form method="POST" action="{{ $clockOutAction ?? '#' }}">
            @csrf
            <button class="btn btn-out" type="submit" {{ ($canClockOut ?? false) ? '' : 'disabled' }}>
              下班打卡
            </button>
          </form>
        </div>
        {{-- <div class="sub" style="margin-top:10px;">
          只需一指完成打卡；按鈕會依狀態自動鎖定避免誤按。
        </div> --}}
      </div>

      {{-- 打卡紀錄 --}}
      <div class="card">
        <div class="listHead">
          <p class="listTitle">打卡紀錄</p>
          <div class="badge">最近 {{ $rangeDays ?? 7 }} 天</div>
        </div>

        @forelse(($records ?? []) as $r)
          <div class="item">
            <div>
              <div style="font-weight:900;">{{ $r['date'] }}</div>
              <div class="sub mono">上 {{ $r['in'] ?? '--:--' }} ・下 {{ $r['out'] ?? '--:--' }} ・工時 {{ $r['hours'] ?? '--:--' }}</div>
            </div>
            <div class="badge {{ ($r['status'] ?? '') === 'done' ? 'ok' : (($r['status'] ?? '') === 'working' ? 'run' : (($r['status'] ?? '') === 'wrong' ? 'wrong' : '') ) }}">
              {{ $r['status_text'] ?? '—' }}
            </div>
          </div>
        @empty
          <div class="sub">目前沒有紀錄</div>
        @endforelse
      </div>
    </div>
  </div>

  <script>
    // 現在時間（手機感更強）
    const pad = n => String(n).padStart(2,'0');
    function tick(){
      const d = new Date();
      document.getElementById('nowClock').textContent =
        `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
    }
    tick(); setInterval(tick, 1000);
  </script>