@extends('layouts.app')
@push('style')
  
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.2.3/css/fixedHeader.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/datetime/1.2.0/css/dataTables.dateTime.min.css">  
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/2.1.8/css/dataTables.bootstrap5.css"/>
<style>
 
 
#live-videos-table.dataTable td:nth-child(2){
    font-size: 1rem;
}
#live-videos-table.dataTable td:first-child, #live-videos-table.dataTable th:first-child,
#live-videos-table.dataTable td:nth-child(2), #live-videos-table.dataTable th:nth-child(2),
#live-videos-table.dataTable td:nth-child(n+4):nth-child(-n+9), #live-videos-table.dataTable th:nth-child(n+4):nth-child(-n+9)
  {  
  text-align: center;  
  white-space: nowrap !important;
}

#live-videos-table_wrapper {
    padding-left: .5rem !important;
  padding-right: .5rem !important;
}


span#basic-addon1 {
    width: fit-content;
    min-width: 10%;
}

.input-group.mb-3.me-2 {
    width: 340px;
    min-width: fit-content;
}
input#dates {
    text-align: end;
}



div.dt-container div.dt-search input {
    width: 340px; /* Set your desired width */
    display: block;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--bs-body-bg);
    background-clip: padding-box;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

@media (min-width: 2400px) {
            
            div.dt-container div.dt-search input {
                width: 480px; /* Set your desired width */
            }
            .input-group.mb-3.me-2 {
                width: 480px;
            }
    }

</style>
@endpush
@section('content')


 
 
    <div class="row p-4 pb-0 my-2 mx-0 rounded-3 border shadow-lg text-left">  
        <h4 class="text-dark text-uppercase ps-2"  id="path">{{ __('applabels.Management') }} </h4>
        <div class="col ps-0">
            @if (isset($errortoken))
                <div id="info-message" class="mr-4 alert alert-danger hidden" > {{$errortoken}} </div>
            @endif
          
            <div class="col-6 py-2  mb-auto me-auto ">
                    <div class="d-flex p-2 justify-content-between align-items-center">
                        <label>{{ __('applabels.Social Media:') }}</label>
                        @foreach ($social as $sm)
                            <input type="checkbox"  value="{{ $sm->id }}" id="social{{$sm->id}}" name="social" class="dataTables_filter me-1" {!! $sm->checked ? "checked": "" !!}  {!! !($sm->checked) ? "disabled": "" !!}> <span class="text-primary py-2 px-0 pe-2"><i class="fa-brands fa-{{strtolower($sm->name)}}"></i></span>                     
                        @endforeach
                    </div>
                </div> 
        </div>
        <div class="col pe-0">
            <div id="searchPanel" class="d-flex flex-row flex-row p-4 pb-2 bg-light justify-content-between">
                <div class="col-4 py-2  flex-column mb-auto me-0  m-auto align-items-end ">
                
                </div> 
                <div class="col-8 d-flex   flex-row py-2   m-auto align-items-end">
                    <div class="input-group mb-3 me-2"> 
                        <button class="btn btn-danger btn-sm"  id="syncVideos" title="Sync All">{{ __('applabels.datatable Sync' ) }} <i class="fa-solid fa-rotate ps-1"></i></button>
                    </div>
                    <div class="input-group mb-3 me-2 ms-auto">
                        <span class="input-group-text" id="basic-addon1">  <i class="fa fa-calendar"></i> </span> 
                        <input class="form-control  px-2 py-1 me-0" type="text"  name="dates" id="dates"  aria-describedby="basic-addon1">
                    </div>
                </div>
            </div><!-- filter section -->
        </div>
        
        
         <table id="live-videos-table" class="table table-bordered table-hover table-striped "  style="width:100%" data-show-custom-view="true" data-custom-view="customViewFormatter" data-show-custom-view-button="true" data-custom-view-default-view="true">
            <thead style="border-top:1px">
                <th class="text-nowrap" title="{{ __('applabels.SocialMedia' ) }}"><span class="p-2">{{ __('applabels.datatable SM' ) }}</span></th>
                <th class="col-1">{{ __('applabels.datatable video ID' ) }}</th>
                <th class="col-8">{{ __('applabels.datatable Title Description' ) }}</th>
                <th class="text-nowrap">{{ __('applabels.datatable status' ) }}</th>
                <th class="text-nowrap">{{ __('applabels.datatable Edit' ) }}</th>
                <th class="text-nowrap">{{ __('applabels.datatable date time' ) }}</th>
                <th class="text-nowrap">{{ __('applabels.datatable VD+CT' ) }}</th>
                <th class="text-nowrap">{{ __('applabels.datatable CT' ) }}</th>
                <th class="text-nowrap">{{ __('applabels.datatable Sync' ) }}</th>
            </thead>
            <tbody>

            </tbody>
        </table>

    
        <div class="card-footer bg-transparent">
            <input type="hidden" name="afterID" id="afterID" value="" />
            <input type="hidden" name="beforeID" id="beforeID" value="" />
            <small class="px-4">
                <b>{{ __('applabels.Refreshing in:') }}<span id="timer" class="text-danger"></span></b>
            </small>
        </div>

