@extends('layouts.app')

@section('title', 'Users Management')

@section('content')
<div class="users-container">
    <div class="page-header">
        <h1 class="page-title">Users Management</h1>
        @can('manage users')
        <a href="{{ route('users.create') }}" class="btn btn-primary">
            <i class="fas fa-plus"></i> Add New User
        </a>
        @endcan
    </div>

    @if(session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger">
            {{ session('error') }}
        </div>
    @endif

    <!-- Filtros para usuarios -->
    <div class="filters-section">
        <div class="filters-grid">
            <div class="filter-group">
                <label for="roleFilter" class="filter-label">Role</label>
                <select id="roleFilter" class="filter-select" onchange="filterUsers()">
                    <option value="">All Roles</option>
                    @foreach($roles as $role)
                    	<option value="{{ $role->name }}">{{ ucfirst($role->name) }}</option>
                    @endforeach
                </select>
            </div>
            <div class="filter-group">
                <label for="searchFilter" class="filter-label">Search</label>
                <input type="text" id="searchFilter" class="filter-input" placeholder="Search users..." onkeyup="filterUsers()">
            </div>
        </div>
    </div>

    <!-- Vista de tabla para desktop -->
    <div class="users-table-container desktop-view">
        <table class="users-table">
            <thead>
                <tr>
                    <th>User</th>
                    <th>Company</th>
                    <th>Role</th>
                    <th>Status</th>
                    <th>Created</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($users as $user)
                <tr data-role="{{ $user->getRoleNames()->first() }}" data-search="{{ strtolower($user->name . ' ' . $user->email . ' ' . ($user->company ? $user->company->name : '')) }}">
                    <td>
                        <div class="user-info">
                            <div class="user-avatar-table">
                                {{ strtoupper(substr($user->name, 0, 1)) }}
                            </div>
                            <div class="user-details">
                                <div class="user-name">{{ $user->name }}</div>
                                <div class="user-email">{{ $user->email }}</div>
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="company-info">
                            @if($user->company)
                            <span class="company-name">{{ $user->company->name }}</span>
                            @else
                            <span class="text-muted">No Company</span>
                            @endif
                        </div>
                    </td>
                    <td>
                        <span class="role-badge {{ $user->getRoleNames()->first() }}">
                            {{ $user->getRoleNames()->first() }}
                        </span>
                    </td>
                    <td>
                        <span class="status-badge active">
                            Active
                        </span>
                    </td>
                    <td>
                        <span class="created-date">
                            {{ $user->created_at->format('M d, Y') }}
                        </span>
                    </td>
                    <td>
                        <div class="action-buttons">
                            <a href="{{ route('users.show', $user) }}" class="btn btn-sm btn-outline" title="View">
                                <i class="fas fa-eye"></i>
                            </a>
                            @can('manage users')
                            <a href="{{ route('users.edit', $user) }}" class="btn btn-sm btn-primary" title="Edit">
                                <i class="fas fa-edit"></i>
                            </a>
                            <form action="{{ route('users.destroy', $user) }}" method="POST" class="d-inline">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-sm btn-danger"
                                        onclick="return confirm('Are you sure you want to delete this user?')"
                                        title="Delete"
                                        {{ $user->id === Auth::id() ? 'disabled' : '' }}>
                                    <i class="fas fa-trash"></i>
                                </button>
                            </form>
                            @endcan
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <!-- Vista de cards para mobile -->
    <div class="users-grid mobile-view">
        @foreach($users as $user)
        <div class="user-card" data-role="{{ $user->getRoleNames()->first() }}" data-search="{{ strtolower($user->name . ' ' . $user->email . ' ' . ($user->company ? $user->company->name : '')) }}">
            <div class="user-card-header">
                <div class="user-main-info">
                    <div class="user-avatar-large">
                        {{ strtoupper(substr($user->name, 0, 1)) }}
                    </div>
                    <div class="user-basic-info">
                        <h3 class="user-name-large">{{ $user->name }}</h3>
                        <div class="user-email-large">{{ $user->email }}</div>
                    </div>
                </div>
                <div class="user-status-section">
                    <span class="status-badge-large active">Active</span>
                    <span class="role-badge-large {{ $user->getRoleNames()->first() }}">
                        {{ $user->getRoleNames()->first() }}
                    </span>
                </div>
            </div>

            <div class="user-card-details">
                <div class="detail-section">
                    <div class="detail-item-large">
                        <div class="detail-icon">
                            <i class="fas fa-building"></i>
                        </div>
                        <div class="detail-content">
                            <div class="detail-label">Company</div>
                            <div class="detail-value">
                                @if($user->company)
                                <span class="company-name-large">{{ $user->company->name }}</span>
                                @else
                                <span class="text-muted-large">No Company</span>
                                @endif
                            </div>
                        </div>
                    </div>

                    <div class="detail-item-large">
                        <div class="detail-icon">
                            <i class="fas fa-calendar"></i>
                        </div>
                        <div class="detail-content">
                            <div class="detail-label">Member Since</div>
                            <div class="detail-value">
                                <span class="created-date-large">
                                    {{ $user->created_at->format('M d, Y') }}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="user-card-actions">
                <a href="{{ route('users.show', $user) }}" class="btn btn-action btn-outline" title="View">
                    <i class="fas fa-eye"></i>
                    <span>View Details</span>
                </a>
                @can('manage users')
                <a href="{{ route('users.edit', $user) }}" class="btn btn-action btn-primary" title="Edit">
                    <i class="fas fa-edit"></i>
                    <span>Edit User</span>
                </a>
                <form action="{{ route('users.destroy', $user) }}" method="POST" class="action-form">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-action btn-danger"
                            onclick="return confirm('Are you sure you want to delete this user?')"
                            title="Delete"
                            {{ $user->id === Auth::id() ? 'disabled' : '' }}>
                        <i class="fas fa-trash"></i>
                        <span>Delete User</span>
                    </button>
                </form>
                @endcan
            </div>
        </div>
        <br>
        @endforeach
    </div>

    @if($users->isEmpty())
    <div class="empty-state">
        <i class="fas fa-users empty-icon"></i>
        <h3>No Users Found</h3>
        <p>Get started by creating your first user.</p>
        @can('manage users')
        <a href="{{ route('users.create') }}" class="btn btn-primary">
            <i class="fas fa-plus"></i> Create User
        </a>
        @endcan
    </div>
    @endif
</div>

<script>
function filterUsers() {
    const roleFilter = document.getElementById('roleFilter').value;
    const searchFilter = document.getElementById('searchFilter').value.toLowerCase();

    // Filtrar tabla desktop
    const tableRows = document.querySelectorAll('.users-table tbody tr');
    tableRows.forEach(row => {
        const role = row.getAttribute('data-role');
        const searchText = row.getAttribute('data-search');

        const roleMatch = !roleFilter || role === roleFilter;
        const searchMatch = !searchFilter || searchText.includes(searchFilter);

        if (roleMatch && searchMatch) {
            row.style.display = '';
        } else {
            row.style.display = 'none';
        }
    });

    // Filtrar cards mobile
    const userCards = document.querySelectorAll('.user-card');
    userCards.forEach(card => {
        const role = card.getAttribute('data-role');
        const searchText = card.getAttribute('data-search');

        const roleMatch = !roleFilter || role === roleFilter;
        const searchMatch = !searchFilter || searchText.includes(searchFilter);

        if (roleMatch && searchMatch) {
            card.style.display = 'block';
        } else {
            card.style.display = 'none';
        }
    });
}

// Detectar cambio de tamaño de pantalla y mostrar la vista correspondiente
function handleViewSwitch() {
    const desktopView = document.querySelector('.desktop-view');
    const mobileView = document.querySelector('.mobile-view');

    if (window.innerWidth <= 768) {
        desktopView.style.display = 'none';
        mobileView.style.display = 'block';
    } else {
        desktopView.style.display = 'block';
        mobileView.style.display = 'none';
    }
}

// Ejecutar al cargar y al redimensionar
document.addEventListener('DOMContentLoaded', function() {
    handleViewSwitch();
    window.addEventListener('resize', handleViewSwitch);
});
</script>

<style>
.users-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    width: 100%;
    box-sizing: border-box;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    width: 100%;
}

