@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://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.0.8/css/dataTables.bootstrap5.css"/>
<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.datatables.net/responsive/2.5.0/css/responsive.dataTables.min.css">
 
<style>
    div.dataTables_wrapper div.dataTables_filter input {
      width: 100%;  
     
    }
    div.dataTables_wrapper div.dataTables_filter label {
         
        display: flex;
        margin-left: 10%;
    }
    #authors-table.dataTable td {
        vertical-align: middle;
    }

    #authors-table.dataTable td:nth-child(n+4):nth-child(-n+11), #authors-table.dataTable th:nth-child(n+4):nth-child(-n+11){
            text-align: center;text-wrap: nowrap;
        }
    #authors-table.dataTable td:first-child, #authors-table.dataTable th:first-child ,
    #authors-table.dataTable td:nth-child(1), #authors-table.dataTable th:nth-child(1) ,
    #authors-table.dataTable td:nth-child(4), #authors-table.dataTable th:nth-child(4),
    #authors-table.dataTable td:last-child, #authors-table.dataTable th:last-child {  
        text-align: center;
         
    }
    #authors-table tr {
    cursor: default; /* Change to default cursor for rows in #myTable */
}

    #authors-table.dataTable td:nth-child(6), #authors-table.dataTable th:nth-child(6) {
        text-align: left;
    }

    #authors-table.dataTable td:last-child, #authors-table.dataTable th:last-child {  
        text-wrap: nowrap;
         
    }

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

    div.dt-container div.dt-search input {
    width: 390px;
    
    }
    @media (min-width: 2400px) {
            
            div.dt-container div.dt-search input {
                width: 480px; /* Set your desired width */
            }
            
            }
</style>
@endpush
@section('content')
    @if (session('error'))
        <div class="container 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">
            <div class="col ps-0" >
                <div id="info-message" class="mr-4 alert alert-danger " hidden> </div>
                <h4 class="text-dark text-uppercase ps-2"> {{ __('applabels.Authors') }}</h4>  
            </div>
            <!-- div class="col pe-0">
                <div class="d-flex flex-row bd-light justify-content-end ">
                    <div id="submenu1" class="p2 me-2"> <h4 class="text-dark"> <button a class="btn btn-primary" name="btnRS" id="btnRS">{{ __('applabels.SocialMedia') }}</button ></h4></div> 
                    <div id="submenu2"  class="p2 mx-2"> <h4 class="text-dark"><button  class="btn btn-primary" name="btnNot" id="btnNot"   >{{ __('applabels.Notifications') }}</button ></h4>  </div> 
                    <div id="submenu3"  class="p2 ms-2"> <h4 class="text-dark"><button  class="btn btn-primary" name="btnblock" id="btnBlock"   >{{ __('applabels.Blocking') }}</button ></h4>  </div>
                </div>
            </div -->    
            <table id="authors-table" class="table table-bordered table-hover datatable  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.SM') }}</th>
                    <th class="col-6">{{ __('applabels.Author') }}</th>
                    <th class="col-6">{{ __('applabels.Email') }}</th>     
                    <th class="">{{ __('applabels.Blocked') }}</th>    
                    <th class="">{{ __('applabels.datatable date time') }}</th>
                    <th class="">{{ __('applabels.datatable Edit' ) }}</th>
                    <th class="">{{ __('applabels.datatable Delete' ) }}</th>
                </thead>
                <tbody>

                </tbody>
            </table>
  
              
    </div> 


 
    @include('authors.modalpopup.editcreate')
 
    @include('components.modalalert') 


@push('scripts') 

