@extends('layouts.app')
@push('style')
 
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/3.0.2/css/responsive.bootstrap5.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/buttons/3.0.2/css/buttons.dataTables.css" /> 

 
<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://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.2.0/css/bootstrap.min.css"
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/dataTables.bootstrap5.min.css"> -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/2.1.8/css/dataTables.bootstrap5.css"/>
<style>

    #imported-comments-table.dataTable td:last-child, #imported-comments-table.dataTable th:last-child {
        text-align: left;
        white-space: nowrap !important;
    }
    #imported-comments-table.dataTable td , #imported-comments-table.dataTable th  {  
    text-align: center;
    }
    #imported-comments-table.dataTable td:nth-child(2) , #imported-comments-table.dataTable th:nth-child(2) 
    {  
    text-align: left;
    }
   /* #imported-comments-table.dataTable td:nth-child(3) , #imported-comments-table.dataTable th:nth-child(3) ,*/
    #imported-comments-table.dataTable td:nth-child(4) , #imported-comments-table.dataTable th:nth-child(4) 
   
    {  
        display: none;
    }
    #imported-comments-table.dataTable td:nth-child(9) , #imported-comments-table.dataTable th:nth-child(9) {
         display: none;
    }
    #imported-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;
            }
    }

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

<div class="row p-4 pb-0 mx-0  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="imported-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.datatable Delete' ) }}</th>
            <th  class="" stlye="visibility: hidden; width:0px"> </th>
            <th class="colo-1">{{ __('applabels.datatable date time' ) }}</th>
        </thead>
        <tbody>

        </tbody>
    </table>
 
   

</div> 
 

@include('authors.modalpopup.authorclient')
    @include('authors.modalpopup.editcreate')
 
    @include('components.modalalert') 
    @include('comments.modalpopups.customReply')
 

