@extends('layouts.app')
@section('title', '特休天數試算表')

@section('content')
<div class="container-fluid py-4 px-4">

  {{-- 標題列 --}}
  <div class="d-flex align-items-center flex-wrap gap-2 mb-3">
    <div>
      <h4 class="fw-bold mb-0"><i class="bi bi-calculator me-2 text-primary"></i>特休天數試算表</h4>
      <div class="text-muted small mt-1">依勞基法年資比例計算 {{ $year }} 年度應得特休天數</div>
    </div>
    <div class="ms-auto d-flex gap-2 flex-wrap">
      @foreach([now()->year+1, now()->year, now()->year-1] as $y)
        <a href="{{ route('leave.settings.balance', ['year'=>$y]) }}"
           class="btn btn-sm {{ $y==$year ? 'btn-primary' : 'btn-outline-secondary' }}">{{ $y }}</a>
      @endforeach
      <a href="{{ route('leave.settings.types') }}" class="btn btn-outline-secondary btn-sm">
        <i class="bi bi-tags me-1"></i>假別管理
      </a>
    </div>
  </div>

  @foreach(['success','error'] as $t)
    @if(session($t))
      <div class="alert alert-{{ $t==='error'?'danger':$t }} alert-dismissible fade show py-2 mb-3">
        {{ session($t) }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
      </div>
    @endif
  @endforeach

  @if($balanceTypes->isEmpty())
    <div class="card shadow-sm border-0">
      <div class="card-body text-center py-5 text-muted">
        <i class="bi bi-info-circle" style="font-size:2rem;opacity:.3;"></i>
        <div class="mt-2">尚無需配額的假別</div>
        <a href="{{ route('leave.settings.types') }}" class="btn btn-primary btn-sm mt-3">前往假別管理 →</a>
      </div>
    </div>
  @else

  {{-- 主區域：左側表格 + 右側說明 --}}
  <div class="d-flex gap-3 align-items-start">

    {{-- 左：配額表 --}}
    <div class="flex-grow-1" style="min-width:0;overflow:hidden;">
      <form method="POST" action="{{ route('leave.settings.balance.update') }}">
        @csrf
        <input type="hidden" name="year" value="{{ $year }}">
        <div class="card shadow-sm border-0">
          <div class="card-body p-0">
            <div class="table-responsive">
              <table class="table table-hover align-middle mb-0" style="font-size:.82rem;">
                <thead class="table-light">
                  <tr>
                    <th rowspan="2" class="ps-3 text-muted fw-normal" style="vertical-align:middle;width:64px;">工號</th>
                    <th rowspan="2" class="text-muted fw-normal" style="vertical-align:middle;width:72px;">部門</th>
                    <th rowspan="2" class="text-muted fw-normal" style="vertical-align:middle;width:72px;">職稱</th>
                    <th rowspan="2" style="vertical-align:middle;width:88px;">姓名</th>
                    <th rowspan="2" class="text-center text-muted fw-normal" style="vertical-align:middle;width:84px;">到職日</th>
                    <th rowspan="2" class="text-center text-muted fw-normal" style="vertical-align:middle;width:54px;">年資</th>
                    @foreach($balanceTypes as $bt)
                      <th colspan="3" class="text-center border-start" style="padding-bottom:3px;">
                        <span class="badge rounded-pill text-white" style="background:{{ $bt->color }}">{{ $bt->name }}</span>
                      </th>
                    @endforeach
                  </tr>
                  <tr>
                    @foreach($balanceTypes as $bt)
                      <th scope="col" class="text-center fw-normal text-muted border-start" style="width:68px;font-size:.75rem;padding-top:3px;">核定</th>
                      <th scope="col" class="text-center fw-normal text-muted" style="width:44px;font-size:.75rem;padding-top:3px;">已用</th>
                      <th scope="col" class="text-center fw-normal text-muted" style="width:44px;font-size:.75rem;padding-top:3px;">剩餘</th>
                    @endforeach
                  </tr>
                </thead>
                <tbody>
                  @foreach($users as $u)
                  @php
                    $leaveCalc = $u->annualLeaveForYear($year);
                    $asOf      = $year >= now()->year
                                   ? now()
                                   : \Carbon\Carbon::create($year, 12, 31);
                    $months    = $u->joined_at ? $u->joined_at->diffInMonths($asOf) : null;
                    $yrs       = $months !== null ? intdiv($months, 12) : null;
                    $remMos    = $months !== null ? $months % 12 : null;
                    $senPart   = ($months !== null)
                        ? (($yrs > 0 ? "{$yrs}年" : '') . ($remMos > 0 ? "{$remMos}月" : ''))
                        : null;
                    $seniority = $months === null ? '—' : ($senPart ?: '< 1月');
                    $legalDays = $leaveCalc ? $leaveCalc['days'] : null;
                    // 核定 input 的 tooltip 內容
                    if ($leaveCalc) {
                        $lc = $leaveCalc;
                        if (!empty($lc['formula'])) {
                            $tipHtml = "法定 <strong>{$lc['days']} 日</strong>"
                                     . "<br>{$year}/01/01 起 {$lc['oldDays']}日×{$lc['oldMonths']}月 = {$lc['oldPart']}日"
                                     . "<br>{$year}/{$lc['annivMonth']}/{$lc['annivDay']} 起 {$lc['newDays']}日×{$lc['newMonths']}月 = {$lc['newPart']}日"
                                     . "<br><small class='text-muted'>{$lc['oldDays']}×{$lc['oldMonths']}/12 + {$lc['newDays']}×{$lc['newMonths']}/12 = {$lc['oldPart']} + {$lc['newPart']} = {$lc['days']}</small>";
                        } else {
                            $tipHtml = htmlspecialchars($lc['detail'] ?? '');
                        }
                    } else {
                        $tipHtml = '';
                    }
                  @endphp
                  <tr>
                    <td class="ps-3 text-muted font-monospace" style="font-size:.76rem;">{{ $u->employee_no ?: '—' }}</td>
                    <td class="text-muted" style="max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.82rem;" title="{{ $u->department }}">{{ $u->department ?: '—' }}</td>
                    <td class="text-muted" style="max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.82rem;" title="{{ $u->position }}">{{ $u->position ?: '—' }}</td>
                    <td class="fw-semibold" style="max-width:88px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="{{ $u->name }}">{{ $u->name }}</td>
                    <td class="text-center text-muted" style="font-size:.78rem;">
                      {{ $u->joined_at ? $u->joined_at->format('Y-m-d') : '—' }}
                    </td>
                    <td class="text-center text-muted" style="font-size:.82rem;">{{ $seniority }}</td>
                    @foreach($balanceTypes as $bt)
                      @php
                        $b         = $balances[$u->id][$bt->id] ?? null;
                        $savedDays = $b !== null ? (float)$b->total_days : null;
                        $used      = $b ? $b->used_days : 0;
                        // 有存過就顯示存過的值；尚未存過才用法定計算預填
                        $inputVal  = $savedDays !== null ? $savedDays : ($legalDays ?? 0);
                        $rem       = max(0, $inputVal - $used);
                        // 若曾存過且與法定計算不同，顯示提示
                        $mismatch  = $savedDays !== null && $legalDays !== null
                                     && abs($savedDays - $legalDays) >= 0.01;
                      @endphp
                      <td class="text-center border-start" style="padding:6px 4px;">
                        <div class="d-flex align-items-center justify-content-center gap-1">
                          <input type="number"
                                 class="form-control form-control-sm text-center p-1 bal-input {{ $mismatch ? 'border-warning border-2' : '' }}"
                                 style="width:72px;"
                                 value="{{ $inputVal }}" min="0" max="365" step="0.01"
                                 data-user-id="{{ $u->id }}"
                                 data-type-id="{{ $bt->id }}"
                                 data-year="{{ $year }}"
                                 @if($tipHtml) data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="top" title="{{ $tipHtml }}" @endif>
                          <button type="button" class="btn btn-sm bal-save-btn p-0 text-muted"
                                  style="width:22px;height:22px;flex-shrink:0;font-size:.8rem;line-height:1;"
                                  data-user-id="{{ $u->id }}"
                                  data-type-id="{{ $bt->id }}"
                                  data-year="{{ $year }}"
                                  title="儲存">
                            <i class="bi bi-check-lg"></i>
                          </button>
                        </div>
                        @if($mismatch)
                          <div class="text-warning-emphasis" style="font-size:.65rem;margin-top:2px;">
                            已存：{{ $savedDays }}
                          </div>
                        @endif
                      </td>
                      <td class="text-center text-muted" style="font-size:.82rem;">{{ $used > 0 ? number_format((float)$used, 2) : '—' }}</td>
                      <td class="text-center fw-semibold {{ $rem <= 0 && $inputVal > 0 ? 'text-danger' : ($inputVal > 0 ? 'text-success' : 'text-muted') }}" style="font-size:.82rem;">
                        {{ $inputVal > 0 ? number_format((float)$rem, 2) : '—' }}
                      </td>
                    @endforeach
                  </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
          </div>
          <div class="card-footer bg-transparent py-2">
            <div class="text-muted" style="font-size:.74rem;">
              輸入核定天數後按 <kbd>Enter</kbd> 即自動儲存。滑鼠移到欄位可查看法定計算明細。
            </div>
          </div>
        </div>
      </form>
    </div>

    {{-- 右：說明卡片（sticky） --}}
    <div style="width:250px;flex-shrink:0;position:sticky;top:72px;">
      <div class="card border-0 shadow-sm">
        <div class="card-body p-3">
          <div class="fw-semibold mb-2" style="font-size:.8rem;">⏱️ 勞基法法定特休天數</div>
          <div style="display:grid;grid-template-columns:1fr auto;font-size:.75rem;row-gap:4px;column-gap:10px;line-height:1.5;">
            <span class="text-muted">6 個月以上未滿 1 年</span><strong>3 日</strong>
            <span class="text-muted">1 年以上未滿 2 年</span><strong>7 日</strong>
            <span class="text-muted">2 年以上未滿 3 年</span><strong>10 日</strong>
            <span class="text-muted">3 年以上未滿 5 年</span><strong>14 日</strong>
            <span class="text-muted">5 年以上未滿 10 年</span><strong>15 日</strong>
            <span class="text-muted">10 年以上（每年 +1）</span><strong class="text-nowrap">≤ 30 日</strong>
          </div>
          <hr class="my-2">
          <div style="font-size:.72rem;line-height:1.8;color:var(--bs-secondary-color);">
            <div class="fw-semibold text-body mb-1">比例分攤公式</div>
            <div>舊年資 × (週年月 − 1) / 12</div>
            <div>＋ 新年資 × (13 − 週年月) / 12</div>
            <div class="mt-2 p-2 rounded" style="background:var(--bs-light);">
              <strong class="text-body">例：</strong>年資 21 年，到職月 9 月<br>
              27 × 8/12 ＋ 28 × 4/12<br>
              ＝ <strong class="text-primary">27.33 日</strong>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
  @endif
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
  document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(function (el) {
    new bootstrap.Tooltip(el, { trigger: 'hover', container: 'body' });
  });

  const SAVE_URL   = '{{ route('leave.settings.balance.update-one') }}';
  const CSRF_TOKEN = document.querySelector('meta[name="csrf-token"]').content;

  function getInput(btn) {
    return btn.closest('.d-flex').querySelector('.bal-input');
  }

  function doSave(btn) {
    const input   = getInput(btn);
    const val     = parseFloat(input.value);
    if (isNaN(val) || val < 0) return;

    const userId  = btn.dataset.userId;
    const typeId  = btn.dataset.typeId;
    const year    = btn.dataset.year;

    btn.disabled = true;
    btn.innerHTML = '<i class="bi bi-hourglass-split"></i>';

    fetch(SAVE_URL, {
      method:  'POST',
      headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF_TOKEN },
      body:    JSON.stringify({ user_id: userId, leave_type_id: typeId, year: year, total_days: val }),
    })
    .then(function(r) {
      if (!r.ok) throw new Error('HTTP ' + r.status);
      return r.json();
    })
    .then(function(d) {
      if (!d.ok) throw new Error('server error');
      btn.innerHTML = '<i class="bi bi-check-lg text-success"></i>';
      input.classList.remove('border-warning', 'border-2');
      input.classList.add('border-success');
      setTimeout(function() {
        btn.disabled = false;
        btn.innerHTML = '<i class="bi bi-check-lg"></i>';
        input.classList.remove('border-success');
      }, 1800);
    })
    .catch(function(err) {
      btn.disabled = false;
      btn.innerHTML = '<i class="bi bi-exclamation-triangle text-danger"></i>';
      setTimeout(function() { btn.innerHTML = '<i class="bi bi-check-lg"></i>'; }, 2500);
    });
  }

  // 點存按鈕
  document.querySelectorAll('.bal-save-btn').forEach(function(btn) {
    btn.addEventListener('click', function() { doSave(this); });
  });

  // Enter 鍵
  document.querySelectorAll('.bal-input').forEach(function(input) {
    input.addEventListener('keydown', function(e) {
      if (e.key !== 'Enter') return;
      e.preventDefault();
      var btn = this.closest('.d-flex').querySelector('.bal-save-btn');
      if (btn) doSave(btn);
    });
  });
});
</script>
@endpush

@endsection