@extends('layouts.app')
@section('title', '假別管理')

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

  <div class="d-flex align-items-center justify-content-between mb-4">
    <div>
      <h4 class="fw-bold mb-0"><i class="bi bi-tags me-2 text-primary"></i>假別管理</h4>
      <div class="text-muted small mt-1">設定請假類型、規則與應備文件</div>
    </div>
    <div class="d-flex gap-2">
      <a href="{{ route('leave.settings.balance') }}" class="btn btn-outline-secondary btn-sm">
        <i class="bi bi-person-lines-fill me-1"></i>特休配額
      </a>
      <a href="{{ route('leave.settings.stats') }}" class="btn btn-outline-secondary btn-sm">
        <i class="bi bi-bar-chart 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

  {{-- 勞工請假規則參考（全寬橫排） --}}
  <div class="card border-0 shadow-sm mb-4">
    <div class="card-body py-2 px-3">
      <div class="fw-semibold small mb-2"><i class="bi bi-book me-1 text-primary"></i>勞工請假規則參考</div>
      <div style="display:grid;grid-template-columns:repeat(5,1fr);gap:0 20px;font-size:.76rem;line-height:1.6;">

        {{-- 特休 --}}
        <div>
          <div class="fw-semibold mb-1" style="color:#0d6efd;">特休假（勞基法§38）</div>
          <div style="display:grid;grid-template-columns:1fr auto;gap:0 8px;">
            <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>
        </div>

        {{-- 婚假 --}}
        <div>
          <div class="fw-semibold mb-1" style="color:#d63384;">婚假（請假規則§2）</div>
          <div class="text-muted">8天全薪。</div>
          <div class="text-muted">自結婚日前10日起3個月內請畢（雇主同意可延至1年）。</div>
          <div class="text-muted mt-1"><i class="bi bi-paperclip me-1"></i>需附結婚證書。</div>
        </div>

        {{-- 喪假 --}}
        <div>
          <div class="fw-semibold mb-1" style="color:#6c757d;">喪假（請假規則§3）</div>
          <div style="display:grid;grid-template-columns:1fr auto;gap:0 8px;">
            <span class="text-muted">父母、配偶</span><strong>8日</strong>
            <span class="text-muted">祖父母（含外祖父母）、子女、配偶父母</span><strong>6日</strong>
            <span class="text-muted">兄弟姊妹</span><strong>3日</strong>
          </div>
          <div class="text-muted mt-1">全薪。<i class="bi bi-paperclip me-1 ms-1"></i>需附相關證明文件。</div>
        </div>

        {{-- 事假 --}}
        <div>
          <div class="fw-semibold mb-1" style="color:#fd7e14;">事假（請假規則§7）</div>
          <div class="text-muted">全年合計不超過14天。</div>
          <div class="text-muted">不帶薪（工資不給付）。</div>
        </div>

        {{-- 病假 --}}
        <div>
          <div class="fw-semibold mb-1" style="color:#20c997;">病假（請假規則§4）</div>
          <div class="text-muted">未住院：1年內前30日<strong>半薪</strong>，超過30日不支薪。</div>
          <div class="text-muted">住院：不支薪。</div>
          <div class="text-muted mt-1"><i class="bi bi-paperclip me-1"></i>需附醫療院所證明。</div>
        </div>

      </div>
    </div>
  </div>

  <div class="row g-4">

    {{-- 現有假別 --}}
    <div class="col-12 col-xl-6">
      <div class="card shadow-sm border-0">
        <div class="card-header bg-transparent fw-semibold py-3">現有假別</div>
        <div class="card-body p-0">
          <div class="table-responsive">
            <table class="table table-hover align-middle mb-0" style="font-size:.88rem;">
              <thead class="table-light">
                <tr>
                  <th class="ps-3" style="min-width:90px;">名稱</th>
                  <th style="min-width:200px;">說明</th>
                  <th class="text-center">需附件</th>
                  <th class="text-center">有薪</th>
                  <th class="text-center">狀態</th>
                  <th class="pe-3"></th>
                </tr>
              </thead>
              <tbody>
                @forelse($types as $lt)
                <tr>
                  <td class="ps-3">
                    <span class="d-inline-block rounded me-1" style="width:10px;height:10px;background:{{ $lt->color }};vertical-align:middle;flex-shrink:0;"></span>
                    <strong>{{ $lt->name }}</strong>
                  </td>
                  <td class="text-muted small" style="max-width:260px;">
                    {{ $lt->notes ?: '—' }}
                  </td>
                  <td class="text-center">
                    @if($lt->requires_document)
                      <i class="bi bi-paperclip text-warning fw-bold" title="需上傳附件"></i>
                    @else
                      <span class="text-muted">—</span>
                    @endif
                  </td>
                  <td class="text-center">
                    @if($lt->is_paid)
                      <i class="bi bi-check-circle-fill text-success"></i>
                    @else
                      <i class="bi bi-x-circle text-danger"></i>
                    @endif
                  </td>
                  <td class="text-center">
                    @if($lt->is_active)
                      <span class="badge bg-success-subtle text-success">啟用</span>
                    @else
                      <span class="badge bg-secondary">停用</span>
                    @endif
                  </td>
                  <td class="pe-3 text-end">
                    <button class="btn btn-sm btn-outline-secondary py-0 px-2"
                            data-bs-toggle="collapse" data-bs-target="#edit-{{ $lt->id }}">
                      編輯
                    </button>
                  </td>
                </tr>
                {{-- 編輯列 --}}
                <tr class="collapse" id="edit-{{ $lt->id }}">
                  <td colspan="6" class="px-3 pb-3 pt-1 bg-light">
                    <form method="POST" action="{{ route('leave.settings.types.update', $lt) }}">
                      @csrf @method('PUT')
                      <div class="row g-2 mt-1">
                        <div class="col-md-3">
                          <label class="form-label small fw-semibold mb-1">名稱</label>
                          <input type="text" name="name" class="form-control form-control-sm"
                                 value="{{ $lt->name }}" required>
                        </div>
                        <div class="col-md-1">
                          <label class="form-label small fw-semibold mb-1">顏色</label>
                          <input type="color" name="color" class="form-control form-control-sm form-control-color"
                                 value="{{ $lt->color }}">
                        </div>
                        <div class="col-md-1">
                          <label class="form-label small fw-semibold mb-1">排序</label>
                          <input type="number" name="sort_order" class="form-control form-control-sm"
                                 value="{{ $lt->sort_order }}" min="0">
                        </div>
                        <div class="col-md-7">
                          <label class="form-label small fw-semibold mb-1">說明</label>
                          <input type="text" name="notes" class="form-control form-control-sm"
                                 value="{{ $lt->notes }}" placeholder="假別說明、規定、限制…">
                        </div>
                        <div class="col-12 d-flex gap-4 align-items-center flex-wrap mt-1">
                          <div class="form-check form-switch mb-0">
                            <input class="form-check-input" type="checkbox" name="requires_document" value="1"
                                   id="rd_{{ $lt->id }}" {{ $lt->requires_document ? 'checked' : '' }}>
                            <label class="form-check-label small" for="rd_{{ $lt->id }}">
                              <i class="bi bi-paperclip me-1"></i>需上傳附件
                            </label>
                          </div>
                          <div class="form-check form-switch mb-0">
                            <input class="form-check-input" type="checkbox" name="needs_balance" value="1"
                                   id="nb_{{ $lt->id }}" {{ $lt->needs_balance ? 'checked' : '' }}>
                            <label class="form-check-label small" for="nb_{{ $lt->id }}">需預先核配天數</label>
                          </div>
                          <div class="form-check form-switch mb-0">
                            <input class="form-check-input" type="checkbox" name="is_paid" value="1"
                                   id="ip_{{ $lt->id }}" {{ $lt->is_paid ? 'checked' : '' }}>
                            <label class="form-check-label small" for="ip_{{ $lt->id }}">有薪假</label>
                          </div>
                          <div class="form-check form-switch mb-0">
                            <input class="form-check-input" type="checkbox" name="is_active" value="1"
                                   id="ia_{{ $lt->id }}" {{ $lt->is_active ? 'checked' : '' }}>
                            <label class="form-check-label small" for="ia_{{ $lt->id }}">啟用</label>
                          </div>
                          <button type="submit" class="btn btn-primary btn-sm ms-auto">儲存</button>
                        </div>
                      </div>
                    </form>
                  </td>
                </tr>
                @empty
                <tr>
                  <td colspan="6" class="text-center py-4 text-muted">尚無假別，請在右側新增</td>
                </tr>
                @endforelse
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

    {{-- 右側：新增 + 快速新增 --}}
    <div class="col-12 col-xl-6">

      {{-- 新增假別 --}}
      <div class="card shadow-sm border-0">
        <div class="card-header bg-transparent fw-semibold py-3">新增假別</div>
        <div class="card-body">
          <form method="POST" action="{{ route('leave.settings.types.store') }}">
            @csrf
            <div class="mb-3">
              <label class="form-label small fw-semibold">假別名稱 <span class="text-danger">*</span></label>
              <input type="text" name="name" class="form-control form-control-sm"
                     placeholder="例：特休、病假、事假…" required>
            </div>
            <div class="row g-2 mb-3">
              <div class="col-6">
                <label class="form-label small fw-semibold">代碼 <span class="text-danger">*</span></label>
                <input type="text" name="code" class="form-control form-control-sm"
                       placeholder="annual / sick …" required>
              </div>
              <div class="col-3">
                <label class="form-label small fw-semibold">顏色</label>
                <input type="color" name="color" class="form-control form-control-sm form-control-color" value="#0d6efd">
              </div>
              <div class="col-3">
                <label class="form-label small fw-semibold">排序</label>
                <input type="number" name="sort_order" class="form-control form-control-sm" value="0" min="0">
              </div>
            </div>
            <div class="mb-3">
              <label class="form-label small fw-semibold">說明</label>
              <textarea name="notes" class="form-control form-control-sm" rows="2"
                        placeholder="假別規定、天數、附件要求…"></textarea>
            </div>
            <div class="d-flex gap-3 flex-wrap mb-3">
              <div class="form-check form-switch mb-0">
                <input class="form-check-input" type="checkbox" name="requires_document" value="1" id="new_rd">
                <label class="form-check-label small" for="new_rd">
                  <i class="bi bi-paperclip me-1"></i>需上傳附件
                </label>
              </div>
              <div class="form-check form-switch mb-0">
                <input class="form-check-input" type="checkbox" name="needs_balance" value="1" id="new_nb">
                <label class="form-check-label small" for="new_nb">扣除假期餘額</label>
              </div>
              <div class="form-check form-switch mb-0">
                <input class="form-check-input" type="checkbox" name="is_paid" value="1" id="new_paid" checked>
                <label class="form-check-label small" for="new_paid">有薪假</label>
              </div>
            </div>
            <button type="submit" class="btn btn-primary w-100 btn-sm">
              <i class="bi bi-plus-lg me-1"></i>新增假別
            </button>
          </form>
        </div>
      </div>

      {{-- 快速新增常用假別 --}}
      <div class="card shadow-sm border-0 mt-3">
        <div class="card-header bg-transparent py-2 small fw-semibold">
          快速新增常用假別
        </div>
        <div class="card-body py-2 px-3">
          @php
            // [name, code, color, is_paid, needs_balance, requires_document, notes]
            $presets = [
              ['特休',  'annual',   '#0d6efd', 1, 1, 0,
               '依年資計算（6個月3日～10年以上最多30日）。'],
              ['病假',  'sick',     '#20c997', 1, 0, 1,
               '未住院：1年內30天以內半薪，超過30天不支薪。住院：不支薪。需附醫療院所證明。'],
              ['事假',  'personal', '#fd7e14', 0, 0, 0,
               '全年合計不超過14天，不帶薪（工資不給付）。'],
              ['婚假',  'marriage', '#d63384', 1, 0, 1,
               '8天全薪。自結婚之日前10日起3個月內請畢（雇主同意可延至1年內）。需附結婚證書。'],
              ['喪假',  'funeral',  '#6c757d', 1, 0, 1,
               '依親等全薪。父母、配偶：8天；祖父母（含外祖父母）、子女、配偶父母：6天；兄弟姊妹：3天。需附相關證明文件。'],
              ['公假',  'official', '#0dcaf0', 1, 0, 0,
               '依法令規定，工資照給。'],
            ];
          @endphp
          <div class="d-flex flex-column gap-2 py-1">
            @foreach($presets as [$name,$code,$color,$paid,$balance,$doc,$notes])
              @if(!$types->where('code',$code)->count())
                <form method="POST" action="{{ route('leave.settings.types.store') }}">
                  @csrf
                  <input type="hidden" name="name"             value="{{ $name }}">
                  <input type="hidden" name="code"             value="{{ $code }}">
                  <input type="hidden" name="color"            value="{{ $color }}">
                  <input type="hidden" name="is_paid"          value="{{ $paid }}">
                  <input type="hidden" name="needs_balance"    value="{{ $balance }}">
                  <input type="hidden" name="requires_document" value="{{ $doc }}">
                  <input type="hidden" name="notes"            value="{{ $notes }}">
                  <input type="hidden" name="sort_order"       value="0">
                  <button type="submit" class="btn btn-sm w-100 text-start d-flex align-items-center gap-2"
                          style="background:{{ $color }}18;border:1px solid {{ $color }}55;color:inherit;">
                    <span class="d-inline-block rounded" style="width:10px;height:10px;background:{{ $color }};flex-shrink:0;"></span>
                    <strong style="min-width:36px;">{{ $name }}</strong>
                    <span class="text-muted" style="font-size:.72rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;">{{ $notes }}</span>
                    @if($doc)<i class="bi bi-paperclip text-muted ms-auto flex-shrink-0"></i>@endif
                  </button>
                </form>
              @else
                <div class="d-flex align-items-center gap-2 px-2 py-1 rounded"
                     style="background:#f8f9fa;border:1px solid #dee2e6;opacity:.6;font-size:.83rem;">
                  <span class="d-inline-block rounded" style="width:10px;height:10px;background:{{ $color }};flex-shrink:0;"></span>
                  <strong style="min-width:36px;">{{ $name }}</strong>
                  <span class="text-muted ms-auto small">已建立 ✓</span>
                </div>
              @endif
            @endforeach
          </div>
        </div>
      </div>
    </div>

  </div>
</div>
@endsection