@push('scripts')
<!-- 
<script src="https://cdn.datatables.net/2.0.8/js/dataTables.min.js"></script>  
<script src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script>  
<script src="https://cdn.datatables.net/1.13.1/js/dataTables.bootstrap5.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" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<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">
    const token = "   token ";
    const apivideoId = "{{ $apiVideoId }}";
    const thisvideodate = "{{ $videodate }}";
    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: 10, // 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= apivideoId,
                        //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() {

        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;
        }
        //console.log(thisvideodate);
        // display = document.querySelector('#timer');
       $('#path').html( "<a href='/videos/database'>"+ sessionStorage.getItem('activemenulabel') + "</a> > {{ __('applabels.DATABASE>Comments') }} ");
        // Create date inputs

        startdate = $('#dates').data('daterangepicker').startDate.format('YYYY-MM-DD') ;
        enddate = $('#dates').data('daterangepicker').endDate.format('YYYY-MM-DD') ;
      
        console.log ('Date '+$('#dates').data('daterangepicker').startDate);

        let table = $('#imported-comments-table').DataTable({

            serverSide: true,
                ajax: $.fn.dataTable.pipeline({
                    bStateSave: true,
                    url: "{{  url('/comments/ajaxImportedCommentsDatasource/') }}", 
                    method: "get",
                     pages: 10,
             
                    data: function (d) {
                        d.search = $('input[type="search"]').val(),
                       // d.dateMin = $('#min').val(),
                       // d.dateMax= $('#max').val(),

                        d.dateMin = startdate,
                        d.dateMax = enddate,
                        d.videoID= apivideoId
                        //d.totalRecords = recordsTotal 
                    }
                }),
                
            layout: {
                    topStart: {                        
                        info: {
                            text: 'Showing _START_ to _END_ of _TOTAL_ records'
                        },
                    },
                    
                    topEnd:{
                            search: {
                                placeholder: 'Type search here'
                            }
                        },
                    bottomStart:  'pageLength', 
                    bottomEnd:{
                        paging: { 
                            firstLast: false
                        }
                    }
                }, 
                columnDefs: [{
                    targets: "_all",
                    orderable: true,
                    searchable: true
                 }],
               // sDom: '<"top"if>rt<"bottom"lp><"clear">',
                pageLength: 10,
                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>' ,
                            }
                },
                scroller: false,
                order: [[9, 'desc']], //
                columns: [
                { data: 'social',
                    render: function (data, type, row, meta) {
                       
                        return '<div class="'+((row['deleted_from_social_media']) ? 'text-secondary' :'text-primary') + ' px-0 anchor-tooltip lead"><i class="fa-brands fa-{{ $social }}"></i> </div>';
                    }
                },                
                 
                { 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) {  
 

                        if  ((row['is_admin_reply'] == 'y') || (row['is_admin_comment']) ){  
                            html=  (row['prvt_msg'])  ? '<i class="fa-solid fa-comments ms-2"></i>' : '';
                        } else {
                            html = ((((row['social'] == 'instagram') && ( ( row['status'] == 'BROADCAST')  ))) ? '' : '<button class="btn  btn-sm"   id="custom_reply'+row['id']+'"  alt="Custom Reply"'+
                              ' >'  + // (isMoreThan24HoursOld(row['created_time']) ? 'disabled':'') +
                              '<i class=" '+ (  ((row['custom_admin_reply'] == 1) ? ' text-success ' :  '' ) ) + // isMoreThan24HoursOld(row['created_time']) ? 'text-secondary':
                              ' fa-solid fa-message"></i></button>' ) ;                                  
                        }   
                         return html;
                          
                    }
                },
                  
                {   data: 'replied',
                    render: function (data, type, row, meta) { 
                        if (row['is_admin_reply'] == 'y') { 
                            html = ''
                        } else {
                            html =  '<span class="anchor-tooltip col-6 me-auto '+ (row['has_default_reply'] ? 'text-success' : 'text-dark')+'"> <i class="fa-solid fa-comment-dots"></i></span>';
                        }
                         return html;
                    }
                }, 
                {   data: 'prtflag', //print
                    render: function (data, type, row, meta) {
                        if (row['is_admin_reply'] == 'y') { 
                            html = ''
                        } else {
                            html = '<span   id="prt-'+row['id']+'" class="badge bg-secondary rounded-pill   ';
                            html += (data ? 'bg-success' : 'bg-danger') + '">';
                            html += '<a class="text-white"  ><i class="fa-solid fa-print"></i></a>';
                            html += '</span>';
                        }
                         return html;
                    }
                } ,
                {   data: 'comment_id', //pdf
                    render: function (data, type, row, meta) {
                        if (row['is_admin_reply'] == 'y') { 
                            html = ''
                        } else {
                            html = '<span class="badge bg-secondary rounded-pill  ">';
                            html += '<a class="text-white" href="{{ url('/') }}/export-local-comment/pdf/'+data+'" target="_blank"><i class="fa-solid fa-file-pdf"></i></a>';
                            html += '</span>';
                        }
                         return html;
                    }
                } ,
                {   data: 'name', //blacklist
                    render: function (data, type, row, meta) {
                        if (row['is_admin_reply'] == 'y') { 
                            html = ''
                        } else {
                            html = '<span id="'+data+'" class="text-primary badge  anchor-tooltip ' + (row['blocked'] ? 'bg-danger' : 'bg-success') +' rounded-pill  ">';
                            html += '<a class="text-white" id="black-'+row['id']+'"> <i class="fa-solid fa-user-slash"></i></a></span></div>';
                        }
                        return html;
                    }
                } ,

               
                {    data: 'id', //delete
                    render: function (data, type, row, meta) {
                        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['prvt_msg'])) ? "" :  ' <button class="btn  btn-danger  rounded-pill badge  btn-sm" title="Delete" id="btn-del-'+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>';
                         }/*
                        html = '  <button title="Delete only from DB" class="btn btn-danger rounded-pill badge  btn-sm" id="del-'+data+'"'  ;
                        html +=   (row['comment_id'].indexOf("PRVT_") >= 0) ? " disabled" : "" ;
                        html += ' ><i class="fa-solid fa-trash-can"></i></button>';*/
                         return html;
                    }
                } ,
                {   data: 'id', //hidden - just to make order column number 9
                    render: function(){
                        return '';
                    }
                },
                {    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;
                    }
                }
                ], // columns

                rowCallback: function(row, data, index){
                    console.log(data);
                       //console.log(data);
                    if (data['deleted_from_social_media']) {
                        $(row).off('click'); // Remove click event
                        $(row).addClass('disabled-row'); // Add a CSS class to disable styling
                        //$(row).find('input, button, select, a').prop('disabled', true); // Disable interactive elements
                    }
                  
                    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');    // children('.anchor-tooltip').                
                            $(row).find('td:eq('+rowindex+')').attr('data-bs-placement', 'top');     //.children('.anchor-tooltip')
                            $.each( reason, function() {
                                tooltipinfo += '\n'+this['description'];
                            })
                            $(row).find('td:eq('+rowindex+')').attr('title', tooltipinfo);//.children('.anchor-tooltip')
                        }
                    
                        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');   // .children('.anchor-tooltip')                 
                            $(row).find('td:eq('+rowindex+')').attr('data-bs-placement', 'top'); // .children('.anchor-tooltip')
                            
                            $.each( reason, function() {
                                tooltipinfo += '\n'+this['description'];
                            })
                            $(row).find('td:eq('+rowindex+')').attr('title', tooltipinfo); //.children('.anchor-tooltip')
                        }

                        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'); // .children('.anchor-tooltip')                   
                            $(row).find('td:eq('+rowindex+')').attr('data-bs-placement', 'top'); //.children('.anchor-tooltip')
                            
                            $.each( reason, function() {
                                tooltipinfo += '\n'+this['description'];
                            })
                            $(row).find('td:eq('+rowindex+')').attr('title', tooltipinfo); //.children('.anchor-tooltip')
                        }
                    }
                },
                "drawCallback": function( settings ) {
                    console.log( 'DataTables has redrawn the table' );
                }
        }); // datatable 

