@extends('layouts.app')
@section('title', '交接申請詳情')

@section('content')
<div class="container-fluid px-4 py-4">
@php
  $user   = auth()->user();
  $sl     = $handover->statusLabel();
  $stages = \App\Models\Handover::STAGES;
  $deptLabels = \App\Models\HandoverChecklistTemplate::DEPT_LABELS;
@endphp

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

{{-- Header --}}
<div class="d-flex flex-wrap justify-content-between align-items-start mb-4 gap-2">
  <div>
    <h4 class="fw-bold mb-1">
      <i class="bi bi-person-dash me-2"></i>
      {{ $handover->applicant->name }} 的{{ $handover->type === 'resignation' ? '離職' : '調職' }}交接申請
    </h4>
    <div class="d-flex gap-2 flex-wrap">
      <span class="badge bg-{{ $sl['color'] }} fs-6">{{ $sl['label'] }}</span>
      @if($handover->expected_date)
        <span class="text-muted small align-self-center">預計日期：{{ $handover->expected_date->format('Y-m-d') }}</span>
      @endif
    </div>
  </div>
  <div class="d-flex gap-2">
    <a href="{{ route('handovers.index') }}" class="btn btn-outline-secondary btn-sm">
      <i class="bi bi-arrow-left me-1"></i>返回列表
    </a>
    @if($user->role === 'admin' || ($viewerDeptKey === null && !$isApplicant))
      <a href="{{ route('handovers.pdf', $handover) }}" class="btn btn-outline-dark btn-sm" target="_blank">
        <i class="bi bi-file-earmark-pdf me-1"></i>匯出 PDF
      </a>
    @endif
  </div>
</div>

{{-- Progress pipeline --}}
@if($handover->approvals->isNotEmpty())
<div class="card shadow-sm mb-4">
  <div class="card-body py-3">
    <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
      @foreach($handover->approvals->sortBy('stage_order') as $ap)
        @php
          $icon  = match($ap->status) { 'approved' => 'bi-check-circle-fill text-success', 'rejected' => 'bi-x-circle-fill text-danger', default => 'bi-circle text-muted' };
          $isNow = $currentApproval?->id === $ap->id;
        @endphp
        <div class="text-center {{ $isNow ? 'fw-bold' : '' }}" style="min-width:80px">
          <i class="bi {{ $icon }} fs-4 d-block mb-1"></i>
          <div class="small">{{ $ap->stageLabel() }}</div>
          <div class="small text-muted">{{ $ap->approver?->name ?? '未指定' }}</div>
          @if($ap->decided_at)
            <div class="small text-muted">{{ $ap->decided_at->format('m/d') }}</div>
          @endif
          @if($isNow)
            <span class="badge bg-warning text-dark mt-1">審核中</span>
          @endif
        </div>
        @if(!$loop->last)
          <i class="bi bi-arrow-right text-muted d-none d-md-block"></i>
        @endif
      @endforeach
    </div>
  </div>
</div>
@endif

{{-- Approved celebration --}}
@if($handover->status === 'approved' && $isApplicant)
@php $approvedAt = $handover->approvals->where('status','approved')->sortByDesc('decided_at')->first()?->decided_at; @endphp
<div class="card shadow-sm mb-4 border-success text-center py-5">
  <div class="card-body">

    {{-- circular check graphic --}}
    <div class="mx-auto mb-4" style="width:120px;height:120px;position:relative;">
      <svg viewBox="0 0 120 120" width="120" height="120" style="position:absolute;top:0;left:0;">
        <circle cx="60" cy="60" r="54" fill="none" stroke="#e9f5ec" stroke-width="12"/>
        <circle cx="60" cy="60" r="54" fill="none" stroke="#198754" stroke-width="12"
          stroke-dasharray="339.3" stroke-dashoffset="0"
          stroke-linecap="round"
          style="transform:rotate(-90deg);transform-origin:60px 60px;
                 animation:drawCircle .8s ease forwards;"/>
      </svg>
      <div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;">
        <i class="bi bi-check-lg text-success" style="font-size:2.8rem;animation:popIn .4s .7s ease both;"></i>
      </div>
    </div>

    <h3 class="fw-bold text-success mb-1">
      恭喜你！{{ $handover->type === 'resignation' ? '離職' : '調職' }}申請已全數核准
    </h3>
    @if($approvedAt)
      <p class="text-muted mb-0">核准日期：{{ $approvedAt->format('Y-m-d') }}</p>
    @endif
  </div>
</div>
@endif

