{{-- <div class="text-end mb-2">
    <a :href="`{{ asset('admin/event') }}/submitAll`" class="btn btn-info text-white fs-14 lh-1">
        <i class="bi bi-arrow-bar-up"></i>
        {{ trans('label.submitAll') }}
    </a>
</div> --}}
<div class="border p-2 position-relative table-wrapper">
    <div class="table-responsive  country-table pb-0">
        <table class="table  mb-0 text-nowrap">
            <thead>
                <tr>
                    <th @click="sort('event_id')" role='button'>
                        {{ trans('event.id') }}
                        <i v-if="sortBy == 'event_id'"
                            v-bind:class="sortDirection == 'desc' ? 
                        'bi bi-caret-down-fill' : 'bi bi-caret-up-fill'"></i>
                        <i v-else class="bi bi-caret-up"></i>
                    </th>
                    <th @click="sort('day')" role='button'>
                        {{ trans('event.day') }}
                        <i v-if="sortBy == 'day'"
                            v-bind:class="sortDirection == 'desc' ? 
                        'bi bi-caret-down-fill' : 'bi bi-caret-up-fill'"></i>
                        <i v-else class="bi bi-caret-up"></i>
                    </th>
                    <th @click="sortTime('time_end')" role='button'>
                        {{ trans('event.time_end') }}
                        <i v-if="sortBy == 'time_end'"
                            v-bind:class="sortDirection == 'desc' ? 
                        'bi bi-caret-down-fill' : 'bi bi-caret-up-fill'"></i>
                        <i v-else class="bi bi-caret-up"></i>
                    </th>
                    <th @click="sortTime('time_begin')" role='button'>
                        {{ trans('event.time_begin') }}
                        <i v-if="sortBy == 'time_begin'"
                            v-bind:class="sortDirection == 'desc' ? 
                        'bi bi-caret-down-fill' : 'bi bi-caret-up-fill'"></i>
                        <i v-else class="bi bi-caret-up"></i>
                    </th>
                    <th @click="sort('type')" role='button'>
                        {{ trans('event.type') }}
                        <i v-if="sortBy == 'type'"
                            v-bind:class="sortDirection == 'desc' ? 
                        'bi bi-caret-down-fill' : 'bi bi-caret-up-fill'"></i>
                        <i v-else class="bi bi-caret-up"></i>
                    </th>
                    <th @click="sort('category_type')" role='button'>
                        {{ trans('event.category_type') }}
                        <i v-if="sortBy == 'category_type'"
                            v-bind:class="sortDirection == 'desc' ? 
                        'bi bi-caret-down-fill' : 'bi bi-caret-up-fill'"></i>
                        <i v-else class="bi bi-caret-up"></i>
                    </th>
                    <th @click="sort('title')" role='button'>
                        {{ trans('event.title') }}
                        <i v-if="sortBy == 'title'"
                            v-bind:class="sortDirection == 'desc' ? 
                        'bi bi-caret-down-fill' : 'bi bi-caret-up-fill'"></i>
                        <i v-else class="bi bi-caret-up"></i>
                    </th>
                    <th @click="sort('user_id')" role='button'>
                        {{ trans('event.user_id') }}
                        <i v-if="sortBy == 'user_id'"
                            v-bind:class="sortDirection == 'desc' ? 
                        'bi bi-caret-down-fill' : 'bi bi-caret-up-fill'"></i>
                        <i v-else class="bi bi-caret-up"></i>
                    </th>
                    <th @click="sort('status')" role='button'>
                        {{ trans('event.status') }}
                        <i v-if="sortBy == 'status'"
                            v-bind:class="sortDirection == 'desc' ? 
                        'bi bi-caret-down-fill' : 'bi bi-caret-up-fill'"></i>
                        <i v-else class="bi bi-caret-up"></i>
                    </th>
                    <th @click="sort('created_at')" role='button'>
                        {{ trans('event.created_at') }}
                        <i v-if="sortBy == 'created_at'"
                            v-bind:class="sortDirection == 'desc' ? 
                        'bi bi-caret-down-fill' : 'bi bi-caret-up-fill'"></i>
                        <i v-else class="bi bi-caret-up"></i>
                    </th>
                    <th @click="sort('created_by_id')" role='button'>
                        {{ trans('event.created_by_id') }}
                        <i v-if="sortBy == 'created_by_id'"
                            v-bind:class="sortDirection == 'desc' ? 
                        'bi bi-caret-down-fill' : 'bi bi-caret-up-fill'"></i>
                        <i v-else class="bi bi-caret-up"></i>
                    </th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in list" :key="item.event_id">
                    <td class="fw-medium">
                        <a :href="`{{ asset('event') }}/` + item.event_id + `/detail`"
                            class="text-info fs-14 lh-1">((item.event_id))</a>
                    </td>
                    <td class="">((item.day))</td>
                    <td class="">((item.time_end))</td>
                    <td class="">((item.time_begin))</td>
                    <td class="">((item.type_name))</td>
                    <td class="">((item.category_type_name))</td>
                    <td class="">((item.title))</td>
                    <td class="">((item.staff?.name))</td>
                    <td class="">((item.status_name))</td>
                    <td class="">(( new Date(item.created_at).toDateString() ))</td>
                    <td class="">((item.created_by_id))</td>
                    <td>
                        <div class="hstack gap-2 ">
                            <a :href="`{{ asset('event') }}/` + item.event_id + `/detail`"
                                class="text-info fs-14 lh-1"><i class="ri-eye-line"></i></a>
                            <a :href="`{{ asset('event') }}/` + item.event_id + `/edit`"
                                class="text-info fs-14 lh-1"><i class="ri-edit-line"></i></a>
                            <form :action="`{{ asset('event') }}/` + item.event_id"
                                :id="'formDelete_' + ((item.event_id))" class="pt-1" method="post">
                                @method('DELETE')
                                @csrf
                                <a href="##" @click="deleteItem(item.event_id)" class="text-danger fs-14 lh-1"><i
                                        class="ri-delete-bin-5-line"></i></a>
                            </form>
                        </div>
                    </td>
                </tr>
                <div class="position-absolute text-center no-rec-text" v-if="list.length == 0"
                    style="top: 60%; left:50%; transform:translate(-50%,-50%)">
                    <span>{{ trans('label.no_record') }}</span>
                </div>
            </tbody>
        </table>

    </div>
</div>
@include('includes.pagination')