{{-- resources/views/dashboard.blade.php --}}
@extends('layouts.appd')
@section('title', '儀表板')

@push('styles')
  <style>
    h2.dashboard-welcome {
      font-weight: 400;
    }
  </style>
@endpush

@section('content')
  <div class="container py-4">
    {{-- 歡迎詞 --}}
    <h2 class="mb-4 dashboard-welcome">👋 歡迎回來，{{ Auth::user()->name }}！</h2>

    {{-- 待審核提醒 --}}
    @php
      $user = Auth::user();
      $isSup = $user->role === 'supervisor';
      $isAdm = $user->role === 'admin';
      $printed = false; // 用來判斷是否有列出任何待審核項目
    @endphp

    @if ($isSup || $isAdm || $handoverReceiverCount > 0)
      <div class="card mb-4 border-warning shadow-sm">
        <div class="card-header bg-warning text-dark">📋 待審核項目</div>
        <ul class="list-group list-group-flush">

          {{-- 主管 --}}
          @if ($isSup)
            @if (!empty($pendingForSupervisor))
              @php $printed = true; @endphp
              <li class="list-group-item d-flex justify-content-between align-items-center">
                VPN 申請（主管）
                <span class="badge rounded-pill bg-danger">{{ $pendingForSupervisor }}</span>
                <a href="{{ route('vpn-requests.supervisor.index') }}" class="btn btn-sm btn-warning text-dark ms-3">前往</a>
              </li>
            @endif

            @if (!empty($devicePendingForSupervisor))
              @php $printed = true; @endphp
              <li class="list-group-item d-flex justify-content-between align-items-center">
                設備攜入申請（主管）
                <span class="badge rounded-pill bg-danger">{{ $devicePendingForSupervisor }}</span>
                <a href="{{ route('device-requests.supervisor.index') }}"
                  class="btn btn-sm btn-warning text-dark ms-3">前往</a>
              </li>
            @endif
          @endif

          {{-- 管理員 --}}
          @if ($isAdm)
            @if (!empty($pendingForAdmin))
              @php $printed = true; @endphp
              <li class="list-group-item d-flex justify-content-between align-items-center">
                VPN 申請（管理）
                <span class="badge rounded-pill bg-danger">{{ $pendingForAdmin }}</span>
                <a href="{{ route('vpn-requests.admin.index') }}" class="btn btn-sm btn-warning text-dark ms-3">前往</a>
              </li>
            @endif

            @if (!empty($devicePendingForAdmin))
              @php $printed = true; @endphp
              <li class="list-group-item d-flex justify-content-between align-items-center">
                設備攜入申請（管理）
                <span class="badge rounded-pill bg-danger">{{ $devicePendingForAdmin }}</span>
                <a href="{{ route('device-requests.admin.index') }}" class="btn btn-sm btn-warning text-dark ms-3">前往</a>
              </li>
            @endif
          @endif

          {{-- 交接接收人：尚未確認的交接項目 --}}
          @if ($handoverReceiverCount > 0)
            @php $printed = true; @endphp
            <li class="list-group-item d-flex justify-content-between align-items-center">
              待確認工作交接（接收人）
              <span class="badge rounded-pill bg-danger recv-count-badge">{{ $handoverReceiverCount }}</span>
            </li>
          @endif

          {{-- 離職/調職交接審核（主管/管理員） --}}
          @if (!empty($handoverPendingCount))
            @php $printed = true; @endphp
            <li class="list-group-item d-flex justify-content-between align-items-center">
              離職/調職交接審核
              <span class="badge rounded-pill bg-danger">{{ $handoverPendingCount }}</span>
              <a href="{{ route('handovers.review') }}" class="btn btn-sm btn-warning text-dark ms-3">前往</a>
            </li>
          @endif

          {{-- 無待審核 --}}
          @if (!$printed)
            <li class="list-group-item text-center text-muted">
              ✅ 目前無任何待審核項目
            </li>
          @endif
        </ul>
      </div>
    @endif

    {{-- ===== 待確認工作交接（接收人） ===== --}}
    @if($receiverHandovers->isNotEmpty())
      <div class="card border-info shadow-sm mb-4">
        <div class="card-header bg-info bg-opacity-10 fw-bold text-info-emphasis">
          <i class="bi bi-box-arrow-in-down me-1"></i>我需要確認的工作交接（{{ $receiverHandovers->count() }}）
        </div>
        <ul class="list-group list-group-flush">
          @foreach($receiverHandovers as $h)
            @php $myProjects = $h->projects; @endphp
            <li class="list-group-item">
              <div class="d-flex align-items-center mb-2">
                <span class="fw-semibold me-2">{{ $h->applicant->name }}</span>
                <span class="text-muted small me-2">{{ $h->type === 'resignation' ? '離職' : '調職' }}</span>
                <span class="badge bg-{{ $h->statusLabel()['color'] }} small">{{ $h->statusLabel()['label'] }}</span>
              </div>
              <ul class="list-unstyled mb-0 ps-2">
                @foreach($myProjects as $hp)
                  <li class="d-flex justify-content-between align-items-center py-1 border-top" id="recv-hp-{{ $hp->id }}">
                    <span class="small">
                      <i class="bi bi-folder me-1 text-muted"></i>{{ $hp->project->name }}
                    </span>
                    @if($hp->receiver_confirmed_at)
                      <span class="text-success small">
                        <i class="bi bi-check-circle-fill me-1"></i>已確認（{{ $hp->receiver_confirmed_at->format('Y-m-d H:i') }}）
                      </span>
                    @else
                      <button class="btn btn-sm btn-success btn-recv-confirm"
                        data-url="{{ route('handovers.confirmReceiver', [$h, $hp]) }}"
                        data-hp="{{ $hp->id }}">
                        <i class="bi bi-check2 me-1"></i>確認已交接
                      </button>
                    @endif
                  </li>
                @endforeach
              </ul>
            </li>
          @endforeach
        </ul>
      </div>
    @endif

    {{-- ===== 資料夾縮圖（iPhone 風 3×3） + 未分類卡片 ===== --}}
    <div class="row g-4">
      {{-- 資料夾縮圖（注意：元件名稱是 ios-**folders**-link） --}}
      @foreach ($folders as $folder)
        <div class="col-4 col-md-4 col-lg-3">
          <x-ios-folders-link :folder="$folder" :cards="collect($folderCards[$folder->id] ?? [])" :user-colors="$userFolderColors" />
        </div>
      @endforeach

      {{-- 未分類卡片（需要的話保留） --}}
      @foreach ($noFolderCards as $card)
        <div class="col-6 col-md-4 col-lg-3">
          @php $partial = $card->blade_view ?? null; @endphp
          @if ($partial && View::exists($partial))
            @include($partial, ['card' => $card])
          @else
            <div class="card h-100 shadow-sm">
              <div class="card-body d-flex flex-column">
                <h6 class="card-title text-truncate" title="{{ $card->name }}">{{ $card->name }}</h6>
                <div class="mt-auto">
                  @if (!empty($card->route_name))
                    <a href="{{ route($card->route_name) }}" class="btn btn-success w-100">進入</a>
                  @endif
                </div>
              </div>
            </div>
          @endif
        </div>
      @endforeach
    </div>


  </div>
