@extends('layouts.app')
@section('title', $category->name . ' — ' . $systemName)

@push('styles')
@include('isms._drive_styles')
@endpush

@section('content')
<div class="drive-wrap">

  {{-- ── Sidebar ── --}}
  @include('isms._sidebar')

  {{-- ── Main ── --}}
  <section class="drive-main" id="drivemain" aria-label="{{ $category->name }} 文件區域">

    @if(session('success'))
      <div class="alert alert-success alert-dismissible fade show py-2 mb-3" style="font-size:.84rem;">
        {{ session('success') }}<button type="button" class="btn-close btn-sm" data-bs-dismiss="alert"></button>
      </div>
    @endif

    <div id="mainContent">

    {{-- Section title (breadcrumb) --}}
    <div class="drive-section-title">
      <a href="{{ route($routePrefix . '.index') }}"
         style="color:var(--bs-secondary-color);font-size:.95rem;text-decoration:none;">{{ $systemName }}</a>
      @if($category->parent)
        <i class="bi bi-chevron-right" style="font-size:.75rem;opacity:.5;margin:0 2px;"></i>
        <a href="{{ route($routePrefix . '.category', $category->parent) }}"
           style="color:var(--bs-secondary-color);font-size:.95rem;text-decoration:none;">{{ $category->parent->name }}</a>
      @endif
      <i class="bi bi-chevron-right" style="font-size:.75rem;opacity:.5;margin:0 2px;"></i>
      <span>{{ $category->name }}</span>
    </div>

    {{-- Filter chips + view toggle --}}
    <div class="drive-filters">
      <div class="view-toggle">
        <button class="vt-btn" id="btnGrid" title="格子" onclick="setView('grid')">
          <i class="bi bi-grid-3x3-gap-fill"></i>
        </button>
        <button class="vt-btn" id="btnList" title="清單" onclick="setView('list')">
          <i class="bi bi-list-ul"></i>
        </button>
      </div>
    </div>

    @if($children->isEmpty() && $documents->isEmpty())
      <div class="drive-empty">
        <i class="bi bi-folder2-open"></i>
        此目錄目前沒有內容
        @if($isAdmin)
          <br><a href="{{ route($routePrefix . '.create') }}?category={{ $category->id }}"
                 class="btn btn-primary btn-sm mt-3">上傳文件</a>
        @endif
      </div>
    @else

      {{-- ===== GRID VIEW ===== --}}
      <div id="viewGrid">

        @if($children->isNotEmpty())
          <div class="section-hdr">子目錄</div>
          <div class="file-grid mb-4">
            @foreach($children as $child)
              @php $count = $isAdmin ? $child->total_docs : $child->published_docs; @endphp
              <a href="{{ route($routePrefix . '.category', $child) }}"
                 class="file-card" data-id="{{ $child->id }}" data-type="folder"
                 style="text-decoration:none;color:inherit;">
                <div class="card-fi">
                  <i class="bi bi-folder-fill" style="font-size:2.8rem;color:#f9ab00;"></i>
                </div>
                <div class="fname" title="{{ $child->name }}">{{ $child->name }}</div>
                <div class="fmeta">{{ $count }} 份文件</div>
                <div class="factions">
                  <span class="btn btn-sm btn-outline-secondary">開啟</span>
                </div>
              </a>
            @endforeach
          </div>
        @endif

        @if($documents->isNotEmpty())
          <div class="section-hdr">文件</div>
          <div class="file-grid">
            @foreach($documents as $doc)
              <a href="{{ route($routePrefix . '.show', $doc) }}"
                 class="file-card" data-id="{{ $doc->id }}" data-type="doc"
                 style="text-decoration:none;color:inherit;">
                <div class="card-fi">
                  <i class="bi bi-file-earmark-text-fill" style="font-size:2.8rem;color:#1a73e8;"></i>
                </div>
                <div class="fname" title="{{ $doc->title }}">{{ $doc->title }}</div>
                <div class="fmeta">
                  {{ $doc->updated_at->format('Y-m-d') }}
                  @if(!$doc->is_published)
                    <span class="badge bg-warning text-dark" style="font-size:.6rem;vertical-align:middle;">草稿</span>
                  @endif
                </div>
                <div class="factions">
                  <span class="btn btn-sm btn-primary">開啟</span>
                </div>
              </a>
            @endforeach
          </div>
        @endif

      </div>{{-- #viewGrid --}}

      {{-- ===== LIST VIEW ===== --}}
      <div id="viewList" style="display:none;">
        <div class="gd-list">
          <div class="gd-list-header">
            <div class="gd-col-name gd-list-hcol">名稱</div>
            <div class="gd-col-type gd-list-hcol">類型</div>
            <div class="gd-col-owner gd-list-hcol">擁有者</div>
            <div class="gd-col-date gd-list-hcol">修改日期</div>
            <div class="gd-col-acts"></div>
          </div>

          {{-- 子目錄 rows --}}
          @foreach($children as $child)
            <a href="{{ route($routePrefix . '.category', $child) }}" class="gd-list-row">
              <div class="gd-col-name">
                <div class="gd-ico">
                  <i class="bi bi-folder-fill" style="color:#f9ab00;"></i>
                </div>
                <span class="fname">{{ $child->name }}</span>
              </div>
              <div class="gd-col-type">目錄</div>
              <div class="gd-col-owner">{{ $systemName }}</div>
              <div class="gd-col-date">{{ $child->updated_at->format('Y-m-d') }}</div>
              <div class="gd-col-acts">
                <span class="btn btn-sm btn-primary py-0 px-2">開啟</span>
              </div>
            </a>
          @endforeach

          {{-- 文件 rows --}}
          @foreach($documents as $doc)
            <div class="gd-list-row" style="position:relative;">
              <a href="{{ route($routePrefix . '.show', $doc) }}"
                 class="stretched-link" aria-label="{{ $doc->title }}"></a>
              <div class="gd-col-name" style="position:relative;z-index:1;">
                <div class="gd-ico">
                  <i class="bi bi-file-earmark-text-fill" style="color:#1a73e8;"></i>
                </div>
                <div>
                  <span class="fname">{{ $doc->title }}</span>
                  @if(!$doc->is_published)
                    <span class="badge bg-warning text-dark ms-1" style="font-size:.65rem;">草稿</span>
                  @endif
                </div>
              </div>
              <div class="gd-col-type" style="position:relative;z-index:1;">文件</div>
              <div class="gd-col-owner" style="position:relative;z-index:1;">{{ $doc->uploader?->name ?? '—' }}</div>
              <div class="gd-col-date" style="position:relative;z-index:1;">{{ $doc->updated_at->format('Y-m-d') }}</div>
              <div class="gd-col-acts" style="position:relative;z-index:2;">
                <a href="{{ route($routePrefix . '.show', $doc) }}"
                   class="btn btn-sm btn-primary py-0 px-2" title="開啟">
                  <i class="bi bi-box-arrow-up-right"></i>
                </a>
                @if($isAdmin)
                <a href="{{ route($routePrefix . '.show', $doc) }}"
                   class="btn btn-sm btn-outline-warning py-0 px-2" title="編輯">
                  <i class="bi bi-pencil"></i>
                </a>
                <form method="POST" action="{{ route($routePrefix . '.destroy', $doc) }}"
                      style="display:contents"
                      onsubmit="return confirm('確定刪除「{{ addslashes($doc->title) }}」？')">
                  @csrf @method('DELETE')
                  <button class="btn btn-sm btn-outline-danger py-0 px-2" title="刪除">
                    <i class="bi bi-trash"></i>
                  </button>
                </form>
                @endif
              </div>
            </div>
          @endforeach

        </div>
      </div>{{-- #viewList --}}

    @endif

    </div>{{-- #mainContent --}}
  </div>{{-- .drive-main --}}
</div>{{-- .drive-wrap --}}
@endsection

@push('scripts')
<script>
function setView(v) {
  var grid = document.getElementById('viewGrid');
  var list = document.getElementById('viewList');
  if (grid) grid.style.display = v === 'grid' ? '' : 'none';
  if (list) list.style.display = v === 'list' ? '' : 'none';
  var bg = document.getElementById('btnGrid');
  var bl = document.getElementById('btnList');
  if (bg) bg.classList.toggle('active', v === 'grid');
  if (bl) bl.classList.toggle('active', v === 'list');
  localStorage.setItem('isms_cat_view_{{ $system }}', v);
}
(function () {
  var saved = localStorage.getItem('isms_cat_view_{{ $system }}') || 'list';
  setView(saved);
})();
</script>
@endpush