<!-- Bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.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" 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"> 
    var minDate, maxDate;

        // Custom filtering function which will search data in column four between two values
   
    $.fn.dataTable.ext.errMode = 'throw';
    $(document).ready(function($) {
       // $.noConflict();
       /* var token = '';
        var modal = $('.modal')
        var form = $('.form')*/
        var btnRS = $('#btnRS'),
            btnNot = $('#btnNot'),
            btnBlock = $('#btnBlock');

        let btnDelete = $('.dynamic-delete');
         
        
        let table = $('.datatable').DataTable({
                ajax: {
                    url: "{{ url('/authors/list') }}",
                    data:  function (d) {
                         
                        d.search = $('input[type="search"]').val()
                    }
                },
                serverSide: true,
                processing: true,
                 

                columnDefs: [{
                    targets: "_all",
                    orderable: false,
                    searchable: true
                 }],
                //sDom: '<"top"if>rt<"bottom"lp><"clear">',
                //pageLength: 10,
                //oLanguage: { "sSearch": ""},

                layout: {
                    top: {
                        /*  buttons: [
                        
                            {
                                extend: 'excelHtml5',
                                text: '<i class="fa-regular fa-file-excel"></i>',
                                className: 'btn btn-primary btn-sm',
                                titleAttr: 'Excel',
                                init: function(api, node, config) {
                                   $(node).removeClass('dt-button')
                                },
                                
                                title: '',
                                exportOptions: {
                                    columns: [ 0, 1, 2, 3, 4, 5 ],
                                    orthogonal: null,
                                },

                               
                                customize: function (xlsx) {
                                    var sheet = xlsx.xl.worksheets['sheet1.xml'];
                                
                                    // Set the alignment for all cells in the first column (column A)
                                    

                                     // add a new "cellXfs" cell formatter, which uses the next available format index (numFmt 176):
                                        var celXfsElement = xlsx.xl['styles.xml'].getElementsByTagName('cellXfs');


                                        var f1 = //bold and underlined font
                                            '<font>'+
                                                    '<sz val="11" />'+
                                                    '<name val="Calibri" />'+
                                                    '<b />'+
                                            '</font>'
                                        var cellStyle = '<xf numFmtId="176" fontId="2" fillId="0" borderId="0" xfId="0" applyAlignment="1"' 
                                            + ' applyFont="1"> <alignment horizontal="center"/></xf>';
                                        $( celXfsElement ).append( cellStyle );
                                        $( celXfsElement ).attr("count", "69"); // increment the count
                                    // Set the alignment for the first row (table title)
                                    // Set bold text for column headers
                                   
                                    //  // '51' is for center-aligned text
                                    $('row c[r^="C"]', celXfsElement).each(function() {
                                        $(this).attr('s', '59'); // '59' is for Euro
                                    });
                                    $('row c[r^="D"]', celXfsElement).each(function() {
                                        $(this).attr('s', '51'); // '52' is for right-aligned text
                                    });
                                    $('row c[r^="E"]', celXfsElement).each(function() {
                                        $(this).attr('s', '51'); // '52' is for right-aligned text
                                    });  
                                    
                                    $('row c[r^="C"]', sheet).attr('s', '51');
                                    $('row c[r^="D"]', sheet).attr('s', '59');
                                    $('row c[r^="E"]', sheet).attr('s', '51');
                                    $('row c[r^="F"]', sheet).attr('s', '51');
                                   // $('row:nth-child(1) c', celXfsElement).attr('s', '69'); // '2' is for bold text
                                   $('row:first c', sheet).attr('s', '2'); 
                                } 
                            },
                            {
                                extend: 'pdfHtml5',
                                text: '<i class="fa-solid fa-file-pdf"></i>',
                                className: 'btn btn-primary btn-sm',
                                titleAttr: 'PDF',
                                init: function(api, node, config) {
                                   $(node).removeClass('dt-button')
                                },
                                
                                title: '',

                                orientation: 'landscape', //portrait
                                pageSize: 'A4', //A3 , A5 , A6 , legal , letter
                                exportOptions: {
                                    columns: ':visible',
                                    search: 'applied',
                                    order: 'applied'
                                },
                                exportOptions: {
                                    columns: [ 0, 1, 2, 3, 4 , 5],
                                    orthogonal: "myExport"
                                },
                                customize: function (doc) {
                                     
                                    
                                    doc.content[0].table.widths = ['*', '*', 60, 60, 60, 60 ];
 
                                    doc.content[0].table.alignment = [ 'left', 'left','center',  'center', 'center', 'center' ];
                                    var rowCount = document.getElementById("tableProdutos").rows.length;
                                        for (i = 0; i < rowCount; i++) {
                                            doc.content[0].table.body[i][0].alignment = 'left';
                                            doc.content[0].table.body[i].vLineWidth = '1';
                                            doc.content[0].table.body[i][1].vLineColor = "#000";
                                            doc.content[0].table.body[i][1].alignment = 'left';
                                            doc.content[0].table.body[i][2].alignment = 'center';
                                            doc.content[0].table.body[i][3].alignment = 'center';
                                            doc.content[0].table.body[i][4].alignment = 'center';
                                            doc.content[0].table.body[i][5].alignment = 'center';
                  
                                            };
                                           

                                          

                                             
                           			// Create a footer object with 2 columns
                                    // Left side: report creation date
                                    // Right side: current page and total pages
                                    doc['footer']=(function(page, pages) {
                                        return {
                                            columns: [
                                                
                                                {
                                                    alignment: 'right',
                                                    text: ['page ', { text: page.toString() },	' of ',	{ text: pages.toString() }]
                                                }
                                            ],
                                            margin: 20
                                        }
						            });
                               

           
                                },
                            },
                            {
                                extend: 'print',
                                text: '<i class="fa-solid fa-print"></i>',
                                className: 'btn btn-primary btn-sm',
                                titleAttr: 'Print',
                                init: function(api, node, config) {
                                   $(node).removeClass('dt-button')
                                },
                                
                                title: '',
                                exportOptions: {
                                    columns: [ 0, 1, 2, 3, 4, 5 ]
                                },
                                customize: function (win,conf,table) {
                                    $(win.document.body)
                                        .css('font-size', '12pt')
                                        .prepend(
                                            '<img src="http://datatables.net/media/images/logo-fade.png" style="position:absolute; top:0; left:0;" />'
                                        );
            
                                    $(win.document.body)
                                        .find('table')
                                        .addClass('compact')
                                        .css('font-size', 'inherit');
                                    $(win.document.body).find('td:nth-child(n+4)').each(function (index) {
                                        $(this).css('width', '60px');
                                        $(this).css('text-align', 'center');
                                    });
                                    $(win.document.body).find('th:nth-child(n+4)').each(function (index) {
                                        $(this).css('width', '60px');
                                        $(this).css('text-align', 'center');
                                    });
                                    
                                }
                            },
          
         
                        ], */
                            
                        
                    },
                    topStart: { 
                        info: { 
                            text: 'Showing _START_ to _END_ of _TOTAL_ records'
                        },
                    },
                    topEnd:{
                            search: {
                                placeholder: 'Type search here'
                            }
                        },
                    bottomStart:  'pageLength', 
                    bottomEnd: { 
                        paging: { 
                            firstLast: false                             
                        }
                    }
                }, 
                initComplete: function () {
                                    $('.dt-info').addClass('small');
                                    $('.dt-info').parent().parent().removeClass('mt-2').addClass('mt-0');
                                    $('#dt-search-0').removeClass('w-60');
                                    $('#dt-search-0').addClass('px-2');
                                    $('#dt-search-0').parent().parent().addClass('ps-0');

                                    $('.dt-search input').unbind();
                                    $('.dt-search input').bind('keyup', function(e){
                                        var code = e.keyCode || e.which;
                                        if (code == 13) {
                                            table.search(this.value).draw();
                                        }
                                    });
                },

           
                language: { search: '', 
                            searchPlaceholder: "Search..." , 
                            paginate: {
                                previous: '<span class="prev-icon"></span> Previous',
                            next: 'Next <span class="next-icon"></span>' ,
                            }
                        },
                pageLength: 10,
                
               // pagingType: "simple_numbers",
                scroller: false,

                order: [[ 4, 'desc']],
                columns: [
                    // {data: 'id', name: 'id'},
                    {data: 'social_media', name: 'RS',  render: function (data, type, row, meta) {
                        return '<span class="text-primary px-0"><i class="fa-brands fa-'+data.toLowerCase()+'" ></i> ';
                    }},
                    {data: 'name', name: 'Autor',  render: function (data, type, row, meta) {
                        html = '';
                        html += '<div class="text-primary px-0">'+data+' </div>';
                        if (row['customers_id'] !== null){
                        

                        html += ((row['client'].id !== null)  ? '<div class="fs-6 my-auto  me-auto">' : '');
                        html += ((row['client'].mentionColor !== null) ? '<div class="me-2 my-1" style="float: left;  height: 20px;  width: 20px; border: 1px solid black;  clear: both;  background-color: '+row['client'].mentionColor +';"></div> ' : '');
                        html += ((row['client'].id !== null)  ?  '<div>'+ ' {{ __("applabels.Customer")}}: ' + row['client'].name +'</div></div>': '') ;
                        } 
                       
                        return html;
                    }},
                    {data: 'email', name: 'Email', render: function (data, type, row, meta) {
                        return '<div class="text-primary px-0">'+data+' </div>';
                    }},
                    {data: 'blocked', name: 'Blocked', render: function (data, type, row, meta) {                        
                        html = '<button id="'+row['id']+'" class="btn     text-primary badge  anchor-tooltip btn-block ' + (data ? 'btn-danger' : 'btn-success') +' rounded-pill text-white "  ';
                        html += '  id="btn-block'+row['id']+'  data-bs-toggle="tooltip" data-bs-html="true" "> <i class="fa-solid fa-user-slash"></i> </button>';
                        return html;
                    }},
                    {data: 'created_at', name: 'Data/Hora', render: function ( data, type ) {
                            return type === "display" || type === "filter" ?
                                moment(data).format("YYYY-MM-DD  HH:mm:ss") :  data;
                    }},
                    {data: 'id',  orderable: false ,  render: function ( data, type ) { return '<button class="btn btn-secondary btn-sm text-white btn-edit" id="btn-edit'+data+'" data-bs-toggle="tooltip" data-bs-html="true" title="'+
                                '{{ __("applabels.datatable Edit") }}"><i class="fa-solid fa-pencil"></i></button>';  }}, /* edit */
                    {  //DELETE COMMENTS onclick="editAuthor('+data+')"
                        data: 'id',  orderable: false , render: function (data, type, row, meta) {
                                return '<button class="btn btn-danger btn-sm text-white btn-delete" id="btn-delete'+data+'" data-bs-toggle="tooltip" data-bs-html="true" title="'+
                                '{{ __("applabels.datatable Delete") }}" ><i class="fa-solid fa-trash-can"></i></button>';
                             }
                        } 
                ],

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

                    reason = $.grep(data['block_statuses'], function(e) { return e.type === 'NOTIF' });
                    if(  !$.isEmptyObject(reason)){  
                        tooltipinfo = '';                        
                        $(row).find('td:eq(1)').css('background-color', reason[0]['color']);
                        $(row).find('td:eq(1)').children('.text-primary').attr('data-bs-toggle', 'tooltip');                     
                        $(row).find('td:eq(1)').children('.text-primary').attr('data-bs-placement', 'top');
                         
                        $.each( reason, function() {
                            tooltipinfo += '\n'+this['description'];
                        })
                        $(row).find('td:eq(1)').children('.text-primary').attr('title', tooltipinfo);
                    }
                },
                fnDrawCallback: function (data, settings) {
                    //console.log( table.ajax.params('after'));
                    console.log(  table.page.info() );
                    console.log( 'DataTables has redrawn the table' );
                    console.log(data.json);
                    $('#authors-table tbody tr td:nth-child(-n+5)').click(function (e) { //
                        // get position of the selected row
                        e.preventDefault();
                        var position = table.row( this ).index();
                        var data = table.row( position ).data();
                        var id = data.id;

                     
                
                    });
                    $('.btn-edit').click (function(e, dt, button, config ) {
                        
                        e.preventDefault();
                        
                        var rowid = $(this).attr('id').replace('btn-edit','')
           
                        console.log('EDIT BUTTON CLICKED'+ rowid)
                        //find row
                        $.each( data.json.data, function( index, value ) {
                             if (value.id == rowid){
                                rowdata = value;
                             }
                        }); 
                       // console.log( rowdata);


                        populateModalPopup(rowdata["api_author_id"]  ,(rowdata['name']!=''?rowdata['name']:'-') ,(rowdata['email']!=''?rowdata['email']:'-'),rowdata['social_media']);
                 

                    });


                    $('.btn-delete').on('click',function(e){
                        e.preventDefault();
                        if(!confirm(" {{ __('applabels.ALERT DELETE author' ) }}")) return;

                        var rowid = $(this).attr('id').replace('btn-delete','')
                        var el = $(this)
                        if(!rowid) return;
                        console.log(el);
                        
                        $.ajax({
                            type: "delete",
                            dataType: 'JSON',
                            url: "{{ url('/authors/delete/') }}/" + rowid,
                            data: rowid,
                            success: function (data) {
                                if (data.success) {
                                    console.log(data);
                                    table.row(el.parents('tr'))
                                        .remove()
                                        .draw();
                                }
                            },
                            error: function(jqXHR, textStatus, errorThrown) {
                                    console.error(textStatus, errorThrown);
                                }
                        }); //end ajax
                    }) 


                    $('.btn-block').on('click',function(e){
                        e.preventDefault();
                        var rowid = $(this).attr('id').replace('btn-block','')
           
                        console.log('Block BUTTON CLICKED'+ rowid)
                        //find row
                        $.each( data.json.data, function( index, value ) {
                             if (value.id == rowid){
                                rowdata = value;
                             }
                        }); 
                       // console.log( rowdata);


                        populateModalPopup(rowdata["api_author_id"]  ,(rowdata['name']!=''?rowdata['name']:'-') ,(rowdata['email']!=''?rowdata['email']:'-'),rowdata['social_media']);
                 
                    }) 
                }
                 
            });
              //custom format of DataTables Search boxes
            $('[type=search]').each(function () {
                $(this).attr("placeholder", "Search...");
                $('#authors-table_filter').addClass('col-xl-4');
                $(this).removeClass('form-control-sm').addClass('input w-80')
            }); 
        
      

        /**
         * functions for modal window 
         */
        var i = 0;
        $(document).on("click", ".dynamic-edit", function (e) {
            e.preventDefault();
            var thisClass = $(this).attr('class');
            let thisDiv = $(this);
            $.fn.editField (thisClass, thisDiv);
        
        });

 

        $(document).on("click",".dynamic-delete", function (e) {
            e.preventDefault();
            var thisClass = $(this).attr('class');
            let thisDiv = $(this);
            
            data = thisDiv.parent('div').parent('div').children().first().children('.id-input').attr("value");
            $.ajax({
                    url: "{!! url('/blockStatus/delete/') !!}/"+data,
                    type: "delete",
                    
                    datatype: "json",
                    success: function(response) {                  
                        window.location.reload();
                        
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        console.error(textStatus, errorThrown);
                    }
                });
            
        });

        
        $(document).on('click', '.remove-input-field', function () {
            $(this).parent('div').parent('div').remove();
        }); 
   
        $(document).on('submit',"#formAuthor" , function(e) { 

        //    $('#formAuthor').submit(function () {
            e.preventDefault();
            var formData = $(formAuthor).serializeArray();
            console.log (formData);    
            var posturl = "{{ url('/blockStatus/save') }}"; //$('#saveURL').val();
            console.log (posturl)
            $.ajax({
                url: posturl,
                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 for author modal edit */
        $(document).on('submit',"#formEditAuthor" , function(e) { 
            e.preventDefault();
                
            var formData   = $(formEditAuthor).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);
                }
            });


        })
   
        

        $.fn.editField = function(currentClass, myDiv){
            if (~currentClass.indexOf('btn-warning')){
                myDiv.removeClass('btn-warning');
                myDiv.addClass('btn-success');
                myDiv.html('Guardar');    
                myDiv.parent('div').parent('div').children().first().children('.text-input').attr("readonly", false);
            }

            if (~currentClass.indexOf('btn-success')){
                console.log ('SAVING');
    
                id =  myDiv.parent('div').parent('div').children().first().children('.id-input').attr("value");
                desc =  myDiv.parent('div').parent('div').children().first().children('.text-input').val();
                const data = {id, desc };
                var formData = JSON.stringify(data) ; //serialize
                console.log (data);

                $.ajax({
                    url: "{!! url('/blockStatus/save') !!}",
                    type: "post",
                    data: data,
                    datatype: "json",
                    success: function(response) {
                    
                        myDiv.removeClass('btn-success');
                        myDiv.addClass('btn-warning');
                        myDiv.html('Edit');    
                        myDiv.parent('div').parent('div').children().first().children('.text-input').attr("readonly", true);
                        console.log(response, ' Resposta AJAX');
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        console.error(textStatus, errorThrown);
                    }
                });

            }
        }

       
    
    
 
    })
    
 
</script>
    @endpush
@endsection