@extends('layouts.app')
@push('style')   
  
    
    <link rel="stylesheet" type="text/css" href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.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://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>
   

  #pages-table.dataTable td:first-child,   
  #pages-table.dataTable  th:first-child, 
  #pages-table.dataTable td:nth-child(n+1):nth-child(-n+9),   
  #pages-table.dataTable  th:nth-child(n+1):nth-child(-n+9)
    {  
    text-align: center;  
    white-space: nowrap !important;
  }
  #pages-table.dataTable td:nth-child(3),
#pages-table.dataTable th:nth-child(3) {
    text-align: left !important;
    
}


 
</style>
  
@endpush

@section('content')
@include('components.modal-delete-confirm')
<div class="container-fluid my-1  bg-light border shadow-lg rounded-3">
    <div class="row flex-nowrap p-2" id="2nd-row">
        
        <div class="col-md-10 flex-grow-1 " id="rightPanel">
             
            <div class="row px-2 pb-0   rounded-3 border shadow-lg">
                <div class="text-dark px-0">
                        <div id="info-message" class="mr-4 alert alert-danger 
                            @if (session('error')) 
                                    " >{{session('error')}}  
                            @else  
                                    d-none"> 
                            @endif  
                        </div>
                </div>
                <div id="PagePanel" class="flex-row px-2 pb-2  justify-content-between">                                
                <div class="row mb-auto"> 
                    <div class="mb-3 col-sm-4  mx-auto">
                        <h1 class="h4 pt-4 mb-3 fw-normal">  <i class="fas fa-share-alt  "></i>  {{ __('menu.SocialPlatforms') }}</h1>
                    </div>
                    <div class="mb-3 col-sm-8 text-end mx-auto">
                        <h1 class="h4 pt-4 mb-3 fw-normal"> 
                        <button name="addsocialplatform" id="addsocialplatform"  class="btn btn-outline-primary my-1  btn-primary text-white "> 
                             <i class="fa fa-plus  "></i>  {{ __('menu.AddSocialPlatforms') }}</h1>
                        </button>
                    </div>
                </row>
                <div class="row mb-auto "> 
                    


                    <table class="table table-bordered" id="pages-table">
                        <thead>
                            <tr>
                               
                                <th class="text-nowrap" title="{{ __('applabels.SocialMedia' ) }}"><span class="p-2">{{ __('applabels.datatable SM' ) }}</span></th>
                                <th class="col-2">API ID</th>
                                <th class="col-6">{{ __('applabels.businessPage' ) }}</th>
                                <th class="col-2">{{ __('applabels.DateToken' ) }}</th>
                                <th>{{ __('applabels.datatable delete' ) }}</th>
                            </tr>
                        </thead>
                    </table>
                     
                    </div>    
                </div>            
            </div>
        </div>
    </div>
</div>


@include('subscriptions.components.configSocialPlatforms')

@push('scripts')   
<script src="https://cdn.datatables.net/2.1.8/js/dataTables.min.js"></script>  
<script src="https://cdn.datatables.net/2.1.8/js/dataTables.bootstrap5.min.js"></script>  

<script type="text/JavaScript" >

        const modalConfirmDelete = new bootstrap.Modal('#modalConfirmDelete') 

        let selectedPageId = null;
    /* $('button[name="deletepage"]').on('click', function(e) {
       alert();
       */

       $('.delete-page-btn').on('click', function () {
         
        $('#modalConfirmTitle').html("{{__('applabels.DeleteItem')}}" );
        $('#modalHeaderMessage').html("");
        $('#confirmDeleteMessage').html("{{__('applabels.Confirm if you want to delete')}} " );
        selectedPageId = $(this).attr('id');
     
        modalConfirmDelete.show();
        });

      

       

     $('#modalBtnDelete').click(function () {
        if (!selectedPageId) return;
        console.log(selectedPageId);     
       // Redirect to the page and pass the button ID as a query parameter id={{ auth()->user()->id }}&
       var url = "{{ url('removeSocialMediaPage') }}" +'/'+  selectedPageId;
       
       $.ajax({
            url: url,
            type: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            success: function (response) {
                
                // Optionally reload or remove the element from DOM
                location.reload();
            },
            error: function (xhr) {
                 
                console.error(xhr.responseText);
            }
        });
   });



    $(function () {
        let table = $('#pages-table').DataTable({
            processing: true,
            serverSide: true,
            layout: {
                    topStart: {                        
                            info: {
                                text: 'Showing _START_ to _END_ of _TOTAL_ records'
                            },
                        },
                        
                        topEnd:{
                                /*search: {
                                    placeholder: 'Type search here'
                                }*/
                            },
                        bottomStart:  'pageLength', 
                        bottomEnd:{
                            paging: { 
                                firstLast: false
                            }
                    }
                }, 
            columnDefs: [{
                    targets: "_all",
                    orderable: false,
                    searchable: false
            }],
            order: [],  // Remove default orderin
            ajax: '{{ route('mySocialPlatforms.table') }}',
            columns: [
                //{ data: 'id' },
                 
                {
                    data: 'social_media_name',
                    render: function (data, type) {
                        return '<span class="text-primary px-0 anchor-tooltip"><i class="fa-brands fa-'+data.toLowerCase()+'"></i> ';
                    }
                },
                { data: 'api_page_id' },
                { data: 'name' },
                                
                {
                    data: 'token_date',
                    render: function (data, type, row) {
                        console.log(data);
                        const now = new Date();
                        const tokenDate = new Date(data);
                        console.log('DATE:'+tokenDate);
                        // Format the date as dd/MM/yyyy
                        const formattedDate = tokenDate.toLocaleDateString('pt-PT');

                        // If the date has passed
                        if (tokenDate <= now) {
                            const updateUrl = '/updateToken/' + row.token_id;
                            return `<a href="${updateUrl}" style="color:red;"><i class="fa-solid fa-retweet"></i>${formattedDate}</a>`;
                        }

                        return formattedDate;
                    }
                },
                 { data: 'action', orderable: false, searchable: false }
            ]
        });

        $(document).on('click', '.delete-page', function () {
            const id = $(this).data('id');
            var myurl = "{{ url('removeSocialMediaPage') }}" +'/'+  id;
            if (confirm("Are you sure you want to delete this page?" )) {
                $('#loading').removeClass('d-none');
                $.ajax({
                    url: myurl,
                    type: 'DELETE',
                    data: {
                        _token: '{{ csrf_token() }}'
                    },
                    success: function (res) {
                        if (res.success) {
                            $('#loading').addClass('d-none');
                            table.ajax.reload();
                        }
                    }
                });
            }
        });
    });
</script>
@endpush

@endsection