@props(['folder', 'cards']) {{-- $cards 為 Collection<Card> --}}

@php
  $preview = $cards->take(4); // 取前 4 張做封面縮圖
  $canvasId = 'folderCanvas' . $folder->id; // Offcanvas 唯一 ID
@endphp

{{-- ===== 資料夾縮圖卡 ===== --}}
<div class="card shadow-sm folder-thumb" data-bs-toggle="offcanvas" data-bs-target="#{{ $canvasId }}"
  style="cursor:pointer; overflow:hidden">
  <div class="card-body text-center p-0 position-relative">

    {{-- 大資料夾 Icon --}}
    <div class="folder-icon bg-warning bg-opacity-25 w-100 py-4">
      <i class="bi bi-folder2-open fs-1 text-warning"></i>
    </div>

    {{-- ★ 封面小圖示：以 2×2 Grid 疊在下半部 ★ --}}
    <div class="folder-preview-icon position-absolute start-50 translate-middle-x">
      @foreach ($preview as $idx => $c)
        <i class="bi {{ $c->icon ?? 'bi-app' }}"></i>
      @endforeach
      {{-- 不足 4 顆補空格，保持方格對齊 --}}
      @for ($i = $preview->count(); $i < 4; $i++)
        <i class="bi bi-dot opacity-0"></i>
      @endfor
    </div>

    {{-- 資料夾名稱 --}}
    <h6 class="small my-2">{{ $folder->name }}</h6>
  </div>
</div>

{{-- Off-canvas 內容 --}}
<div class="offcanvas offcanvas-bottom h-75" tabindex="-1" id="{{ $canvasId }}">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title"><i class="bi bi-folder2-open me-1"></i>{{ $folder->name }}</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>

  <div class="offcanvas-body">
    <div class="row g-3">
      @foreach ($cards as $card)
        <div class="col-6 col-md-4 col-lg-3">

          {{-- 若卡片有自訂 blade_view → 仍用原樣式 --}}
          @if (isset($card->blade_view) && $card->blade_view)
            @include($card->blade_view, ['card' => $card])
          @else
            {{-- ====== fallback 卡片（★加上小圖示，但版型沿用舊卡片）====== --}}
            <div class="card h-100 shadow-sm">
              <div class="card-body d-flex flex-column align-items-center text-center">

                {{-- ★★ 小圖示：放在卡片頂部；icon 欄位不存在則顯示 bi-app --}}
                <i class="bi {{ $card->icon ?? 'bi-app' }} fs-2 mb-2 text-primary"></i>

                <h6 class="card-title small flex-grow-1">{{ $card->name }}</h6>

                @if ($card->route_name)
                  <a href="{{ route($card->route_name) }}" class="btn btn-success w-100 mt-auto">進入</a>
                @endif
              </div>
            </div>
          @endif

        </div>
      @endforeach
    </div>
  </div>
</div>