{{-- <div class="card mb-4" id="student_card"> --}}
<div class="card-header align-items-center">
    <h5 class="card-action-title mb-0">{{ __('messages_303.Online') }}</h5>

    <div class="card-action-element">
        @can('create_course_admin')
            <a href="{{ route('admin.my-courses.online-lessons.create') }}"
                class="btn btn-outline-primary waves-effect text-primary">{{ __('messages.ADD NEW ') }}<i
                    class="fa-solid fa-circle-plus"></i></a>
        @endcan
    </div>
</div>

<div class="table-responsive mb-3">
    <table class="table datatable-project border-top">
        <thead>
            <tr>

                <th>#</th>
                <th>{{ __('messages.Name') }}</th>
                <th>{{ __('messages.Lecture time') }}</th>
                <th>{{ __('messages_301.Join url') }}</th>
                <th>{{ __('messages_301.Start url') }}</th>
                <th>{{ __('messages.Actions') }}</th>
            </tr>
        </thead>
        <tbody>

            @include('inc.is_empty_data', [
                'var_check_empty' => $my_course->online,
                'var_check_empty_rows' => 6,
            ])
            @foreach ($my_course->online as $item)
                <tr>
                    <td>{{ $loop->iteration }}</td>
                    <td>{{ $item->name }}</td>
                    <td>{{ $item->zoom?->start_time_format }}</td>
                    <td>
                        <a href="{{ $item->zoom?->join_url }}" class="btn btn-icon waves-effect waves-light"
                            style="width: 50px; height: 50px; background-color: #0b5cff; border-radius: 5px; color: white; display: flex; align-items: center; justify-content: center; text-decoration: none; font-weight: bold;"
                            target="_blank">
                            <div
                                style="background-color: white; border-radius: 5px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;">
                                <i class="ti ti-plus" style="color: #0b5cff;"></i>
                            </div>
                        </a>
                    </td>
                    <td><a href="{{ $item->zoom?->start_url }}"
                            class="btn btn-icon  btn-instagram waves-effect waves-light"
                            style="width: 50px; height: 50px;" target="_blank"><i class="ti ti-brand-zoom"></i></a></td>
                    <td>
                        <div class="dropdown">
                            <button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown">
                                <i class="ti ti-dots-vertical"></i>
                            </button>
                            <div class="dropdown-menu">
                                @can('edit_course_admin')
                                    <a class="dropdown-item"
                                        href="{{ route('admin.my-courses.online-lessons.edit', $item->id) }}"><i
                                            class="ti ti-pencil "></i>{{ __('messages.Edit') }}</a>
                                @endcan
                                @can('delete_course_admin')
                                    <a data-url="{{ route('admin.my-courses.online-lessons.destroy', $item->id) }}"
                                        data-text_btn_confirm="{{ __('messages.Confirm') }}"
                                        data-text_btn_cancel="{{ __('messages.Cancel') }}" data-method="delete"
                                        data-message="{{ __('messages.Are you sure you want to delete? You cannot undo it') }}"
                                        class="dropdown-item btn-action" href="javascript:void(0);"><i
                                            class="ti ti-trash "></i> {{ __('messages.Delete') }}</a>
                                @endcan
                            </div>
                        </div>
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
</div>
{{-- </div> --}}