@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-shield-lock-fill text-primary mr-2"></i>
                    Administración de Roles y Permisos
                </h3>
                <p class="text-muted mb-0" style="font-size: 0.9rem;">
                    Gestione los roles del sistema y asigne usuarios a los perfiles correspondientes.
                </p>
            </div>
            <div>
                <a href="{{url('admin/roles/create')}}" class="btn btn-primary font-weight-bold">
                    <i class="bi bi-plus-circle mr-1"></i> Crear Nuevo Rol
                </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-card-list mr-1"></i> Listado de Roles del Sistema
                    </h3>
                    <div class="card-tools">
                        <span class="badge badge-primary px-3 py-2 font-weight-bold" style="font-size: 0.85rem; border-radius: 9999px;">
                            Total: {{ $roles->count() }} roles
                        </span>
                    </div>
                </div>

                <div class="card-body">
                    <div class="table-responsive">
                        <table id="example1" class="table table-bordered table-hover table-striped">
                            <thead>
                                <tr>
                                    <th style="width: 60px; text-align: center;">Nro</th>
                                    <th>Nombre del Rol</th>
                                    <th style="text-align: center;">Usuarios Asignados</th>
                                    <th style="text-align: center;">Total Permisos</th>
                                    <th style="text-align: center;">Guard</th>
                                    <th style="width: 220px; text-align: center;">Acciones</th>
                                </tr>
                            </thead>
                            <tbody>
                                @php $contador = 1; @endphp
                                @foreach($roles as $role)
                                    <tr>
                                        <td style="text-align: center;" class="font-weight-bold">{{ $contador++ }}</td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                @php
                                                    $badgeClass = 'bg-primary';
                                                    $icon = 'bi-shield-check';
                                                    if ($role->name === 'admin') {
                                                        $badgeClass = 'bg-indigo';
                                                        $icon = 'bi-shield-lock-fill';
                                                    } elseif ($role->name === 'doctor') {
                                                        $badgeClass = 'bg-teal';
                                                        $icon = 'bi-file-person-fill';
                                                    } elseif ($role->name === 'secretaria') {
                                                        $badgeClass = 'bg-info';
                                                        $icon = 'bi-person-badge-fill';
                                                    } elseif ($role->name === 'paciente') {
                                                        $badgeClass = 'bg-success';
                                                        $icon = 'bi-heart-pulse-fill';
                                                    }
                                                @endphp
                                                <span class="badge {{ $badgeClass }} p-2 mr-2" style="border-radius: 8px;">
                                                    <i class="bi {{ $icon }} text-white"></i>
                                                </span>
                                                <div>
                                                    <strong class="text-uppercase" style="font-size: 0.95rem;">{{ $role->name }}</strong>
                                                    @if($role->name === 'admin')
                                                        <span class="badge badge-warning ml-1 text-dark" style="font-size: 0.7rem;">Principal</span>
                                                    @endif
                                                </div>
                                            </div>
                                        </td>
                                        <td style="text-align: center;">
                                            <a href="{{ url('admin/roles/' . $role->id) }}" class="badge badge-light border px-2 py-1 text-primary font-weight-bold" title="Ver usuarios de este rol">
                                                <i class="bi bi-people-fill mr-1"></i> {{ $role->users->count() }} usuario(s)
                                            </a>
                                        </td>
                                        <td style="text-align: center;">
                                            <span class="badge badge-secondary px-2 py-1">
                                                <i class="bi bi-key-fill mr-1"></i> {{ $role->permissions->count() }} permisos
                                            </span>
                                        </td>
                                        <td style="text-align: center;">
                                            <code class="px-2 py-1 border rounded bg-light">{{ $role->guard_name }}</code>
                                        </td>
                                        <td style="text-align: center;">
                                            <div class="btn-group" role="group">
                                                <!-- Ver Detalle & Usuarios -->
                                                <a href="{{ url('admin/roles/' . $role->id) }}" 
                                                   class="btn btn-info btn-sm" 
                                                   title="Ver Detalle y Usuarios Asignados">
                                                    <i class="bi bi-eye"></i>
                                                </a>

                                                <!-- Asignar Usuarios -->
                                                <a href="{{ url('admin/roles/' . $role->id . '/asignar') }}" 
                                                   class="btn btn-warning btn-sm text-dark font-weight-bold" 
                                                   title="Asignar Usuarios a este Rol">
                                                    <i class="bi bi-person-plus-fill"></i>
                                                </a>

                                                <!-- Editar Rol y Permisos -->
                                                <a href="{{ url('admin/roles/' . $role->id . '/edit') }}" 
                                                   class="btn btn-success btn-sm" 
                                                   title="Editar Rol y Permisos">
                                                    <i class="bi bi-pencil"></i>
                                                </a>

                                                <!-- Eliminar Rol -->
                                                @if($role->name !== 'admin')
                                                    <a href="{{ url('admin/roles/' . $role->id . '/confirm-delete') }}" 
                                                       class="btn btn-danger btn-sm" 
                                                       title="Eliminar Rol">
                                                        <i class="bi bi-trash"></i>
                                                    </a>
                                                @else
                                                    <button type="button" class="btn btn-secondary btn-sm" disabled title="El rol admin no puede eliminarse">
                                                        <i class="bi bi-lock-fill"></i>
                                                    </button>
                                                @endif
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </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