@extends('admin.layout.app')

@section('title', 'Projects')
@push('styles')
  <link href="/csstemplate/libs/downloaded/bootstrap.min.css" rel="stylesheet">
  <link href="/csstemplate/libs/downloaded/dataTables.bootstrap5.min.css" rel="stylesheet">
  <style> a{text-decoration: none !important; } </style>
@endpush

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
  <div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
      <h5 class="mb-0">All Projects</h5>
      <a href="{{ route('admin.project.create') }}" class="btn btn-sm btn-primary">
        <i class="bx bx-plus"></i> Add New Project
      </a>
    </div>

    <div class="card-body">
      @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
      @endif

      <div class="table-responsive">
        <table id="projectTable"  class="table table-hover table-bordered table-striped text-nowrap">
          <thead class="table-light">
            <tr>
              <th>Actions</th>
              <th>Title</th>
              <th>Sequence</th>
              <th>Slug</th>
              <th>Featured Image</th>
              <th>Meta Title</th>
            </tr>
          </thead>
          <tbody>
            @forelse($projects as $project)
              <tr>
                <td>
                  <div class="dropdown">
                    <button class="btn btn-sm btn-outline-primary dropdown-toggle" type="button" id="dropdownMenuButton{{ $project->id }}" data-bs-toggle="dropdown" aria-expanded="false">
                        Actions
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton{{ $project->slug }}">
                        <li>
                            <a class="dropdown-item" href="{{ route('admin.project.show', $project->slug) }}">
                                <i class="bi bi-eye"></i> View
                            </a>
                        </li>
                        <li>
                            <a class="dropdown-item" href="{{ route('admin.project.edit', $project->slug) }}">
                                <i class="bi bi-pencil"></i> Edit
                            </a>
                        </li>
                    </ul>
                </div>
                </td>
                <td>{{ $project->title }}</td>
                <td>{{ $project->sequence }}</td>
                <td>{{ $project->slug }}</td>
                <td>
                  @if($project->featured_image)
                    <img src="{{ asset('uploads/'.$project->featured_image) }}" width="60" alt="Featured">
                  @else
                    <span class="text-muted">No Image</span>
                  @endif
                </td>
                <td>{{ $project->meta_title }}</td>
              </tr>
            @empty
              <tr>
                <td colspan="6" class="text-center">No projects found.</td>
              </tr>
            @endforelse
          </tbody>
        </table>
      </div>

      <div class="mt-3">
        {{ $projects->links() }}
      </div>
    </div>
  </div>
</div>
@endsection
@push('scripts')
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>

  <script>
    $(document).ready(function () {
      if ($.fn.DataTable.isDataTable('#projectTable')) {
        $('#projectTable').DataTable().destroy();
      }
      $('#projectTable').DataTable({
        responsive: true,
        ordering: true,
        searching: true,
        paging: true,
        pageLength: 25,
        language: {
          search: "_INPUT_",
          searchPlaceholder: "Search Blogs..."
        }
      });
    });
  </script>
@endpush