/*         $('#min, #max').on('change', function () {    
                //console.log(table)            ;
                table.draw();
                });  */

        $('#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);
        });
            
 
        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') )  {  //  || (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'] == 'instagram') && ( ( data['status'] == 'BROADCAST') || (data['status'] == 'BROADCASTED') ) )  );
             
            if (typeof data['id'] == 'undefined'){ return 1}
          
            populateformCustomMessagesModalPopup (  id, data['social'], live, 1) ;
            
           
        });
        table.on('click', 'td:nth-last-child(7)', function (event) { //REPLY MESSAGE
            // this column is hidden in CSS
            var data = table.row(this).data();
            console.log(data);
             alert( 'You clicked on '+data['comment_id']+'\'s ' );
            let id = data['comment_id'];
             
            if (typeof data['id'] == 'undefined'){ return 1}
            btn = $("#custom_reply"+data['id']);
            btnDisable(btn);
            if (confirm("{{ __('applabels.ALERT Send default reply'  ) }}")) {
                $.ajax({
                    url: "{{ url('/comment/post-reply') }}/" + id +"/{{ $social }}",
                    type: "post",
                    datatype: "json",
                    success: function(response) {
                        console.log(response, ' Resposta AJAX')
                        table.clearPipeline().draw(false);
                        
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        console.error(textStatus, errorThrown);
                    }
                });
            }
            btnEnable(btn);
 
           
        });

        table.on('click', 'td:nth-last-child(4)', function (event) { //BLOCK COMMENTS
            var data = table.row(this).data();
            //console.log(data);
            // alert( 'You clicked on '+data['name']+'\'s ' );
            let id = data['id'];
             
            if (typeof data['id'] == 'undefined'){ return 1}
            const btn = document.getElementById('black-'+id)
 
            let name = data['name']!=''?data['name']:'-';
             
            //blacklist(data['authors_id'], name , data['email'], "{{ $social }}");

            populateModalPopup(data['api_user_id'], name , data['email'], "{{ $social }}");
         
           
        });

        table.on('click', 'td:nth-last-child(3)', function (event) { //DELETE COMMENTS
            var data = table.row(this).data();
            if (  (data['prvt_msg'])){
                
                console.log("{{ __('applabels.Disabled') }}"); 
                return 1
            };
            let id = data['id'];

            const btn = $('#btn-del-'+id)
            btnDisable(btn)
            

            if (confirm("{{ __('applabels.ALERT Delete comment' ) }}" )) {
                $.ajax({
                    url: "{{ url('/comment') }}/" + data['comment_id'],
                    type: "delete",
                    datatype: "json",
                    success: function(response) {
                        console.log(response, ' Resposta AJAX')
                        table.clearPipeline().draw(false); 
                        btnEnable(btn)
                        //table.clearPipeline().ajax.reload(null,false);
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        console.error(textStatus, errorThrown);
                    }
                });
            }
           
            //table.clearPipeline().draw(false);
        });
        table.on('click', 'td:nth-last-child(6)', function (event) { //flagCommentPrt  
            //function flagCommentPrt(id) {
            var data = table.row(this).data();
            if (data['is_admin_reply'] == 'y') {console.log('DISABLED'); return 1;}
            // alert( 'You clicked on '+data['_id']+'\'s row' );
            let id = data['id'];
            let currentPrtflag = data['prtflag'];
            console.log ('flagCommentPrt: '+id);
            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');
                         
                        if (currentPrtflag){ btn.removeClass('bg-success').addClass('bg-danger') } else  { btn.removeClass('bg-danger').addClass('bg-success')} ;
                        table.clearPipeline().draw(false);
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        console.log(textStatus + errorThrown);
                    }
                });
            btnEnable(btn)
        });
        table.on('click', 'td:nth-child(2)', function (event) { //EDIT AUTHOR/CLIENT
            var data = table.row(this).data();
            console.log(data);
            console.log( ' EDIT AUTHOR/CLIENT 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'],"{{ $social }}");
            }
            
        });
        //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')
        });

        
       

    });
        

    function exportExcel() {
    window.open("{{ url('/export-local-comments/excel/'.$video_id.'/'. $social) }}", 'blank')
    }

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

    function exportPdf(etiqueta) {

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

    }

 /*   function blacklist(userId, name , email, socialMedia){

      


        let pageurl = "{{ url('/authors/create')}}/" +userId+'/'+name+'/'+email +'/'+socialMedia;
        nswindowHeigth =  window.outerWidth > 1200 ? (window.outerWidth > 2400 ? 700 : 660 ) : 430 ;
            nswindowWidth =   window.outerWidth > 1200 ? (window.outerWidth > 2400 ? 1280 : 1040 )  : 880 ;  
        if (userId) {                 
            $.nsWindow.open({                        
            title:'Member Block',                        
            height: nswindowHeigth,                    
            width: nswindowWidth,                                           
            dataUrl: pageurl,                        
            theme:'black'                        
            });                 
        }
        else {
            alert( "{{ __('applabels.ALERT User cannot be blocked' ) }}" )
        }
    }*/
          

         
  
        function blockUser() {   
            alert('block');   
            $.ajax({
                    url: "{{ url('/block') }}/" + id,
                    type: "post",
                    datatype: "json",
                    success: function(response) {
                        console.log(response, ' Resposta AJAX')
                        return true;
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        console.log(textStatus + errorThrown);
                    }
                });
        
        }
        

        function clearForm() {      }

         

            function saveForm()  {
                
                var formData  = $(formAuthor).serializeArray(); //serialize

                console.log (formData);
                
                $.ajax({
                    url: "{!! url('/authors/save') !!}",
                    type: "post",
                    data: formData,
                    datatype: "json",
                    success: function(response) {
                        console.log(response, ' Resposta AJAX')
                        window.location.reload()

                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        console.error(textStatus, errorThrown);
                    }
                });


            }

            
        // 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('submit',"#formCustomMessages" , function(e) { 
        
            e.preventDefault();
            var formData  = $(formCustomMessages).serializeArray(); //serialize
            //check for active TAB
            let activeTab = $('#nav-tab .active').attr('id');
            console.log (activeTab);
            console.log (formData);
            if (activeTab == 'nav-default-tab') {
                formData['custom_text'] = null;
            }
                $.ajax({
                    url: "{!! url('/comment/post-custom-reply') !!}",
                    type: "post",
                    data: formData,
                    datatype: "json",
                    success: function(response) {
                        console.log(response, ' Resposta AJAX')
                        // check message and display
                        $('#alert').html(response['message']);
                        $('#alert').removeClass('d-none'); 
                        if (response['message'] == 'operation successfull'){
                            $.nsWindow.close();
                            
                            $('#imported-comments-table').clearPipeline().draw(false);
                        }                      

                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        console.error(textStatus, errorThrown);
                    }
                });

        });


        $(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
                         
        });  
        
        
        
    $('#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),  //moment().subtract(4, '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 + ')');
    });
</script>

 
    @endpush
@endsection