{{-- Basic Info Card --}}
@php
  $applicant = $handover->applicant;
  $hireDate  = $applicant->created_at;
  $leaveDate = $handover->expected_date;
  $yearsRaw  = $hireDate->diffInMonths($leaveDate ?? now());
  $years     = intdiv($yearsRaw, 12);
  $months    = $yearsRaw % 12;
  $tenureStr = $years > 0 ? "{$years} 年 {$months} 個月" : "{$months} 個月";
@endphp
<div class="card shadow-sm mb-4">
  <div class="card-header fw-semibold">
    <i class="bi bi-person-lines-fill me-2 text-primary"></i>申請人基本資訊
  </div>
  <div class="card-body">
    {{-- 第一列：部門 / 職稱 / 申請人 --}}
    <div class="row g-3 mb-2">
      <div class="col-4">
        <div class="text-muted small mb-1">部門</div>
        <div class="fw-semibold">{{ $applicant->department ?: '—' }}</div>
      </div>
      <div class="col-4">
        <div class="text-muted small mb-1">職稱</div>
        <div class="fw-semibold">{{ $applicant->position ?: '—' }}</div>
      </div>
      <div class="col-4">
        <div class="text-muted small mb-1">申請人 / 帳號</div>
        <div class="fw-semibold">{{ $applicant->name }}</div>
        <div class="text-muted small">{{ $applicant->email }}</div>
      </div>
    </div>
    {{-- 第二列：入職日 / 離職日 / 年資 --}}
    <div class="row g-3 mb-2">
      <div class="col-4">
        <div class="text-muted small mb-1">入職日</div>
        <div class="fw-semibold">{{ $hireDate->format('Y-m-d') }}</div>
      </div>
      <div class="col-4">
        <div class="text-muted small mb-1">{{ $handover->type === 'resignation' ? '離職日' : '調職日' }}</div>
        <div class="fw-semibold">{{ $leaveDate ? $leaveDate->format('Y-m-d') : '—' }}</div>
      </div>
      <div class="col-4">
        <div class="text-muted small mb-1">年資</div>
        <div class="fw-semibold">{{ $tenureStr }}</div>
      </div>
    </div>
    {{-- 第三列：離職/調職原因 + 門禁卡號 --}}
    <div class="row g-3">
      <div class="col-md-8">
        <div class="text-muted small mb-1">{{ $handover->type === 'resignation' ? '離職原因' : '調職原因' }}</div>
        @if($handover->isEditable() && $isApplicant)
          <textarea name="reason" form="checklistForm" class="form-control form-control-sm" rows="2"
            placeholder="請簡述原因…">{{ $handover->reason }}</textarea>
        @else
          <div class="fw-semibold">{{ $handover->reason ?: '—' }}</div>
        @endif
      </div>
      <div class="col-md-4">
        <div class="text-muted small mb-1"><i class="bi bi-person-badge me-1"></i>門禁卡號</div>
        @if($handover->isEditable() && $isApplicant)
          <input type="text" name="access_card_number" form="checklistForm"
            class="form-control form-control-sm"
            placeholder="請填寫門禁卡號碼"
            value="{{ $handover->access_card_number }}">
        @else
          <div class="fw-semibold">{{ $handover->access_card_number ?: '（未填寫）' }}</div>
        @endif
      </div>
    </div>
  </div>
</div>

