@extends('layouts.app')
@section('title', $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="文件庫主要區域">

    @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">

    {{-- 搜尋 --}}
    <form method="GET" class="mb-3" style="max-width:480px;">
      <div class="input-group">
        <span class="input-group-text bg-transparent border-end-0"><i class="bi bi-search text-muted" style="font-size:.85rem;"></i></span>
        <input type="search" name="q" id="ismsSearch" class="form-control border-start-0"
               style="font-size:.875rem;"
               placeholder="搜尋文件名稱…"
               aria-label="搜尋文件名稱"
               value="{{ $search }}" autocomplete="off">
        @if($search)
          <a href="{{ route($routePrefix . '.index') }}" class="btn btn-outline-secondary">清除</a>
        @endif
      </div>
    </form>

    @if($search)

      {{-- ── 搜尋結果 ── --}}
      <div class="drive-section-title">
        搜尋「{{ $search }}」— {{ $searchResults->count() }} 筆
      </div>

      @if($searchResults->isEmpty())
        <div class="drive-empty">
          <i class="bi bi-file-earmark-x"></i>
          查無符合的文件
        </div>
      @else
        <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>
          @foreach($searchResults as $doc)
            @php $catName = $doc->category ? ($doc->category->parent ? $doc->category->parent->name . ' › ' . $doc->category->name : $doc->category->name) : '—'; @endphp
            <a href="{{ route($routePrefix . '.show', $doc) }}" class="gd-list-row">
              <div class="gd-col-name">
                <div class="gd-ico">
                  <i class="bi bi-file-earmark-text-fill" style="color:#1a73e8;"></i>
                </div>
                <div style="min-width:0;">
                  <div class="fname">{{ $doc->title }}@if(!$doc->is_published) <span class="badge bg-warning text-dark ms-1" style="font-size:.65rem;">草稿</span>@endif</div>
                  <div style="font-size:.7rem;color:var(--bs-secondary-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{{ $catName }}</div>
                </div>
              </div>
              <div class="gd-col-type">文件</div>
              <div class="gd-col-owner">{{ $doc->uploader?->name ?? '—' }}</div>
              <div class="gd-col-date">{{ $doc->updated_at->format('Y-m-d') }}</div>
              <div class="gd-col-acts">
                <span class="btn btn-sm btn-primary py-0 px-2" title="開啟">
                  <i class="bi bi-box-arrow-up-right"></i>
                </span>
                @if($isAdmin)
                <span class="btn btn-sm btn-outline-warning py-0 px-2" title="編輯">
                  <i class="bi bi-pencil"></i>
                </span>
                @endif
              </div>
            </a>
          @endforeach
        </div>
      @endif

    @else

      {{-- ── 目錄列表 ── --}}
      <div class="drive-section-title">{{ $systemName }}</div>

      <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($categories->isEmpty())
        <div class="drive-empty">
          <i class="bi bi-folder-x"></i>
          尚無任何目錄
          @if($isAdmin)
            <br><button class="btn btn-primary btn-sm mt-3"
                        data-bs-toggle="modal" data-bs-target="#newCatModal">
              <i class="bi bi-folder-plus me-1"></i>建立目錄
            </button>
          @endif
        </div>
      @else

        {{-- ===== GRID VIEW ===== --}}
        <div id="viewGrid">
          <div class="section-hdr">目錄</div>
          <div class="file-grid">
            @foreach($categories as $cat)
              @php $count = $isAdmin ? $cat->total_docs : $cat->published_docs; @endphp
              <a href="{{ route($routePrefix . '.category', $cat) }}"
                 class="file-card" data-title="{{ $cat->name }}"
                 style="text-decoration:none;color:inherit;">
                <div class="card-fi" style="position:relative;justify-content:center;">
                  <i class="bi bi-folder-fill" style="font-size:2.8rem;color:#f9ab00;"></i>
                  @if($cat->icon_emoji && $cat->icon_emoji !== '📁')
                    <span style="position:absolute;bottom:0;right:calc(50% - 28px);font-size:.9rem;line-height:1;">{{ $cat->icon_emoji }}</span>
                  @endif
                </div>
                <div class="fname" title="{{ $cat->name }}">{{ $cat->name }}</div>
                <div class="fmeta">
                  {{ $count }} 份文件
                  @if($cat->children->isNotEmpty()) · {{ $cat->children->count() }} 子目錄@endif
                </div>
                <div class="factions">
                  <span class="btn btn-sm btn-outline-primary">開啟</span>
                </div>
              </a>
            @endforeach
          </div>
        </div>

        {{-- ===== 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>
            @foreach($categories as $cat)
              <a href="{{ route($routePrefix . '.category', $cat) }}" class="gd-list-row">
                <div class="gd-col-name">
                  <div class="gd-ico">
                    <i class="bi bi-folder-fill" style="color:#f9ab00;font-size:1.25rem;"></i>
                  </div>
                  <span class="fname">{{ $cat->name }}</span>
                </div>
                <div class="gd-col-type">目錄</div>
                <div class="gd-col-owner">{{ $systemName }}</div>
                <div class="gd-col-date">{{ $cat->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
          </div>
        </div>

      @endif
    @endif

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

    @if($isAdmin)
    {{-- 拖曳上傳 overlay --}}
    <div id="uploadOverlay" aria-hidden="true">
      <i class="bi bi-cloud-arrow-up" style="font-size:3rem;opacity:.7;"></i>
      <span>放開以上傳檔案</span>
    </div>

    {{-- 隱藏的 file input --}}
    <label for="ismsUploadInput" class="visually-hidden">選擇上傳檔案</label>
    <input type="file" id="ismsUploadInput" multiple style="display:none;"
           onchange="handleUploadInput(this.files)">

    {{-- 上傳進度 toast --}}
    <output id="uploadToast" aria-live="polite">
      <div style="display:flex;align-items:center;justify-content:space-between;gap:8px;">
        <span id="uploadInfo" style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"></span>
        <button onclick="document.getElementById('uploadToast').style.display='none'"
                style="border:none;background:none;cursor:pointer;padding:0;line-height:1;color:var(--bs-secondary-color);font-size:1rem;" aria-label="關閉">&#x2715;</button>
      </div>
      <div style="background:var(--bs-border-color);border-radius:3px;height:5px;">
        <div id="uploadProgBar"></div>
      </div>
    </output>
    @endif

  </section>{{-- .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_view_{{ $system }}', v);
}
(function () {
  var saved = localStorage.getItem('isms_view_{{ $system }}') || 'grid';
  setView(saved);
})();

@if($isAdmin)
var UPLOAD_URL    = '{{ route($routePrefix . ".upload") }}';
var UPLOAD_CAT_ID = null;
var CSRF          = '{{ csrf_token() }}';
var _uploadDragCount = 0;

function _hasDesktopFiles(e) {
  var types = e.dataTransfer ? e.dataTransfer.types : [];
  for (var i = 0; i < types.length; i++) { if (types[i] === 'Files') return true; }
  return false;
}
function uploadDragEnter(e) {
  if (!_hasDesktopFiles(e)) return;
  _uploadDragCount++;
  if (_uploadDragCount === 1) document.getElementById('uploadOverlay').classList.add('active');
}
function uploadDragOver(e) {
  if (!_hasDesktopFiles(e)) return;
  e.preventDefault();
  e.dataTransfer.dropEffect = 'copy';
}
function uploadDragLeave(e) {
  if (!_hasDesktopFiles(e)) return;
  _uploadDragCount--;
  if (_uploadDragCount <= 0) { _uploadDragCount = 0; document.getElementById('uploadOverlay').classList.remove('active'); }
}
function uploadDrop(e) {
  if (!_hasDesktopFiles(e)) return;
  e.preventDefault();
  _uploadDragCount = 0;
  document.getElementById('uploadOverlay').classList.remove('active');
  var files = Array.from(e.dataTransfer.files);
  if (files.length) doUpload(files);
}
function handleUploadInput(fileList) {
  var files = Array.from(fileList);
  document.getElementById('ismsUploadInput').value = '';
  if (files.length) doUpload(files);
}
function doUpload(files) {
  var toast = document.getElementById('uploadToast');
  var bar   = document.getElementById('uploadProgBar');
  var info  = document.getElementById('uploadInfo');
  toast.style.display = 'flex';
  bar.style.width = '0%';
  bar.style.background = '#1a73e8';
  info.textContent = '準備上傳 ' + files.length + ' 個檔案…';
  var fd = new FormData();
  files.forEach(function(f) { fd.append('files[]', f); });
  if (UPLOAD_CAT_ID) fd.append('isms_category_id', UPLOAD_CAT_ID);
  var xhr = new XMLHttpRequest();
  xhr.open('POST', UPLOAD_URL);
  xhr.setRequestHeader('X-CSRF-TOKEN', CSRF);
  xhr.setRequestHeader('Accept', 'application/json');
  xhr.upload.onprogress = function(e) {
    if (e.lengthComputable) {
      var pct = Math.round(e.loaded / e.total * 100);
      bar.style.width = pct + '%';
      info.textContent = '上傳中 ' + pct + '%';
    }
  };
  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
      bar.style.width = '100%';
      bar.style.background = '#0f9d58';
      info.textContent = '上傳完成！';
      setTimeout(function() { toast.style.display = 'none'; location.reload(); }, 700);
    } else {
      bar.style.background = '#d93025';
      info.textContent = '上傳失敗（' + xhr.status + '）';
    }
  };
  xhr.onerror = function() {
    bar.style.background = '#d93025';
    info.textContent = '網路錯誤，請稍後再試';
  };
  xhr.send(fd);
}

(function() {
  var el = document.getElementById('drivemain');
  if (!el) return;
  el.addEventListener('dragenter', uploadDragEnter);
  el.addEventListener('dragover',  uploadDragOver);
  el.addEventListener('dragleave', uploadDragLeave);
  el.addEventListener('drop',      uploadDrop);
})();
@endif
</script>
@endpush