@extends('layouts.user_type.auth')


@section('content')
<div>


            <!-- Livewire Component -->
            @livewire('users')
            <div>

                <div class="table-responsive p-2">
                    <div class="card">
                        <div class="card-header  pb-2"><h5>Administrar usuarios</h5></div>
                        <div class="card-body px-2 pt-2 pb-2">

                            @if(session('success'))
                                <div class="m-3  alert alert-success alert-dismissible fade show" id="alert-success" role="alert">
                                    <span class="alert-text text-white">
                                    {{ session('success') }}</span>
                                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                                        <i class="fa fa-close" aria-hidden="true"></i>
                                    </button>
                                </div>
                            @endif

                            {{ $dataTable->table() }}

                        </div>
                    </div>
                </div>
            </div>


</div>
@endsection

@push('scripts')
    {{ $dataTable->scripts(attributes: ['type' => 'module']) }}
    <script>

        window.addEventListener('guardado', event => {
            console.log('success: ' + event.detail.success);

            $('#users-table').DataTable().ajax.reload();
            $('#createDataModal').modal('toggle');
        })
    </script>
@endpush