{{-- Checklist (full width) --}}
<form id="checklistForm" action="{{ route('handovers.update', $handover) }}" method="POST" enctype="multipart/form-data">
  @csrf @method('PUT')

  {{-- ① 專案交接 --}}
  @if($projectResponsesByProject->isNotEmpty())
    <div class="card shadow-sm mb-3">
      <div class="card-header fw-bold">
        <i class="bi bi-folder2-open me-1"></i>專案交接
      </div>
      <div class="accordion accordion-flush" id="projectChecklist">
        @foreach($handover->projects as $hp)
          @php
            $projResps      = $projectResponsesByProject[$hp->id] ?? collect();
            $visibleResps   = $viewerDeptKey
                ? $projResps->filter(fn($r) => $r->template->department === $viewerDeptKey)
                : $projResps;
            $confirmedCount = $visibleResps->where('status', 'confirmed')->count();
            $filledCount    = $visibleResps->whereIn('status', ['filled','confirmed'])->count();
            $totalCount     = $visibleResps->count();
            $allConfirmed   = $totalCount > 0 && $confirmedCount === $totalCount;
            $isThisStage    = in_array($currentStage, array_keys(
                $projResps->mapWithKeys(fn($r) => [$r->template->department => true])->toArray()
            ));
          @endphp
          @if($totalCount === 0) @continue @endif
          @php $lockedForReceiver = $isReceiver && !$receiverProjectIds->has($hp->id); @endphp
          <div class="accordion-item {{ $lockedForReceiver ? 'opacity-50' : '' }}">
            <h2 class="accordion-header">
              <button class="accordion-button collapsed py-2{{ $lockedForReceiver ? ' pe-none text-muted' : '' }}" type="button"
                @if(!$lockedForReceiver) data-bs-toggle="collapse" data-bs-target="#proj_checklist_{{ $hp->id }}" @endif
                aria-expanded="false"
                data-proj-id="{{ $hp->id }}"
                @if($lockedForReceiver) style="cursor:not-allowed;" @endif>
                <span class="flex-grow-1 d-flex align-items-center gap-2">
                  @if($lockedForReceiver)<i class="bi bi-lock text-muted small"></i>@endif
                  <span class="fw-semibold">{{ $hp->project->name }}</span>
                  @if($hp->project->client)
                    <span class="text-muted small">{{ $hp->project->client->name }}</span>
                  @endif
                </span>
                @if($viewerDeptKey || $user->role === 'admin')
                  @if($hp->receiver_confirmed_at)
                    <span class="badge bg-success bg-opacity-75 me-1"><i class="bi bi-person-check me-1"></i>被交接人已確認</span>
                  @elseif($hp->receiver_id)
                    <span class="badge bg-light text-secondary border me-1"><i class="bi bi-person-dash me-1"></i>待被交接人確認</span>
                  @endif
                @endif
                @if($viewerDeptKey)
                  @if($allConfirmed)
                    <span class="badge bg-success me-3 proj-confirm-badge" data-proj="{{ $hp->id }}">已確認（{{ $confirmedCount }}/{{ $totalCount }}）</span>
                  @elseif($confirmedCount > 0)
                    <span class="badge bg-warning text-dark me-3 proj-confirm-badge" data-proj="{{ $hp->id }}">確認中（{{ $confirmedCount }}/{{ $totalCount }}）</span>
                  @else
                    <span class="badge bg-secondary me-3 proj-confirm-badge" data-proj="{{ $hp->id }}">待確認（0/{{ $totalCount }}）</span>
                  @endif
                @else
                  @if($allConfirmed)
                    <span class="badge bg-success me-3">全部確認</span>
                  @elseif($filledCount === $totalCount)
                    <span class="badge bg-info me-3">已填寫 {{ $filledCount }}/{{ $totalCount }}</span>
                  @elseif($filledCount > 0)
                    <span class="badge bg-warning text-dark me-3">{{ $filledCount }}/{{ $totalCount }} 已填</span>
                  @else
                    <span class="badge bg-secondary me-3">待填寫</span>
                  @endif
                @endif
              </button>
            </h2>
            <div id="proj_checklist_{{ $hp->id }}" class="accordion-collapse collapse{{ $lockedForReceiver ? ' d-none' : '' }}">
              <div class="accordion-body p-0">
                @if(($viewerDeptKey || $isApplicant || $user->role === 'admin') && $hp->receiver_id)
                <div class="px-3 py-2 border-bottom d-flex align-items-center gap-2 small
                  {{ $hp->receiver_confirmed_at ? 'bg-success bg-opacity-10 text-success' : 'bg-light text-muted' }}">
                  <i class="bi {{ $hp->receiver_confirmed_at ? 'bi-person-check-fill' : 'bi-person-dash' }}"></i>
                  <span>
                    交接給：<strong>{{ $hp->receiver?->name }}</strong>
                    @if($hp->receiver_confirmed_at)
                      — 已於 {{ $hp->receiver_confirmed_at->format('Y-m-d H:i') }} 確認交接完成
                    @else
                      — 尚未確認交接完成
                    @endif
                  </span>
                  @if(!$hp->receiver_confirmed_at && ($isApplicant || $viewerDeptKey || $user->role === 'admin') && !in_array($handover->status, ['draft','approved','rejected']))
                  <form action="{{ route('handovers.remind-receiver', [$handover, $hp]) }}" method="POST" class="ms-auto">
                    @csrf
                    <button type="submit" class="btn btn-xs btn-outline-warning py-0 px-2"
                            style="font-size:.72rem;"
                            onclick="return confirm('確定再次寄送通知給 {{ $hp->receiver?->name }}？')">
                      <i class="bi bi-bell me-1"></i>再次通知
                    </button>
                  </form>
                  @endif
                </div>
                @endif
                @if($isApplicant || $user->role === 'admin')
                <div class="px-3 pt-3 pb-2 border-bottom bg-light">
                  <div class="row g-2">
                    <div class="col-sm-6">
                      <label class="form-label fw-semibold mb-1 small">交接給</label>
                      @if($handover->isEditable() && $isApplicant)
                        <select name="projects[{{ $hp->id }}][receiver_id]" class="form-select form-select-sm receiver-select">
                          <option value="">— 未指定 —</option>
                          @foreach($colleagues->groupBy('department') as $dept => $members)
                            <optgroup label="{{ $dept ?: '（未分組）' }}">
                              @foreach($members as $c)
                                <option value="{{ $c->id }}" {{ $hp->receiver_id == $c->id ? 'selected' : '' }}>{{ $c->name }}</option>
                              @endforeach
                            </optgroup>
                          @endforeach
                        </select>
                      @else
                        <div class="form-control-sm ps-0 text-muted">{{ $hp->receiver?->name ?? '—' }}</div>
                      @endif
                    </div>
                    <div class="col-sm-6">
                      <label class="form-label fw-semibold mb-1 small">備註</label>
                      @if($handover->isEditable() && $isApplicant)
                        <input type="text" name="projects[{{ $hp->id }}][notes]"
                          class="form-control form-control-sm"
                          value="{{ $hp->notes }}" placeholder="備註">
                      @else
                        <div class="form-control-sm ps-0 text-muted">{{ $hp->notes ?? '—' }}</div>
                      @endif
                    </div>
                  </div>
                </div>
                @endif
                @if(isset($receiverProjectIds) && $receiverProjectIds->has($hp->id))
                <div class="px-3 py-2 border-bottom {{ $hp->receiver_confirmed_at ? 'bg-success bg-opacity-10' : 'bg-warning bg-opacity-10' }}">
                  @if($hp->receiver_confirmed_at)
                    <div class="d-flex align-items-center gap-2 small text-success">
                      <i class="bi bi-check-circle-fill"></i>
                      <span>{{ $hp->receiverConfirmer?->name }} 已於 {{ $hp->receiver_confirmed_at->format('Y-m-d H:i') }} 確認交接完成</span>
                    </div>
                  @else
                    <div class="d-flex justify-content-between align-items-center">
                      <span class="small text-warning-emphasis fw-semibold">
                        <i class="bi bi-exclamation-circle me-1"></i>尚未確認交接完成
                      </span>
                      <button class="btn btn-sm btn-success btn-confirm-receiver"
                        data-url="{{ route('handovers.confirmReceiver', [$handover, $hp]) }}"
                        data-hp="{{ $hp->id }}">
                        <i class="bi bi-check2 me-1"></i>確認已交接
                      </button>
                    </div>
                  @endif
                </div>
                @endif
                @php $projRespsByDept = $projResps->groupBy(fn($r) => $r->template->department); @endphp
                @foreach(['business'=>'專案業務組','rd'=>'軟體開發組','systems'=>'系統資安組','admin'=>'人事'] as $dept => $deptLabel)
                  @php
                    $dRs = $projRespsByDept[$dept] ?? collect();
                    $isDeptStage = $currentStage === $dept;
                    $canConfirmItem = !$isApplicant && !in_array($handover->status, ['draft','rejected'])
                        && ($user->role === 'admin' || $viewerDeptKey === $dept);
                  @endphp
                  @if($viewerDeptKey && $viewerDeptKey !== $dept) @continue @endif
                  @if($dRs->isNotEmpty())
                    <div class="px-3 pt-2 pb-0">
                      <small class="fw-bold text-secondary text-uppercase" style="font-size:.7rem;letter-spacing:.05em;">{{ $deptLabel }}</small>
                    </div>
                    <ul class="list-group list-group-flush">
                      @foreach($dRs as $resp)
                        @include('handovers._response_item', ['resp'=>$resp,'handover'=>$handover,'isApplicant'=>$isApplicant,'isThisStage'=>$isDeptStage,'canApprove'=>$canApprove,'canConfirmItem'=>$canConfirmItem])
                      @endforeach
                    </ul>
                  @endif
                @endforeach
              </div>
            </div>
          </div>
        @endforeach
      </div>
    </div>
  @endif

  {{-- ② 各組交接項目 --}}
  @php
    $globalDepts = ['business'=>'專案業務組','rd'=>'軟體開發組','systems'=>'系統資安組','admin'=>'人事'];
    $hasGlobal = collect($globalDepts)->keys()->contains(fn($d) => ($globalResponsesByDept[$d] ?? collect())->isNotEmpty()
        && (!$viewerDeptKey || $viewerDeptKey === $d));
  @endphp
  @if($hasGlobal)
  <div class="card shadow-sm mb-3">
    <div class="card-header fw-bold">
      <i class="bi bi-clipboard-check me-1"></i>各組交接項目
    </div>
    @foreach($globalDepts as $dept => $deptLabel)
      @php
        $deptResps = $globalResponsesByDept[$dept] ?? collect();
        $isThisStage = $currentStage === $dept;
        $canConfirmItem = !$isApplicant && !in_array($handover->status, ['draft','rejected'])
            && ($user->role === 'admin' || $viewerDeptKey === $dept);
      @endphp
      @if($viewerDeptKey && $viewerDeptKey !== $dept) @continue @endif
      @if($deptResps->isNotEmpty())
        <div class="px-3 pt-3 pb-1 {{ $isThisStage ? 'bg-warning bg-opacity-10' : '' }}">
          <div class="d-flex align-items-center gap-2">
            <small class="fw-bold text-secondary text-uppercase" style="font-size:.75rem;letter-spacing:.05em;">{{ $deptLabel }}</small>
            @if($isThisStage)<span class="badge bg-warning text-dark ms-1">審核中</span>@endif
          </div>
        </div>
        <ul class="list-group list-group-flush">
          @foreach($deptResps as $resp)
            @include('handovers._response_item', ['resp'=>$resp,'handover'=>$handover,'isApplicant'=>$isApplicant,'isThisStage'=>$isThisStage,'canApprove'=>$canApprove,'canConfirmItem'=>$canConfirmItem])
          @endforeach
        </ul>
      @endif
    @endforeach
  </div>
  @endif

  {{-- ③ 設備交接 --}}
  @php
    $canSeeAssets = $isApplicant || $user->role === 'admin'
                  || $viewerDeptKey === 'systems' || $viewerDeptKey === 'admin';
    $deptLabels   = \App\Models\Asset::CONFIRM_DEPTS;
  @endphp
  @if($canSeeAssets)
  <div class="card shadow-sm mb-3">
    <div class="card-header fw-bold d-flex justify-content-between align-items-center">
      <span><i class="bi bi-box-seam me-1"></i>設備交接（{{ $handover->assets->count() }}）</span>
      @php $unreturnedCount = $handover->assets->where('returned', false)->count(); @endphp
      @if($unreturnedCount > 0)
        <span class="badge bg-danger asset-unreturned-count">{{ $unreturnedCount }} 項未歸還</span>
      @else
        <span class="badge bg-success asset-unreturned-count">全部歸還</span>
      @endif
    </div>
    @if($handover->assets->isEmpty())
      <div class="card-body text-muted small">無需歸還設備</div>
    @else
      <div class="table-responsive">
        <table class="table table-sm align-middle mb-0">
          <thead class="table-light"><tr>
            <th>資產名稱</th><th>序號</th><th>負責組</th><th>狀態</th><th>確認人</th>
            @if($user->role !== 'user' || $viewerDeptKey)<th></th>@endif
          </tr></thead>
          <tbody>
            @foreach($handover->assets as $ha)
            @php
              $canConfirmThis = $user->role === 'admin'
                || ($viewerDeptKey === $ha->confirm_dept);
            @endphp
            <tr data-asset="{{ $ha->id }}">
              <td class="small fw-semibold">{{ $ha->asset->asset_name }}</td>
              <td class="small text-muted">{{ $ha->asset->asset_sn ?? '—' }}</td>
              <td>
                <span class="badge {{ $ha->confirm_dept === 'admin' ? 'bg-info' : 'bg-secondary' }} text-white small">
                  {{ $deptLabels[$ha->confirm_dept] ?? $ha->confirm_dept }}
                </span>
              </td>
              <td>
                @if($ha->returned)
                  <span class="badge bg-success asset-badge">已歸還</span>
                @else
                  <span class="badge bg-danger asset-badge">待歸還</span>
                @endif
              </td>
              <td class="small asset-confirmer">
                {{ $ha->confirmer?->name ?? '—' }}
                @if($ha->confirmed_at)<div class="text-muted">{{ $ha->confirmed_at->format('m/d H:i') }}</div>@endif
              </td>
              @if($user->role !== 'user' || $viewerDeptKey)
                <td class="asset-action">
                  @if(!$ha->returned && $canConfirmThis)
                    <button class="btn btn-sm btn-outline-success btn-confirm-asset"
                      data-url="{{ route('handovers.confirmAsset', [$handover, $ha]) }}">
                      確認歸還
                    </button>
                  @endif
                </td>
              @endif
            </tr>
            @endforeach
          </tbody>
        </table>
      </div>
    @endif
  </div>
  @endif

  {{-- ④ 門禁卡 --}}
  @php
    $canSeeCard = $isApplicant || $user->role === 'admin' || $viewerDeptKey === null || $viewerDeptKey === 'admin';
    // 門禁卡由營運長確認：admin role 或 boss stage 指定審核人（viewerDeptKey=null, 非申請人）
    $canConfirmCard = ($user->role === 'admin' || ($viewerDeptKey === null && !$isApplicant))
                    && !in_array($handover->status, ['draft','rejected']);
  @endphp
  @if($canSeeCard)
  <div class="card shadow-sm mb-3">
    <div class="card-header fw-bold d-flex justify-content-between align-items-center">
      <span><i class="bi bi-person-badge me-1"></i>門禁卡</span>
      @if($handover->access_card_returned)
        <span class="badge bg-success">已繳回</span>
      @else
        <span class="badge bg-danger">未繳回</span>
      @endif
    </div>
    <div class="card-body py-2">
      <div class="row g-2 align-items-center">
        <div class="col-md-4">
          <small class="text-muted">卡號</small>
          <div class="fw-semibold">{{ $handover->access_card_number ?: '（未填寫）' }}</div>
        </div>
        <div class="col-md-4">
          <small class="text-muted">狀態</small>
          <div>
            @if($handover->access_card_returned)
              <span class="text-success fw-semibold"><i class="bi bi-check-circle me-1"></i>已繳回</span>
              @if($handover->access_card_returned_at)
                <small class="text-muted ms-1">{{ $handover->access_card_returned_at->format('Y-m-d H:i') }}</small>
              @endif
              @if($confirmer = \App\Models\User::find($handover->access_card_confirmed_by))
                <small class="text-muted ms-1">（{{ $confirmer->name }} 確認）</small>
              @endif
            @else
              <span class="text-danger fw-semibold"><i class="bi bi-x-circle me-1"></i>尚未繳回</span>
            @endif
          </div>
        </div>
        @if($canConfirmCard && !$handover->access_card_returned)
          <div class="col-md-4 text-end">
            <form method="POST" action="{{ route('handovers.confirmAccessCard', $handover) }}" class="d-inline">
              @csrf
              <button type="submit" class="btn btn-sm btn-success"
                onclick="return confirm('確認門禁卡已繳回？')">
                <i class="bi bi-check-lg me-1"></i>確認已繳回
              </button>
            </form>
          </div>
        @endif
      </div>
    </div>
  </div>
  @endif

  @if($handover->isEditable() && $isApplicant)
    <div class="d-flex justify-content-end gap-2">
      <button type="submit" class="btn btn-outline-primary">
        <i class="bi bi-save me-1"></i>儲存所有交接項目
      </button>
      @if(in_array($handover->status, ['draft', 'rejected']))
        @php $confirmMsg = $handover->status === 'rejected' ? '確定重新送出？將從專案業務組重新開始審核。' : '確定送出交接申請？送出後若第一關已開始審核即無法修改。'; @endphp
        <button type="button" class="btn btn-primary" id="btnSubmitAfterSave"
          data-confirm="{{ $confirmMsg }}"
          data-action="{{ route('handovers.update', $handover) }}?_submit_after_save=1">
          <i class="bi bi-send me-1"></i>{{ $handover->status === 'rejected' ? '儲存並重新送出審核' : '儲存並送出審核' }}
        </button>
      @endif
    </div>
  @endif
