@extends('layouts.admin.app')
@section('styles')
    {{-- <link rel="stylesheet" href="https://cdn.datatables.net/v/dt/jqc-1.12.4/dt-1.13.6/b-2.4.1/sl-1.7.0/datatables.min.css" /> --}}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css" />
    <style>
        div.dataTables_wrapper div.dataTables_length select {
            width: 50%;
        }

        #example_paginate>ul>li.paginate_button.page-item.active>a {
            color: white !important;
        }
        #example > tbody > tr > td{
            padding-bottom: 50px;
        }
        #example tbody tr:hover {
        background-color: #f0f0f0; 
    }
    </style>
@endsection
@section('content')
    <div class="row" style="max-width: 100%;
    overflow-x: hidden;">
        <div class="col-12">
            <div class="card mb-4">
                <div class="card-header pb-0">
                    <h6>Videos</h6>
                </div>
                <div class="card-body px-0 pt-0 pb-2">
                    <div class="px-2">
                        @if (session('success'))
                            <div class="alert alert-success">
                                {{ session('success') }}
                            </div>
                        @endif
                    </div>
                    <div class="table-responsive p-4 pt-2">
                        <table id="example" class="display responsive nowrap" width="100%" ">
                                                <thead >
                                                    <tr >
                                                      
                                                    </tr>
                                                </thead>
                                            </table>
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
@endsection

@section('script')
    <script src="https://cdn.datatables.net/v/dt/jqc-1.12.4/dt-1.13.6/b-2.4.1/sl-1.7.0/datatables.min.js"></script>
                            <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>

                                        <script>
                                            var dataTable = new DataTable('#example', {
                                                language: {
                                                    paginate: {
                                                        next: '&#8594;', // or '→'
                                                        previous: '&#8592;' // or '←' 
                                                    }
                                                },
                                                ajax: '{{ route('videos.index') }}',
                                                columnDefs: [{
                                                    "className": "dt-left",
                                                    "targets": "_all"
                                                }],
                                                "ordering": false,

                                                processing: true,
                                                serverSide: true,
                                                responsive: true,
                                                columns: [{
                                                        data: 'title',
                                                        render: function(data, type, row, column) {
                                                            //return row.title + '<br>' + '<img src="storage/thumbnail.jpeg">';
                                                            return '<a href="' + row.video_url + '">' + 
                                                                '<br><img src="storage/thumbnail.jpeg"></a>';
                                                        },
                                                        width: '35%',
                                                        ordering: false

                                                    },
                                                    {
                                                        data: 'description',
                                                        name: 'description',
                                                        render: function(data, type, row, column) {
                                                            return row.title + '<br>' + row.description;
                                                        },
                                                    },
                                                    {
                                                        data: 'created_at',
                                                        name: 'created_at',
                                                        visible: false,

                                                    },

                                                ]
                                            });
                                            $('#example tbody').on('click', 'tr', function() {
                                                var data = dataTable.row(this).data();
                                                if (data && data.video_url) {
                                                    window.location.href = data.video_url;
                                                }
                                            });
                                            $('#example tbody').css('cursor', 'pointer');

                                        </script>
@endsection