@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.datatables.net/responsive/2.5.0/css/responsive.dataTables.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>
 
#comments-table.dataTable td:last-child, #comments-table.dataTable th:last-child {
    text-align: left;
    white-space: nowrap !important;
}
#comments-table.dataTable td:first-child, #comments-table.dataTable th:first-child {  
  text-align: center;
}

#comments-table.dataTable td:nth-child(n+3):nth-child(-n+9), #comments-table.dataTable th:nth-child(n+3):nth-child(-n+9){
    /*
#comments-table.dataTable td:nth-child(3), #comments-table.dataTable th:nth-child(3),
#comments-table.dataTable td:nth-child(4), #comments-table.dataTable th:nth-child(4),
#comments-table.dataTable td:nth-child(5), #comments-table.dataTable th:nth-child(5) ,
#comments-table.dataTable td:nth-child(6), #comments-table.dataTable th:nth-child(6),
#comments-table.dataTable td:nth-child(7), #comments-table.dataTable th:nth-child(7),
#comments-table.dataTable td:nth-child(8), #comments-table.dataTable th:nth-child(8){  */
  text-align: center;
}

#comments-table_wrapper {
    padding-left: 0rem !important;
  padding-right: 0rem !important;
}



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

.input-group.mb-3.me-0 {
    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-0 {
                width: 480px;
            }
    }


    .disabled-column, .disabled-row {
    pointer-events: none; /* Disables all mouse interactions */
    opacity: 0.5; /* Greyed-out effect */
}
</style>
@endpush
@section('content')
    @include('authors.modalpopup.authorclient')
    @include('authors.modalpopup.editcreate')

    @include('comments.modalpopups.customReply')
    @include('comments.modalpopups.editManagerComment')
    @include('components.modalalert') 
 
<div class="row p-4 pb-0  mx-0 my-2  rounded-3 border shadow-lg text-left">
    
        <div class="col ps-0">
            <div id="info-message">  </div>
            <h4 class="text-dark text-uppercase ps-0 ms-0" id="path"></h4> 
            <div class="text-muted px-0"><span>{{ __('applabels.video ID') }}: {{ $apiVideoId  }} / {{ $status }}</span></div>
            <div class="text-muted px-0"><h4>  {{ $title  }}</h4></div>
            
        </div>
        <div class="col pe-0">
            <span class="d-flex justify-content-end align-items-end">
                <button class="btn btn-danger me-2" onclick="exportA4()"><i class="fa-solid fa-file-pdf"></i> {{ __('applabels.Export to A4' ) }}</button>
                <button class="btn btn-success me-2" onclick="exportExcel()"><i class="fa-solid fa-file-excel"></i> {{ __('applabels.Export to Excel' ) }}</button>
                <button class="btn btn-danger" onclick="exportPdf()"><i class="fa-solid fa-file-pdf"></i> {{ __('applabels.Export to Label' ) }}</button>
            </span>
            <div id="searchPanel" class="d-flex flex-row flex-row p-4 pb-2 bg-light justify-content-between">
                <div class="col-2 mb-auto">
                    <div class="p-2">
                    <!-- label>Social Media: </label>
                    <input type="checkbox"  value="facebook" id="social1" name="social" checked class="dataTables_filter " > <span class="text-primary px-0 pe-2"><i class="fa-brands fa-facebook"></i></span></option>
                    
                    <input type="checkbox"  value="instagram" name="social" id="social2" checked class="dataTables_filter "> <span class="text-primary px-0"><i class="fa-brands fa-instagram"></i></span></option>
                    
                        </select-->
                    </div>
                </div>
                
                <div class="col-6  py-2 ms-auto mb-auto  me-0 ">
                    <div class="d-flex flex-row justify-content-end align-items-end">
                        
                        <div class="input-group mb-3 me-0">
                            <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>        
            </div><!-- filter section -->
        </div>
     <!-- panel head section -->
    <table id="comments-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  title="{{ __('applabels.SocialMedia' ) }}">{{ __('applabels.datatable SM' ) }}</th>
            <th class="col-10">{{ __('applabels.datatable Author: Comment') }}</th>
            <th class="text-nowrap">{{ __('applabels.datatable CustomMessage' ) }}</th>
            <th class="text-nowrap">{{ __('applabels.datatable DefaultMessage' ) }}</th>
            <th class="text-nowrap">{{ __('applabels.datatable Print' ) }}</th>
            <th class="text-nowrap">{{ __('applabels.datatable PDF' ) }}</th>
            <th class="text-nowrap">{{ __('applabels.datatable Block' ) }}</th>
            <th  class="text-nowrap">{{ __('applabels.Edit' ) }}</th>
            <th  class="text-nowrap">{{ __('applabels.datatable Delete' ) }}</th>
            <th class="text-nowrap">{{ __('applabels.datatable date time' ) }}</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>

 