</form>

{{-- Approval action (for supervisor / boss) --}}
@if($canApprove && $currentApproval)
  @php
    $assetsBlocking = in_array($currentApproval->stage, ['systems','admin'])
      && $handover->assets->where('confirm_dept', $currentApproval->stage)->where('returned', false)->count() > 0;
    $blockingCount  = $assetsBlocking
      ? $handover->assets->where('confirm_dept', $currentApproval->stage)->where('returned', false)->count()
      : 0;
  @endphp
  <div class="card border-primary shadow-sm mt-2">
    <div class="card-header bg-primary bg-opacity-10 fw-bold text-primary">
      <i class="bi bi-pen me-1"></i>審核操作（{{ $currentApproval->stageLabel() }}）
    </div>
    <div class="card-body">
      @if($assetsBlocking)
        <div class="alert alert-warning mb-3 small">
          <i class="bi bi-exclamation-triangle me-1"></i>
          需確認本組負責的資產全數歸還後方可核准。尚有 {{ $blockingCount }} 項未歸還。
        </div>
      @endif

      {{-- Single form, two submit buttons with different formaction --}}
      <form method="POST">
        @csrf
        <div class="mb-3">
          <label class="form-label fw-semibold">審核意見</label>
          <textarea name="comment" class="form-control" rows="3"
            placeholder="請填寫審核意見…（退回時必填）"></textarea>
          @error('comment')
            <div class="text-danger small mt-1">{{ $message }}</div>
          @enderror
        </div>
        <div class="d-flex justify-content-end gap-2">
          <button type="submit"
            formaction="{{ route('handovers.reject', $handover) }}"
            class="btn btn-outline-danger px-4">
            <i class="bi bi-x-lg me-1"></i>退回
          </button>
          <button type="submit"
            formaction="{{ route('handovers.approve', $handover) }}"
            class="btn btn-success px-4"
            {{ $assetsBlocking ? 'disabled' : '' }}>
            <i class="bi bi-check-lg me-1"></i>核准
          </button>
        </div>
      </form>
    </div>
  </div>
