@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">
<style>
 

</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="container my-5">
    <div class="row p-4 pb-0 pe-lg-0 pt-lg0 rounded-3 border shadow-lg">
        <div class="container">
            <div id="info-message"> </div>
            <h4 class="text-dark"> Access Tokens</h4>  
            
            
            <table id="authors-table" class="table table-bordered table-hover datatable"  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 >id</th>
                    <th >RS</th>
                    <th class="col-8">Token</th>
                         
                    <th >Data/Hora</th>
                    <th >Action</th>
                </thead>
                <tbody>

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






@push('scripts') 

<!-- Bootstrap -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

 
<script src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script>  
<script src="https://cdn.datatables.net/1.13.1/js/dataTables.bootstrap5.min.js"></script>    
<!-- script type="text/javascript" language="javascript" src="https://cdn.datatables.net/searchpanes/2.1.0/js/dataTables.searchPanes.min.js"></script --> 
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/datetime/1.2.0/js/dataTables.dateTime.min.js"></script>
<script type="text/JavaScript" 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();
 
        
        let table = $('.datatable').DataTable({
                ajax: "{{ url('/auth/token/list') }}",
                serverSide: true,
                processing: true,
                //aaSorting:[[0,"desc"]],
                columns: [
                    {data: 'id', name: 'id'},
                    {data: 'name', name: 'RS',  render: function (data, type) {
                        return '<span class="text-black px-0"><i class="fa-brands fa-'+data.toLowerCase()+'"></i> ';
                    }},
                    {data: 'access_token', name: 'token'}, 
                    {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: 'action', name: 'Action'},
                ]
            });
/*
        btnAdd.click(function(){
            modal.modal()
            form.trigger('reset')
            modal.find('.modal-title').text('Add New')
            btnSave.show();
            btnUpdate.hide()
        })

        btnSave.click(function(e){
            e.preventDefault();
            var data = form.serialize()
            console.log(data)
            $.ajax({
                type: "POST",
                url: "",
                data: data+'&_token='+token,
                success: function (data) {
                    if (data.success) {
                        table.draw();
                        form.trigger("reset");
                        modal.modal('hide');
                    }
                    else {
                        alert('Delete Fail');
                    }
                }
             }); //end ajax
        })

       
        $(document).on('click','.btn-edit',function(){
            btnSave.hide();
            btnUpdate.show();

            
            modal.find('.modal-title').text('Update Record')
            modal.find('.modal-footer button[type="submit"]').text('Update')

            var rowData =  table.row($(this).parents('tr')).data()
            
            form.find('input[name="id"]').val(rowData.id)
            form.find('input[name="name"]').val(rowData.name)
            form.find('input[name="email"]').val(rowData.email)
            form.find('input[name="dob"]').val(rowData.dob)

            modal.modal()
        })

        btnUpdate.click(function(){
            if(!confirm("Are you sure?")) return;
            var formData = form.serialize()+'&_method=PUT&_token='+token
            var updateId = form.find('input[name="id"]').val()
            $.ajax({
                type: "POST",
                url: "/" + updateId,
                data: formData,
                success: function (data) {
                    if (data.success) {
                        table.draw();
                        modal.modal('hide');
                    }
                }
             }); //end ajax
        })
            
*/
        $(document).on('click','.btn-delete',function(){
            if(!confirm("Tem a certeza?")) return;

            var rowid = $(this).data('rowid')
            var el = $(this)
            if(!rowid) return;

            
            $.ajax({
                type: "POST",
                dataType: 'JSON',
                url: "{{ url('/auth/token/delete/') }}" + rowid,
                data: {_method: 'delete',_token:token},
                success: function (data) {
                    if (data.success) {
                        table.row(el.parents('tr'))
                            .remove()
                            .draw();
                    }
                }
             }); //end ajax
        }) 
    })
</script>

    
    @endpush
@endsection