@extends('layouts.app')

@section('title', 'Usuarios Externos')
@section('page-title', 'Usuarios Externos')

@section('breadcrumb')
<li class="breadcrumb-item active">Usuarios Externos</li>
@endsection

@push('styles')
<link href="{{ asset('assets/css/mantenimientos.css') }}" rel="stylesheet">
<style>
    .stats-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .stat-card {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 1.25rem;
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .stat-icon {
        width: 48px;
        height: 48px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
    }

    .stat-icon.total { background: rgba(37, 99, 235, 0.1); color: #2563eb; }
    .stat-icon.activos { background: rgba(16, 185, 129, 0.1); color: #059669; }
    .stat-icon.inactivos { background: rgba(239, 68, 68, 0.1); color: #dc2626; }

    .stat-info h4 { margin: 0; font-size: 1.5rem; font-weight: 700; color: #1a3a5c; }
    .stat-info p { margin: 0; font-size: 0.8rem; color: #64748b; }

    .user-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }

    .user-table th {
        background: #f8fafc;
        padding: 0.875rem 1rem;
        text-align: left;
        font-size: 0.75rem;
        font-weight: 600;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 1px solid #e2e8f0;
    }

    .user-table td {
        padding: 1rem;
        border-bottom: 1px solid #f1f5f9;
        vertical-align: middle;
    }

    .user-table tbody tr:hover {
        background: #f8fafc;
    }

    .user-info { display: flex; align-items: center; gap: 0.75rem; }

    .user-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #1a3a5c;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 0.9rem;
    }

    .user-name { font-weight: 600; color: #1a3a5c; }
    .user-cedula { font-size: 0.8rem; color: #64748b; }

    .badge-externo {
        background: rgba(139, 92, 246, 0.1);
        color: #7c3aed;
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
        font-size: 0.7rem;
        font-weight: 600;
    }

    @media (max-width: 768px) {
        .stats-row { grid-template-columns: 1fr; }
    }
</style>
@endpush

@section('content')
{{-- Estadísticas --}}
<div class="stats-row">
    <div class="stat-card">
        <div class="stat-icon total">
            <i class="fas fa-users"></i>
        </div>
        <div class="stat-info">
            <h4>{{ $estadisticas['total'] }}</h4>
            <p>Total Usuarios</p>
        </div>
    </div>
    <div class="stat-card">
        <div class="stat-icon activos">
            <i class="fas fa-user-check"></i>
        </div>
        <div class="stat-info">
            <h4>{{ $estadisticas['activos'] }}</h4>
            <p>Activos</p>
        </div>
    </div>
    <div class="stat-card">
        <div class="stat-icon inactivos">
            <i class="fas fa-user-times"></i>
        </div>
        <div class="stat-info">
            <h4>{{ $estadisticas['inactivos'] }}</h4>
            <p>Inactivos</p>
        </div>
    </div>
</div>

{{-- Barra de acciones --}}
<div class="card mb-4">
    <div class="card-body">
        <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
            <form method="GET" action="{{ route('web.usuarios-externos.index') }}" class="d-flex gap-2 flex-grow-1">
                <input type="text" name="buscar" class="form-control" placeholder="Buscar por nombre, cédula, email o empresa..."
                       value="{{ request('buscar') }}" style="max-width: 350px;">
                <select name="estado" class="form-select" style="max-width: 150px;">
                    <option value="">Todos</option>
                    <option value="1" {{ request('estado') === '1' ? 'selected' : '' }}>Activos</option>
                    <option value="0" {{ request('estado') === '0' ? 'selected' : '' }}>Inactivos</option>
                </select>
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-search"></i>
                </button>
            </form>
            <a href="{{ route('web.usuarios-externos.create') }}" class="btn btn-success">
                <i class="fas fa-plus me-1"></i> Nuevo Usuario Externo
            </a>
        </div>
    </div>
</div>

{{-- Tabla de usuarios --}}
<div class="card">
    <div class="card-body p-0">
        @if($usuarios->count() > 0)
        <table class="user-table">
            <thead>
                <tr>
                    <th>Usuario</th>
                    <th>Email</th>
                    <th>Empresa</th>
                    <th>Cargo</th>
                    <th>Perfil</th>
                    <th>Estado</th>
                    <th>Acciones</th>
                </tr>
            </thead>
            <tbody>
                @foreach($usuarios as $usuario)
                <tr>
                    <td>
                        <div class="user-info">
                            <div class="user-avatar">
                                {{ strtoupper(substr($usuario->name, 0, 2)) }}
                            </div>
                            <div>
                                <div class="user-name">{{ $usuario->name }}</div>
                                <div class="user-cedula">{{ $usuario->cedula }}</div>
                            </div>
                        </div>
                    </td>
                    <td>{{ $usuario->email }}</td>
                    <td>
                        <strong>{{ $usuario->empresa_externa }}</strong>
                        <span class="badge-externo ms-1">Externo</span>
                    </td>
                    <td>{{ $usuario->cargo ?? '-' }}</td>
                    <td>{{ $usuario->perfil->per_nombre ?? 'Sin perfil' }}</td>
                    <td>
                        @if($usuario->estado)
                        <span class="badge bg-success">Activo</span>
                        @else
                        <span class="badge bg-danger">Inactivo</span>
                        @endif
                    </td>
                    <td>
                        <div class="btn-group btn-group-sm">
                            <a href="{{ route('web.usuarios-externos.edit', $usuario->id) }}" class="btn btn-outline-primary" title="Editar">
                                <i class="fas fa-edit"></i>
                            </a>
                            <form action="{{ route('web.usuarios-externos.toggle-estado', $usuario->id) }}" method="POST" class="d-inline">
                                @csrf
                                <button type="submit" class="btn btn-outline-{{ $usuario->estado ? 'warning' : 'success' }}" title="{{ $usuario->estado ? 'Desactivar' : 'Activar' }}">
                                    <i class="fas fa-{{ $usuario->estado ? 'ban' : 'check' }}"></i>
                                </button>
                            </form>
                            <form action="{{ route('web.usuarios-externos.reset-password', $usuario->id) }}" method="POST" class="d-inline" onsubmit="return confirm('¿Restablecer contraseña a 0000?')">
                                @csrf
                                <button type="submit" class="btn btn-outline-secondary" title="Resetear contraseña">
                                    <i class="fas fa-key"></i>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>

        <div class="p-3">
            {{ $usuarios->links() }}
        </div>
        @else
        <div class="empty-state p-5 text-center">
            <i class="fas fa-users d-block mb-3" style="font-size: 3rem; color: #cbd5e1;"></i>
            <h5 class="text-muted">No hay usuarios externos</h5>
            <p class="text-muted small">Crea el primer usuario externo (Jefe Operativo o Cliente).</p>
            <a href="{{ route('web.usuarios-externos.create') }}" class="btn btn-primary mt-2">
                <i class="fas fa-plus me-1"></i> Crear Usuario
            </a>
        </div>
        @endif
    </div>
</div>
@endsection