@endif

{{-- Approval history --}}
@if($handover->approvals->where('status','!=','pending')->isNotEmpty())
  <div class="card shadow-sm mt-4">
    <div class="card-header fw-semibold">審核紀錄</div>
    <div class="table-responsive">
      <table class="table table-sm align-middle mb-0">
        <thead class="table-light"><tr>
          <th>關卡</th><th>審核人</th><th>結果</th><th>意見</th><th>時間</th>
        </tr></thead>
        <tbody>
          @foreach($handover->approvals->where('status','!=','pending') as $ap)
          <tr>
            <td>{{ $ap->stageLabel() }}</td>
            <td>{{ $ap->approver?->name ?? '—' }}</td>
            <td>
              @if($ap->status === 'approved')
                <span class="badge bg-success">核准</span>
              @else
                <span class="badge bg-danger">退回</span>
              @endif
            </td>
            <td class="small">{{ $ap->comment ?? '—' }}</td>
            <td class="text-muted small">{{ $ap->decided_at?->format('Y-m-d H:i') }}</td>
          </tr>
          @endforeach
        </tbody>
      </table>
    </div>
  </div>
@endif


@if($handover->excluded_projects && count($handover->excluded_projects) > 0)
  <div class="alert alert-secondary border mt-3">
    <div class="fw-semibold mb-1 small">
      <i class="bi bi-slash-circle me-1"></i>申請人已排除以下專案（不納入本次交接）：
    </div>
    <ul class="mb-0 ps-3 list-unstyled">
      @foreach($handover->excluded_projects as $ep)
        <li class="small text-muted d-flex align-items-center gap-2 py-1">
          <span>
            @if(!empty($ep['client']))<span class="text-secondary">{{ $ep['client'] }} /</span>@endif
            {{ $ep['name'] }}
          </span>
          @if($handover->isEditable() && $isApplicant)
            <form action="{{ route('handovers.includeProject', $handover) }}" method="POST" class="m-0">
              @csrf
              <input type="hidden" name="project_id" value="{{ $ep['id'] }}">
              <button type="submit" class="btn btn-outline-success btn-sm py-0 px-2"
                      style="font-size:.75rem"
                      onclick="return confirm('將「{{ $ep['name'] }}」補回交接清單？')">
                <i class="bi bi-plus-circle me-1"></i>補回
              </button>
            </form>
          @endif
        </li>
      @endforeach
    </ul>
  </div>
