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

    #users-table.dataTable td:nth-child(1),
    #users-table.dataTable td:nth-child(2),
    #users-table.dataTable td:nth-child(3){  
        text-align: left;
    }   
    #users-table.dataTable td:first-child, 
    #users-table.dataTable td:nth-child(5),  
    #users-table.dataTable td:nth-child(6) {  
        text-align: center;
    }
     #users-table.dataTable th:first-child , 
     #users-table.dataTable th:nth-child(5), 
     #users-table.dataTable th:nth-child(6)
   {  
        text-align: center;
    }
    #users-table.dataTable td:last-child, #users-table.dataTable th:last-child {  
        text-wrap: nowrap;
        text-align: center;
         
    }

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


    
    div.dt-container div.dt-search input {
          /*  width: 440px;  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;
            width: 330px;
        }

        @media (min-width: 2400px) {
            
        div.dt-container div.dt-search input {
            width: 430px; /* Set your desired width */
        }
        .input-group.mb-0.me-0 {
            width: 430px;
        }
        }
</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"> </div>
                        <h4 class="text-dark">  {{ __('applabels.Users') }}</h4>  
                        
            </div>   
            <table id="users-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.id') }}</th>
                    <th class="col-2"> {{ __('applabels.username') }}</th>
                    <th class="col-2"> {{ __('applabels.name') }}</th>
                    <th class="col-2"> {{ __('applabels.email') }}</th>    
                    <th  class="col-1">{{ __('applabels.level') }}</th> 
                    <th  class="col-1">{{ __('applabels.app') }}</th> 
                    <th class="col-2">{{ __('applabels.datatable date time') }}</th>
                    <th  class=" ">{{ __('applabels.action') }}</th>
                </thead>
                <tbody>

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






@push('scripts') 

@include('includes.datatablesjs')



<script type="text/javascript"> 
    var minDate, maxDate;

        // Custom filtering function which will search data in column four between two values
   

    DataTable.ext.buttons.newfullitem = {
        action: function (e, dt, node, config) {
            
            document.location.href =  "{{  LaravelLocalization::localizeUrl('/auth/users/create') }}"  
        }
    };

    $.fn.dataTable.ext.errMode = 'throw';
    $(document).ready(function($) {
        $.noConflict();
 
        
        let table = $('.datatable').DataTable({
                ajax: "{{ url('/auth/users/list') }}",
                serverSide: true,
                processing: true,
                columnDefs: [{
                    targets: "_all",
                    orderable: false,
                    searchable: true
                 }],
                 layout: {
                    top2Start: {
                        buttons: [
                        {
                                extend: 'newfullitem',
                                text: '<i class="fa-solid fa-user-plus"></i>',
                                className: 'btn btn-danger btn-sm',
                                titleAttr: 'New User',
                                init: function(api, node, config) {
                                   $(node).removeClass('dt-button')
                                }
                            }
                        ]
                    } ,
                    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,
                //oLanguage: { "sSearch": ""},
                aaSorting:[[6,"desc"]],
                columns: [
                    
                    {data: 'id', name: 'id'},
                    {data: 'username', name: 'username'},
                    
                    {data: 'name', name: 'User',  render: function (data, type, row, meta) {
                        return '<div class="text-primary px-0">'+data+' </div>';
                    }},
                    {data: 'email', name: 'email'},
                    {data: 'app_levels_id', name: 'LEVEL',  render: function (data, type) {
                        return '<span class="text-primary px-0"> '+data +'</span> ';
                    }}, 

                    {data: 'authorized', name: 'APP',  render: function (data, type) {
                        checked =  (data  ? 'circle-check' : 'circle');
                        color = data ? 'success' : 'danger';
                        return '<span class="text-'+color+' px-0"><i class="fa-regular fa-'+checked +'"></i> ';
                    }}, 
                    {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'},
                ]
              
            // Apply the class to the action buttons
           
            }); 
        $('[type=search]').each(function () {
            $(this).attr("placeholder", "Search...");
            $('#users-table_filter').addClass('col-xl-4');
            $(this).removeClass('form-control-sm').addClass('input w-80')
        });
        $(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/users/delete/') }}/" + rowid,
                data: {_method: 'delete'},//,_token:token
                success: function (data) {
                    if (data.success) {
                        table.row(el.parents('tr'))
                            .remove()
                            .draw();
                    }
                    else {
                        console.log(data);
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                        console.error(textStatus, errorThrown);
                    }
             }); //end ajax
        }) 
    })
</script>

    
    @endpush
@endsection