@extends('layouts.app')

@section('content')
    <div class="container">
        <section class="mb-4">
            <div class="card">
                <div class="card-header text-center">
                    <h5 class="mb-0 text-center">
                        <strong>USUARIOS</strong>
                    </h5>
                </div>
                <div class="card-body">
                    <i class="fa-solid fa-square-plus me-auto" id="user_add"></i>
                    <table class="table table-hover text-nowrap text-center">
                        <thead>
                            <tr>
                                <td>Nombre</td>
                                <td>Nombre de usuario</td>
                                <td>Rol</td>
                                <td>Opciones</td>
                            </tr>
                        </thead>
                        <tbody id="users">
                            @foreach ($users as $user)
                                <tr>
                                    <td hidden>{{ $user->id }}</td>
                                    <td>{{ $user->name }}</td>
                                    <td>{{ $user->username }}</td>
                                    <td>{{ $user->role }}</td>
                                    <td>
                                        <i class="fa-solid fa-r change_rol"></i>
                                        <i class="fa-solid fa-key change_password"></i>
                                        <i class="fa-solid fa-pencil edit_user"></i>
                                        <i class="fa-solid fa-square-xmark delete_user"></i>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </section>
    </div>
    <div class="modal" tabindex="-1" id="user-modal">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Crear Usuario</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="d-flex bd-highlight">
                        <div class="p-2 flex-fill bd-highlight">
                            <label>Nombre</label>
                            <input class="form-control mb-3" type="text" placeholder="Nombre" id="user_name"
                                aria-label="default input example">
                            <label>Rol</label>
                            <select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example"
                                id="type_user"></select>
                        </div>
                    </div>
                    <div id='users_errors'></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="user_storage">Crear Usuario</button>
                </div>
            </div>
        </div>
    </div>
@endsection