@endif

</div>

@push('styles')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet">
<style>
.select2-container { width: 100% !important; }
</style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
$(document).ready(function() {

  // ── 儲存並送出審核：把旗標放進 URL，繞過 max_input_vars 限制 ──
  var btnSubmit = document.getElementById('btnSubmitAfterSave');
  if (btnSubmit) {
    btnSubmit.addEventListener('click', function() {
      if (!confirm(this.dataset.confirm)) return;
      var form = document.querySelector('form[enctype="multipart/form-data"]');
      form.action = this.dataset.action;
      form.submit();
    });
  }

  $('.receiver-select').select2({
    theme: 'bootstrap-5',
    placeholder: '— 未指定 —',
    allowClear: true,
    width: '100%',
  });

  // ── 是否題即時儲存 ──────────────────────────────────────────
  document.querySelectorAll('.yesno-radio').forEach(function(radio) {
    radio.addEventListener('change', function() {
      var url    = this.dataset.saveUrl;
      var val    = this.value;
      var respId = this.name.match(/\[(\d+)\]/)[1];
      fetch(url, {
        method: 'POST',
        headers: {
          'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
          'Content-Type': 'application/json',
          'Accept': 'application/json',
        },
        body: JSON.stringify({ value: val }),
      }).then(function(r) {
        if (r.ok) {
          var badge = document.querySelector('.resp-badge[data-resp="' + respId + '"]');
          if (badge) {
            badge.className = 'badge bg-info resp-badge';
            badge.setAttribute('data-resp', respId);
            badge.textContent = '已填寫';
          }
        }
      });
    });
  });
});
</script>
<style>
@keyframes drawCircle {
  from { stroke-dashoffset: 339.3; }
  to   { stroke-dashoffset: 0; }
}
@keyframes popIn {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
</style>
<script>
function ajaxPost(url) {
  return fetch(url, {
    method: 'POST',
    headers: {
      'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
      'Accept': 'application/json',
    },
  }).then(function (r) { return r.ok ? r.json() : Promise.reject(r); });
}

document.addEventListener('click', function (e) {

  // ── 確認交接項目 ──────────────────────────────────────────
  var respBtn = e.target.closest('.btn-confirm-resp');
  if (respBtn) {
    e.preventDefault();
    respBtn.disabled = true;
    respBtn.textContent = '處理中…';

    ajaxPost(respBtn.dataset.url)
      .then(function (data) {
        var badge = document.querySelector('.resp-badge[data-resp="' + data.response_id + '"]');
        if (badge) { badge.className = 'badge bg-success resp-badge'; badge.textContent = '已確認'; }

        var meta = document.querySelector('.confirm-meta[data-resp="' + data.response_id + '"]');
        if (meta) {
          meta.innerHTML = '<div class="text-muted small">✓ ' + data.confirmed_by + ' 確認於 ' + data.confirmed_at + '</div>';
        }

        // update project accordion badge
        if (data.project) {
          var projBadge = document.querySelector('.proj-confirm-badge[data-proj="' + data.project.project_id + '"]');
          if (projBadge) {
            var c = data.project.confirmed_count, t = data.project.total_count;
            if (c >= t) {
              projBadge.className = 'badge bg-success me-3 proj-confirm-badge';
              projBadge.setAttribute('data-proj', data.project.project_id);
              projBadge.textContent = '已確認（' + c + '/' + t + '）';
            } else if (c > 0) {
              projBadge.className = 'badge bg-warning text-dark me-3 proj-confirm-badge';
              projBadge.setAttribute('data-proj', data.project.project_id);
              projBadge.textContent = '確認中（' + c + '/' + t + '）';
            }
          }
        }
      })
      .catch(function () {
        respBtn.disabled = false;
        respBtn.textContent = '確認此項';
        alert('操作失敗，請重試。');
      });
  }

  // ── 被交接人確認 ──────────────────────────────────────────
  var recvBtn = e.target.closest('.btn-confirm-receiver');
  if (recvBtn) {
    e.preventDefault();
    recvBtn.disabled = true;
    recvBtn.textContent = '處理中…';

    ajaxPost(recvBtn.dataset.url)
      .then(function (data) {
        var wrap = recvBtn.closest('.bg-warning');
        if (wrap) {
          wrap.className = wrap.className.replace('bg-warning bg-opacity-10', 'bg-success bg-opacity-10');
          wrap.innerHTML = '<div class="d-flex align-items-center gap-2 small text-success">'
            + '<i class="bi bi-check-circle-fill"></i>'
            + '<span>' + data.confirmed_by + ' 已於 ' + data.confirmed_at + ' 確認交接完成</span>'
            + '</div>';
        }
      })
      .catch(function () {
        recvBtn.disabled = false;
        recvBtn.textContent = '確認已交接';
        alert('操作失敗，請重試。');
      });
  }

  // ── 確認資產歸還 ──────────────────────────────────────────
  var assetBtn = e.target.closest('.btn-confirm-asset');
  if (assetBtn) {
    e.preventDefault();
    assetBtn.disabled = true;
    assetBtn.textContent = '處理中…';

    ajaxPost(assetBtn.dataset.url)
      .then(function (data) {
        var row = assetBtn.closest('tr');

        var badge = row.querySelector('.asset-badge');
        if (badge) { badge.className = 'badge bg-success asset-badge'; badge.textContent = '已歸還'; }

        var confirmer = row.querySelector('.asset-confirmer');
        if (confirmer) { confirmer.innerHTML = data.confirmed_by + '<div class="text-muted">' + data.confirmed_at + '</div>'; }

        var action = row.querySelector('.asset-action');
        if (action) { action.innerHTML = ''; }

        // update unreturned counter in card header
        var counter = document.querySelector('.asset-unreturned-count');
        if (counter && data.unreturned_count !== undefined) {
          if (data.unreturned_count > 0) {
            counter.className = 'badge bg-danger';
            counter.textContent = data.unreturned_count + ' 項未歸還';
          } else {
            counter.className = 'badge bg-success';
            counter.textContent = '全部歸還';
          }
        }
      })
      .catch(function () {
        assetBtn.disabled = false;
        assetBtn.textContent = '確認歸還';
        alert('操作失敗，請重試。');
      });
  }

  // show selected filename next to attachment input
  document.querySelectorAll('input[type="file"][name^="attachments["]').forEach(function(input) {
    input.addEventListener('change', function () {
      const respId = this.name.match(/\[(\d+)\]/)[1];
      const span = document.querySelector('.selected-file-name[data-resp="' + respId + '"]');
      if (span) span.textContent = this.files[0] ? this.files[0].name : '';
    });
  });

});
</script>
@endpush

@endsection