@extends('cms.layouts.app')

@section('pre-styles')
    <x-cms.css-helper :dataTable="true" />
@endsection

@section('contents')
    <!-- Hero -->
    <x-cms.bread-crumb title="Videos">
        <li class="breadcrumb-item"><a class="btn btn-success btn-sm" href="{{ route('videos.create') }}" title=""><i
                    class="fa fa-plus"></i> Add New Videos</a></li>

    </x-cms.bread-crumb>
    <!-- END Hero -->



    <div class="content">
        <x-cms.common-message />

        <x-cms.data-table>

            <x-slot name="header">
                <th style="width: 15%; text-align:center">Created at</th>
                <th style="width: 15%;">Title</th>
                <th style="width: 3cm;">Video URL</th>
                <th style="width: 2cm;">Order</th>
                <th class="text-center" style="width: 10%;">Status</th>
                <th class="text-center" style="width: 120px;">Action</th>
            </x-slot>

            <x-slot name="body">
                @foreach ($videos as $video)
                    <tr class="{{ $video->deleted_at == null ? '' : 'bg-danger text-white' }}">
                        <td class="text-center">
                            {{ date('d-M-Y', strtotime($video->created_at)) }} <br>
                            {{ date('h:i:s a', strtotime($video->created_at)) }}
                        </td>
                        <td>{!! $video->title !!}</td>
                        <td>{{ $video->contents ?? '' }}</td>

                        <td class="text-center">{{ $video->display_order }}</td>

                        <td class="text-center">
                            <x-cms.table-status-button routeName="videos.update" modelName="video" :model="$video" />
                        </td>

                        <td class="text-center">
                            @if ($video->deleted_at == null)
                                <x-cms.table-action-button type="edit" routeName="videos.edit" modelName="video"
                                    :model="$video" />
                                <x-cms.table-action-button type="delete" routeName="videos.destroy" modelName="video"
                                    :model="$video" />
                            @else
                                <x-cms.table-action-button type="restore" routeName="videos.restore" modelName="video_id"
                                    :model="$video" />
                                <x-cms.table-action-button type="destroy-permanently" routeName="videos.destroy-permanently"
                                    modelName="video_id" :model="$video" />
                            @endif
                        </td>
                    </tr>
                @endforeach
            </x-slot>

        </x-cms.data-table>
    </div>
@endsection

@section('scripts')
    <x-cms.js-helper :dataTable="true" />
@endsection