@extends('layouts.app')
@section('title', '查詢資產管理者的設備清單')

@section('content')
<div class="container-fluid py-3">
  <div class="row g-3">

    {{-- ── 左側選單 ── --}}
    <div class="col-md-2">

      {{-- 分類篩選（有選到人才顯示） --}}
      @isset($selectedUser)
      <div class="card shadow-sm mb-3">
        <div class="card-header py-2 fw-semibold">分類篩選</div>
        <div class="card-body p-2">
          @php $baseQuery = ['manager_id' => $selectedUser->id]; @endphp
          <a href="{{ route('assets.byuser.result', $baseQuery) }}"
             class="btn btn-outline-secondary cat-btn w-100 text-start mb-1 {{ !$activeCategory ? 'active' : '' }}">
            <i class="bi bi-grid me-1"></i>全部
          </a>
          @foreach($categories as $cat)
            @php
              $icon = match($cat) {
                '硬體'     => 'bi-cpu',
                '軟體'     => 'bi-code-slash',
                '人員'     => 'bi-people',
                '基礎建設' => 'bi-building',
                '資訊'     => 'bi-database',
                default    => 'bi-tag',
              };
            @endphp
            <a href="{{ route('assets.byuser.result', array_merge($baseQuery, ['category' => $cat])) }}"
               class="btn btn-outline-secondary cat-btn w-100 text-start mb-1 {{ $activeCategory === $cat ? 'active' : '' }}">
              <i class="bi {{ $icon }} me-1"></i>{{ $cat }}
            </a>
          @endforeach
        </div>
      </div>
      @endisset

      {{-- 操作 --}}
      @isset($selectedUser)
      <div class="card shadow-sm">
        <div class="card-header py-2 fw-semibold">操作</div>
        <div class="card-body p-2">
          <form action="{{ route('assets.byuser.export') }}" method="GET">
            <input type="hidden" name="manager_id" value="{{ $selectedUser->id }}">
            <button class="btn btn-success btn-sm w-100">
              <i class="bi bi-download me-1"></i>匯出交接清單
            </button>
          </form>
        </div>
      </div>
      @endisset

    </div>

    {{-- ── 右側內容 ── --}}
    <div class="col-md-10">
      <h3 class="mb-4">📋 查詢資產管理者的設備清單</h3>

      {{-- Admin 搜尋表單 --}}
      @if (auth()->user()->role === 'admin')
        <form method="GET" action="{{ route('assets.byuser.result') }}" class="row gy-2 gx-2 mb-4">
          <div class="col-md-4">
            <select name="manager_id" class="form-select form-select-sm" required>
              <option value="">— 請選擇資產管理者 —</option>
              @foreach ($users as $department => $groupedUsers)
                <optgroup label="{{ $department }}">
                  @foreach ($groupedUsers as $user)
                    <option value="{{ $user->id }}"
                      {{ isset($selectedUser) && $selectedUser->id == $user->id ? 'selected' : '' }}>
                      {{ $user->name }}
                    </option>
                  @endforeach
                </optgroup>
              @endforeach
            </select>
          </div>
          <div class="col-auto">
            <button class="btn btn-primary btn-sm" type="submit">
              <i class="bi bi-search me-1"></i>查詢
            </button>
          </div>
        </form>
      @endif

      {{-- 資產清單 --}}
      @isset($selectedUser)
        <div class="d-flex align-items-center gap-2 mb-3">
          <h5 class="mb-0">
            <i class="bi bi-person-fill me-1 text-primary"></i>
            <strong>{{ $selectedUser->name }}</strong>
            {{ $activeCategory ? '— ' . $activeCategory : '' }} 的資產清單
          </h5>
          <span class="badge bg-secondary">{{ $assets->count() }} 筆</span>
        </div>

        <div class="card shadow-sm">
          <div class="card-body p-0 table-responsive">
            <table id="dt" class="table table-bordered table-hover align-middle mb-0">
              <thead class="table-light">
                <tr class="text-nowrap">
                  <th class="text-center text-muted" style="width:48px;font-size:.75rem;">#</th>
                  <th>分類</th>
                  <th>設備名稱</th>
                  <th>序號</th>
                  <th>C&nbsp;I&nbsp;A</th>
                  <th>位置</th>
                  <th>可外借</th>
                  <th>報修</th>
                </tr>
              </thead>
              <tbody>
                @forelse($assets as $a)
                  @php
                    $latestRepair = \App\Models\RepairRequest::where('asset_id', $a->id)
                        ->where('user_id', auth()->id())
                        ->latest()->first();
                  @endphp
                  <tr>
                    <td class="text-center text-muted" style="font-size:.75rem;">{{ $loop->iteration }}</td>
                    <td>{{ $a->category }}</td>
                    <td>{{ $a->asset_name }}</td>
                    <td>{{ $a->asset_sn }}</td>
                    <td class="text-nowrap">
                      <span class="badge bg-info">{{ $a->confidentiality }}</span>
                      <span class="badge bg-success">{{ $a->integrity }}</span>
                      <span class="badge bg-warning text-dark">{{ $a->availability }}</span>
                    </td>
                    <td>{{ $a->location }}</td>
                    <td>{{ $a->lendable ? '✅' : '❌' }}</td>
                    <td class="text-nowrap">
                      @if ($latestRepair && $latestRepair->status !== 'resolved')
                        @if($latestRepair->status === 'pending')
                          <span class="badge bg-warning text-dark">⚠️ 待處理</span>
                        @elseif($latestRepair->status === 'in_progress')
                          <span class="badge bg-primary">🔧 維修中</span>
                        @endif
                      @else
                        <a href="{{ route('assets.report.form', $a->id) }}" class="btn btn-sm btn-outline-danger py-0 px-2">
                          🛠️ 報修
                        </a>
                      @endif
                    </td>
                  </tr>
                @empty
                  <tr>
                    <td colspan="8" class="text-center text-muted py-4">無資產資料</td>
                  </tr>
                @endforelse
              </tbody>
            </table>
          </div>
        </div>

        {{-- CIA 說明 --}}
        <div class="mt-3">
          <small class="text-muted d-flex flex-wrap align-items-center gap-3">
            <span>備註：</span>
            <span class="d-flex align-items-center gap-1">
              <i class="bi bi-lock-fill"></i>
              <span class="badge rounded-pill bg-primary">C</span> 機密
            </span>
            <span class="vr"></span>
            <span class="d-flex align-items-center gap-1">
              <i class="bi bi-shield-check"></i>
              <span class="badge rounded-pill bg-success">I</span> 完整
            </span>
            <span class="vr"></span>
            <span class="d-flex align-items-center gap-1">
              <i class="bi bi-speedometer2"></i>
              <span class="badge rounded-pill bg-warning text-dark">A</span> 可用
            </span>
            <span class="vr"></span>
            <span>等級：1（最低）～ 5（最高）</span>
          </small>
        </div>
      @endisset

    </div>{{-- .col-md-10 --}}
  </div>{{-- .row --}}
</div>
@endsection

@push('styles')
<style>
.cat-btn { font-size:.85rem; border-radius:6px; transition:background .12s; }
.cat-btn.active { background:#0d6efd; color:#fff; border-color:#0d6efd; }
.cat-btn:hover:not(.active) { background:#e9ecef; }
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', () => {
  if (document.querySelector('#dt')) {
    new DataTable('#dt', {
      language: { url: '/vendor/datatables/i18n/zh-HANT.json' },
      ordering: true,
      pageLength: 10,
      columnDefs: [
        { orderable: false, searchable: false, targets: [0] },
        { render: (_, __, ___, meta) => meta.row + 1, targets: 0 },
      ],
    });
  }
});
</script>
@endpush