@extends('layouts.app')
@push('style')
  
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.2.3/css/fixedHeader.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/datetime/1.2.0/css/dataTables.dateTime.min.css">
 
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/2.1.8/css/dataTables.bootstrap5.css"/>
<style>
.dataTables_filter, #searchPanel{
    padding: 6px 0em !important;
}

table.dataTable>tbody>tr {
cursor: pointer;
}

.form-control-sm {  
    padding: .25rem .85rem;
 
}


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

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



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

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


/* .fa-brands{
    font-size: 20px;
} */

#imported-videos-table.dataTable td:first-child, #imported-videos-table.dataTable th:first-child, #imported-videos-table.dataTable td:last-child,  #imported-videos-table.dataTable th:last-child {  
  text-align: center;
}

#imported-videos-table.dataTable td:nth-child(6), #imported-videos-table.dataTable th:nth-child(6) {  
    white-space: nowrap !important;
}
#imported-videos-table.dataTable td:nth-child(2), #imported-videos-table.dataTable th:nth-child(2),
#imported-videos-table.dataTable td:nth-child(n+4) , #imported-videos-table.dataTable th:nth-child(n+4)
{  
  text-align: center;
}
#imported-videos-table.dataTable td:nth-child(5) , #imported-videos-table.dataTable th:nth-child(5) {
         display: none; 
    }


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

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


@if (session('error'))
        <div class="container-fluid  my-5">
            <div class="px-4 my-2">
                <div class="mr-4 alert alert-danger" role="alert">
                    {{ session('error') }}
                </div>
            </div>
        </div>
@endif 
    <div class="row p-4 pb-0 mx-0 rounded-3 border shadow-lg text-left">
        <h4 class="text-dark text-uppercase ps-2"  id="path">{{ __('applabels.DATABASE') }} </h4>
        <div class="col ps-0"> 
            @if (($errortoken!=''))
                <div id="info-message" class="mr-4 alert alert-danger hidden" > {{$errortoken}} </div>
            @endif
            <div class="col-6 py-2  mb-auto me-auto ">
                    <div class="d-flex p-2 justify-content-between align-items-center">
                        <label>{{ __('applabels.Social Media:') }}</label>
                        @foreach ($social as $sm)
                            <input type="checkbox"  value="{{ $sm->id }}" id="social{{$sm->id}}" name="social" 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> 
        </div>
        <div class="col pe-0">    
            <div id="searchPanel" class="d-flex  flex-row flex-row bg-light  justify-content-between">
                <div class="col-6 py-2  mb-auto me-auto ">
                     
                </div> 
                <div class="col-6 d-flex   flex-column py-2   m-auto align-items-end">
                        <div class="input-group mb-3 me-2">
                            <span class="input-group-text" id="basic-addon1">  <i class="fa fa-calendar"></i> </span> 
                            <input class="form-control  px-2 py-1 me-0" type="text"  name="dates" id="dates"  aria-describedby="basic-addon1">
                        </div>
                </div>
            </div><!-- filter section -->
        </div>
                 
        <table id="imported-videos-table" class="table table-bordered table-hover table-striped"  style="width:100%" data-show-custom-view="true" data-custom-view="customViewFormatter" data-show-custom-view-button="true" data-custom-view-default-view="true">
            <thead style="border-top:1px">
                <th  title="{{ __('applabels.SocialMedia' ) }}"><span class="p-2">{{ __('applabels.datatable SM' ) }}</span></th>
                <th class="col-1">{{ __('applabels.datatable video ID' ) }}</th>
                <th class="col-8">{{ __('applabels.datatable Title Description' ) }}</th>
                <th class="col-1">{{ __('applabels.datatable status' ) }}</th>
                <th> </th>
                <th >{{ __('applabels.datatable date time' ) }}</th>
                <th >{{ __('applabels.datatable Save' ) }}</th>
                <th >{{ __('applabels.datatable Delete' ) }}</th>
            </thead>
            <tbody>

            </tbody>
        </table>

    </div>

 

