@extends('layouts.app')
@section('title', '申請請假')

@push('styles')
<style>
/* 日期+時間區塊 */
.interval-box { border: 1px solid #dee2e6; border-radius: 8px; overflow: hidden; background: #fff; }
.interval-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.interval-row + .interval-row { border-top: 1px solid #f0f0f0; }
.interval-tag { width: 36px; font-size: .72rem; font-weight: 700; color: #6c757d; flex-shrink: 0; text-align: center; letter-spacing: .04em; }
.interval-row .form-control { flex: 1; min-width: 0; }
.interval-row .time-sel { width: 108px; flex-shrink: 0; }
.balance-banner {
  background: linear-gradient(135deg, #e8f4fd, #d0eaff);
  border: 1px solid #90caff;
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.balance-banner .bal-num { font-size: 1.8rem; font-weight: 700; color: #0d6efd; line-height: 1; }
.balance-banner .bal-label { font-size: .75rem; color: #555; }
.days-result {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.days-num { font-size: 2rem; font-weight: 700; color: #198754; line-height: 1; }
.leave-note-box {
  background: #f0f6ff;
  border: 1px solid #cfe2ff;
  border-radius: 6px;
  padding: 10px 13px;
  font-size: .82rem;
  color: #084298;
  line-height: 1.65;
}
.section-label { font-size: .7rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #888; margin-bottom: 6px; }
.proxy-card { background: #fff8f0; border: 1px solid #fde8c8; border-radius: 8px; padding: 14px; }

/* 暗黑模式 */
[data-bs-theme="dark"] .interval-box {
  background: #1c1f26 !important;
  border-color: #2e3340 !important;
}
[data-bs-theme="dark"] .interval-row + .interval-row {
  border-top-color: #2e3340 !important;
}
[data-bs-theme="dark"] .interval-tag { color: #9ca3af !important; }
[data-bs-theme="dark"] .balance-banner {
  background: linear-gradient(135deg, #0d2440, #0a1f35) !important;
  border-color: #1e4070 !important;
}
[data-bs-theme="dark"] .balance-banner .bal-label { color: #9ca3af !important; }
[data-bs-theme="dark"] .balance-banner div[style*="background:#b8d8ff"] {
  background: #1e4070 !important;
}
[data-bs-theme="dark"] .days-result {
  background: #1c1f26 !important;
  border-color: #2e3340 !important;
}
[data-bs-theme="dark"] .days-num { color: #4ade80 !important; }
[data-bs-theme="dark"] .leave-note-box {
  background: #0d1f38 !important;
  border-color: #1e3a5f !important;
  color: #93c5fd !important;
}
[data-bs-theme="dark"] .section-label { color: #9ca3af !important; }
[data-bs-theme="dark"] .proxy-card {
  background: #1f1a12 !important;
  border-color: #4a3520 !important;
}
[data-bs-theme="dark"] .proxy-card .section-label { color: #fbbf24 !important; }
[data-bs-theme="dark"] .proxy-card .form-text { color: #9ca3af !important; }
/* inline style 文字顏色補救 */
[data-bs-theme="dark"] #balanceBanner [style*="color:#333"],
[data-bs-theme="dark"] #balanceBanner [style*="color:#666"] { color: #dee2e6 !important; }
[data-bs-theme="dark"] #daysDisplay ~ div[style*="color:#888"] { color: #9ca3af !important; }
</style>
@endpush

@section('content')
<div class="container py-4" style="max-width:660px;">
  <div class="mb-4">
    <a href="{{ route('leave.index') }}" class="text-decoration-none text-muted small">
      <i class="bi bi-arrow-left me-1"></i>返回
    </a>
    <h4 class="fw-bold mt-2 mb-0"><i class="bi bi-calendar2-plus me-2 text-primary"></i>申請請假</h4>
  </div>

  @if(session('error'))
    <div class="alert alert-danger py-2">{{ session('error') }}</div>
  @endif

  <div class="card shadow-sm border-0">
    <div class="card-body p-4">
      <form method="POST" action="{{ route('leave.store') }}" id="leaveForm">
        @csrf

        {{-- ── 假別 ── --}}
        <div class="mb-1 section-label">假別</div>
        <div class="mb-3">
          <label for="leaveTypeSelect" class="visually-hidden">假別</label>
          <select name="leave_type_id" id="leaveTypeSelect"
                  class="form-select @error('leave_type_id') is-invalid @enderror" required>
            <option value="">請選擇假別…</option>
            @foreach($leaveTypes as $lt)
              <option value="{{ $lt->id }}"
                      data-needs-balance="{{ $lt->needs_balance ? 1 : 0 }}"
                      data-requires-document="{{ $lt->requires_document ? 1 : 0 }}"
                      data-remaining="{{ $balances[$lt->id]->remaining_days ?? '' }}"
                      data-total="{{ $balances[$lt->id]->total_days ?? '' }}"
                      data-notes="{{ $lt->notes }}"
                      {{ old('leave_type_id') == $lt->id ? 'selected' : '' }}>
                {{ $lt->name }}{{ $lt->is_paid ? '' : '（無薪）' }}
              </option>
            @endforeach
          </select>
          @error('leave_type_id')<div class="invalid-feedback">{{ $message }}</div>@enderror

          {{-- 特休餘額 --}}
          <div id="balanceBanner" class="balance-banner mt-2 d-none">
            <div>
              <div class="bal-num" id="balRemaining">—</div>
              <div class="bal-label">剩餘天數</div>
            </div>
            <div style="width:1px;height:36px;background:#b8d8ff;"></div>
            <div>
              <div style="font-size:.85rem;color:#333;">本年度核定 <strong id="balTotal">—</strong> 天</div>
              <div style="font-size:.75rem;color:#666;" id="balUsed"></div>
            </div>
          </div>

          {{-- 假別說明 --}}
          <div id="typeNotes" class="leave-note-box mt-2 d-none">
            <i class="bi bi-info-circle-fill me-1"></i><span id="typeNotesText"></span>
          </div>

          {{-- 需補文件提醒 --}}
          <div id="docHint" class="alert alert-warning py-2 mb-0 mt-2 small d-none">
            <i class="bi bi-file-earmark-medical me-1"></i>
            <strong>此假別需補充證明文件</strong>，可先送出申請，事後需補交相關證明給人事存查。
          </div>
        </div>

        {{-- ── 日期 & 時間 ── --}}
        <div class="mb-1 section-label">請假區間</div>
        @php
          // 時間選項：08:00 ~ 18:00，每 30 分鐘
          $timeSlots = [];
          for ($h = 8; $h <= 18; $h++) {
            foreach ([0, 30] as $m) {
              if ($h === 18 && $m === 30) break;
              $timeSlots[] = sprintf('%02d:%02d', $h, $m);
            }
          }
          $curStartTime = old('start_time', $prefill['start_time'] ?? '09:00');
          $curEndTime   = old('end_time',   $prefill['end_time']   ?? '18:00');
        @endphp

        <div class="interval-box mb-3">
          {{-- 開始 --}}
          <div class="interval-row">
            <span class="interval-tag">開始</span>
            <label for="startDate" class="visually-hidden">開始日期</label>
            <input type="date" name="start_date" id="startDate"
                   class="form-control @error('start_date') is-invalid @enderror"
                   value="{{ old('start_date', $prefill['start_date'] ?: date('Y-m-d')) }}"
                   min="{{ now()->subDays(3)->toDateString() }}"
                   max="{{ now()->addDays(14)->toDateString() }}" required>
            <label for="startTime" class="visually-hidden">開始時間</label>
            <select name="start_time" id="startTime" class="form-select time-sel" required>
              @foreach($timeSlots as $slot)
                <option value="{{ $slot }}" {{ $curStartTime === $slot ? 'selected' : '' }}>{{ $slot }}</option>
              @endforeach
            </select>
          </div>
          {{-- 結束 --}}
          <div class="interval-row">
            <span class="interval-tag">結束</span>
            <label for="endDate" class="visually-hidden">結束日期</label>
            <input type="date" name="end_date" id="endDate"
                   class="form-control @error('end_date') is-invalid @enderror"
                   value="{{ old('end_date', $prefill['end_date'] ?: date('Y-m-d')) }}"
                   min="{{ now()->subDays(3)->toDateString() }}"
                   max="{{ now()->addDays(14)->toDateString() }}" required>
            <label for="endTime" class="visually-hidden">結束時間</label>
            <select name="end_time" id="endTime" class="form-select time-sel" required>
              @foreach($timeSlots as $slot)
                <option value="{{ $slot }}" {{ $curEndTime === $slot ? 'selected' : '' }}>{{ $slot }}</option>
              @endforeach
            </select>
          </div>
          @error('start_date')<div class="px-3 pb-2 text-danger small">{{ $message }}</div>@enderror
          @error('end_date')<div class="px-3 pb-2 text-danger small">{{ $message }}</div>@enderror
        </div>

        {{-- 計算結果 --}}
        <div class="days-result mb-4">
          <div>
            <div class="days-num" id="daysDisplay">—</div>
            <div style="font-size:.72rem;color:#888;">工作天</div>
          </div>
          <div id="approvalHint" class="text-muted small d-none">
            <i class="bi bi-info-circle me-1"></i><span id="approvalHintText"></span>
          </div>
          <div id="overBalanceWarn" class="text-danger small d-none">
            <i class="bi bi-exclamation-triangle me-1"></i><span id="overBalanceText"></span>
          </div>
        </div>

        {{-- ── 事由 ── --}}
        <div class="mb-1 section-label">請假事由</div>
        <div class="mb-4">
          <label for="reason" class="visually-hidden">請假事由</label>
          <textarea name="reason" id="reason" rows="3" class="form-control @error('reason') is-invalid @enderror"
                    placeholder="請簡述請假原因…" maxlength="500" required>{{ old('reason') }}</textarea>
          @error('reason')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        {{-- ── 職務代理人 ── --}}
        <div class="proxy-card mb-4">
          <div class="mb-1 section-label" style="color:#b45309;">職務代理人</div>
          <label for="proxyUser" class="form-label small mb-1">請假期間由誰代理您的職務？</label>
          <select name="proxy_user_id" id="proxyUser" class="form-select">
            <option value="">— 不指定 —</option>
            @foreach($proxyGroups as $groupLabel => $members)
              @if($members->isNotEmpty())
                <optgroup label="{{ $groupLabel }}">
                  @foreach($members as $m)
                    <option value="{{ $m->id }}"
                      {{ old('proxy_user_id', $prefill['proxy_user_id']) == $m->id ? 'selected' : '' }}>
                      {{ $m->name }}{{ $m->department ? '（'.$m->department.'）' : '' }}
                    </option>
                  @endforeach
                </optgroup>
              @endif
            @endforeach
          </select>
          <div class="form-text">可在「個人資料設定」中設定預設代理人</div>
        </div>

        <div class="d-flex gap-2">
          <button type="submit" class="btn btn-primary flex-fill" id="submitBtn">
            <i class="bi bi-send me-1"></i>送出申請
          </button>
          <a href="{{ route('leave.index') }}" class="btn btn-outline-secondary">取消</a>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<script>
(function() {
  const startDate  = document.getElementById('startDate');
  const endDate    = document.getElementById('endDate');
  const startTime  = document.getElementById('startTime');
  const endTime    = document.getElementById('endTime');
  const daysDisplay= document.getElementById('daysDisplay');
  const hintEl     = document.getElementById('approvalHint');
  const hintText   = document.getElementById('approvalHintText');
  const overWarn   = document.getElementById('overBalanceWarn');
  const overText   = document.getElementById('overBalanceText');
  const typeSelect = document.getElementById('leaveTypeSelect');
  const balBanner  = document.getElementById('balanceBanner');
  const balRem     = document.getElementById('balRemaining');
  const balTot     = document.getElementById('balTotal');
  const balUsed    = document.getElementById('balUsed');
  const typeNotes  = document.getElementById('typeNotes');
  const typeNotesText = document.getElementById('typeNotesText');
  const docHint    = document.getElementById('docHint');

  let currentRemaining = null;
  let calcTimer = null;

  function calcDays() {
    clearTimeout(calcTimer);
    calcTimer = setTimeout(() => {
      const s = startDate.value, e = endDate.value;
      const st = startTime.value, et = endTime.value;
      if (!s || !e) return;
      fetch(`{{ route('leave.calc-days') }}?start_date=${s}&end_date=${e}&start_time=${encodeURIComponent(st)}&end_time=${encodeURIComponent(et)}`)
        .then(r => r.json())
        .then(d => {
          const days = parseFloat(d.days);
          daysDisplay.textContent = days + ' 天';

          // 審核層級提示
          if (days > 3) {
            hintEl.classList.remove('d-none');
            hintText.textContent = '超過 3 天，需老闆審核';
          } else if (days > 0) {
            hintEl.classList.remove('d-none');
            hintText.textContent = '3 天以內，由主管審核';
          } else {
            hintEl.classList.add('d-none');
          }

          // 特休超額警告
          if (currentRemaining !== null) {
            if (days > currentRemaining) {
              overWarn.classList.remove('d-none');
              overText.textContent = `特休餘額不足（剩餘 ${currentRemaining} 天，申請 ${days} 天）`;
            } else {
              overWarn.classList.add('d-none');
            }
          }
        });
    }, 250);
  }

  typeSelect.addEventListener('change', function() {
    const opt = this.options[this.selectedIndex];

    // 假別說明
    const notes = opt.dataset.notes || '';
    if (notes) { typeNotesText.textContent = notes; typeNotes.classList.remove('d-none'); }
    else        { typeNotes.classList.add('d-none'); }

    // 餘額 banner
    const needsBalance = opt.dataset.needsBalance === '1';
    if (needsBalance && opt.dataset.total) {
      const rem   = parseFloat(opt.dataset.remaining) || 0;
      const total = parseFloat(opt.dataset.total)     || 0;
      const used  = Math.max(0, +(total - rem).toFixed(2));
      balRem.textContent  = rem;
      balTot.textContent  = total;
      balUsed.textContent = `已用 ${used} 天`;
      currentRemaining    = rem;
      balBanner.classList.remove('d-none');
    } else {
      balBanner.classList.add('d-none');
      currentRemaining = null;
    }
    overWarn.classList.add('d-none');

    // 附件提示
    opt.dataset.requiresDocument === '1'
      ? docHint.classList.remove('d-none')
      : docHint.classList.add('d-none');

    calcDays();
  });

  [startDate, endDate, startTime, endTime].forEach(el => el.addEventListener('change', calcDays));

  startDate.addEventListener('change', function() {
    endDate.min = this.value;
    if (endDate.value && endDate.value < this.value) endDate.value = this.value;
  });

  // 初始觸發計算
  calcDays();
  if (typeSelect.value) typeSelect.dispatchEvent(new Event('change'));

  // 暗黑模式：修正 inline style 顏色
  if (document.documentElement.getAttribute('data-bs-theme') === 'dark') {
    document.querySelectorAll('#balanceBanner [style*="color:#333"], #balanceBanner [style*="color:#666"]')
      .forEach(el => el.style.color = '#dee2e6');
    const workDayLabel = document.querySelector('#daysDisplay + div') || document.querySelector('.days-result div:last-child');
    if (workDayLabel) workDayLabel.style.color = '#9ca3af';
  }
})();
</script>
@endpush