@extends('layouts.admin')

@section('title', 'Gestión de Usuarios')
@section('page-title', 'Gestión de Usuarios')

@section('content')
<!-- Mensajes de alerta -->
@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        <i class="fas fa-check-circle me-2"></i>{{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif

@if(session('error'))
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <i class="fas fa-exclamation-circle me-2"></i>{{ session('error') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif

@if($errors->any())
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <i class="fas fa-exclamation-triangle me-2"></i>
        <ul class="mb-0">
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif

<div class="row mb-4">
    <!-- Filtros y búsqueda -->
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <form action="{{ route('admin.usuarios.index') }}" method="GET" class="row g-3">
                    <div class="col-md-3">
                        <label class="form-label">Buscar</label>
                        <input type="text" class="form-control" name="search" placeholder="Nombre, email o teléfono" value="{{ request('search') }}">
                    </div>
                    
                    <div class="col-md-3">
                        <label class="form-label">Rol</label>
                        <select class="form-select" name="rol">
                            <option value="">Todos los roles</option>
                            <option value="admin" {{ request('rol') == 'admin' ? 'selected' : '' }}>Administrador</option>
                            <option value="propietario" {{ request('rol') == 'propietario' ? 'selected' : '' }}>Propietario</option>
                            <option value="usuario" {{ request('rol') == 'usuario' ? 'selected' : '' }}>Usuario</option>
                        </select>
                    </div>
                    
                    <div class="col-md-3">
                        <label class="form-label">Estado</label>
                        <select class="form-select" name="estado">
                            <option value="">Todos los estados</option>
                            <option value="activo" {{ request('estado') == 'activo' ? 'selected' : '' }}>Activo</option>
                            <option value="inactivo" {{ request('estado') == 'inactivo' ? 'selected' : '' }}>Inactivo</option>
                            <option value="suspendido" {{ request('estado') == 'suspendido' ? 'selected' : '' }}>Suspendido</option>
                        </select>
                    </div>
                    
                    <div class="col-md-3 d-flex align-items-end">
                        <button type="submit" class="btn btn-primary w-100">
                            <i class="fas fa-filter me-2"></i>Filtrar
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h6 class="mb-0">Lista de Usuarios</h6>
                <div>
                    <a href="{{ route('admin.usuarios.exportar') }}" class="btn btn-sm btn-outline-primary me-2">
                        <i class="fas fa-download me-1"></i>Exportar CSV
                    </a>
                    <a href="{{ route('admin.usuarios.create') }}" class="btn btn-sm btn-primary">
                        <i class="fas fa-plus me-1"></i>Nuevo Usuario
                    </a>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover" id="tablaUsuarios">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Usuario</th>
                                <th>Email</th>
                                <th>Teléfono</th>
                                <th>Rol</th>
                                <th>Estado</th>
                                <th>Registro</th>
                                <th>Acciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($usuarios as $usuario)
                                <tr>
                                    <td>{{ $usuario->id }}</td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="avatar-sm me-2">
                                                @if($usuario->avatar)
                                                    <img src="{{ asset('storage/' . $usuario->avatar) }}" alt="{{ $usuario->name }}" class="rounded-circle" style="width: 40px; height: 40px; object-fit: cover;">
                                                @else
                                                    <div class="avatar-circle bg-primary text-white d-flex align-items-center justify-content-center" style="width: 40px; height: 40px; border-radius: 50%;">
                                                        {{ strtoupper(substr($usuario->name, 0, 1)) }}
                                                    </div>
                                                @endif
                                            </div>
                                            <div>
                                                <h6 class="mb-0">{{ $usuario->name }}</h6>
                                                <small class="text-muted">{{ $usuario->email }}</small>
                                            </div>
                                        </div>
                                    </td>
                                    <td>{{ $usuario->email }}</td>
                                    <td>{{ $usuario->telefono ?? 'N/A' }}</td>
                                    <td>
                                        @if($usuario->rol == 'admin')
                                            <span class="badge bg-danger">Administrador</span>
                                        @elseif($usuario->rol == 'propietario')
                                            <span class="badge bg-warning">Propietario</span>
                                        @else
                                            <span class="badge bg-info">Usuario</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($usuario->estado == 'activo')
                                            <span class="badge bg-success">Activo</span>
                                        @elseif($usuario->estado == 'inactivo')
                                            <span class="badge bg-secondary">Inactivo</span>
                                        @else
                                            <span class="badge bg-warning">Suspendido</span>
                                        @endif
                                    </td>
                                    <td>{{ $usuario->created_at->format('d/m/Y') }}</td>
                                    <td>
                                        <div class="d-flex gap-1">
                                            <!-- Ver Detalles -->
                                            <a href="{{ route('admin.usuarios.show', $usuario->id) }}" 
                                               class="btn btn-sm btn-outline-info" 
                                               title="Ver Detalles">
                                                <i class="bx bx-show"></i>
                                            </a>
                                            
                                            <!-- Editar -->
                                            <a href="{{ route('admin.usuarios.edit', $usuario->id) }}" 
                                               class="btn btn-sm btn-outline-primary" 
                                               title="Editar">
                                                <i class="bx bx-edit"></i>
                                            </a>
                                            
                                            <!-- Cambiar Estado -->
                            @if($usuario->estado == 'activo')
                                <form action="{{ route('admin.usuarios.cambiarEstado', $usuario->id) }}" method="POST" class="d-inline">
                                    @csrf
                                    <input type="hidden" name="estado" value="inactivo">
                                    <button type="submit" 
                                            class="btn btn-sm btn-outline-warning" 
                                            title="Desactivar"
                                            onclick="return confirm('¿Desactivar este usuario?')">
                                        <i class="bx bx-user-x"></i>
                                    </button>
                                </form>
                            @else
                                <form action="{{ route('admin.usuarios.cambiarEstado', $usuario->id) }}" method="POST" class="d-inline">
                                    @csrf
                                    <input type="hidden" name="estado" value="activo">
                                    <button type="submit" 
                                            class="btn btn-sm btn-outline-success" 
                                            title="Activar"
                                            onclick="return confirm('¿Activar este usuario?')">
                                        <i class="bx bx-user-check"></i>
                                    </button>
                                </form>
                            @endif
                                            
                                            <!-- Eliminar -->
                                            <form action="{{ route('admin.usuarios.destroy', $usuario->id) }}" method="POST" class="d-inline delete-form">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" 
                                                        class="btn btn-sm btn-outline-danger" 
                                                        title="Eliminar"
                                                        onclick="return confirm('¿Está seguro de eliminar este usuario? Esta acción no se puede deshacer.')">
                                                    <i class="bx bx-trash"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="8" class="text-center py-4">
                                        <i class="fas fa-users text-muted mb-2" style="font-size: 2.5rem;"></i>
                                        <p class="mb-0 text-muted">No se encontraron usuarios</p>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                
                <div class="d-flex justify-content-end mt-3">
                    {{ $usuarios->links('pagination.custom') }}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Estadísticas rápidas -->
<div class="row">
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-left-primary h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                            Total Usuarios</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $estadisticas['total'] }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-users fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-left-success h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                            Usuarios Activos</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $estadisticas['activos'] }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-user-check fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-left-info h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                            Nuevos (Este Mes)</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $estadisticas['nuevos_mes'] }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-user-plus fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-left-warning h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                            Usuarios Suspendidos</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $estadisticas['suspendidos'] }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-user-clock fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
.avatar-sm {
    width: 40px;
    height: 40px;
    overflow: hidden;
}

.avatar-sm img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
}

.border-left-primary {
    border-left: 4px solid #4e73df;
}

.border-left-success {
    border-left: 4px solid #1cc88a;
}

.border-left-info {
    border-left: 4px solid #36b9cc;
}

.border-left-warning {
    border-left: 4px solid #f6c23e;
}

.avatar-sm {
    width: 40px;
    height: 40px;
}

.avatar-sm img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
    text-transform: uppercase;
}
</style>
@endpush

@push('scripts')
<script>
$(document).ready(function() {
    // Inicializar DataTable
    $('#tablaUsuarios').DataTable({
        "paging": false,
        "info": false,
        "searching": false,
        "language": {
            "emptyTable": "No hay datos disponibles",
            "zeroRecords": "No se encontraron coincidencias"
        }
    });
    
    // Confirmación de eliminación
    $('.delete-form').on('submit', function(e) {
        e.preventDefault();
        
        const form = this;
        
        Swal.fire({
            title: '¿Estás seguro?',
            text: "Esta acción no se puede revertir",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Sí, eliminar',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                form.submit();
            }
        });
    });
});
</script>
@endpush