@extends('layouts.app')

@section('content')
<div class="container">
  <div class="d-flex justify-content-between align-items-center mb-4">
    <h1>Redmine 專案管理</h1>
    <a href="{{ route('redmine-projects.create') }}" class="btn btn-success">
      <i class="bi bi-plus-lg"></i> 新增專案
    </a>
  </div>

  @if (session('success'))
    <div class="alert alert-success">{{ session('success') }}</div>
  @endif
  @if ($errors->any())
    <div class="alert alert-danger">{{ $errors->first() }}</div>
  @endif

  <div class="card">
    <div class="card-body">
      <div class="table-responsive"><table id="dt" class="table table-striped table-hover align-middle">
        <thead>
          <tr>
            <th>ID</th>
            <th>專案名稱</th>
            <th>Identifier</th>
            <th>公開</th>
            <th>建立時間</th>
            <th style="width:180px">操作</th>
          </tr>
        </thead>
        <tbody>
          @foreach ($projects as $project)
          <tr>
            <td>{{ $project['id'] }}</td>
            <td>
              <a href="{{ route('redmine-projects.show', $project['id']) }}" class="fw-bold text-decoration-none">
                {{ $project['name'] }}
              </a>
            </td>
            <td><code>{{ $project['identifier'] }}</code></td>
            <td>
              @if ($project['is_public'] ?? false)
                <span class="badge bg-success">公開</span>
              @else
                <span class="badge bg-secondary">私有</span>
              @endif
            </td>
            <td>{{ \Carbon\Carbon::parse($project['created_on'])->format('Y-m-d') }}</td>
            <td>
              <div class="d-flex gap-1">
                <a href="{{ route('redmine-projects.show', $project['id']) }}" class="btn btn-sm btn-primary">
                  <i class="bi bi-eye"></i> 檢視
                </a>
                <a href="{{ route('redmine-projects.edit', $project['id']) }}" class="btn btn-sm btn-warning">
                  <i class="bi bi-pencil"></i> 編輯
                </a>
                <form action="{{ route('redmine-projects.destroy', $project['id']) }}" method="POST" class="d-inline"
                      onsubmit="return confirm('確定要刪除專案「{{ $project['name'] }}」嗎？此操作無法復原！')">
                  @csrf @method('DELETE')
                  <button class="btn btn-sm btn-danger">
                    <i class="bi bi-trash"></i> 刪除
                  </button>
                </form>
              </div>
            </td>
          </tr>
          @endforeach
        </tbody>
      </table></div>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', () => {
  const table = document.querySelector('#dt');
  if (table) {
    new DataTable(table, {
      language: { url: '/vendor/datatables/i18n/zh-HANT.json' },
      ordering: true,
      pageLength: 20,
      lengthMenu: [10, 20, 50, 100]
    });
  }
});
</script>
@endpush