@push('scripts') 
<!-- 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://MomentJS.com/downloads/moment.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script src="https://cdn.datatables.net/2.1.8/js/dataTables.min.js"></script>  
<script src="https://cdn.datatables.net/2.1.8/js/dataTables.bootstrap5.min.js"></script>  
<script type="text/javascript">

       
        var minDate, maxDate;
        
    
        var startdate;  
        var enddate; 
   
 
        $(document).ready(function() {
            $('#path').html( sessionStorage.getItem('activemenulabel') );
            startdate = $('#dates').data('daterangepicker').startDate.format('YYYY-MM-DD') ;
            enddate = $('#dates').data('daterangepicker').endDate.format('YYYY-MM-DD') ;


        
            let table =$('#imported-videos-table').DataTable({
                serverSide: true,
                ajax: {
                    url: "{{  url('/videos/importedVideosDatasource') }}", 
                    method: "get",
                    data: function (d) {
                        d.search = $('input[type="search"]').val(),
                        d.dateMin = startdate,
                        d.dateMax = enddate,
                        d.social = $("input:checkbox[name='social']:checked").map(function() {
                                    return this.value;
                                    }).get().join(', ')
                         
                    },
                    
                },
                columnDefs: [{
                    targets: "_all",
                    orderable: true,
                    searchable: true
                 }],
                 layout: {
                    topStart: {                        
                            info: {
                                text: 'Showing _START_ to _END_ of _TOTAL_ records'
                            },
                        },
                        
                        topEnd:{
                                search: {
                                    placeholder: 'Type search here'
                                }
                            },
                        bottomStart:  'pageLength', 
                        bottomEnd:{
                            paging: { 
                                firstLast: false
                            }
                    }
                }, 
                initComplete: function () {
                                    $('#tableCustomers_info').addClass('small');
                                    $('#dt-search-0').removeClass('w-60');
                                    $('#dt-search-0').addClass('from-control pe-2');
                                    $('#dt-search-0').parent().parent().addClass('ps-0');
                                    $("label[for='dt-search-0']").addClass('d-none');
                },
                language: { search: '', 
                            searchPlaceholder: "Search..." , 
                            paginate: {
                                previous: '<span class="prev-icon"></span> Previous',
                                next: 'Next <span class="next-icon"></span>' ,
                            }
                },
                pageLength: 10,
                 
                order: [[5, 'desc']],
                
                columns: [
                {
                    data: 'social', orderable: false, 
                    render: function (data, type, row, meta) {
                        let socialmedia = '';
                        switch (data) {
                            case 'instagram':
                                socialmedia = 'instagram';
                                break;
                            case 'facebook':
                                socialmedia= 'facebook';
                                break;
                        }        

                        return '<span class="'+((row['deleted_from_social_media']) ? 'text-secondary' :'text-primary') + ' lead px-0"><i class="fa-brands fa-'+ socialmedia +'"></i> ';
                    }
                },
                {
                    data: 'api_video_id', orderable: false, 
                    render: function (data, type) {
                         return data;
                    }
                },
                {
                    data: 'title', orderable: false, 
                    render: function (data, type) {
                         return data;
                    }
                },
               
                {
                    data: 'status', orderable: false, 
                    render:  function (data, type) {
                        let content = data;
                        if ( (data.toLowerCase() == "live")   || (data.toLowerCase()=="broadcast") )  {//
                            content = '<button class="btn btn-danger btn-sm" >'+data+'</button>';
                        }
                       
                        return content;
                         
                    }
                },
                {
                    data: '_id', //hidden - just to make order column number 5
                    render: function(){
                        return '';
                    }
                },
                { 
                    data: 'creation_time', //DATE
                    className: 'edit_date transaction_dt',
                    render: function ( data, type ) {
                            return type === "display" || type === "filter" ?
                                moment(data).format("YYYY-MM-DD  HH:mm:ss") :  data;
                    }
                },
                {
                    data: 'flag_comments', orderable: false,  //CT 
                    render: function (data, type, row, meta) {
                        console.log(row)
                        console.log(data)
                        if (row['status'].toLowerCase() == "live ended"){
                         return '<input type="checkbox" class="form-check-input" '+data+'  id="chk-'+row['id']+'"  disabled> ';
                        }
                        else {
                            html = '<input type="checkbox" class="form-check-input" '
                            html += '" data-bs-toggle="tooltip" data-bs-html="true" title="'
                            html += '{{ __("applabels.datatable flag comments") }}'+'"  id="chk-'+row['id']+'" onclick="blockComments(\''+row['api_video_id']+'\', \''+row['id']+'\')" '+ data +'  >'
                          //  html += ((row['flag_comments'] != 1) ? "":"checked")+'> ';     
                            return html;
                        }
                    }
                },
               
                {
                    data: '_id', orderable: false,  //delete
                    render: function (data, type, row, meta) {
                        if ((row['status'].toLowerCase() == "live ended")  || (row['status'].toLowerCase() == "live") || (row['status'].toLowerCase() == "broadcast")){
                            return '<button class="btn btn-danger btn-sm" id="btn-del-'+data+'" disabled alt="{{ __('applabels.datatable delete' ) }}"><i class="fa-solid fa-trash-can"></i></button>';
                        }
                        else {
                            return '<button class="btn btn-danger btn-sm" id="btn-del-'+row['api_video_id']+'" data-bs-toggle="tooltip" data-bs-html="true" title="'+
                            '{{ __("applabels.datatable CT tooltip") }}"' +'  alt="{{ __('applabels.datatable delete' ) }}"><i class="fa-solid fa-trash-can"></i></button>';    
                        }
                         
                    }
                }  
                ], // 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
                    }
                },
                fnDrawCallback: function () {

                    $('#imported-videos-table tbody tr td:nth-child(-n+5)').click(function () {

                        // get position of the selected row
                        var position = table.row( this ).index();
                        var data = table.row( position ).data();
                        var id = data.api_video_id
                        var videoid = data.id
                        var social = data.social
                        var status = data.status
                        var title = (data.title != '') ? data.title : '-';
                        title = encodeURIComponent(encodeURIComponent(title))
                         
                        // redirect
                        document.location.href =  "{{  LaravelLocalization::localizeUrl('/comments/database-local/') }}"+ '/' + id+ '/' + videoid + '/' + title +'/'+ social.toLowerCase() +'/'+ status; 
                    
                        
                    })

                }
                 
               
                
            });
           
            table.on('click', 'td:last-child', function (event) { // DELETE VIDEO 
                    var data = table.row(this).data();
                    console.log(data);
                    
                    let video_id = data['api_video_id'];
                    
                    btn = $("#btn-del-"+video_id);
                    btnDisable(btn)
                    if (confirm("{{ __('applabels.ALERT DELETE CONFIRM Video from DB' ) }}")) {
                        $.ajax({
                            url:   `{{ url('/comments/database') }}/`+video_id,
                            type: "delete",
                            success: function(response) {
                                console.log('response', response);
                                if (response.success == 'OK') {
                                    let info = $('#info-message');
                                    let content = `<h4>${response.message}</h4>`;
                                    info.html( content);
                                    $("#info-message").delay(2000).fadeIn(); 
                                    btnEnable(btn) 
                                    $('#imported-videos-table').DataTable().ajax.reload();
                                    //window.location.reload();
                                }
                            },
                            error: function(jqXHR, textStatus, errorThrown) {
                                console.log(textStatus, errorThrown);
                                $('#imported-videos-table').DataTable().ajax.reload();
                                btnEnable(btn) 
                            }
                        });
                    }

                })

 // Refilter the table
            $('#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.draw();
            });

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

        function blockComments (api_video_id, id){
            mycheckbox = $("#chk-"+id)
            console.log(mycheckbox)
            if (confirm(
                mycheckbox.prop('checked') ? "{{ __('applabels.ALERT Stop recording comments' ) }}" :  "{{ __('applabels.ALERT Start recording comments' ) }}")) 
            {
                    $.ajax({
                        url:   `{{ url('/comments/database/stop-loading') }}/`+api_video_id,
                        type: "post",
                        success: function(response) {
                            console.log('response', response);
                            if (response.success == 'OK') {
                                //let info = document.getElementById(`info-message`);
                                //let content = `<h4>${response.message}</h4>`;
                                //info.innerHtml = content;
                                //$("#info-message").delay(2000).fadeIn(); 
                                $('#imported-videos-table').DataTable().ajax.reload();
                            }
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            console.log(textStatus, errorThrown);
                            window.location.reload();
                        }
                    });
                }
                else {
                    
                    mycheckbox.prop('checked', function (i, val) { return !val; })
                }
            
        }

        function deleteVideoFromDB(video_id) {
            
                console.log( video_id);
                var btn = $('#btn-del-'+video_id);
                btnDisable(btn) 
       
                return 1;
                if (confirm("{{ __('applabels.ALERT DELETE CONFIRM Video from DB' ) }}")) {
                    $.ajax({
                        url:   `{{ url('/comments/database') }}/`+video_id,
                        type: "delete",
                        success: function(response) {
                            console.log('response', response);
                            if (response.success == 'OK') {
                                let info = $('#info-message');
                                let content = `<h4>${response.message}</h4>`;
                                info.html( content);
                                $("#info-message").delay(2000).fadeIn(); 
                                btnEnable(btn) 
                                $('#imported-videos-table').clearPipeline().draw(false); 
                                //.DataTable().ajax.reload();
                                //window.location.reload();
                            }
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            console.log(textStatus, errorThrown);
                            $('#imported-videos-table').DataTable().ajax.reload();
                            btnEnable(btn) 
                        }
                    });
                }
           
        }

        $('#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().subtract(3, 'months'),
            "endDate":moment()
            
            }, function(start, end, label) {
                console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
        });
</script>
@endpush
@endsection