@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Course'])
    
    <div class="container w-95">
     <div class="card">
     <div class="card-header d-flex justify-content-between w-100">
                <h4>Courses</h4>  
                
    <a href="{{ route('courses.create') }}" class="btn btn-primary mb-3">+ Add New Course</a>
        
            </div>
  
  <div class="card-body">
    <div class="table-responsive">
    <table class="table table-bordered" id="myTable">
        <thead>
            <tr>
                <th class="text-center text-uppercase text-secondary text-sm font-weight-bolder">#</th>
                <th class="text-center text-uppercase text-secondary text-sm font-weight-bolder">Title</th>
                <th class="text-center text-uppercase text-secondary text-sm font-weight-bolder">Description</th>
                <th class="text-center text-uppercase text-secondary text-sm font-weight-bolder">Actions</th>
            </tr>
        </thead>
        <tbody>
            @foreach($courses as $course)
            <tr>
                <td class="align-middle text-center text-sm">{{ $loop->iteration }}</td>
                <td class="align-middle text-center text-sm">{{ $course->title }}</td>
                <td class="align-middle text-center text-sm">{{ Str::limit($course->description, 50) }}</td>
                <td class="align-middle text-center text-sm">
                
                 <div class="d-flex px-3 py-1 justify-content-center align-items-center">
                                                <!-- Edit Button (Pencil Icon) -->
                                                <a href="{{ route('courses.edit', $course->id) }}" class="text-success"
                                                    title="Edit">
                                                    <i class="fas fa-edit"></i> <!-- Pencil icon -->
                                                </a>
                                                <!-- Delete Form (Trash Icon)-->
                                                <form action="{{ route('courses.destroy', $course->id) }}" method="POST"
                                                    class="delete-form ps-2">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="text-danger btn-delete"
                                                        style="border: none; background: none; cursor: pointer;" title="Delete" onclick="return confirm('Delete this course?')">
                                                        <i class="fas fa-trash"></i> <!-- Trash icon -->
                                                    </button>
                                                </form>

                                            </div>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
      </div>
    </div>
</div>
@endsection