@php use Carbon\Carbon; @endphp

<div class="card mb-4">
    <div class="card-header pb-0" style="display: flex;justify-content: space-between;">
        <div>
            <h6>{{ __('pages.events') }}</h6>
        </div>
        <div>
            <button id="add_event" class="async_action btn btn-primary btn-sm m-0" type="button"
                    data-bs-toggle="modal" data-bs-target="#event_modal"
                    data-action="{{ route('admin.events.create') }}">{{ __('pages.add') }}</button>
        </div>
    </div>
    <div class="card-body px-0 pt-0 pb-2">
        <div class="table-responsive p-0">
            <livewire:tables-filters.events-table-filter/>
            <table class="table align-items-center mb-0">
                <thead>
                <tr>
                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                        Name
                    </th>
                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">
                        Course
                    </th>
                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">
                        Teacher
                    </th>
                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                        Status
                    </th>
                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                        Start Date
                    </th>
                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                        End Date
                    </th>
                    <th class="text-secondary opacity-7"></th>
                </tr>
                </thead>
                <tbody>
                @if(count($events) > 0)
                    @foreach($events as $event)
                        <tr>
                            <td>
                                <div class="d-flex px-2 py-1">
                                    <div>
                                        <img src="{{ $event->course->photo() }}"
                                             class="avatar avatar-sm me-3" alt="course photo">
                                    </div>
                                    <div class="d-flex flex-column justify-content-center">
                                        <h6 class="mb-0 text-sm">{{ $event->name }}</h6>
                                        <p class="text-xs text-secondary mb-0"></p>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <p class="text-xs font-weight-bold mb-0">{{ $event->course->name }}</p>
                            </td>
                            <td>
                                <p class="text-xs font-weight-bold mb-0">{{ $event->teacher->data->first_name }} {{ $event->teacher->data->last_name }}</p>
                            </td>
                            <td class="align-middle text-center text-sm">
                                <span class="badge badge-sm bg-gradient-success">Online</span>
                            </td>
                            <td class="align-middle text-center">
                                                    <span
                                                        class="text-secondary text-xs font-weight-bold">{{ (new Carbon($event->start_date))->format('Y-m-d') }}</span>
                            </td>
                            <td class="align-middle text-center">
                                                    <span
                                                        class="text-secondary text-xs font-weight-bold">{{ (new Carbon($event->end_date))->format('Y-m-d') }}</span>
                            </td>
                            <td class="align-middle">
                                <a href="javascript:void(0);"
                                   class="async_action text-secondary font-weight-bold text-xs"
                                   data-bs-toggle="modal" data-bs-target="#edit_event_modal"
                                   data-original-title="Edit user"
                                   data-action="{{ route('admin.events.edit', $event->id) }}">
                                    {{ __('pages.edit') }}
                                </a>
                                <a href="javascript:void(0);"
                                   class="async_action text-secondary font-weight-bold text-xs"
                                   data-bs-toggle="modal" data-bs-target="#delete_event_modal"
                                   data-original-title="Delete user"
                                   data-action="{{ route('admin.events.delete', $event->id) }}">
                                    {{ __('pages.delete') }}
                                </a>
                            </td>
                        </tr>
                    @endforeach
                @else
                    <tr style="text-align: center">
                        <td colspan="7">
                            <img width="8%" alt="data not found"
                                 src="{{ asset('img/data_not_found.png') }}"/>
                        </td>
                    </tr>
                @endif
                </tbody>
            </table>
        </div>
    </div>
</div>