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

@section('pageTitle', "補打卡｜".config('globals.app_name'))


@section('content')

{{-- 補打卡 Time Correction --}}
<style>
    :root{
      --bg:#F6F7FB; --card:#fff; --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;
      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;
    }
    .title{ font-size:20px; font-weight:900; margin:0; }
    .sub{ font-size:13px; color:var(--muted); }
    .stack{ display:flex; flex-direction:column; gap:12px; }
    .field{ display:flex; flex-direction:column; gap:6px; margin-top:10px; }
    label{ font-size:13px; color:var(--muted); font-weight:700; }
    input, select{
      height:46px;
      border-radius:14px;
      border:1px solid rgba(229,231,235,.95);
      padding: 0 12px;
      font-size:15px;
      background:#fff;
      outline:none;
    }
    input:focus, select:focus{ border-color:#9CA3AF; }
    .hint{ font-size:12px; color:var(--muted); line-height:1.4; margin-top:4px; }
    .btn{
      height:52px; border-radius:16px; border:0;
      font-weight:900; font-size:16px;
      color:#fff; cursor:pointer;
      background: linear-gradient(180deg,#2563EB,#1D4ED8);
      box-shadow: 0 10px 20px rgba(0,0,0,.10);
    }
    .btn:active{ transform: translateY(1px) scale(.99); }
    .btn-row{ display:flex; gap:10px; }
    .btn-secondary{
      height:52px; border-radius:16px; border:1px solid rgba(229,231,235,.95);
      font-weight:900; font-size:16px;
      background:#fff; color:#111827; cursor:pointer;
    }
    .error{ font-size:12px; color:#B91C1C; margin-top:4px; }
    .ok{ padding:10px 12px; border-radius:14px; background:#ECFDF5; border:1px solid #A7F3D0; color:#065F46; font-size:13px; }
</style>

  <div class="wrap">
    <div class="appbar">
      <div class="brand">補打卡</div>
      <div class="pill">👤 {{ $userName ?? (auth()->user() ? auth()->user()->name : '登入者') }}</div>
    </div>

    <div class="stack">
      <div class="card">
        <p class="title">Time Correction</p>
        <div class="sub">若漏打上/下班，可在此提交補打卡時間（精確到分鐘）。</div>

        @if(session('success'))
          <div class="ok" style="margin-top:12px;">✅ {{ session('success') }}</div>
        @endif

        <form method="POST" action="{{ $submitAction ?? '/time-correction' }}" style="margin-top:12px;">
          @csrf

            {{-- 1. 選擇補打卡日期 --}}
            <div class="field">
                <label for="work_date">補打卡日</label>
                <input
                id="work_date"
                name="work_date"
                type="date"
                value="{{ old('work_date', $defaultDate ?? date('Y-m-d')) }}"
                required
                >
                @if($errors->has('work_date'))
                <div class="error">{{ $errors->first('work_date') }}</div>
                @endif
            </div>

            {{-- 2. 補打卡類型 --}}
            <div class="field">
                <label for="type">補打卡類型</label>
                <select id="type" name="type" required>
                @php $oldType = old('type', $defaultType ?? 'clock_in'); @endphp
                <option value="clock_in" {{ $oldType === 'clock_in' ? 'selected' : '' }}>上班</option>
                <option value="clock_out" {{ $oldType === 'clock_out' ? 'selected' : '' }}>下班</option>
                </select>
                @if($errors->has('type'))
                <div class="error">{{ $errors->first('type') }}</div>
                @endif
            </div>

            {{-- 3. 補打的時間（到分鐘） --}}
            <div class="field">
                <label for="time_min">補打時間（到分鐘）</label>
                <input
                id="time_min"
                name="time_min"
                type="time"
                step="60"
                value="{{ old('time_min', $defaultTime ?? date('H:i')) }}"
                required
                >
                <div class="hint">例如：08:05、17:30（只到分鐘）</div>
                @if($errors->has('time_min'))
                <div class="error">{{ $errors->first('time_min') }}</div>
                @endif
            </div>

            {{-- 4. 備註 --}}
            <div class="field">
                <label for="note">備註</label>
                <textarea
                id="note"
                name="note"
                rows="4"
                placeholder="例：忘記打卡／手機沒電／臨時外出回來補登..."
                style="border-radius:14px; border:1px solid rgba(229,231,235,.95); padding:10px 12px; font-size:15px; resize:vertical;"
                >{{ old('note', $defaultNote ?? '') }}</textarea>

                <div class="hint">建議填寫原因，方便主管審核。</div>

                @if($errors->has('note'))
                <div class="error">{{ $errors->first('note') }}</div>
                @endif
            </div>

            <div class="btn-row" style="margin-top:14px;">
                <button class="btn" type="submit" style="flex:1;">送出補打卡</button>
                {{-- <a href="{{ $backUrl ?? '/index' }}" style="flex:1; text-decoration:none;">
                <button class="btn-secondary" type="button" style="width:100%;">返回</button>
                </a> --}}
            </div>

            {{-- <div class="hint" style="margin-top:10px;">
                * 送出後建議記錄原因（如果你之後要加備註/審核，我可以再幫你延伸 UI）。
            </div> --}}
        </form>
      </div>
    </div>
  </div>