@extends('layouts.app')
@section('title', 'フォルダ管理')
@section('page-title', 'フォルダ管理')
@section('page-subtitle')
契約書一覧で使う保管先フォルダを登録・編集します。
@endsection

@section('content')
<nav aria-label="パンくず" class="mb-3">
  <ol class="breadcrumb mb-0 small">
    <li class="breadcrumb-item"><a href="{{ route('contract.instances.index') }}">文書一覧</a></li>
    <li class="breadcrumb-item active" aria-current="page">フォルダ管理</li>
  </ol>
</nav>

<div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
  <a href="{{ route('contract.instances.index') }}" class="btn btn-sm btn-outline-secondary"><i class="bi bi-arrow-left me-1"></i>文書一覧</a>
  <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#contractFolderCreateModal">
    新規作成
  </button>
</div>

<div class="card border-0 shadow-sm">
  <div class="table-responsive">
    <table class="table table-hover align-middle mb-0">
      <thead class="table-light">
        <tr>
          <th scope="col">フォルダ名</th>
          <th scope="col" class="text-end" style="width:8rem">文書数</th>
          <th scope="col" class="text-end" style="width:10rem">操作</th>
        </tr>
      </thead>
      <tbody>
        @forelse($folders as $folder)
        <tr>
          <td>
            <i class="bi bi-folder-fill text-warning me-2" aria-hidden="true"></i>{{ $folder->name }}
          </td>
          <td class="text-end text-muted small">{{ $folder->instances_count }}</td>
          <td class="text-end">
            <div class="btn-group btn-group-sm">
              <button type="button"
                class="btn btn-outline-secondary"
                data-bs-toggle="modal"
                data-bs-target="#contractFolderEditModal"
                data-folder-id="{{ $folder->id }}"
                data-folder-name="{{ $folder->name }}">
                編集
              </button>
              <form method="POST" action="{{ route('contract.folders.destroy', $folder) }}" class="d-inline" onsubmit="return confirm('このフォルダを削除しますか？\n紐づく契約書の保管先は未選択になります。')">
                @csrf @method('DELETE')
                <button type="submit" class="btn btn-outline-danger">削除</button>
              </form>
            </div>
          </td>
        </tr>
        @empty
        <tr>
          <td colspan="3" class="text-center text-muted py-5">
            フォルダがありません。「新規作成」から追加してください。
          </td>
        </tr>
        @endforelse
      </tbody>
    </table>
  </div>
</div>

<div class="modal fade" id="contractFolderCreateModal" tabindex="-1" aria-labelledby="contractFolderCreateLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <form method="POST" action="{{ route('contract.folders.store') }}">
        @csrf
        <div class="modal-header py-2">
          <h2 class="modal-title h6 mb-0" id="contractFolderCreateLabel">フォルダを新規作成</h2>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="閉じる"></button>
        </div>
        <div class="modal-body">
          <label class="form-label fw-semibold" for="create_folder_name">フォルダ名</label>
          <input type="text" name="name" id="create_folder_name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name') }}" maxlength="191" required autofocus>
          @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>
        <div class="modal-footer py-2">
          <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">キャンセル</button>
          <button type="submit" class="btn btn-sm btn-primary">作成</button>
        </div>
      </form>
    </div>
  </div>
</div>

<div class="modal fade" id="contractFolderEditModal" tabindex="-1" aria-labelledby="contractFolderEditLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <form method="POST" id="contract-folder-edit-form" action="">
        @csrf @method('PUT')
        <div class="modal-header py-2">
          <h2 class="modal-title h6 mb-0" id="contractFolderEditLabel">フォルダ名を編集</h2>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="閉じる"></button>
        </div>
        <div class="modal-body">
          <label class="form-label fw-semibold" for="edit_folder_name">フォルダ名</label>
          <input type="text" name="name" id="edit_folder_name" class="form-control" maxlength="191" required>
        </div>
        <div class="modal-footer py-2">
          <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">キャンセル</button>
          <button type="submit" class="btn btn-sm btn-primary">保存</button>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<script>
(function () {
  const editModal = document.getElementById('contractFolderEditModal');
  if (!editModal) return;
  editModal.addEventListener('show.bs.modal', function (event) {
    const btn = event.relatedTarget;
    if (!btn) return;
    const id = btn.getAttribute('data-folder-id');
    const name = btn.getAttribute('data-folder-name') || '';
    const form = document.getElementById('contract-folder-edit-form');
    const input = document.getElementById('edit_folder_name');
    if (form) form.action = '{{ url('/contract/folders') }}/' + id;
    if (input) input.value = name;
  });
  @if($errors->has('name') && old('_method') !== 'PUT')
  const createModal = document.getElementById('contractFolderCreateModal');
  if (createModal && window.bootstrap) bootstrap.Modal.getOrCreateInstance(createModal).show();
  @endif
})();
</script>
@endpush