.page-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-light);
}

/* Filtros */
.filters-section {
    background: var(--bg-light);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    width: 100%;
    box-sizing: border-box;
}

.filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    width: 100%;
}

.filter-group {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.filter-label {
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--text-light);
    font-size: 0.9rem;
}

.filter-select, .filter-input {
    padding: 10px 12px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--bg-light);
    color: var(--text-light);
    font-size: 0.9rem;
    width: 100%;
    box-sizing: border-box;
}

.filter-select:focus, .filter-input:focus {
    outline: none;
    border-color: var(--accent-teal);
    box-shadow: 0 0 0 3px rgba(46, 204, 204, 0.1);
}

/* Vista de tabla (Desktop) */
.users-table-container {
    background: var(--bg-light);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    width: 100%;
    overflow-x: auto;
}

.users-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 800px;
}

.users-table th {
    background: #f8f9fa;
    padding: 15px 20px;
    text-align: left;
    font-weight: 600;
    color: var(--text-light);
    border-bottom: 1px solid var(--border-light);
}

.users-table td {
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-light);
}

.users-table tr:last-child td {
    border-bottom: none;
}

.users-table tr:hover {
    background: rgba(46, 204, 204, 0.02);
}

/* Vista de cards (Mobile) - CORREGIDO SCROLL */
.users-grid {
    display: none;
    width: 100%;
    gap: 16px;
    margin-bottom: 30px;
}