@endsection

@push('scripts')
<script>
document.addEventListener('click', function(e) {
  var btn = e.target.closest('.btn-recv-confirm');
  if (!btn) return;
  if (!confirm('確認已完成此專案的工作交接？')) return;

  btn.disabled = true;
  btn.innerHTML = '<span class="spinner-border spinner-border-sm"></span>';

  fetch(btn.dataset.url, {
    method: 'POST',
    headers: {
      'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
      'Accept': 'application/json',
      'Content-Type': 'application/json',
    },
  }).then(function(r) { return r.json(); }).then(function(data) {
    var row = document.getElementById('recv-hp-' + btn.dataset.hp);
    if (row) {
      row.querySelector('.btn-recv-confirm').outerHTML =
        '<span class="text-success small"><i class="bi bi-check-circle-fill me-1"></i>已確認（' + data.confirmed_at + '）</span>';
    }
    // 若這筆交接的所有專案都已確認，移除該 li
    var handoverLi = btn.closest('li.list-group-item');
    if (handoverLi && handoverLi.querySelectorAll('.btn-recv-confirm').length === 0) {
      handoverLi.remove();
    }
    // 若整張卡片沒有任何待確認，移除整張卡片與通知列項目
    var card = document.querySelector('.card.border-info');
    if (card && card.querySelectorAll('.btn-recv-confirm').length === 0) {
      card.remove();
      var badge = document.querySelector('.recv-count-badge');
      if (badge) badge.closest('li').remove();
    }
  }).catch(function() {
    btn.disabled = false;
    btn.innerHTML = '<i class="bi bi-check2 me-1"></i>確認已交接';
    alert('操作失敗，請重試');
  });
});
</script>
@endpush