@extends('backend.layouts.app')
@section('content')
    <div class="card shadow mb-4">
        <div class="card-body">
            <div class="row justify-content-between mb-2">
                <h5 class="text-primary ml-2 heading"><i class="fas fa-fw fa-list"></i>
                    {{ __('Youtube Feeds') }}</h5>
                @can('ytfeeds.create')
                    <a href="{{ route('admin.ytfeeds.create') }}" class="btn btn-outline-dark context-menu-one"><i
                            class="fas fa-video" aria-hidden="true"></i>
                        {{ __('Add Channel Feed') }}</a>
                @endcan
            </div>
            @include('backend.layouts.alert')
            <div class="table-responsive">
                <table id="datalist" data-delete="{{ route('admin.delete.ytfeeds') }}" style="cursor: pointer;"
                    name="ytfeeds" class="text-dark table ytfeeds table-hover" width="100%">
                    <thead>
                        <tr>
                            <th>Id</th>
                            <th>Name</th>
                            <th>URL</th>
                            <th>Videos</th>
                            <th>Status</th>
                            <th>ModifiedAt</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script>
        $('#datalist').DataTable({
            order: [
                [0, 'desc']
            ],
            rowId: 'id',
            orderable: false,
            stateSave: true,
            processing: true,
            serverSide: true,
            select: {
                style: "multi",
                selector: 'td:nth-child(1)',
            },
            ajax: window.location.toString(),
            createdRow: function(row) {
                $(row).addClass('row-context-menu');
            },
            columns: [{
                    data: 'id',
                    name: 'id'
                },
                {
                    data: 'name',
                    name: 'name'
                },
                {
                    data: 'feed_url',
                    name: 'feed_url'
                },
                {
                    data: 'videos_count',
                    name: 'videos_count'
                },
                 {
                    data: 'status',
                    name: 'status'
                },

                {
                    data: 'updated_at',
                    name: 'updated_at'
                }
            ],
            columnDefs: [{
                width: 15,
                targets: [0],
            }]
        });
    </script>
    <script>
        window.contextMenu = @json($contextmenu);
    </script>
    <script src="{{ asset('assets/dashboard/vendor/jquery-contextmenu/dist/jquery.contextMenu.min.js') }}"></script>
    <script src="{{ asset('assets/dashboard/vendor/jquery-contextmenu/dist/jquery.ui.position.js') }}"></script>
    <script src="{{ asset('assets/dashboard/js/context.js') }}"></script>
@endpush

@push('styles')
    <link rel="stylesheet" href="{{ asset('assets/dashboard/vendor/jquery-contextmenu/dist/jquery.contextMenu.min.css') }}">
@endpush