@extends('layouts.partials.header')

@section('content')
<!-- start page title -->
<div class="row">
    <div class="col-12">
        <div class="page-title-box">
            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li>
                        <a onclick="add_video()" href="#">
                            <button type="button" class="btn btn-primary waves-effect waves-light btn-sm">
                                Add Video                                         </button>
                        </a>
                    </li>
                </ol>
            </div>
            <h4 class="page-title">Youtube Videos</h4>
        </div>
    </div>
</div>
<!-- end page title --> 
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body" style="overflow-x:auto;">
              
                <div id="datatable-users_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer">
                    <!-- <div class="row">
                        <div class="col-sm-12 col-md-6">
                            <div class="dataTables_length" id="datatable-users_length">
                                <label>
                                    Show 
                                    <select name="datatable-users_length" aria-controls="datatable-users" class="custom-select custom-select-sm form-control form-control-sm">
                                        <option value="10">10</option>
                                        <option value="25">25</option>
                                        <option value="50">50</option>
                                        <option value="100">100</option>
                                    </select>
                                    entries
                                </label>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-6">
                            <div id="datatable-users_filter" class="dataTables_filter"><label>Search:<input type="search" class="form-control form-control-sm" placeholder="" aria-controls="datatable-users"></label></div>
                        </div>
                    </div> -->
                    <div class="row">
                    @include('layouts.partials.messages')
                        <div class="col-sm-12">
                            <table style="font-size: 10px;" id='table' class="table table-striped table-bordered" cellspacing="0" width="100%">
                                <thead>

                                    <tr>
                                        <!-- <th><input type="checkbox" id="check-all"></th> -->
                                        <th>ID</th>
                                        <th>Title</th>
                                        <!-- <th>Description</th> -->
                                        <th>Thumbnail</th>
                                        <th>Url</th>
                                        <!-- <th>Published At</th> -->
                                        <th style="width:150px;">Action</th>
                                    </tr>
                                    </tr>
                                </thead>
                                <tbody>
                                @foreach ($videos as $video)
                                    <tr>
                                        <!-- <td><input type="checkbox" id="check-all"></td> -->
                                        <td>{{ $video['id'] }}</td>
                                        <td>{{ $video['title'] }}</td>
                                        <!-- <td>{{ $video['description'] }}</td> -->
                                        <td>{{ $video['thumbnail'] }}</td>
                                        <td>{{ $video['url'] }}</td>
                                        <!-- <td>{{ $video['published_at'] }}</td> -->
                                        <td style="width:150px;">
                                            <a style="padding:3px !important;" class="btn btn-sm btn-primary" href="javascript:void()" value="{{ $video['id'] }}" title="Edit" onclick="edit_video(this)"><i class="fa fa-pencil"></i></a>
                                            <a style="padding:3px !important;" class="btn btn-sm btn-danger" href="javascript:void()" value="{{ $video['id'] }}" title="Delete" onclick="delete_video(this)"><i class="fa fa-trash"></i></a>
                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <!-- <th><input type="checkbox" id="check-all"></th> -->
                                        <th>ID</th>
                                        <th>Title</th>
                                        <!-- <th>Description</th> -->
                                        <th>Thumbnail</th>
                                        <th>Url</th>
                                        <!-- <th>Published At</th> -->
                                        <th style="width:150px;">Action</th>
                                    </tr>
                                </tfoot>
                            </table>
                            <div id="datatable-users_processing" class="dataTables_processing card" style="display: none;">Processing...</div>
                        </div>
                    </div>

                </div>
            </div>
            <!-- end card body-->
        </div>
        <!-- end card -->
    </div>
    <!-- end col-->
</div>
<!-- end row-->


@endsection

@include('includes.videos_popup')