@extends('backend.layouts.app')

@section('title', __('Explore'))

@section('content')
    <x-backend.card>
        <x-slot name="header">
            Explore
        </x-slot>

        <x-slot name="headerActions">
            <x-utils.link
                icon="c-icon cil-plus"
                class="card-header-action"
                :href="route('admin.explore.create')"
                :text="__('Create')"
            />
        </x-slot>

        <x-slot name="body">
            <div class="table-responsive ">
                <table id="dataTables" class="table table-striped">
                    <thead class="thead-dark">
                        <tr>
                            <th width="50px">#</th>
                            <th width="200px" style="min-width: 130px">Featured Image</th>
                            <th width="300px">Title</th>
                            <th width="100px">Category</th>
                            <th width="80px">Status</th>
                            <th width="150px" style="min-width: 80px">Published at</th>
                            <th width="200px">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($explore as $value)
                            <tr>
                                <th scope="row" class="align-middle">{{ $loop->iteration }}</th>
                                <td class="align-middle">
                                    <div>
                                        @if ($value->image)
                                            <img class="img-thumbnail" width="70%" src="{{ asset($value->image) }}" alt="{{ $value->title }}">
                                        @else
                                            <img class="img-thumbnail" width="70%"src="{{ asset('img/explore/explore-1.png') }}" alt="{{ $value->title }}">
                                        @endif
                                    </div>
                                </td>
                                <td class="align-middle">
                                    <span class="cursor-pointer" data-toggle="tooltip" data-placement="bottom" title="{{ $value->title }}">
                                        {{ Str::limit($value->title, 45) }}
                                    </span>
                                </td>
                                <td class="align-middle">
                                    <span class="">{{ $value->category->name }}</span>
                                </td>
                                <td class="align-middle">
                                    @if ($value->isPublish())
                                        <a href="{{ route('admin.explore.unpublish', $value) }}"  data-toggle="tooltip" data-placement="top" title="UnPublish?" name="confirm-item">
                                            <span class="badge badge-success cursor-pointer">Publish</span>
                                        </a>
                                    @else
                                        <a href="{{ route('admin.explore.publish', $value) }}"  data-toggle="tooltip" data-placement="top" title="Publish?" name="confirm-item">
                                            <span class="badge badge-warning cursor-pointer">Draft</span>
                                        </a>
                                    @endif
                                        {{-- <span class="badge badge-warning cursor-pointer">Draft</span> --}}
                                </td>
                                <td class="align-middle">
                                    @if ($value->isPublish())
                                        {{ Carbon\Carbon::parse($value->published_at)->format('d/m/Y') }}
                                    @else
                                        Null
                                    @endif
                                </td>
                                <td class="align-middle">
                                    <div class="d-flex" style="gap: 5px;">
                                        {{-- <div>
                                            <a href="#" class="btn btn-info" data-toggle="tooltip" data-placement="bottom" title="{{ __('Detail') }}"><i class="cil-eye"></i></a>
                                        </div> --}}
                                        <div>
                                            <a href="{{ route('admin.explore.edit', $value) }}" class="btn btn-warning" data-toggle="tooltip" data-placement="bottom" title="{{ __('Edit') }}"><i class="far fa-edit" style="color:#fff;"></i></a>
                                        </div>
                                        <div>
                                            <form action="{{ route('admin.explore.delete', $value) }}" name="delete-item"  method="post">
                                                @method('delete')
                                                @csrf
                                                <button class="btn btn-danger" type="submit" data-toggle="tooltip" data-placement="bottom" title="{{ __('Delete') }}">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </x-slot>
    </x-backend.card>
@endsection

@push('after-scripts')
    <script>
        $(document).ready(function () {
            $("#dataTables").DataTable();
        })
    </script>
@endpush