@push('styles')
    <link href="{{ asset('backend/libs/bootstrap-datepicker/css/bootstrap-datepicker.min.css') }}" rel="stylesheet" type="text/css">
@endpush

<div class="row">
    <x-content-header title="Post" />

    <div class="col-12">
        <x-card class="{{ !$frm ? 'd-none' : '' }}">
            @include('livewire.admin.include.post-form')
            {{-- <@livewire('admin.partcials.post-form') --}}
        </x-card>

        <x-card class="{{ $frm ? 'd-none' : '' }}">
            <div class="row mb-2">
                <div class="col-sm-9">
                    <div class="d-flex">
                        <div class="align-self-center">
                            <button wire:click="_filter" type="button" class="btn btn-default dropdown-toggle"
                                data-toggle="dropdown" aria-expanded="true" x-data :disabled="$wire.trashes">Filter <i
                                    class="bx bx-filter"></i></button>
                        </div>
                        <div class="search-box mr-2 mb-2">
                            <form class="d-flex">
                                <div class="position-relative">
                                    <input type="search" wire:model="s" class="form-control"
                                        placeholder="Search title..." x-data :disabled="$wire.filter">
                                    <i class="bx bx-search-alt search-icon" wire:loading.class="d-none"
                                        wire:target="s"></i>
                                    <i class="bx bx-search-alt bx-spin search-icon" wire:loading wire:target="s"></i>
                                </div>
                            </form>
                        </div>
                        <div class="d-flex align-self-center">
                            <span class="align-self-center mr-2">Show</span>
                            <select wire:model="limited" aria-controls="post_table"
                                class="custom-select custom-select-sm form-control {{ count($posts) >= $limited ? 'td-pointer' : '' }} "
                                {{ count($posts) >= $limited ? '' : 'disabled' }}>
                                @foreach ($show_limit as $item)
                                    <option value="{{ $item }}">{{ $item }}</option>
                                @endforeach
                            </select>
                            <span class="align-self-center ml-2">entries</span>
                        </div>
                        @if (auth()->user()->admin)
                        <div class="d-flex align-self-center ml-2">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" wire:model="trashes" class="custom-control-input" id="trashh"
                                    {{ $total_trash == 0 ? 'disabled' : '' }}>
                                <label class="custom-control-label" for="trashh">Trash<span
                                        class="badge badge-danger badge-pill px-2 py-1">{{ $total_trash }}</span></label>
                            </div>
                        </div>
                        <div class="ml-2 align-self-center {{ $trashes?'':'d-none' }}">
                            <button type="button" class="btn btn-danger btn-sm rounded-pill" wire:click="emptyTrash"
                                {{ empty($total_trash) ? 'disabled' : '' }}>
                                <i class="mdi mdi-trash-can-outline" wire:loading.class="d-none" wire:target="emptyTrash"></i>
                                <i class="bx bx-loader bx-spin" wire:loading wire:target="emptyTrash"></i>
                                Empty Trashes
                            </button>
                            <button type="button" class="btn btn-info btn-sm rounded-pill" wire:click="restoreAll"
                                {{ empty($total_trash) ? 'disabled' : '' }}>
                                <i class="mdi mdi-restore" wire:loading.class="d-none" wire:target="restoreAll"></i>
                                <i class="bx bx-loader bx-spin" wire:loading wire:target="restoreAll"></i>
                                Restore All
                            </button>
                        </div>
                        @endif
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="text-sm-right">
                        <button type="button" wire:click="formOpen" wire:loading.attr="disabled" wire:target="formOpen"
                            class="btn btn-success btn-rounded waves-effect waves-light mb-2 mr-2">
                            <i class="mdi mdi-plus mr-1" wire:loading.class="d-none" wire:target="formOpen"></i>
                            <i class="bx bx-loader bx-spin" wire:loading wire:target="formOpen"></i>
                            Add New
                        </button>
                    </div>
                </div>
                @include('livewire.admin.include.filter-post')
            </div>

            <x-table class="position-relative" wire:init="loadingPost">
                <x-table.loading wire:target="nextPage" />
                <x-table.loading wire:target="previousPage" />
                <x-table.loading wire:target="gotoPage" />
                <x-table.loading wire:target="trashes" />
                <x-table.loading wire:target="limited" />
                <x-table.loading wire:target="s" />
                <x-table.loading wire:target="pkmDate" />
                <x-table.loading wire:target="emptyTrash" />
                <x-table.loading wire:target="restoreAll" />
                <x-table.loading wire:target="s_date" />
                <x-table.loading wire:target="e_date" />
                <x-table.loading wire:target="_title" />
                <x-table.loading wire:target="user_name" />
                <x-table.loading wire:target="editItem" />
                <x-table.loading wire:target="destroy" />
                <x-table.loading wire:target="pkmRestore" />
                <x-table.loading wire:target="deleted" />
                <x-table.loading wire:target="sortBy" />

                <thead class="thead-light">
                    <tr>
                        <th>Thumbnail</th>
                        <th class="td-pointer" wire:click="sortBy('title')">
                            Title <i class="fas {{ $sortDirection === 'ASC' ? 'fa-sort-alpha-down' : 'fas fa-sort-alpha-up-alt' }}  my-opacity float-right font-20 {{ $sortField === 'title' ? 'd-block' : 'd-none' }}"></i>
                        </th>
                        <th>Post By</th>
                        <th class="td-pointer" wire:click="sortBy('view')">
                            Views
                            <i class="fas {{ $sortDirection === 'ASC' ? 'fa-sort-alpha-down' : 'fas fa-sort-alpha-up-alt' }}  my-opacity float-right font-20 {{ $sortField === 'view' ? 'd-block' : 'd-none' }}">
                        </th>
                        <th class="{{ $trashes?'d-none':''}}">Publish</th>
                        <th class="td-pointer" wire:click="sortBy('created_at')">
                            Created At
                            <i
                                class="fas {{ $sortDirection === 'ASC' ? 'fa-sort-alpha-down' : 'fas fa-sort-alpha-up-alt' }}  my-opacity float-right font-20 {{ $sortField === 'created_at' ? 'd-block' : 'd-none' }}"></i>
                        </th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($posts as $key => $post)
                        <tr>
                            <td class="td-pointer">
                                <img src="{{ !empty($post->feature_image) ? asset($post->feature_image) : asset('images/no-image.jpg') }}"
                                    lt="thumbnail" class="rounded avatar-sm my-object-fit">
                            </td>
                            <td class="text-left td-pointer">
                                {{ Str::limit($post->title, 50, '...') }}
                            </td>
                            <td class="text-center td-pointer">
                                {{ $post->user->name??'' }}
                            </td>
                            <td class="text-center td-pointer">
                                <span class="badge badge-pill badge-soft-info font-size-12">{{ $post->view }}</span>
                            </td>
                            @if (!$trashes)
                            <td class="text-center">
                                <input type="checkbox" id="status{{ $key }}" switch="bool"
                                    {{ $post->public ? 'checked' : '' }}>
                                <label for="status{{ $key }}" class="mb-0" data-on-label="On"
                                    data-off-label="Off" wire:click="changePublish({{ $post->id }})"></label>
                            </td>
                            @endif
                            <td class="td-pointer">
                                {{ $post->created_at ? date_format($post->created_at, 'd-M-Y H:i a') : 'Null' }}
                            </td>
                            <!-- if trashed is true -->
                            @if ($trashes)
                            <td class="text-center">
                                <a href="#" wire:click="pkmRestore({{ $post->id }})" class="mr-3 text-primary"
                                    data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit">
                                    <i class="mdi mdi-restore font-size-18" wire:loading.class="d-none"
                                        wire:target="pkmRestore({{ $post->id }})"></i>
                                    <i class="bx bx-loader bx-spin bx-sm" wire:loading
                                        wire:target="pkmRestore({{ $post->id }})"></i>
                                </a>
                                <a wire:click="deleted({{ $post->id }})" href="#" class="text-danger">
                                    <i class="mdi mdi-close font-size-18" wire:loading.class="d-none"
                                        wire:target="deleted({{ $post->id }})"></i>
                                    <i class="bx bx-loader bx-spin bx-sm" wire:loading
                                        wire:target="deleted({{ $post->id }})"></i>
                                </a>
                            </td>
                            @else
                            <!-- else  -->
                            <td class="text-center">
                                <a href="#" wire:click="editItem({{ $post->id }})" class="mr-3 text-primary"
                                    data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit">
                                    <i class="mdi mdi-pencil font-size-18" wire:loading.class="d-none"
                                        wire:target="editItem({{ $post->id }})"></i>
                                    <i class="bx bx-loader bx-spin bx-sm" wire:loading
                                        wire:target="editItem({{ $post->id }})"></i>
                                </a>
                                <a wire:click="destroy({{ $post->id }})" href="#" class="text-danger">
                                    <i class="mdi mdi-trash-can-outline font-size-18"
                                        wire:loading.class="d-none"
                                        wire:target="destroy({{ $post->id }})"></i>
                                    <i class="bx bx-loader bx-spin bx-sm" wire:loading
                                        wire:target="destroy({{ $post->id }})"></i>
                                </a>
                                </form>
                            </td>
                            @endif
                            <!-- end if trashed -->
                        </tr>
                    @empty
                        <x-table.none-loading :ready="$readyToLoadPost" :limited="$limited" :item="$posts" colspan="15" rows="7" />
                    @endforelse

                </tbody>
            </x-table>
            @empty(!$posts)
                {{ $posts->links() }}
            @endempty
    </x-card>
</div>
</div>

@push('scripts')
<script src="{{ asset('backend/libs/bootstrap-datepicker/js/bootstrap-datepicker.min.js') }}"></script>
@endpush