@extends('layouts.app')

@section('title', 'Dashboard')

@section('content')


<div class="card">
    <div class="row card-header mx-0 px-2">
        <div class="d-md-flex justify-content-between align-items-center dt-layout-start col-md-auto me-auto">
            <h5 class="card-title mb-0 text-md-start text-center">Usuarios</h5>
        </div>
        <div class="d-md-flex justify-content-between align-items-center dt-layout-end col-md-auto mt-0">
            <div class="dt-buttons btn-group flex-wrap">
                <!-- <div class="btn-group">
                    <button class="btn buttons-collection btn-label-primary dropdown-toggle me-4 waves-effect border-none" tabindex="0" aria-controls="DataTables_Table_0" type="button" aria-haspopup="dialog" aria-expanded="false">
                        <span>
                            <span class="d-flex align-items-center gap-2">
                                <i class="icon-base ri ri-external-link-line icon-18px"></i>
                                <span class="d-none d-sm-inline-block">Export</span>
                            </span>
                        </span>
                    </button>
                </div> -->
                <a class="btn create-new btn-primary" href="{{ route($type.'.create') }}" aria-haspopup="dialog" aria-expanded="false">
                    <span>
                        <span class="d-flex align-items-center">
                            <i class="icon-base ri ri-add-circle-fill icon-18px me-sm-1 waves-effect waves-light"></i>
                            <span class="d-none d-sm-inline-block">Crear Registro</span></span>
                    </span>
                </a>
            </div>
        </div>
    </div>

    <div class="card-datatable text-nowrap pt-0">

        <table class="datatables-basic table table-bordered" id='tabla_registros'>
            <thead>
                <tr>
                    <!-- <th></th> -->
                    <th>ID</th>
                    <th>Nombre</th>
                    <th>Email</th>
                    <th>Perfil</th>
                    <th>Acciones</th>
                </tr>
            </thead>
        </table>
    </div>
</div>
<style>
    div.dt-container div.dt-length select {
        margin-inline: .5rem;
    }

    div.dt-container div.dt-length select {
        width: auto;
        display: inline-block;
        margin-right: .5em;
    }
</style>
<script>
    var urlborrar = '{{ route("$type.index") }}';
    $(document).ready(function() {
        $('#tabla_registros').DataTable({
            processing: true,
            serverSide: true,
            responsive: true,
            ajax: '{{ route("$type.index") }}',
            initComplete: function(settings, json) {
                $('.card-header').after('<hr class="my-0">');
            },
            language: {
                url: "{{ asset('js/dataTables.spanish.json') }}",
                paginate: {
                    next: '<i class="icon-base ri ri-arrow-right-s-line scaleX-n1-rtl icon-22px"></i>',
                    previous: '<i class="icon-base ri ri-arrow-left-s-line scaleX-n1-rtl icon-22px"></i>',
                    first: '<i class="icon-base ri ri-skip-back-mini-line scaleX-n1-rtl icon-22px"></i>',
                    last: '<i class="icon-base ri ri-skip-forward-mini-line scaleX-n1-rtl icon-22px"></i>'
                }
            },
            initComplete: function() {
                $('#tabla_registros_wrapper').addClass('mx-2');
            },
            columns: [{
                    data: 'id',
                    name: 'id'
                }, {
                    data: 'name',
                    name: 'name'
                },
                {
                    data: 'email',
                    name: 'email'
                },
                {
                    data: 'perfil',
                    name: 'perfil',
                    render: function(data, type, row) {
                        let clase = '';
                        let titulo = data;

                        switch (data.toLowerCase()) {
                            case 'administrador':
                                clase = 'bg-primary text-white';
                                break;
                            case 'editor':
                                clase = 'bg-warning text-dark';
                                break;
                            case 'superadministrador':
                                clase = 'bg-success text-white';
                                break;
                            default:
                                clase = 'bg-secondary text-white';
                                break;
                        }

                        return `<span class="badge rounded-pill ${clase}">${titulo}</span>`;
                    }
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false
                },
            ],

        });
    });
</script>
@endsection