.user-card {
    background: var(--bg-light);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    width: 100%;
    box-sizing: border-box;
    max-width: 100%;
}

.user-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.user-card-header {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--border-light);
    width: 100%;
}

.user-main-info {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.user-avatar-large {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-teal-dark) 0%, var(--accent-teal) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 20px;
    flex-shrink: 0;
}

.user-basic-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.user-name-large {
    font-weight: 700;
    color: var(--text-light);
    font-size: 1.3rem;
    margin: 0;
    line-height: 1.2;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.user-email-large {
    font-size: 1rem;
    color: var(--text-light);
    opacity: 0.8;
    font-weight: 500;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.user-status-section {
    display: flex;
    gap: 8px;
    width: 100%;
    flex-wrap: wrap;
}

.status-badge-large {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: capitalize;
    white-space: nowrap;
}

.status-badge-large.active {
    background: #d4edda;
    color: #155724;
}

.role-badge-large {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: capitalize;
    white-space: nowrap;
}

.role-badge-large.super-admin {
    background: #ffebee;
    color: #c62828;
}

.role-badge-large.company-admin {
    background: #e3f2fd;
    color: #1565c0;
}

.role-badge-large.salesperson {
    background: #e8f5e8;
    color: #2e7d32;
}

.user-card-details {
    margin-bottom: 20px;
    width: 100%;
}

.detail-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.detail-item-large {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    width: 100%;
}

.detail-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-teal);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.detail-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.detail-label {
    font-size: 0.9rem;
    color: var(--text-light);
    opacity: 0.7;
    font-weight: 500;
}

.detail-value {
    font-size: 1rem;
    color: var(--text-light);
    font-weight: 600;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.company-name-large {
    font-weight: 600;
    color: var(--text-light);
}

.text-muted-large {
    color: var(--text-light);
    opacity: 0.5;
    font-style: italic;
}

.created-date-large {
    color: var(--text-light);
    font-weight: 600;
}

.user-card-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.btn-action {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    justify-content: flex-start;
    box-sizing: border-box;
    text-align: left;
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent-teal-dark) 0%, var(--accent-teal) 100%);
    color: white;
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--border-light);
    color: var(--text-light);
}

