@extends('layouts.app')
@push('style')
 
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/00jquery.dataTables.min.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://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="{{ asset('/css/ns-window.css') }}">


<link rel="stylesheet" type="text/css" href="{{ asset('/css/products-datatable.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,
#comments-table.dataTable td:nth-child(n+3):not(:last-child), #comments-table.dataTable th:nth-child(n+2):not(:last-child)
{   
  text-align: center;
}





/*#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(3), #comments-table.dataTable th:nth-child(2),*/

 

</style>

@endpush
@section('content')
<div class="container-fluid my-1  bg-light border shadow-lg rounded-3">
       
    <div class="row py-2 text-left">
        <div class="col ">             
            <h4 class="text-dark text-uppercase ps-0">{{ __('applabels.Present') }}</h4>           
        </div>
        
        <div class="col  align-items-end text-end px-2">
        
            <button class="btn btn-danger" type="button" data-bs-toggle="collapse" data-bs-target="#collapseProducts" aria-expanded="false" aria-controls="collapseProducts" id="btnProducts">
                <i class="fa-solid fa-eye-slash pe-2" id="productBtnIcon"></i>{{ __('applabels.Products') }}
            </button>
            <span class="spacer mx-2"></span>
        
            <button class="btn btn-danger" type="button" data-bs-toggle="collapse" data-bs-target="#collapseComments" aria-expanded="false" aria-controls="collapseComments" id="btnComments">
                <i class="fa-solid fa-eye-slash pe-2" id="commentsBtnIcon"></i>{{ __('applabels.Notifications') }}
            </button>                    
        </div>

    </div>
    <div class="row px-2 text-nowrap justify-content-between">

                <div class="col p-0 m-0 col-0" id="leftPanel">
                    <div class="col ">
                        <div class="row  mx-0   ">
                      
                            <div class="collapse col shadow-lg bg-light border rounded-3 pb-0" id="collapseProducts">
                                <h4 class="px-0 mt-4 mb-0">{{ __('applabels.Product Description') }}</h4>
                                <div class="px-0 mb-0 mt-n4" style="margin-top:-40px" id="produto">
                                    <table id="table_produtos" class="display">
                                        <thead>
                                            <tr>
                                                <!-- th>id</th -->
                                                <th></th>
                                                <th><!-- {{ __('applabels.Variations Description') }} --></th>
                                                <th><!-- {{ __('applabels.Variations material') }} --></th>
                                                <th><!-- {{ __('applabels.Variations price') }} --></th>
                                                <th><!-- {{ __('applabels.Variations reference') }} --></th> 
                                                <th> </th>
                                                <th> </th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                             
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="row mx-0 ">
                       
                            <div class="collapse col  shadow-lg  bg-light border rounded-3 pb-3" id="collapseComments">
                            <h4 class="px-1 mt-4">{{ __('applabels.Notifications') }} </h4>
                                    <div class="list-group" id="gestor"></div>
                            </div>
                        </div>
                        <div class="row mt-3 ">
                        <!--div class="col bg-light border rounded-3 mt-3">
                            <script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>
                            <div
                                class="fb-video px-4 my-4"
                                data-href="https://www.facebook.com/video.php?v= video']['id'"
                                data-width="300"
                                data-height="300"
                                data-allowfullscreen="true"></div>
                        </div-->
                        </div>
                    </div>
                   
                </div>
                <div class="col-12" id="rightPanel">    
                    <div class="row p-1 pb-0 pe-lg-0 pt-lg-0 rounded-3 border shadow-lg">
                        <div class="container">
                            <div class="text-dark px-0">
                                <span class="text-primary px-0 pe-2" id="infomessage">
                                    @if (isset($title['FB']['title']))
                                        <div  id='liveFeedFBTitle'><i class="fa-brands fa-facebook pe-2"></i> {{ $title['FB']['title'] }} | {{ $title['FB']['description'] }}    </div>
                                    @endif
                                    
                                    @if (isset( $title['IG']['id'])) <span > | </span>                                 
                                 <span  id='liveFeedIGTitle'><i class="fa-brands fa-instagram pe-2"></i></span> {{ $title['IG']['title'] }} | ({{ $title['IG']['id'] }})                              
                                    @endif

                                    @if ($errortoken!=1)
                                        <div id="info-message" class="mr-4 alert alert-danger hidden" > {{$errortoken}} </div>
                                    @endif
                                </span>
                            </div>
                        
                            <div id="searchPanel" class="flex-row p-4 pb-2 bg-light justify-content-between">                                
                                <div class="col-12 mb-auto">
                                    <div class="p-2">
                                       
                                                               
                                        <label>{{ __('applabels.Social Media:') }}</label>
                                        @foreach ($social as $sm)
                                            <input type="checkbox"  value="{{ $sm->id }}" id="social{{$sm->id}}" name="social" checked class="dataTables_filter " > <span class="text-primary py-2 px-0 pe-2"><i class="fa-brands fa-{{strtolower($sm->name)}}"></i></span>                     
                                        @endforeach
                        
                                    </div> 

                                    <div class="col-6  py-2 ms-auto mb-auto  me-0 visually-hidden">
                                        <div class="d-flex flex-row justify-content-end align-items-end">
                                        
                                            <div class="p-2 "> <label>{{ __('applabels.Date Start' ) }}:</label> <input type="text" id="min" name="min" class="input w-60" >
                                            </div>
                                            <div class="p-2 me-0 pe-0">
                                                <label>{{ __('applabels.Date End' ) }}:</label> <input type="text" id="max" name="max"  class="input w-60" >
                                            </div>
                                    
                                        </div> 
                                    </div>     
                                </div>            
                            </div><!-- filter 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 >{{ __('applabels.datatable SM' ) }}</th>
                                    <th class="col-10">{{ __('applabels.datatable Author: Comment') }}</th>
                                    <th class=" ">{{ __('applabels.datatable CustomMessage' ) }}</th>
                                    <th class=" ">{{ __('applabels.datatable DefaultMessage' ) }}</th>
                                    <th class="text-nowrap">{{ __('applabels.datatable Print' ) }}</th>
                                    <th class=""> {{ __('applabels.datatable Block' ) }}</th>
                                    <th class=" ">{{ __('applabels.datatable Delete' ) }}</th>
                                    <th class="col-1">{{ __('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>
                    </div>
                </div>
    </div>
</div>
@include('authors.modalpopup.authorclient')
@include('authors.modalpopup.editcreate')
@include('comments.modalpopups.customReply') 
@include('components.modalalert') 




@push('scripts') 
<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" language="javascript" src = "https://MomentJS.com/downloads/moment.js"></script>
<script type="text/javascript" src="{{ asset('/js/ns-window.js') }}"></script>


<script type="text/javascript" src="{{ asset('/js/timer.js') }}"></script>      

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

    $(document).ready(function() {
  
        const video_id = " "; 

        let recordsTotal = 0;
        
        
             
        let productsTable = $('#table_produtos').DataTable({
                    
                ajax: {
                    url: "{{ url('/products/live') }}",
                    type: "get",
                    data:  function (d) {
                        
                        d.search = $('input[type="search"]').val()
                    }
                },
               
                serverSide: true,
                processing: false,
                /*aaSorting:[[0,"desc"]],*/

                columnDefs: [{
                    targets: "_all",
                    orderable: false,
                    searchable: true
                }],
                sDom: '<"top"><"right"f>rt<"bottom">p<"left"><"clear">',
                pageLength: 1,
                paging: true,
                pagingType: "simple",
                oLanguage: { "sSearch": ""},
                scroller: false,
                language: {
                    'paginate': {
                    'previous': '<span class="prev-icon"><i class="fa-solid fa-caret-left"></i></span>',
                    'next': '<span class="next-icon"><i class="fa-solid fa-caret-right"></i></span>'
                    }},
                
                 order: [ ],/*1, 'desc'*/
                //{"id":1,"pname":"Camisola","pdescription":"Descri\u00e7\u00e3o da Camisola","pmaterial":"Algod\u00e3o","price":20.5,"reference":"","active":1,"hidden":0,"sku":"123-BA-245","brandname":"HugoBoss","gender":"masculino","supplier":"Amazon","sizetype":"Pants"}*/
                columns: [
                        /*{data: 'id',  render: function ( data, type ) {  return    data;}},*/
                        {data: 'pname',   render: function ( data, type ) { return    data;} },
                        {data: 'pdescription',  render: function ( data, type,  row, meta ) { 
                                html = null; 
                                if (row['nvariations'] !== null){
                                    html = (data !== null ?  "<span class='variations.label'>{{ __('applabels.ProductDescription') }}:<span> "+ data : '');  
                                }
                                return  html;
                            }
                        },
                        {data: 'pmaterial',  render: function ( data, type, row, meta ) {
                               if (data != null) {table.columns([2]).visible(true);}
                               //console.log('material: '+data);
                                 return  (data !== null  ? "<span class='variations.label'>{{ __('applabels.ProductMaterial') }}:<span> "+  data : ''); 
                                }
                        },
                      /*  {data: 'price',   render: function ( data, type, row, meta ) { 
                                html = null;
                                if (row['nvariations'] !== null){
                                    html = "<span class='variations.label'>{{ __('applabels.ProductAvgPrice') }}:<span> "+   formatPrice (row['avgprice']) 
                                }
                               else {
                                    html=  (data !== null ? "<span class='variations.label'>{{ __('applabels.ProductPrice') }}:<span> "+   formatPrice (data ) : '') ;
                                }

                                 return html;   
                                }
                            },
                        {data: 'reference',   render: function ( data, type  , row, meta) {  
                                html = null; 
                                if (row['nvariations'] !== null) { 
                                    html =   (data !== null ? "<span class='variations.label'>{{ __('applabels.ProductRef') }}:<span> " +   data : ''); 
                                }
                                return  html;
                                }
                        },
                        {data: 'stock',   render: function ( data, type , row, meta) {  
                                html = null; 
                                if (row['nvariations'] !== null) {
                                    html = (data !== null ? "<span class='variations.label'>{{ __('applabels.ProductStock') }}:<span> "+   (data) : '') ;
                                }
                                return html   
                                }
                        },*/
                       /* {data: 'sku',   render: function ( data, type ) {  return    data;  }},
                        {data: 'brandname',   render: function ( data, type ) {   return    data;  }},
                        {data: 'gender',   render: function ( data, type ) {  return    data;  }},
                        {data: 'supplier',   render: function ( data, type ) {  return    data;  }},*/
                        {data: 'variancia',   render: function ( data, type , row, meta)  {
                            html = '';
                            if (row['nvariations'] !== null) {
                                html = "<b>Variations</b>"
                            }
                           // console.log(row);
                            html += '<table id="variations_table" class="variations"><tr><th>'+
                                    
                                    /*'{{ __("applabels.Variations size") }}'+ '</th><th>'+
                                    '{{ __("applabels.Variations color") }}'+'</th><th>'+*/
                                    '{{ __("applabels.Variations ref") }}'+'</th><th>'+
                                    '{{ __("applabels.Variations description") }}'+'</th><th>'+
                                    '{{ __("applabels.Variations price") }}'+'</th><th>'+                                    
                                    '{{ __("applabels.Variations stock") }}'+'</th><th>'+
                                    '{{ __("applabels.Variations orders") }}'+'</th></tr>';
                            if (row['variancia'] !== null){
                                row['variancia'].forEach((val)   =>  
                                html += '<tr><td>'+
                               // ( (val['pSize']!==null && typeof(val['pSize']) != 'undefined') ? val['pSize'] : '-') +'</td><td>'+
                               // ( (val['color']!==null && typeof(val['color']) != 'undefined') ? val['color'] : '-') +'</td><td>'+  
                                ( (val['reference']!==null && typeof(val['reference']) != 'undefined') ? val['reference'] : '-') +'</td><td>'+
                                ( (val['description']!==null && typeof(val['description']) != 'undefined') ? val['description'] : '-') +'</td><td>'+
                                ( (val['price']!==null && typeof(val['price']) != 'undefined') ?  formatPrice (val['price']) : '-') +'</td><td>'+
                                ( (val['stock']!==null && typeof(val['stock']) != 'undefined') ? val['stock'] : '-') +'</td><td>'+
                                ( (val['orders']!==null && typeof(val['orders']) != 'undefined') ? val['orders'] : '-') +'</td></tr>'
                                )
                            }                                      
                            html += '</table>';
                            return ( html );  
                        }}
                ],
                "drawCallback": function(data,  settings ) {
                    
                    var api = this.api();
                    setTimeout( function () {
                        api.columns().flatten().each(function (colIdx) {
                            var columnData = api.columns(colIdx).data().join('');
                            if (columnData.length == (api.rows().count() - 1) && colIdx != 0 && colIdx != 6) {
                                api.column(colIdx).visible(false);
                            }
                            else {
                                api.column(colIdx).visible(true);
                            }
                        });
                    },0)
                    
                    console.log( 'Products has redrawn the table' );
                }
                    
            });
        $('[type=search]').each(function () {
            $(this).attr("placeholder", "{{__('applabels.datatable Search')}}");
            // $(this).before('<span class="fa fa-search"></span>');
            $(this).removeClass('form-control form-control-sm').addClass('input w-60')
        });
        
        function formatPrice (data){
            let format = new Intl.NumberFormat('pt-PT', {
                                        style: 'currency',
                                        currency: 'EUR',
                                        minimumFractionDigits: 2,
                                        }); 
                                        price = (data !== null) ? format.format(data) : '0 ';
                                        return   "  "+ price;  
        }
        

        function getProdutos() {}
        function getProdutosOLD() {
            $.ajax({
                url: "{{ url('/api/product') }}",
                type: "get",
                success: function(response) {
                    //console.log(response, 'produtos');
                    let itens = response.variancia || []
                    var html = '';//'<h4 class="py-4">Descrição de Produto</h4>';
                    if (response.reference) {
                        html += `<div><b>SKU: </b>${response.reference}</div>`
                    }
                     
                    html += `<div><b>Artigo: </b>___________________</div>`
                  

                    if (response.reference_sale) {
                        html += `<div><b>Referência:</b> ${response.reference_sale}</div>`
                    }
                    if (response.description) {
                        html += `<div><b>Descrição: </b>${response.description}</div>`
                    }

                    html += `<div class="mb-0 mt-0">`
                  
                    const size = itens.filter(el => el.size).length ? true : false;
                    const color = itens.filter(el => el.color).length ? true : false;
                    const material = itens.filter(el => el.material).length ? true : false;
                    const stock = itens.filter(el => el.stock).length ? true : false;
                    const sale = itens.filter(el => el.sale).length ? true : false;
                    itens.map(async (el, i) => {
                        if (i === 0) {
                            html += `<div>`
                            // if (artigo) {
                            //     html += `<b>Artigo</b>`
                            //     if (size || color || material || stock || sale) {
                            //         html += ` | `
                            //     }
                            // }
                            if (size) {
                                html += `<b>Size</b>`
                                if (color || color || material || stock || sale) {
                                    html += ` | `
                                }
                            }
                            if (color) {
                                html += `<b>Color</b>`
                                if (material || stock || sale) {
                                    html += ` | `
                                }
                            }
                            if (material) {
                                html += `<b>Material</b>`
                                if (stock || sale) {
                                    html += ` | `
                                }
                            }

                            if (stock) {
                                html += `<b>Stock</b>`
                                if (sale) {
                                    html += ` | `
                                }
                            }

                            if (sale) {
                                html += `<b>Sale</b>`
                            }

                            html += `</div>`
                        }
                        html += `<li>`
                        if (el.artigo) {
                            html += `${el.artigo}`
                            if (el.size || el.color || el.material || el.stock || el.sale) {
                                html += ` | `
                            }
                        }
                        if (el.size) {
                            html += `${el.size}`
                            if (el.color || el.material || el.stock || el.sale) {
                                html += ` | `
                            }
                        }
                        if (el.color) {
                            html += `${el.color}`
                            if (el.material || el.stock || el.sale) {
                                html += ` | `
                            }
                        }
                        if (el.material) {
                            html += `${el.material}`
                            if (el.stock || el.sale) {
                                html += ` | `
                            }
                        }
                        if (el.stock) {
                            html += `${el.stock}`
                            if (el.sale) {
                                html += ` | `
                            }
                        }
                        if (el.sale) {
                            html += `${el.sale}`
                        }
                        html += `</li>`
                    })

                    html += `</div>`


                    if (response.cava) {
                        html += `<div class="mt-1"><b>Cava: </b> ${response.cava} ${response?.cava_symbol || ''} </div>`
                    }
                    if (response.price) {
                        html += `<div><b>Preço: </b> ${response.price} ${response?.currency_symbol || ''}</div>`
                    }

                    document.getElementById('produto').innerHTML = html

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

        
        function comentarioGestor() {
            $.ajax({
                //url: `{{ url('/web/manager-comments') }}`,
                url: `{{ url('/comments/read-manager') }}`,
                type: "get",
                success: function(response) {
                    let _comments = response
                    //console.log(`{{ url('/api/manager-comments') }}`, ' ---> URL')
                   // console.log(_comments, ' ---> resposta Gestor')
                    if (_comments.length > 0) {
                        let html = ''
                        _comments.forEach(item => {
                            html += `
                            <div class="list-group-item d-flex flex-column justify-content-between align-items-start">
                                <div class="manager_comment m-2">${item.comment}</div>
                                
                                <span class="badge bg-primary rounded-pill  ms-auto">                                
                                    <small>${moment(item.created_at).format('DD/MM/YYYY HH:mm:ss')}</small>
                                </span>
                            </div>
                        </div>`
                        });
                        document.getElementById('gestor').innerHTML = html
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.log(textStatus, errorThrown);
                }
            });
        }
        
        minDate = new DateTime($('#min') , { //$('#min')
            format: 'YYYY-MM-DD'
        });
        maxDate = new DateTime($('#max'), { //$('#max')
            format: 'YYYY-MM-DD'
        }); 

        
        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('/ajaxShowLiveVideoComments') }}", 
                    method: "get",
                    pages: 5,
                    data: function (d) {
                        d.search = ''; //$('#comments-table input[type="search"]').val(),
                        d.dateMin =null ,// $('#min').val(),
                        d.dateMax=null,// $('#max').val(),
                        d.social = $("input:checkbox[name='social']:checked").map(function() {
                                    return this.value;
                                    }).get().join(', '),  
                        d.videoID= videoId,                                                
                        d.totalRecords = recordsTotal ,
                        d.after  = $('#afterID').val(),
                        d.before  = $('#beforeID').val()
                        
                    }
                }), //,
                columnDefs: [{
                    targets: "_all",
                    orderable: false,
                    searchable: false
                 }],
                sDom: '<"header"><"top"i>rt<"bottom"lp><"clear">',
                pageLength: 10,
                
                pagingType: "simple_numbers",
                oLanguage: { "sSearch": "Search:"},
                order: [[7, 'desc']],
                columns: [
                {
                    data: 'social',
                    render: function (data, type) {
                        return '<span class="text-primary px-0 anchor-tooltip"><i class="fa-brands fa-'+data.toLowerCase()+'"></i> ';
                    }
                },                
                 
                {
                    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',
                    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'].toLowerCase() == 'instagram') && ( (row['media_type'] == 'BROADCASTED') ))) ? '' : '<button class="btn  btn-sm"   id="auto_reply" alt="Custom Reply"'+
                               (isMoreThan24HoursOld(row['created_time']) ? 'disabled':'') + ' >'  +
                              '<i class=" '+ ( isMoreThan24HoursOld(row['created_time']) ? 'text-secondary': ((row['custom_admin_reply'] == 1) ? ' text-success ' :  '' ) ) +  
                              ' fa-solid fa-message"></i></button>' ) ;       
                        }
                         return html;
                          
                    }
                },               
                  
                {
                    data: 'replied',
                    render: function (data, type, row, meta) { 
                        if ((row['is_admin_reply'] == 'y') || (row['is_admin_comment']) ||  (row['social'].toLowerCase() == 'instagram')  ) { 
                            html = '' 
                        } else {

                            html = '<button class="btn  btn-sm"   id="auto_reply" alt="Auto Reply" '+ (((row['social'] == 'instagram')   || 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>' ;
                            /*
                            html = '<button class="btn  btn-sm"   id="auto_reply" alt="Auto Reply" '+ ((row['social'] == 'instagram') ? 'disabled' : '' )+ '>' ;
                            html +=  '<i class=" ' + ((row['auto_admin_reply']  == 1) ? 'text-success ' : '');
                            html += 'fa-solid fa-comment-dots"></i></button>' ;*/
                        
                        }
                         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: 'user_id', //blacklist
                    render: function (data, type, row, meta) {
                        if ((row['is_admin_reply'] == 'y') || (row['is_admin_comment']) ) { 
                            html = ''
                        } else {
                            html = '<span id="'+data+'" class="text-primary badge  anchor-tooltip ' + (row['blocked'] ? 'bg-danger' : 'bg-success') +' rounded-pill m-auto   ">';
                            //'<a class="text-white" onclick="javascript:blacklist('+(row['user_id']!=''?row['user_id']:'0')+',\''+(row['name']!=''?row['name']:'-') +'\',\''+row['email']+'\',\''+row['social']+'\')">'</a> ;
                            //user is blocked 
                            html += '<i class="text-white fa-solid fa-user-slash"></i></span>'; 
                        
                            /* render: function (data, type) {
                            return '<span class="text-primary badge bg-dark rounded-pill me-auto ms-auto "><a class="text-white"   id="'+data+'" ><i class="fa-solid fa-user-slash"></i></a></span>';*/
                        }
                        return html;
                    }
                } ,
               
                {
                    data: 'comment_id', //delete
                    orderable: false, 
                    render: function (data, type, row, meta) {
                        if (  (row['social'] == 'instagram') ){ 
                            html = ''
                        } else {
                            //' <span class="badge bg-danger  me-auto ms-auto  "><a class="text-white" " "><i class="fa-solid fa-trash-can"></i></a></span>';

                        }
                        
                        html = ( ((row['social'].toLowerCase() == 'instagram') || (row['prvt_msg'])) ? " " : '<button class="btn btn-danger rounded-pill badge btn-sm"  alt="Delete" id="del-'+data+'" '
                         + '><i class="fa-solid fa-trash-can"></i></button></b>'  );
                        
                        return html;
                    }
                }   ,
               { 
                    data: 'created_time',
                    className: 'edit_date transaction_dt',
                    render: function ( data, type , row, meta) {
                            $('#afterID').val(row['next']);
                            $('#beforeID').val(row['prev']);
                            
                            $('#liveFeedTitle').html( row['title']);
                            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'] != null) {
                                            
                        let tooltipinfo = '';
                        let rowindex = 0;
                        reason = $.grep(data['author'], function(e) { return e.type === 'BLOCK' });
                        if(!$.isEmptyObject(reason)){       
                            rowindex = 5;                                
                            $(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( table.ajax.params('after'));
                    let next = table.ajax.params('after').after = $('#afterID').val();
                    
                    
                    
                    let tableinfo = table.page.info();
                    console.log("INfo: ");
                   // console.log(  data.json );
                     
                    recordsTotal = tableinfo.recordsTotal;
                   // console.log( recordsTotal );
                   livesTotal = data.json['social'].length;
                   // console.log( 'titl'+table.ajax.params('title'));
                    if (livesTotal > 0) {
                        //refresh page
                        const myData =  data.json['social']; 
                        //console.log(myData);
                        let myHtml = '';
                        let IGactive = myData.some(  function(check) { console.log(check.social); return check.social == 'instagram';   });
                        let index = myData.findIndex(x => x.social == 'instagram');;

                        console.log('IG: '+ IGactive +'index: '+ index);
                        if ( IGactive ){
                           // location.reload()    && ($('#liveFeedIGTitle').length == 0 ) 
                           myHtml += '<span  id="liveFeedIGTitle"><i class="fa-brands fa-instagram pe-2"></i>'+myData[index]['title']+' ('+ myData[index]['api_video_id']+') </span> '; 
                                    
                        }
                         
                        let FBactive = myData.some(  function(check) {  return check.social == 'facebook';   });
                        index = myData.findIndex(x => x.social === 'facebook');;

                        console.log('FB: '+ FBactive +'index: '+ index);
                        if ( FBactive ){
                            //location.reload()&& ($('#liveFeedFBTitle').length == 0 )
                            myHtml += '<span  id="liveFeedFBTitle"><i class="fa-brands fa-facebook pe-2"></i>'+myData[index]['title']+' | '+ myData[index]['description']+' </span> ';
                           
                        }
                        
                     
                       /* console.log ( $('liveFeedTitle').innerHtml);*/
                       $('#infomessage').html(myHtml);
                    }
                    else {
                            $('#infomessage').html('<div id="info-message" class="mr-4 alert alert-danger hidden" > NO LIVE FEED AT THIS TIME </div>');
                        }
                }
        }); // datatable 

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

        $('#social1, #social2').on('change', function () {
             
                table.clearPipeline().draw(false);
            });
        // REFRESHING TIMER 
       /* var timer = duration,minutes, seconds;
        startTimer(duration, display); 
        setInterval( async () =>  {
                await startTimer(duration, display);
                await table.clearPipeline().draw(false);
            }, 10000 );
           */

           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'],data['social']);
            }
        });
 

        table.on('click', 'td:nth-last-child(6)', function (event) { //REPLY CUSTOM MESSAGE
            var data = table.row(this).data();
            console.log('REPLY CUSTOM')
            console.log(data);

            if ((data['is_admin_reply'] == 'y') || (data['is_admin_comment'] == '1') || (isMoreThan24HoursOld(data['created_time'])) ) {// ||   (((data['social'] == 'instagram00') && ( ( 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') || (data['status'] == 'BROADCASTED') )));
             console.log ('LIVE: '+live);
            if (typeof data['id'] == 'undefined'){ return 1}
           
           // 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) 
         
        });
        table.on('click', 'td:nth-last-child(5)', function (event) { //REPLY MESSAGE
            var data = table.row(this).data();
            
            if ( (data['is_admin_reply'] == 'y') || (data['social'] == 'instagram') || (isMoreThan24HoursOld(data['created_time']))  ) { console.log('DISABLED') ; return 1}
            let id = data['comment_id'];
             
            if (typeof data['id'] == 'undefined'){ return 1}

            btn = $('#auto_reply')
            btnDisable(btn)
            if (confirm("{{ __('applabels.ALERT Send default reply'  ) }}")) {
                $.ajax({
                    url: "{{ url('/comment/post-reply') }}/" + id+'/' +data['social'],
                    type: "post",
                    datatype: "json",
                    success: function(response) {
                        console.log(response, ' Resposta AJAX')
                        btnEnable(btn)
                        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) { //flagCommentPrt  
            //function flagCommentPrt(id) {
            var data = table.row(this).data();
            //console.log(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']; 
            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('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-last-child(3)', function (event) { //BLOCK COMMENTS
            var data = table.row(this).data();
            console.log('BLOCKING');  
            console.log(data)
           
            let id = data['id'];
            console.log("ROW ID : "+data['id']);
            console.log ('BLOCKING: '+id);
          
            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'],data['social']);
            };
           //"  $socialMedia }}"
            
           
        
        });

        table.on('click', 'td:nth-last-child(2)', function (event) { //DELETE COMMENTS
            var data = table.row(this).data();
            console.log(data);

            if (data['social'] == 'instagram') {
                console.log('DISABLED');
                console.log(data['social']);
                //alert("{{ __('applabels.ALERT NOT Available in Instagram Live') }}");
                return 1;
            } 
            if ( (data['prvt_msg'])) {
                console.log('DISABLED');
                console.log( data['prvt_msg']);
                //alert("{{ __('applabels.ALERT NOT Available in Instagram Live') }}");
                return 1;
            }
            // alert( 'You clicked on '+data['_id']+'\'s row' );
            let id = data['comment_id'];
            console.log("ROW ID : "+data['comment_id']);
            if (typeof data['comment_id'] == 'undefined'){ return 1}
            const btn = $("#del-"+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')
                        btnEnable(btn) 
                        table.clearPipeline().draw(false)
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        btnEnable(btn) 
                        console.error(textStatus, errorThrown);
                    }
                });
            }
        });
        

        
        function shallowEqualityCheck(obj1, obj2) {
            const keys1 = Object.keys(obj1);
            const keys2 = Object.keys(obj2);
            if (keys1.length !== keys2.length) {
                return false;
            }
            for (const key of keys1) {
                if (obj1[key] !== obj2[key]) {
                return false;
                }
            }
            return true;
        }




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

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

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

        }

        const myCollapsible = document.getElementById('collapseProducts')
        console.log (myCollapsible);
        myCollapsible.addEventListener('hidden.bs.collapse', event => {
                // do something... 
                console.log(' myCollapsible.addEventListener(hidden.bs.collapse, event => ');
                const btn = $('#btnProducts');
                btn.removeClass('btn-success').addClass('btn-danger');
                const icon = $('#productBtnIcon');
                icon.removeClass('fa-eye').addClass(' fa-eye-slash ');
                refresh(); 
        }) 

        myCollapsible.addEventListener('shown.bs.collapse', event => {
                // do something... 
                console.log(' myCollapsible.addEventListener(shown.bs.collapse, event => ');
                const btn = $('#btnProducts');
                btn.removeClass('btn-danger').addClass('btn-success');
                const icon = $('#productBtnIcon');
                icon.removeClass('fa-eye-slash').addClass(' fa-eye');
                refresh(); 
        }) 
        const myCollapsible2 = document.getElementById('collapseComments')
        myCollapsible2.addEventListener('hidden.bs.collapse', event => {
                // do something... 
                const btn = $('#btnComments');
                btn.removeClass('btn-success').addClass('btn-danger');
                const icon = $('#commentsBtnIcon');
                icon.removeClass('fa-eye').addClass(' fa-eye-slash ');
                refresh(); 
        }) 

        myCollapsible2.addEventListener('shown.bs.collapse', event => {
                // do something... 
                const btn = $('#btnComments');
                btn.removeClass('btn-danger').addClass('btn-success');
                const icon = $('#commentsBtnIcon');
                icon.removeClass('fa-eye-slash').addClass(' fa-eye');
                refresh(); 
        }) 

        function refresh() {
          
            const collapseProducts = document.getElementById('collapseProducts');
            const myLeftPanel = document.getElementById("leftPanel");
            const myRightPanel = document.getElementById("rightPanel");

            if($('#collapseProducts').is('.collapse:not(.show)')) {
                // collapsed 
                console.log(myCollapsible);
                if($('#collapseComments').is('.collapse:not(.show)')) {                    
                    myLeftPanel.classList.remove('col-sm-4');                    
                    myRightPanel.classList.remove('col-md-8');
                    myRightPanel.classList.add('col-md-12');
                    
                } else {
                    myLeftPanel.classList.add('col-sm-4');                    
                    myRightPanel.classList.remove('col-md-12');
                    myRightPanel.classList.add('col-sm-8');
                }

            } else {
              
                myLeftPanel.classList.add('col-sm-4');                    
                myRightPanel.classList.remove('col-md-12');
                myRightPanel.classList.add('col-sm-8');
                console.log('refreshing PRODUCTS'); 
                
                getProdutos();
            }
           
            if(!$('#collapseComments').is('.collapse:not(.show)')) { 
                 comentarioGestor();     
                 console.log('refreshing COMMENTS'); 
            }
               
        }  


        /*         $(document).ready(async function () {
            await refresh()
            
           
            startTimer(duration, display); 
            const interval =     setInterval( async () =>  {
                await startTimer(duration, display);
                await table.clearPipeline().draw(false);
                // REMOVE AFTER DEBUG <--->  reloadMyPAge();
                refresh();
                clearInterval(interval);
            }, 10000 );            
        }); */
          // REFRESHING TIMER 
       

      /*  DISABLE OR ENABLE TIMER HERE -*/
      startTimer(duration, display);  

    
        const interval =  setInterval( async () =>  {
                    checkSession();
                    checkLiveVideos();
                    table.clearPipeline().draw(false);
                    //.ajax.reload( null, false ); // user paging is not reset on reload
                   // await table.clearPipeline().draw(false);
                   productsTable.draw(false);
                    refresh();
                    startTimer(duration, display);
                    //clearInterval(interval);
                }, refreshInterval );
         
     /*  DISABLE OR ENABLE TIMER HERE  */
    });
 
    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/ ') }}", 'blank')/*.$video_id .'/'.$socialMedia*/
        }

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

        function exportPdf(etiqueta) {

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

        
        function blockUser(blockflag) {    

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

            console.log (formData);
            burl = (blockflag == 1 ) ?  "{!! url('/authors/unblock') !!}" : "{!! url('/authors/block') !!}",
            $.ajax({
                url: burl,
                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 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();
                           // $('#comments-table').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
                         
        });   
        </script>
        
    @endpush
@endsection