@extends('layouts.app')

@section('title', '程式碼審查報告列表')

@push('styles')
  {{-- DataTables CSS --}}
  <link rel="stylesheet" href="/vendor/datatables/css/dataTables.bootstrap5.min.css">
@endpush

@section('content')
  <div class="container py-4">

    {{-- Flash 訊息 --}}
    @if (session('success'))
      <div class="alert alert-success alert-dismissible fade show" role="alert">
        {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="關閉"></button>
      </div>
    @endif

    <h1 class="mb-4">程式碼審查報告</h1>

    <a href="{{ route('test-reports.create') }}" class="btn btn-success mb-3">
      ➕ 新增報告
    </a>

    <div class="card shadow-sm">
      <div class="card-body table-responsive">
        <table id="reportsTable" class="table table-striped table-bordered align-middle">
          <thead class="table-light">
            <tr>
              <th>專案</th>
              <th>建立者</th>
              <th>日期</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            @foreach ($reports as $r)
              <tr>
                <td>
                  <strong>{{ $r->project->client?->name ?? '未分類' }}</strong><br>
                  <small class="text-muted">{{ $r->project->name }}</small>
                </td>
                <td>{{ $r->user->name }}</td>
                <td>{{ $r->created_at->format('Y-m-d H:i') }}</td>
                <td class="text-center">
                  <a href="{{ route('test-reports.edit', $r) }}" class="btn btn-sm btn-outline-primary me-1">編輯</a>
                  <form action="{{ route('test-reports.destroy', $r) }}" method="POST" class="d-inline"
                    onsubmit="return confirm('確定刪除此報告？');">
                    @csrf @method('DELETE')
                    <button class="btn btn-sm btn-outline-danger me-1">刪除</button>
                  </form>
                  <a href="{{ route('test-reports.show', $r) }}" class="btn btn-sm btn-outline-secondary me-1">檢視</a>
                  <a href="{{ route('test-reports.export', $r) }}" class="btn btn-sm btn-outline-success">匯出</a>
                </td>
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>
    </div>
  </div>
@endsection

@push('scripts')
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script src="/vendor/datatables/js/jquery.dataTables.min.js"></script>
  <script src="/vendor/datatables/js/dataTables.bootstrap5.min.js"></script>
  <script>
    $(function() {
      $('#reportsTable').DataTable({
        serverSide: false,
        processing: false,
        dom: 'lfrtip',
        pageLength: 10,
        order: [
          [2, 'desc']
        ], // 以「日期」降冪排序
        language: {
          url: '/vendor/datatables/i18n/zh-HANT.json'
        }
      });
    });
  </script>
@endpush