.btn-danger {
    background: #dc3545;
    color: white;
}

.action-form {
    display: flex;
    flex: 1;
    min-width: 0;
}

/* Estilos comunes para tabla desktop */
.user-avatar-table {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-teal-dark) 0%, var(--accent-teal) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 14px;
}

.user-details {
    display: flex;
    flex-direction: column;
}

.company-name {
    font-weight: 500;
    color: var(--text-light);
}

.text-muted {
    color: var(--text-light);
    opacity: 0.5;
}

.role-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: capitalize;
}

.role-badge.super-admin {
    background: #ffebee;
    color: #c62828;
}

.role-badge.company-admin {
    background: #e3f2fd;
    color: #1565c0;
}

.role-badge.salesperson {
    background: #e8f5e8;
    color: #2e7d32;
}

.status-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.status-badge.active {
    background: #d4edda;
    color: #155724;
}

.created-date {
    color: var(--text-light);
    opacity: 0.8;
}

.action-buttons {
    display: flex;
    gap: 8px;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-sm {
    padding: 6px 10px;
    font-size: 0.8rem;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.alert {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    width: 100%;
    box-sizing: border-box;
}

.alert-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert-danger {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    width: 100%;
}

.empty-icon {
    font-size: 4rem;
    color: var(--border-light);
    margin-bottom: 20px;
}

.d-inline {
    display: inline;
}

/* Dark theme adjustments */
[data-theme="dark"] .users-table-container,
[data-theme="dark"] .user-card,
[data-theme="dark"] .filters-section {
    background: var(--bg-dark);
    border-color: var(--border-dark);
}

[data-theme="dark"] .users-table th {
    background: #2d3038;
    border-color: var(--border-dark);
}

[data-theme="dark"] .users-table td {
    border-color: var(--border-dark);
}

[data-theme="dark"] .users-table tr:hover {
    background: rgba(46, 204, 204, 0.05);
}

[data-theme="dark"] .filter-select,
[data-theme="dark"] .filter-input {
    background: var(--bg-dark);
    border-color: var(--border-dark);
    color: var(--text-dark);
}

[data-theme="dark"] .btn-outline {
    border-color: var(--border-dark);
    color: var(--text-dark);
}

[data-theme="dark"] .detail-icon {
    background: #2d3038;
    color: var(--accent-teal);
}

/* Responsive - CORREGIDO SCROLL */
@media (max-width: 768px) {
    .users-container {
        padding: 0 12px;
        width: 100%;
        overflow-x: hidden;
    }

    .page-header {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
        width: 100%;
    }

    .filters-grid {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .users-table {
        display: block;
        overflow-x: auto;
        min-width: 800px;
    }

    .action-buttons {
        flex-direction: column;
    }

    .action-buttons .btn {
        width: 100%;
        justify-content: center;
    }

    .user-card-header {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }

    .user-status-section {
        flex-direction: row;
        align-items: center;
        width: 100%;
        justify-content: flex-start;
        gap: 8px;
    }

    .user-card-actions {
        flex-direction: column;
        gap: 10px;
    }

    .users-grid {
        gap: 16px;
        display: block;
    }

    .user-card {
        padding: 16px;
        margin-bottom: 0;
    }

    .btn-action {
        width: 100%;
        padding: 14px 16px;
        font-size: 1rem;
        justify-content: flex-start;
    }

    .user-name-large {
        font-size: 1.2rem;
    }

    .user-email-large {
        font-size: 0.95rem;
    }

    /* Asegurar que nada se salga de la pantalla */
    * {
        max-width: 100%;
    }

    body {
        overflow-x: hidden;
    }
}

@media (min-width: 769px) {
    .mobile-view {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .desktop-view {
        display: none !important;
    }

    .mobile-view {
        display: block !important;
        width: 100%;
        overflow-x: hidden;
    }
}

/* Prevenir scroll horizontal global */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}
</style>
@endsection