@extends('layouts.admin')
@section('content')

    <div class="row mb-3">
        <div class="col-md-12 d-flex justify-content-between align-items-center">
            <div>
                <h3 class="font-weight-bold mb-1" style="color: var(--dm-text-main);">
                    <i class="bi bi-people-fill text-primary mr-2"></i>
                    Listado de Usuarios del Sistema
                </h3>
                <p class="text-muted mb-0" style="font-size: 0.9rem;">
                    Consulte los usuarios registrados y los roles que tienen asignados.
                </p>
            </div>
            <div>
                <a href="{{url('admin/roles')}}" class="btn btn-outline-info font-weight-bold mr-2">
                    <i class="bi bi-shield-lock-fill mr-1"></i> Administrar Roles
                </a>
                <a href="{{url('admin/usuarios/create')}}" class="btn btn-primary font-weight-bold">
                    <i class="bi bi-person-plus-fill mr-1"></i> Registrar Usuario
                </a>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="card card-outline card-primary">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3 class="card-title">
                        <i class="bi bi-table mr-1"></i> Usuarios Registrados
                    </h3>
                    <div class="card-tools">
                        <span class="badge badge-primary px-3 py-2 font-weight-bold" style="border-radius: 9999px;">
                            Total: {{ $usuarios->count() }} usuarios
                        </span>
                    </div>
                </div>
                <div class="card-body">

                    <table id="example1" class="table table-bordered table-hover table-striped">
                        <thead>
                            <tr>
                                <th style="text-align: center; width: 60px;">Nro</th>
                                <th>Nombre</th>
                                <th>Correo Electrónico</th>
                                <th style="text-align: center;">Rol Asignado</th>
                                <th style="text-align: center; width: 160px;">Acciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php $contador = 1; @endphp
                            @foreach($usuarios as $usuario)
                                <tr>
                                    <td style="text-align: center;" class="font-weight-bold">{{ $contador++ }}</td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <i class="bi bi-person-circle mr-2 text-primary" style="font-size: 1.25rem;"></i>
                                            <span class="font-weight-bold">{{ $usuario->name }}</span>
                                        </div>
                                    </td>
                                    <td>{{ $usuario->email }}</td>
                                    <td style="text-align: center;">
                                        @forelse($usuario->roles as $role)
                                            @php
                                                $badgeColor = 'badge-primary';
                                                if ($role->name === 'admin') $badgeColor = 'badge-dark';
                                                elseif ($role->name === 'doctor') $badgeColor = 'badge-info';
                                                elseif ($role->name === 'secretaria') $badgeColor = 'badge-warning text-dark';
                                                elseif ($role->name === 'paciente') $badgeColor = 'badge-success';
                                            @endphp
                                            <span class="badge {{ $badgeColor }} px-2 py-1 font-weight-bold text-uppercase mr-1" style="border-radius: 6px;">
                                                <i class="bi bi-shield-check mr-1"></i>{{ $role->name }}
                                            </span>
                                        @empty
                                            <span class="badge badge-light border text-muted px-2 py-1">Sin rol</span>
                                        @endforelse
                                    </td>
                                    <td style="text-align: center;">
                                        <div class="btn-group" role="group">
                                            <a href="{{ url('admin/usuarios/' . $usuario->id) }}" class="btn btn-info btn-sm" title="Ver Detalle">
                                                <i class="bi bi-eye"></i>
                                            </a>
                                            <a href="{{ url('admin/usuarios/' . $usuario->id . '/edit') }}" class="btn btn-success btn-sm" title="Editar Usuario y Rol">
                                                <i class="bi bi-pencil"></i>
                                            </a>
                                            <a href="{{ url('admin/usuarios/' . $usuario->id . '/confirm-delete') }}" class="btn btn-danger btn-sm" title="Eliminar Usuario">
                                                <i class="bi bi-trash"></i>
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>

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

    <script>
        $(function () {
            $("#example1").DataTable({
                "pageLength": 10,
                "responsive": true,
                "lengthChange": true,
                "autoWidth": false,
                "buttons": [
                    { extend: 'copy', text: 'Copiar' },
                    { extend: 'excel', text: 'Excel' },
                    { extend: 'pdf', text: 'PDF' },
                    { extend: 'print', text: 'Imprimir' }
                ]
            }).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');
        });
    </script>
@endsection