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

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Topics'])
    
    <div class="container w-95">
     <div class="card">
     <div class="card-header d-flex justify-content-between w-100">
                <h4>Topic</h4>  
                
    <a href="{{ route('topics.create') }}" class="btn btn-primary mb-3">+ Add Topics</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">Course</th>
            <th class="text-center text-uppercase text-secondary text-sm font-weight-bolder">Topics Name</th>
            <th class="text-center text-uppercase text-secondary text-sm font-weight-bolder">Topics Order</th>
            <th class="text-center text-uppercase text-secondary text-sm font-weight-bolder">Actions</th>
        </tr>
    </thead>
    <tbody>
        @foreach($topics as $topic)
        <tr>
            <td class="align-middle text-center text-sm">{{ $loop->iteration }}</td>
             <td class="align-middle text-center text-sm">{{ $topic->course->title }}</td>
            <td class="align-middle text-center text-sm">{{ $topic->title }}</td>
            <td class="align-middle text-center text-sm">{{ $topic->sort_order }}</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('topics.edit', $topic->id) }}" class="text-success"
                                                    title="Edit">
                                                    <i class="fas fa-edit"></i> <!-- Pencil icon -->
                                                </a>
                                                <!-- Delete Form (Trash Icon)-->
                                                <form action="{{ route('topics.destroy', $topic->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('Are you sure?')">
                                                        <i class="fas fa-trash"></i> <!-- Trash icon -->
                                                    </button>
                                                </form>

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