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

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'User Topics'])
    
    <div class="container w-95">
     <div class="card">
     <div class="card-header d-flex justify-content-between w-100">
                <h4>User Topics</h4>  
                
        
            </div>
  
  <div class="card-body">
    <div class="table-responsive">
    <table class="table table-bordered">
    <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">Listen</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('audio.userlisten', $topic->id) }}" class="text-success"
                                                    title="View">
                                                    <i class="fas fa-eye ms-2"></i> <!-- Pencil icon -->
                                                </a>
                                           

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