@push('scripts')

<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>  
<script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap5.min.js"></script>   
<script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>  
<!-- script type="text/javascript" language="javascript" src="https://cdn.datatables.net/searchpanes/2.1.0/js/dataTables.searchPanes.min.js"></script--> 
<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" language="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">
     
    const videoId = "{{ $apiVideoId }}";
    const socialmedia = "{{ $socialMedia }}";

    const thisvideodate = "{{ $videodate }}";
    var startdate;  
    var enddate; 

  
    var minDate, maxDate;

    // 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 > 0) { 
                            json.data.splice(requestLength, (json.data.length !== null)  ? json.data.length : 0);
                        }
                    
                        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( "<a href='/videos/manager'>"+ sessionStorage.getItem('activemenulabel') + "</a> > {{ __('applabels.Management>Comments') }} ");
        const video_id = "{{ $video_id }}";
        const status = "{{ $status }}";
 
        startdate = $('#dates').data('daterangepicker').startDate.format('YYYY-MM-DD') ;
        enddate = $('#dates').data('daterangepicker').endDate.format('YYYY-MM-DD') ;

        let recordsTotal = 0;

        function isMoreThan24HoursOld(dateString) {
            //only apply to p+rivate messages
             
            let givenDate = new Date(dateString); // Convert input to Date object
            let now = new Date(); // Get current date & time

            let timeDifference = now - givenDate; // Difference in milliseconds
            let hoursDifference = timeDifference / (1000 * 60 * 60); // Convert to hours
            let replylimit = "{{ env('FACEBOOK_REPlY_TIME_LIMIT')}}"
            let isolder = hoursDifference > replylimit
             
            return isolder;
        }

       
        
        let table = $('#comments-table').DataTable({
                serverSide: true,
                ajax: $.fn.dataTable.pipeline({
                    bStateSave: true,
                    url: "{{  url('/comments/managerFetchVideoComments') }}", 
                    method: "get",
                    pages: 5,
                    
                    data: function (d) {
                        d.search = $('input[type="search"]').val(),

                        d.dateMin = startdate,
                        d.dateMax = enddate,
                        d.videoID= videoId,
                        d.status = status,
                        d.totalRecords = recordsTotal ,
                        d.after  = $('#afterID').val(),
                        d.before  = $('#beforeID').val()
                        
                    }
                }),
                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>' ,
                            }
                },
                columnDefs: [{
                    targets: "_all",
                    orderable: false,
                    searchable: true
                 }],
               // sDom: '<"top"if>rt<"bottom"lp><"clear">',
                pageLength: 10,
                
                //pagingType: "simple_numbers",
                //oLanguage: { "sSearch": ""},
                order: [[9, 'desc']],

                columns: [
                {
                    data: 'social',
                    render: function (data, type, row, meta) {
                        html =  '<span class="'+((row['deleted_from_social_media']) ? 'text-secondary' :'text-primary') + '  anchor-tooltip px-0"><i class="fa-brands fa-{{ $socialMedia }}"></i> ';
                       
                        html += ' </span>';
                        return html;
                    }
                },                
                 
                {  data: 'message',
                    render: function (data, type, row, meta) { 
                        //console.log(row);
                        let prevRowData= [];
                        if (meta.row > 0) { // Ensure there's a previous row
                        prevRowData = table.row(meta.row - 1).data(); 
                        //console.log('MESSAgE BUIULDER')
                        //console.log(prevRowData['message']+ ' ' +prevRowData['is_reply']);
                        //console.log(row['message']+ ' ' +row['is_reply']);
                        }else{
                            prevRowData['is_reply'] = 'f'
                            prevRowData['is_admin_comment'] = '0'
                        }
                       
                        html= '<div class="row ms-2">';
                        if (row['parent_row'] == 'show_replies') {
                           // html += '<i class="fa-solid fa-chevron-down"></i>'
                        }  
                        html += '<div class="text-dark  anchor-tooltip me-0 '+( (row['is_reply'] == 'y') ? ('col-1 '+ (((prevRowData['is_reply'] == 'y') && (!row['is_admin_comment'])) ? 'ms-4' : 'ms-2') +'" style="max-width:25px"') : ' col-0"' )+'  >';                       
                        if (row['reaction'] != ''){
                            html +=  '<img src="'+row['reaction']+'" width="24" class="me-2"  >'
                        }
                        if (row['is_reply'] == 'y') {                              
                            html +=  '<i class="fa-solid fa-chevron-right  me-2"></i>'                           
                        }
                        html +=  '</div>' //first column
                        html += ' <div class="text-dark  anchor-tooltip col-10 me-auto ms-0 ps-0 " > ' //second column 
                        html+= '<div class="row p-0 m-0">'+ row['name']+': '+ data +' <div> ';
                        if (row['authorObj'] !== null){
                            html += ((row['authorObj'].id !== null)  ? '<div class="row fs-6 my-auto  me-auto ">' : '');
                            html += ((row['authorObj'].mentionColor !== null) ? '<div class="col-1 p-0 me-2 my-1" style="float: left;  height: 20px;  width: 20px; border: 1px solid black;  clear: both;  background-color: '+row['authorObj'].mentionColor +';"></div> ' : '');
                            html += ((row['authorObj'].id !== null)  ?  '<div class="col-11 m-0 p-0">'+ ' {{ __("applabels.Customer")}}: ' + row['authorObj'].name +'</div>': '') ;
                            html += ((row['authorObj'].id !== null)  ? '</div>' : '');
                        }
                        html += '</div>'//second column
                        html += '</div>'//main row
                        return html; 
                    }
                },

                {  data: 'custom_reply', orderable: false, 
                    render: function (data, type, row, meta) {  
                        
                        html = '';
                        if  ((row['is_admin_reply'] == 'y') || (row['is_admin_comment']) ){  
                            html=  (row['prvt_msg'])  ? ('<i class="fa-solid fa-comments ms-2"></i>') : '';
                        } else {
                           /* if ( (row['social'].toLowerCase() == 'instagram') && ( (row['status'].toUpperCase() == 'BROADCASTED')) ){
                                html = '';
                            } else
                             {*/
                                html = '<button class="btn  btn-sm"   id="custom_reply'+row['id'] +'"  alt="Custom Reply"'
                                 
                                html += isMoreThan24HoursOld(row['created_time']) ? 'disabled':''; 
                                html += ' ><i class=" '+ ( isMoreThan24HoursOld(row['created_time']) ? 'text-secondary': ((row['custom_admin_reply'] == 1) ? ' text-success ' :  '' ) ) ;
                                html +=  ' fa-solid fa-message"></i></button>'  ;                                  
                            //}
                        }   
                         return html;
                          
                    }
                },
                  
                  
                {   data: 'replied', orderable: false, 
                    render: function (data, type, row, meta) {  
                        if ((row['is_admin_reply'] == 'y') || (row['is_admin_comment']) || ( (row['social'].toLowerCase() == 'instagram') &&   (row['status'] == 'BROADCAST') ) ) { 
                            html = '' 
                        } else {
                            html = '<button class="btn  btn-sm"   id="auto-reply-'+row['id']+'" alt="Auto Reply" '+ (((socialmedia == 'instagram') && (status == 'Broadcast')  || (row['status'] == 'BROADCASTED') || isMoreThan24HoursOld(row['created_time'])) ? 'disabled' : '' ) + '>'; 
                            html +=  '<i class=" ' +  ( isMoreThan24HoursOld(row['created_time']) ? 'text-secondary': ((row['auto_admin_reply'] == 1) ? ' text-success ' :  '' ) ) ;
                            html += ' fa-solid fa-comment-dots"></i></button>' ;
                        }
                         return html;
                    }
                },
                {   data: 'prtflag', orderable: false,  //print
                    render: function (data, type, row, meta) {
                        if ((row['is_admin_reply'] == 'y') || (row['is_admin_comment']) ) { 
                            html = ''
                        } else {
                            html = '<button id="prt-'+row['id']+'" class="btn badge rounded-pill text-white ';
                        // console.log(row['id']);
                            if (row['id'] != null ) { //entry is in DB 
                                html += (data ? 'btn-success' : 'btn-danger') + '"';                                
                            }
                            else {
                                html += 'btn-secondary" disabled';                                
                            }
                            html +=  '><i class="fa-solid fa-print"></i></button>';
                        }
                        return html;
                    }
                } ,
                {
                    data: 'comment_id',  orderable: false, //pdf
                    render: function (data, type, row, meta) {
                        if ((row['is_admin_reply'] == 'y') || (row['is_admin_comment']) ) { 
                            html = ''
                        } else {
                           // html = '<span class="badge bg-secondary rounded-pill ">';  
                            html = '<button class="btn btn-secondary rounded-pill badge text-white"  target="_blank"><i class="fa-solid fa-file-pdf"></i></button>';
                            //html += '</span>';
                        }
                        return html;
                    }
                } ,    
                {
                    data: 'name',  orderable: false, //blacklist
                    render: function (data, type, row, meta) {
                        if ((row['is_admin_reply'] == 'y') || (row['is_admin_comment']) ) { 
                            html = ''
                        } else {// class="btn  btn-danger  rounded-pill badge " 
                            html = '<button class="btn text-white badge ' + (row['blocked'] ? 'btn-danger' : 'btn-success') +' rounded-pill  btn-sm">' ;
                            //'<button class="text-white" >' ;
                                //user is blocked 
                            html += '<i class="fa-solid fa-user-slash"></i></button>'; 
                        }
                        return html;
                         //blackList('+row['id']+','+(row['name']!=''?row['name']:'-') +','+row['email']+',{{ $socialMedia }})" >
                    }
                } ,
                {
                    data: 'comment_id',  orderable: false, //edit comment
                    render: function (data, type, row, meta) {
                       
                        if ('{{ $socialMedia }}' == 'instagram'){  console.log ('instagram'); return '' };
                        if ( ((row['is_admin_reply'] == 'y') || (row['is_admin_comment']) )&& (!row['prvt_msg']) ) { //.indexOf("PRVT_") < 0
                             
                            html = ' <button class="btn   rounded-pill badge  btn-sm text-white ';                           
                            console.log('is_hidden '+data);
                            if (row['id'] != null ) { //entry is in DB 
                                html += (data   ? 'bg-success' : 'bg-danger') + '" ';
                                html += 'id="btn-commentedit'+row['comment_id']+'" ';
                                html += (!data   ? 'disabled' : '') +'><i class="fa-solid fa-pen"></i></button>';                            
                            }                             
                            html += '</span>';
                        } else  
                         {  html = '' }
                        return html;
                         //blackList('+row['id']+','+(row['name']!=''?row['name']:'-') +','+row['email']+',{{ $socialMedia }})" >
                    }
                } ,
               /*  {
                    data: 'is_hidden', //ban comment
                    render: function (data, type, row, meta) {
                        if ((row['is_admin_reply'] == 'y') || (row['is_admin_comment']) ) { 
                            html = ''
                        } else {
                            html = ' <button class="btn   rounded-pill badge  btn-sm text-white ';                           
                            console.log('is_hidden '+data);
                            if (row['id'] != null ) { //entry is in DB 
                                html += (data   ? 'bg-danger' : 'bg-success') + '" ';
                                html += 'id="btn-commentedit'+row['comment_id']+'" ';
                                html += (data   ? 'disabled' : '') +'><i class="fa-solid fa-ban"></i></button>';                            
                            }                             
                            html += '</span>';
                        }
                        return html;
                         //blackList('+row['id']+','+(row['name']!=''?row['name']:'-') +','+row['email']+',{{ $socialMedia }})" >
                    }
                } , */
               
                {
                    data: 'comment_id', orderable: false,  //delete
                    render: function (data, type, row, meta) {
                        //console.log('row data')
                        console.log('delete '+row['social'].toLowerCase());
                         if ((row['social'].toLowerCase() == 'instagram') && ( ( row['status'] == 'BROADCAST') || (row['status'] == 'BROADCASTED') )) {   
 
                           
                            html = ''; // '<button class="btn btn-danger  rounded-pill  btn-sm badge " id="btn-delete'+data+'" disabled><i class="fa-solid fa-trash-can"></i></button>';
                         } else {
                            html = ( (((row['social'] == 'instagram') &&  ( row['status'] != 'VIDEO')) || (row['prvt_msg'])) ? "" :  ' <button class="btn  btn-danger  rounded-pill badge  btn-sm" title="Delete from Social Media" id="btn-comment'+data+'"' +
                            ' ><i class="fa-solid fa-trash-can"></i></button>');
                             //'                            <span class="badge bg-danger rounded-pill "><a class="text-white" id="btn-comment'+data+'"  ><i class="fa-solid fa-trash-can"></i></a></span>';
                         }

                         return html
                    }
                } ,
                { 
                    data: 'created_time',   orderable: true, 
                    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;
                    }
                }
                /*{
                    data: 'next',
                    render: function (data, type) {
                        
                        console.log ( $('#afterID').val());
                         return '';
                    }
                }*/
                ], // columns

                rowCallback: function(row, data, index){
                 

                    if (data['author'] != '') {
                                            
                        let tooltipinfo = '';
                        let rowindex = 0;
                        reason = $.grep(data['author'], function(e) { return e.type === 'BLOCK' });
                        if(!$.isEmptyObject(reason)){       
                            rowindex = 6;                                
                            $(row).find('td:eq('+rowindex+')').css('background-color',  reason[0]['color']);
                            $(row).find('td:eq('+rowindex+')').attr('data-bs-toggle', 'tooltip');                     
                            $(row).find('td:eq('+rowindex+')').attr('data-bs-placement', 'top');
                            $.each( reason, function() {
                                tooltipinfo += '\n'+this['description'];
                            })
                            $(row).find('td:eq('+rowindex+')').attr('title', tooltipinfo);
                        }
                    
                        reason = $.grep(data['author'], function(e) { return e.type === 'RS' });
                        if( !$.isEmptyObject(reason)){
                            rowindex = 0;       
                            tooltipinfo = '';                    
                            $(row).find('td:eq('+rowindex+')').css('background-color',  reason[0]['color']);
                            $(row).find('td:eq('+rowindex+')').attr('data-bs-toggle', 'tooltip');                     
                            $(row).find('td:eq('+rowindex+')').attr('data-bs-placement', 'top');
                            
                            $.each( reason, function() {
                                tooltipinfo += '\n'+this['description'];
                            })
                            $(row).find('td:eq('+rowindex+')').attr('title', tooltipinfo);
                        }

                        reason = $.grep(data['author'], function(e) { return e.type === 'NOTIF' });
                        if(  !$.isEmptyObject(reason)){  
                            rowindex = 1;
                            tooltipinfo = '';                        
                            $(row).find('td:eq('+rowindex+')').css('background-color',  reason[0]['color']);
                            $(row).find('td:eq('+rowindex+')').attr('data-bs-toggle', 'tooltip');                     
                            $(row).find('td:eq('+rowindex+')').attr('data-bs-placement', 'top');
                            
                            $.each( reason, function() {
                                tooltipinfo += '\n'+this['description'];
                            })
                            $(row).find('td:eq('+rowindex+')').attr('title', tooltipinfo);
                        }
                    }
                },
                "drawCallback": function(data, settings ) {
                    console.log( 'DataTables has redrawn the table' );
                    //console.log(data.json);
                    //console.log( table.ajax.params('after'));
                    let next = table.ajax.params('after').after = $('#afterID').val();
                    //console.log(next);
                    //console.log(  table.page.info() );
                    let tableinfo = table.page.info();
                    recordsTotal = tableinfo.recordsTotal;
                    //console.log( recordsTotal );
                }
        }); // datatable 

        table.on('click', 'td:nth-child(2)', function (event) { //EDIT AUTHOR/CLIENT
            var data = table.row(this).data();
           // console.log(data);
            console.log( 'You clicked on EDIT AUTHOR/CLIENT '+data['id']+'\'s row' );
            console.log( 'You clicked on '+data['id']+'\'s row - ' + data['is_admin_reply']);
            if (! (data['is_admin_reply'] == 'y')) {
                populateAuthorClientModalPopup((data['api_user_id']!=''?data['api_user_id']:'0'),(data['name']!=''?data['name']:'-') ,data['email'],"{{ $socialMedia }}");
            }
        });

        table.on('click', 'td:nth-last-child(8)', function (event) { //REPLY CUSTOM MESSAGE
            var data = table.row(this).data();
            //console.log(data);
            if ((data['is_admin_reply'] == 'y')|| (data['is_admin_comment'] == '1') || (isMoreThan24HoursOld(data['created_time'])) )  {  //  (((data['social'] == 'instagram') && ( ( data['status'] == 'BROADCAST') || (data['status'] == 'BROADCASTED') )))
                console.log('DISABLED') ; 
                return 1
            }
            console.log( 'You clicked on '+data['comment_id']+'\'s ' );
            let id = data['comment_id'];

            let live =( ( (data['social'].toLowerCase() == 'instagram') &&  ( data['status'] == 'BROADCAST') )  );
             console.log ('LIVE: '+live);
            if (typeof data['id'] == 'undefined'){ return 1}
              
           
            //let pageurl = "{{ url('/comment/custom-post-reply/')}}/" + id +"/{{ $socialMedia }}";
            let pageurl = "{{ url('/comment/custom-post-reply/')}}/" + id +'/' +data['social']
            pageurl += live ? '/1' : ''; //limit or not the pop-up window
            populateformCustomMessagesModalPopup (  id, data['social'], live) 
           /* $.nsWindow.open({                        
                title:'Redes Sociais',                        
                height: 0,                    
                width: 0, 
                dataUrl: pageurl,                                      
                theme:'black'                        
            }); */   
            
 
           
        });
        table.on('click', 'td:nth-last-child(7)', function (event) { //REPLY MESSAGE
            var data = table.row(this).data();
            console.log(data);
            if ( (data['is_admin_reply'] == 'y') || (data['is_admin_comment'] == '1') || (isMoreThan24HoursOld(data['created_time']))  || ( ( (data['social'] == 'instagram') && ( ( data['status'] == 'BROADCAST') || (data['status'] == 'BROADCASTED')  ) )  ) ){ //
                console.log('DISABLED') ; return 1
            }
            let id = data['comment_id'];             
            if (typeof data['id'] == 'undefined'){console.log('UNDEFINED'); return 1}
            const btn = $('#auto-reply-'+data['id']);            
          
            btnDisable(btn)
           
            if (confirm("{{ __('applabels.ALERT Send default reply'  ) }}")) {
                $.ajax({
                    url: "{{ url('/comment/post-reply') }}/" + id +"/{{ $socialMedia }}",
                    type: "post",
                    datatype: "json",
                    success: function(response) {
                        console.log(response, ' Resposta AJAX')
                        table.clearPipeline().draw(false); 
                        btnEnable(btn)
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        console.error(textStatus, errorThrown);
                        btnEnable(btn)
                    }
                });
            }
            
 
           
        });
        table.on('click', 'td:nth-last-child(3)', function (event) { //EDIT COMMENTS
            console.log ('HIDE');
            var data = table.row(this).data();
            if (data['is_hidden']) { return 1;}
            social = '{{ $socialMedia }}';
            if ( ((social == 'instagram') && ( ( data['status'] == 'BROADCAST') || (data['status'] == 'BROADCASTED') )) || (data['prvt_msg'] )){
                
                console.log("{{ __('applabels.ALERT NOT Available in Instagram Live') }}"); 
                return 1
            };
            // alert( 'You clicked on '+data['_id']+'\'s row' );
            let id = data['comment_id'];
            //status = '{{ $status  }}';            
           
            const btn = $('#btn-commentedit'+id)
            btnDisable(btn)

           
          //  let pageurl = "{{ url('/comment/edit') }}/"+id+'/'+social;
            populateformEditManagerComment (  id, social ) ;
            setTimeout(_ =>  btnEnable(btn), 2000)
           ;
            
        });
        table.on('click', 'td:nth-last-child(2)', function (event) { //DELETE COMMENTS
            var data = table.row(this).data();
            console.log(data);
            social = '{{ $socialMedia }}';
            if ( ((social == 'instagram') && ( ( data['status'] == 'BROADCAST') || (data['status'] == 'BROADCASTED') )) || (data['prvt_msg'] )){
                
                console.log("{{ __('applabels.ALERT NOT Available in Instagram Live') }}"); 
                return 1
            };
            // alert( 'You clicked on '+data['_id']+'\'s row' );
            let id = data['comment_id'];
            //status = '{{ $status  }}';            
            console.log(social +':'+ status);           
            
            const btn =$('#btn-comment'+id)
            btnDisable(btn)
            if (confirm("{{ __('applabels.ALERT DELETE comment from SM') }}")) {
                $.ajax({
                    
                    url: "{{ url('/comment-delete') }}/" + id ,
                    type: "delete",
                    datatype: "json",
                    success: function(response) {
                        console.log(response, ' Resposta AJAX')
                        table.clearPipeline().draw(false)
                        btnEnable(btn)
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        console.error(textStatus, errorThrown);
                        btnEnable(btn)
                    }
                });
            } else {                
                btnEnable(btn)
            }
        });

        table.on('click', 'td:nth-last-child(6)', function (event) { //MARK PRINTER COMMENTS
            var data = table.row(this).data();
           
            console.log( 'You clicked on '+data['id']+'\'s row' );
            if (data['is_admin_reply'] == 'y') {console.log('DISABLED'); return 1;}
            let id = data['id'];
            let currentPrtflag = data['prtflag'];
            console.log("ROW ID : "+data['id']);
            if (typeof data['id'] == 'undefined'){ return 1}
            const btn = $('#prt-'+id);
            btnDisable(btn)
            
            $.ajax({
                    url: "{{ url('/comment/flag-for-printer') }}/" + id,
                    type: "post",
                    datatype: "json",
                    success: function(response) {
                        console.log(response, ' Resposta AJAX')
                        btnEnable(btn)
                        if (currentPrtflag){ btn.removeClass('btn-success').addClass('btn-danger') } else  { btn.removeClass('btn-danger').addClass('btn-success')} ;
                        table.clearPipeline().draw(false)
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        console.log(textStatus + errorThrown);
                        btnEnable(btn)
                    }
            });
        });
        table.on('click', 'td:nth-last-child(5)', function (event) { //PDf

            var data = table.row(this).data();
            let myhref="{{ url('/') }}/export-local-comment/pdf/"+data['comment_id'];
            let newTab = window.open(myhref, '_blank'); // Open a new blank tab first           
             
        });
        table.on('click', 'td:nth-last-child(4)', function (event) { //AUTHOR POPUP
            var data = table.row(this).data();
            console.log(data);
            
            console.log( 'You clicked on AUTHOR POPUP'+data['id']+'\'s row' );
           
            if ( ((data['is_admin_reply'] == 'y') || (data['is_admin_comment']) )&& (!data['prvt_msg']) ){
                return 1
            } else {
                populateModalPopup((data['api_user_id']!=''?data['api_user_id']:'0'),(data['name']!=''?data['name']:'-') ,data['email'],"{{ $socialMedia }}");
            };
            
        });
     
        $('#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);
        });


        // REFRESHING TIMER 
        const duration =     "{{ env('LIVES_PRESET_REFRESH_TIME', 10) }}"; //timer
        const refreshInterval = duration*1000;
        let display = document.querySelector('#timer'); 
        startTimer(duration, display);  
        setInterval( async () =>  {
                await startTimer(duration, display);
                await table.clearPipeline().draw(false);
                checkLiveVideos()
                checkSession()
            }, refreshInterval );
         
        //custom format of DataTables Search boxes
        $('[type=search]').each(function () {
            $(this).attr("placeholder", "Search...");
            //$(this).before('<span class="fa fa-search"></span>');
            $(this).removeClass('form-control form-control-sm').addClass('input w-60')
        });
        
       
       
    });//document ready 

    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 exportExcel() {
            window.open("{{ url('/export-local-comments/excel/'.$video_id .'/'. $socialMedia) }}", 'blank')
        }

        function exportA4() {
                window.open("{{ url('/export-local-comments/pdf-a4/'.$video_id .'/'.$socialMedia) }}", 'blank')
        }

        function exportPdf(etiqueta) {

                window.open("{{ url('/export-local-comments/pdf/'.$video_id .'/'.$socialMedia) }}", 'blank')
        }

    

        
          

                   
    
        

                

      
      


        // function to capture click events on pop-upwindow for custom message replies
        $(document).on("change",  "input[name='channel']", function(e){
                e.preventDefault();
                var radio_selected = $('input[name=channel]:checked', '#formCustomMessages').val();
                // alert(radio_selected);
                var el = $(this);
                console.log(el);
                if(!el) return;
                $('input[name=channel]', '#formCustomMessages').each(function(Index){
                    $('label[for='+$(this).attr('id')+']').addClass('btn-secondary').removeClass('btn-outline-success');
                });
                $('label[for='+$(this).attr('id')+']').removeClass('btn-secondary').addClass('btn-outline-success');
                
        });

        


        $(document).on('button[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                      
            $(this).addClass("active"); // add class active to the current tab
            var correctid = $(this).data("id"); // get the attribute data-id of the clicked tab
                         
        });   


       
        function blacklist(userId, name , email, socialMedia){ 
            
       
                if (userId != 0) {    
                   // populateModalPopup(userId, name , email, socialMedia);             
                      
                }
                else {
                    alert(" {{ __('applabels.ALERT User cannot be blocked' ) }} ")
                }
            }


          
        
    $('#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, 'month').endOf('month')]
        },
        opens: 'left',
        locale: {
                format: 'DD/MM/YYYY'
            },
        "alwaysShowCalendars": true,
        "startDate": moment(thisvideodate), 
        "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 + ')');
    });

            
</script>
        
      
    @endpush
 
@endsection