</div>
                
              
    
    @include('videos.modalpopups.editManagerVideo')

    @include('components.modalalert') 

@push('scripts')    
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/datetime/1.2.0/js/dataTables.dateTime.min.js"></script>
<script type ="text/JavaScript" src = " https://MomentJS.com/downloads/moment.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>


<script src="https://cdn.datatables.net/2.1.8/js/dataTables.min.js"></script>  
<script src="https://cdn.datatables.net/2.1.8/js/dataTables.bootstrap5.min.js"></script>  
<script type="text/javascript" src="{{ asset('/js/timer.js') }}"></script> 

<script type="text/javascript">

        function subtractMonths(date, months) {
            date.setMonth(date.getMonth() - months);
            return date;
        }

        function formaDateForInput(date){             
            var day = ("0" + date.getDate()).slice(-2);
            var month = ("0" + (date.getMonth() + 1)).slice(-2);
            return (date.getFullYear()+"-"+(month)+"-"+(day));
        }

        const modalAlert = new bootstrap.Modal('#modalAlert')
        const token = " ";
        var minDate, maxDate;
 
        var oneMonthAgo = subtractMonths(new Date(), 1);         
        $('#min').val(formaDateForInput(oneMonthAgo));

        var today = new Date(); 
        $('#max').val(formaDateForInput(today));
        
        const duration = 10; //timer
        let display = document.querySelector('#timer');
 
        let recordsTotal = 0;

        var startdate;  
        var enddate; 

       
        // Pipelining function for DataTables. To be used to the `ajax` option of DataTables
        //
        $.fn.dataTable.pipeline = function (opts) {
            // Configuration options
            var conf = $.extend(
                {
                    pages: 5, // number of pages to cache
                    url: '', // script url
                    data:function (d) {
                            d.search = $('input[type="search"]').val(),
                            d.dateMin = startdate,
                            d.dateMax = enddate,
                            d.videoID= videoId,
                            //d.accesToken = token,
                            d.totalRecords = recordsTotal ,
                            d.after  = $('#afterID').val(),
                            d.before  = $('#beforeID').val()
                            
                        } , // null function or object with parameters to send to the server
                    // matching how `ajax.data` works in DataTables
                    method: 'GET', // Ajax HTTP method
                },
                opts
            );
        
            // Private variables for storing the cache
            var cacheLower = -1;
            var cacheUpper = null;
            var cacheLastRequest = null;
            var cacheLastJson = null;
        
            return function (request, drawCallback, settings) {
                var ajax = false;
                var requestStart = request.start;
                var drawStart = request.start;
                var requestLength = request.length;
                var requestEnd = requestStart + requestLength;
                //console.log (request);
                if (settings.clearCache) {
                    // API requested that the cache be cleared
                    ajax = true;
                    settings.clearCache = false;
                } else if (cacheLower < 0 || requestStart < cacheLower || requestEnd > cacheUpper) {
                    // outside cached data - need to make a request
                    ajax = true;
                } else if (
                    JSON.stringify(request.order) !== JSON.stringify(cacheLastRequest.order) ||
                    JSON.stringify(request.columns) !== JSON.stringify(cacheLastRequest.columns) ||
                    JSON.stringify(request.search) !== JSON.stringify(cacheLastRequest.search) ||
                    JSON.stringify(request.dateMin) !== JSON.stringify(cacheLastRequest.dateMin)
                ) {
                    // properties changed (ordering, columns, searching)
                    ajax = true;
                    // reset prev next fields
                    $('#afterID').val(null);
                    $('#beforeID').val(null);
                }
        
                // Store the request for checking next time around
                cacheLastRequest = $.extend(true, {}, request);
        
                if (ajax) {
                    // Need data from the server
                    if (requestStart < cacheLower) {
                        requestStart = requestStart - requestLength * (conf.pages - 1);
        
                        if (requestStart < 0) {
                            requestStart = 0;
                        }
                    }
        
                    cacheLower = requestStart;
                    cacheUpper = requestStart + requestLength * conf.pages;
        
                    request.start = requestStart;
                    request.length = requestLength * conf.pages;
        
                    // Provide the same `data` options as DataTables.
                    if (typeof conf.data === 'function') {
                        // As a function it is executed with the data object as an arg
                        // for manipulation. If an object is returned, it is used as the
                        // data object to submit
                        var d = conf.data(request);
                        if (d) {
                            $.extend(request, d);
                        }
                    } else if ($.isPlainObject(conf.data)) {
                        // As an object, the data given extends the default
                        $.extend(request, conf.data);
                    }
        
                    return $.ajax({
                        type: conf.method,
                        url: conf.url,
                        data: request,
                        dataType: 'json',
                        cache: false,
                        success: function (json) {
                            cacheLastJson = $.extend(true, {}, json);
        
                            if (cacheLower != drawStart) {
                                json.data.splice(0, drawStart - cacheLower);
                            }
                            if (requestLength >= -1) {
                                json.data.splice(requestLength, json.data.length);
                            }
        
                            drawCallback(json);
                        },
                    });
                } else {
                    json = $.extend(true, {}, cacheLastJson);
                    json.draw = request.draw; // Update the echo for each response
                    json.data.splice(0, requestStart - cacheLower);
                    json.data.splice(requestLength, json.data.length);
        
                    drawCallback(json);
                }
            };
        };
        
        // Register an API method that will empty the pipelined data, forcing an Ajax
        // fetch on the next draw (i.e. `table.clearPipeline().draw()`)
        $.fn.dataTable.Api.register('clearPipeline()', function () {
            return this.iterator('table', function (settings) {
                settings.clearCache = true;
            });
        });
 
        $(document).ready(function() {
            $('#path').html( sessionStorage.getItem('activemenulabel') );
            const duration = 10; //timer
            let display = document.querySelector('#timer');

            let recordsTotal = 0;
            startdate = $('#dates').data('daterangepicker').startDate.format('YYYY-MM-DD') ;
            enddate = $('#dates').data('daterangepicker').endDate.format('YYYY-MM-DD') ;

              // Create date inputs
            
            
        
            let table =$('#live-videos-table').DataTable({
                serverSide: true,
                ajax: $.fn.dataTable.pipeline({
                    bStateSave: true,
                    url: "{{  url('/videos/manager-datatables') }}", 
                    method: "get",
                    pages: 5,
                    data: function (d) {
                        d.search = $('input[type="search"]').val(),
                        d.dateMin = startdate,
                        d.dateMax = enddate,
                        d.social = $("input:checkbox[name='social']:checked").map(function() {
                                    return this.value;
                                    }).get().join(', '),                      
                        //d.accesToken = token,
                        d.totalRecords = recordsTotal ,
                        d.after  = $('#afterID').val(),
                        d.before  = $('#beforeID').val()
                         
                    }
 

                }),
                columnDefs: [{
                    targets: "_all",
                    orderable: false,
                    searchable: true
                 }],
                layout: {
                    topStart: {                        
                            info: {
                                text: 'Showing _START_ to _END_ of _TOTAL_ records'
                            },
                        },
                        
                        topEnd:{
                                search: {
                                    placeholder: 'Type search here'
                                }
                            },
                        bottomStart:  'pageLength', 
                        bottomEnd:{
                            paging: { 
                                firstLast: false
                            }
                    }
                }, 
                initComplete: function () {
                                    $('#tableCustomers_info').addClass('small');
                                    $('#dt-search-0').removeClass('w-60');
                                    $('#dt-search-0').addClass('from-control pe-2');
                                    $('#dt-search-0').parent().parent().addClass('ps-0');
                                    $("label[for='dt-search-0']").addClass('d-none');
                },
                language: { search: '', 
                            searchPlaceholder: "Search..." , 
                            paginate: {
                                previous: '<span class="prev-icon"></span> Previous',
                                next: 'Next <span class="next-icon"></span>' ,
                            }
                },
                pageLength: 10,
               // oLanguage: { "sSearch": ""},
                order: [[5, 'desc']],
                columns: [
                {
                    data: 'social',
                    render: function (data, type) {
                        let socialmedia = '';
                        switch (data) {
                            case 'instagram':
                                socialmedia = 'instagram';
                                break;
                            case 'facebook':
                                socialmedia= 'facebook';
                                break;
                        }        

                        return ' <span class="text-primary lead px-0"><i class="fa-brands fa-'+ socialmedia +'"></i>  ';
                    }
                },
                {
                    data: 'api_video_id',
                    render: function (data, type) {
                         return data ;
                    }
                },
                {
                    data: 'title',
                    render: function (data, type) {
                         return data;
                    }
                },
                {
                    data: 'status',
                    render: function (data, type) {
                        let content = data;
                        if ( (data.toLowerCase()== "live")  || (data.toLowerCase()=="broadcast") )  {//
                            content = '<button class="btn btn-danger btn-sm" >'+data+'</button>';
                        }
                       
                        return content;
                         
                    }
                },
                { // EDIT VIDEO TITLE
                    data: 'api_video_id',
                   
                    render: function ( data, type , row, meta) {
                        html = '';
                       if(row['social'] != 'instagram'){
                        html = ' <button class="btn   rounded-pill badge  btn-sm text-white bg-success" ';        
                        html += 'id="btn-edit'+row['api_video_id']+'" ';
                        html += ( row['del_disabled']   ) ? 'disabled' : '';
                        html +=   '><i class="fa-solid fa-pen"></i></button>';                            
                        html += '</span>';
                    }
                        return html;
                    }
                },
                { 
                    data: 'creation_time',
                    className: 'edit_date transaction_dt',
                    render: function ( data, type , row, meta) {
                            $('#afterID').val(row['next']);
                            $('#beforeID').val(row['prev']);
                            return type === "display" || type === "filter" ?
                                moment(data).format("YYYY-MM-DD  HH:mm:ss") :  data;
                   
                    }
                },
                { //DELETE VIDEO AND COMMENTS
                    data: 'api_video_id',
                    render: function (data, type, row, meta) {
                        btnID = "btn-delete"+data;
                         
                        if(row['social'] != 'instagram'){
                            if ( row['del_disabled']   ) { 
                            return '<button class="btn btn-danger   btn-sm" id="btn-delete'+data+'" disabled><i class="fa-solid fa-trash-can"></i></button>';
                                
                            }
                            else { return '<button class="btn btn-danger btn-sm" id="btn-delete'+data+'" data-bs-toggle="tooltip" data-bs-html="true" title="'+
                                '{{ __("applabels.datatable VD+CT tooltip") }}" '+
                                'onclick ="deleteAllFromSM(\''+btnID+'\', \''+row['social']+'\', \''+row['del_disabled']+'\', \''+row['api_video_id']+'\')"' +
                                
                                '><i class="fa-solid fa-trash-can"></i></button>';
                                
                            }
                        } else {
                            return '';
                        }
                    }
                }  
                ,
                {  //DELETE COMMENTS
                    data: 'api_video_id', 
                    render: function (data, type, row, meta) {
                        btnID = "btn-cmt-delete"+data;                       
                        console.log(row);
                        if ( row['sync_disabled']   ) { 
                            return '<button class="btn btn-warning text-white  btn-sm" id="'+btnID+'" disabled><i class="fa-solid fa-trash-can"></i></button>';
                        }
                        else {;
                            return '<button class="btn btn-warning btn-sm text-white" id="'+btnID+'" data-bs-toggle="tooltip" data-bs-html="true" title="'+
                            '{{ __("applabels.datatable CT tooltip") }}" '+
                            'onclick ="deleteCommentsFromSM(\''+btnID+'\', \''+row['sync_disabled']+'\', \''+row['api_video_id']+'\')"' +                          
                            '><i class="fa-solid fa-trash-can"></i></button>';
                            
                        }
                    }
                } ,
                { //SYNC 
                    data: 'api_video_id',
                    render: function (data, type, row, meta) {
                        if ( row['sync_disabled']   ) { 
                           return '<button class="btn btn-outline-success btn-sm"   id="syncVideo" alt="ReSync" disabled><i class="fa-solid fa-rotate"></i></button></b>';
                        }
                        else {
                            return ' <button class="btn btn-outline-success btn-sm"   id="syncVideo'+data+'" alt="ReSync"><i class="fa-solid fa-rotate" title="'+
                            '{{ __("applabels.datatable Sync tooltip") }}'+'"></i></button></b>';                            
                        }
                    }
                }
                ], // columns
                fnDrawCallback: function () {
                    console.log( table.ajax.params('after'));
                    console.log(  table.page.info() );
                    $('#live-videos-table tbody tr td:nth-child(-n+4)').click(function () {

                        // get position of the selected row
                        var position = table.row( this ).index();
                        var data = table.row( position ).data();
                        
                        var id = data.api_video_id
                        var videoid = data.id
                        var social = data.social
                        var status = (data.status != '') ? data.status : 'published';
                        var title = (data.title != '') ? data.title : '-';
                        title = encodeURIComponent(encodeURIComponent(title))
                        // redirectcomments/managerVideoComments/{videoId}/{title}/{token}/{network}
                        if (data.status.toLowerCase() != 'live ended' ) {
                            document.location.href =  "{{  LaravelLocalization::localizeUrl('/comments/managerVideoComments/') }}"+ '/' + id+ '/' + videoid + '/' + title +'/'+ social.toLowerCase()+'/'+ status; 
                        }
                    })
                     

                }
                 
 
                
            });
            table.on('click', 'td:nth-last-child(5)', function (event) { //EDIT VIDEO
                var data = table.row(this).data();
                
                if ( data['del_disabled'] ) { console.log("del_disabled EDIT Video"); return 1;}
                console.log("EDIT Video");console.log(data);
                let id = data['api_video_id'];
                let media = data['social'];
                if (media != 'instagram'){ // delete is not implemented for Instagram Videos            
                    
                 
                    populateformEditVideoTitle (  id, media ) ;
                    /*let pageurl = "{{ url('/video/edit') }}/"+id+'/'+media;

                    $.nsWindow.open({                        
                        title:'Edit Video',                        
                        height: 0,                    
                        width: 0, 
                        dataUrl: pageurl,                                      
                        theme:'black'                        
                    });  */  
                } 
                

            });
         /*   table.on('click', 'td:nth-last-child(3)', function (event) { //DELETE VIDEOS AND COMMENTS
                var data = table.row(this).data();
                $('td:nth-last-child(3)', table.row(this)).addClass('no-click'); // Disable click on column 
                console.log("Delete Video and comments");
                console.log(data);
                if (data['del_disabled']) {
                    console.log('disabled'); 
                    return 1
                };
                let id = data['api_video_id'];
                let media = data['social'];

                
                if (media != 'instagram'){ // delete is not implemented for Instagram Videos            
                    if (confirm("{{ __('applabels.ALERT DELETE Video from DB' ) }}") ){
                        let btn = $("#btn-delete"+id);
                        btnDisable(btn);
    
                        $.ajax({
                            url: `{{ url('/all-comments') }}/`+id,
                            type: "delete",
                            success: function(response) {
                                console.log('response', response);
                                if (response.success) {
                                    console.log("comentários eliminados", ); 
                                }
                                
                            },
                            error: function(jqXHR, textStatus, errorThrown) {
                                let error = jqXHR.responseJSON;
                                document.getElementById('warning').innerHtml = "Desculpe, Houve um erro ao apagar os comentários \n"+ (error ? error.message : '');
                                console.log(textStatus, errorThrown);btnEnable(btn) 
                                return 0; 
                            }
                        });
                        
                        $.ajax({
                            url:`{{ url('/video') }}/`+id,
                            //https://graph.${media}.com/v14.0/${video_id}?access_token=${token}
                            type: "delete",
                            success: function(response) {
                                console.log('response', response);
                                if (response.success) {
                                   
                                    table.clearPipeline().draw(false);
                                }
                            },
                            error: function(jqXHR, textStatus, errorThrown) {
                                document.getElementById('warning').innerHtml = "Desculpe, Houve um erro ao apagar o video \n"+ (error ? error.message : '');
                                console.log(textStatus, errorThrown);
                                
                            }
                        });
                    }
                } 
                $('td:nth-last-child(3)', table.row(this)).removeClass('no-click');
                 btnEnable(btn) 

            });*/
           /* table.on('click', 'td:nth-last-child(2)', function (event) { //DELETE COMMENTS
                let $cell = $(this);
                console.log($cell)
                console.log('has class '+ ($cell.attr('data-click-disabled') ))
                if ( $cell.attr('data-click-disabled') ) {
                    console.log('Click is disabled for this cell!');
                    event.stopImmediatePropagation(); // Block the event
                    return 0;
                }

                var data = table.row(this).data();
               
                $cell.attr('data-click-disabled', 'true');
                 
                if (data['sync_disabled']) {console.log('disabled');return 1};
                let id = data['api_video_id']; 
                let btn = $('#btn-comment'+id)
                btnDisable(btn) 
                setTimeout(_ => console.log('btn clicked') , 20000)  
                if (confirm("{{ __('applabels.ALERT DELETE ALL comments' ) }}") ){
                    $.ajax({
                        url: `{{ url('/all-comments--') }}/`+id,
                        type: "delete",
                        success: function(response) {
                            console.log('response', response);
                            table.clearPipeline().draw(false);
                            console.log("eliminado", );
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            let error = jqXHR.responseJSON
                            $cell.attr('data-click-disabled', 'false');
                            alert("{{ __('applabels.ALERT ERROR DELETING comments' ) }}"+"\n"+ (error ? error.message : ''))
                            console.log(textStatus, errorThrown); 
                           
                        }
                    });
                } 
                
                $cell.removeAttr('data-click-disabled');
                btnEnable(btn) 
               

            });*/


            table.on('click', 'td:last-child', function (event) { // RESYNC 
                var data = table.row(this).data();
                console.log(data);
               // alert( 'You clicked on '+data['_id']+'\'s row' );
                let id = data['api_video_id'];
                if (data['sync_disabled']) {console.log('disabled');return 1};
                const btn = $('#syncVideo'+id)
                btnDisable(btn);
                                  
                    
                $.ajax({
                    url: `{{ url('/resyncVideo') }}/${id}`,
                    method: "get",
                    success: function(response) {
                        console.log('response', response);
                        btnEnable(btn);
                        table.clearPipeline().draw(false);
                        //window.location.reload();
                        //}
                        
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        let error = jqXHR.responseJSON;
                        
                        btnEnable(btn);
                        alert("Desculpe, Houve um erro ao sincronizar \n"+ textStatus);
                            
                        window.location.href = '/public/index.php';
                    }
                });
        
            } );
 

            
            $('#dates').on('apply.daterangepicker', function (ev, picker) {
                    // console.log(picker.startDate.format('DD-MM-YYYY'));
                    startdate =  picker.startDate.format('YYYY-MM-DD') ;
                    enddate =  picker.endDate.format('YYYY-MM-DD') ;
                    //console.log('dates' + startdate +'-'+enddate);
                    table.clearPipeline().draw(false);
            });

             $('#social1, #social2').on('change', function () {
                table.clearPipeline().draw(false);
            });
             // REFRESHING TIMER 
            var timer = duration,minutes, seconds;
            startTimer(duration, display); 
            const interval =  setInterval( async () =>  {                    
                    checkSession()
                    checkLiveVideos()                     
                    await table.clearPipeline().draw(false);
                    await startTimer(duration, display);
                }, 20000 );
           
            $('#syncVideos').on('click',function syncVideos(){
                let btn = $('#syncVideos')
                btnDisable(btn)
                startdate = $('#dates').data('daterangepicker').startDate.format('YYYY-MM-DD') ;
                enddate = $('#dates').data('daterangepicker').endDate.format('YYYY-MM-DD') ;
                console.log('SYNC VIDEOS')
                $.ajax({
                    url: `{{ url('/resyncVideos') }}`+"/"+startdate+"/"+enddate,
                    method: "get",
                    success: function(response) {       
                        btnEnable(btn)                                             
                        table.clearPipeline().draw(false);
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        let error = jqXHR.responseJSON; 
                    }
                });
              
            });

             //custom format of DataTables Search boxes
            $('[type=search]').each(function () {
                $(this).attr("placeholder", "{{__('applabels.datatable Search')}}");
               // $(this).before('<span class="fa fa-search"></span>');
                $(this).removeClass('form-control form-control-sm').addClass('input w-60')
            });
           
     


        $(document).ajaxStart(function() {
            $(document.body).css({'cursor' : 'wait'});
        }).ajaxStop(function() {
            $(document.body).css({'cursor' : 'default'});
        });


       
        /*
        function syncVideo(id){
                const btn = document.getElementById('syncVideo'+id)
               
                btn.innerHTML = html

                //alert()
                $.ajax({
                    url: `{{ url('/resyncVideo') }}/${id}`,
                    method: "get",
                    success: function(response) {
                        console.log('response', response);
                        //if (response.success) {
                        $.fn.dataTable.clearPipeline().draw(false);
                        //window.location.reload();
                        //}
                        
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        let error = jqXHR.responseJSON;
                        html = `<button class="btn btn-danger btn-sm" id=syncVideos" onclick="syncVideos()">+textStatus+</button>`;
                        btn.innerHTML = html;
                       alert("Desculpe, Houve um erro ao sincronizar \n"+ textStatus);
                            
                        window.location.href = '/public/index.php';
                    }
                });
            }*/
         
        

   

    function reloadMyPAge(){
            let tableinfo = table.page.info();
                recordsTotal = tableinfo.recordsTotal;
                console.log( recordsTotal );
                if (recordsTotal === 0) {
                    //refresh page
                    console.log('recordTotla is zero - reload');
                    location.reload()

                } else {
                    console.log('recordTotla is not ZERO - refreshing');

                    table.clearPipeline().draw(false);
                    
                }

        }
    });  
    
    $('#dates').daterangepicker({
        ranges: {
            'Today': [moment(), moment()],
        
            'Last 7 Days': [moment().subtract(6, 'days'), moment()],
            'Last 30 Days': [moment().subtract(29, 'days'), moment()],
            'This Month': [moment().startOf('month'), moment().endOf('month')],
            'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')], 
            'This Year': [moment().startOf('year'), moment().endOf('year')],
            'Last Year': [moment().subtract(1, 'year').startOf('year'),  moment().subtract(1, 'year').endOf('year')]
        },
        opens: 'left',
        locale: {
                format: 'DD/MM/YYYY'
            },
        "alwaysShowCalendars": true,
        "startDate": moment().subtract(3, 'months'),
        "endDate":moment()
        
        }, function(start, end, label) {
            console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
    });


    function checkLiveVideos() {
        $.ajax({
            url: '/check-live-status',
            type: 'GET',
            dataType: 'json',
            success: function(data) {
                console.log(data.message);
            },
            error: function(xhr, status, error) {
                console.log("Error checking live videos:"+ error);
            }
        });
    }


    function deleteCommentsFromSM (btnID, sync_disabled, api_video_id){
            console.log ('delete comments')
            let btn = $(`#${btnID}`);
            btnDisable(btn) 
            if (sync_disabled === 'true') {console.log('disabled');return 1};
                let id = api_video_id;                 
                btnDisable(btn)                 
                if (confirm("{{ __('applabels.ALERT DELETE ALL comments' ) }}") ){
                    
                    $.ajax({
                        url: `{{ url('/all-comments') }}/`+id,
                        type: "delete",
                        success: function(response) {
                            console.log('response', response);
                            btnEnable(btn) 
                            $('#live-videos-table').DataTable().clearPipeline().draw(false);
                            console.log("eliminado");
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            let error = jqXHR.responseJSON
                            btnEnable(btn) 
                            alert("{{ __('applabels.ALERT ERROR DELETING comments' ) }}"+"\n"+ (error ? error.message : ''))
                            console.log(textStatus, errorThrown); 
                           
                        }
                    });
                } 
        }


        function deleteAllFromSM (btnID,social, del_disabled, api_video_id){
            console.log ('delete video')
            let btn = $(`#${btnID}`);
            btnDisable(btn) 
             
            if (del_disabled === 'true') { console.log('disabled'); return 1};
            let id = api_video_id;
            let media = social;

                
                if (media != 'instagram'){ // delete is not implemented for Instagram Videos            
                    if (confirm("{{ __('applabels.ALERT DELETE Video from DB' ) }}") ){
                        
                     
          
                        
                        $.ajax({
                            url:`{{ url('/video') }}/`+id,
                            //https://graph.${media}.com/v14.0/${video_id}?access_token=${token}
                            type: "delete",
                            success: function(response) {
                                console.log('response', response);
                                if (response.success) {
                                    btnEnable(btn)
                                    $('#live-videos-table').DataTable().clearPipeline().draw(false);
                                }
                            },
                            error: function(jqXHR, textStatus, errorThrown) {
                                btnEnable(btn)
                                document.getElementById('warning').innerHtml = "Desculpe, Houve um erro ao apagar o video \n"+ (error ? error.message : '');
                                console.log(textStatus, errorThrown);
                                
                            }
                        });
                    }
                } 
        }
</script>
@endpush
@endsection