@extends('layouts.app')
@section('title', '📁 ISMS 目錄管理')

@section('content')
<div class="container py-4" style="max-width:900px">
  <div class="d-flex align-items-center justify-content-between mb-3">
    <h4 class="mb-0"><i class="bi bi-folder-fill me-2 text-warning"></i>ISMS 目錄管理</h4>
    <a href="{{ route('isms.index') }}" class="btn btn-sm btn-outline-secondary">
      <i class="bi bi-arrow-left me-1"></i>返回文件列表
    </a>
  </div>

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

  <div class="row g-4">
    {{-- 左欄：目前目錄樹 --}}
    <div class="col-md-7">
      <div class="card shadow-sm">
        <div class="card-header fw-semibold py-2">目前目錄（{{ $roots->count() }} 個頂層）</div>
        @if($roots->isEmpty())
        <div class="card-body text-muted text-center py-4">尚無目錄</div>
        @else
        <div class="list-group list-group-flush">
          @foreach($roots as $root)
          {{-- 頂層 --}}
          <div class="list-group-item p-0">
            <div class="d-flex align-items-center justify-content-between px-3 py-2">
              <span class="fw-semibold">
                {{ $root->icon_emoji }}  {{ $root->name }}
                <span class="badge bg-secondary ms-1 fw-normal">{{ $root->documents_count }} 份</span>
              </span>
              <div class="d-flex gap-1">
                <button class="btn btn-xs btn-outline-secondary btn-sm py-0 px-2"
                        data-bs-toggle="modal" data-bs-target="#editCatModal"
                        data-id="{{ $root->id }}"
                        data-name="{{ $root->name }}"
                        data-desc="{{ $root->description }}"
                        data-icon="{{ $root->icon_emoji }}"
                        data-sort="{{ $root->sort_order }}">
                  <i class="bi bi-pencil"></i>
                </button>
                <form method="POST" action="{{ route('isms.categories.destroy', $root) }}"
                      onsubmit="return confirm('確定刪除目錄「{{ $root->name }}」？')">
                  @csrf @method('DELETE')
                  <button class="btn btn-xs btn-outline-danger btn-sm py-0 px-2"><i class="bi bi-trash"></i></button>
                </form>
              </div>
            </div>
            {{-- 子分類 --}}
            @foreach($root->children as $child)
            <div class="d-flex align-items-center justify-content-between ps-5 pe-3 py-2 border-top bg-light-subtle">
              <span class="small">
                <i class="bi bi-folder2 me-1 text-muted"></i>{{ $child->name }}
                <span class="badge bg-secondary ms-1 fw-normal">{{ $child->documents_count }} 份</span>
              </span>
              <div class="d-flex gap-1">
                <button class="btn btn-xs btn-outline-secondary btn-sm py-0 px-2"
                        data-bs-toggle="modal" data-bs-target="#editCatModal"
                        data-id="{{ $child->id }}"
                        data-name="{{ $child->name }}"
                        data-desc="{{ $child->description }}"
                        data-icon="{{ $child->icon_emoji }}"
                        data-sort="{{ $child->sort_order }}">
                  <i class="bi bi-pencil"></i>
                </button>
                <form method="POST" action="{{ route('isms.categories.destroy', $child) }}"
                      onsubmit="return confirm('確定刪除？')">
                  @csrf @method('DELETE')
                  <button class="btn btn-xs btn-outline-danger btn-sm py-0 px-2"><i class="bi bi-trash"></i></button>
                </form>
              </div>
            </div>
            @endforeach
          </div>
          @endforeach
        </div>
        @endif
      </div>
    </div>

    {{-- 右欄：新增目錄 --}}
    <div class="col-md-5">
      <div class="card shadow-sm">
        <div class="card-header fw-semibold py-2">新增目錄</div>
        <div class="card-body">
          <form method="POST" action="{{ route('isms.categories.store') }}">
            @csrf
            <div class="mb-3">
              <label class="form-label small fw-semibold">目錄名稱 <span class="text-danger">*</span></label>
              <input type="text" name="name" class="form-control form-control-sm"
                     placeholder="如：風險管理程序" required maxlength="100">
            </div>
            <div class="mb-3">
              <label class="form-label small fw-semibold" for="parent_id">上層目錄（留空 = 頂層）</label>
              <select name="parent_id" class="form-select form-select-sm" id="parent_id">
                <option value="">— 頂層目錄 —</option>
                @foreach($allCategories as $cat)
                <option value="{{ $cat->id }}">{{ $cat->icon_emoji }} {{ $cat->name }}</option>
                @endforeach
              </select>
            </div>
            <div class="mb-3">
              <label class="form-label small fw-semibold" for="description">說明</label>
              <textarea name="description" class="form-control form-control-sm" rows="2" maxlength="500" id="description"></textarea>
            </div>
            <div class="row g-2 mb-3">
              <div class="col-5">
                <label class="form-label small fw-semibold">圖示（Emoji）</label>
                <input type="text" name="icon_emoji" class="form-control form-control-sm text-center"
                       value="📁" maxlength="4" style="font-size:1.3rem;">
              </div>
              <div class="col-7">
                <label class="form-label small fw-semibold" for="sort_order">排序</label>
                <input type="number" name="sort_order" class="form-control form-control-sm" value="0" min="0" id="sort_order">
              </div>
            </div>
            <button class="btn btn-primary btn-sm w-100">
              <i class="bi bi-folder-plus me-1"></i>新增目錄
            </button>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

{{-- 編輯目錄 Modal --}}
<div class="modal fade" id="editCatModal" tabindex="-1">
  <div class="modal-dialog modal-sm">
    <form method="POST" id="editCatForm">
      @csrf @method('PUT')
      <div class="modal-content">
        <div class="modal-header py-2">
          <h6 class="modal-title fw-bold">編輯目錄</h6>
          <button type="button" class="btn-close btn-sm" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <div class="mb-2">
            <label class="form-label small fw-semibold">名稱</label>
            <input type="text" name="name" id="editName" class="form-control form-control-sm" required>
          </div>
          <div class="mb-2">
            <label class="form-label small fw-semibold">說明</label>
            <textarea name="description" id="editDesc" class="form-control form-control-sm" rows="2"></textarea>
          </div>
          <div class="row g-2">
            <div class="col-5">
              <label class="form-label small fw-semibold">圖示</label>
              <input type="text" name="icon_emoji" id="editIcon" class="form-control form-control-sm text-center"
                     style="font-size:1.3rem;" maxlength="4">
            </div>
            <div class="col-7">
              <label class="form-label small fw-semibold">排序</label>
              <input type="number" name="sort_order" id="editSort" class="form-control form-control-sm" min="0">
            </div>
          </div>
        </div>
        <div class="modal-footer py-2">
          <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="submit" class="btn btn-sm btn-primary">儲存</button>
        </div>
      </div>
    </form>
  </div>
</div>

@push('scripts')
<script>
document.getElementById('editCatModal').addEventListener('show.bs.modal', function(e) {
  var btn  = e.relatedTarget;
  var id   = btn.dataset.id;
  var form = document.getElementById('editCatForm');
  form.action = '/isms/manage/categories/' + id;
  document.getElementById('editName').value = btn.dataset.name;
  document.getElementById('editDesc').value = btn.dataset.desc || '';
  document.getElementById('editIcon').value = btn.dataset.icon || '📁';
  document.getElementById('editSort').value = btn.dataset.sort || '0';
});
</script>
@endpush
@endsection