@extends('layouts.app')

@section('content')
<style>
/* Colores personalizados basados en Blulinc */
:root {
    --blulinc-black: #000000;
    --blulinc-blue: #015cff;
    --blulinc-gray: #c1c1c1;
    --blulinc-light-gray: #f8f9fa;
    --blulinc-light-blue: #e6f2ff;
    --blulinc-bg-blue: #f0f7ff;
}

body {
    background-color: var(--blulinc-bg-blue) !important;
}

.blulinc-table-container {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(1, 92, 255, 0.1);
    overflow: hidden;
    border: 1px solid #e1ecf7;
    width: 100%;
}

.blulinc-table {
    margin-bottom: 0;
    border: none;
    width: 100%;
    table-layout: fixed;
}

    .blulinc-table thead th {
        background-color: var(--blulinc-light-gray);
        color: var(--blulinc-black);
        font-weight: 600;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        border: none;
        padding: 18px 12px;
        border-bottom: 2px solid #e9ecef;
        text-align: center;
        vertical-align: middle;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 0;
    }

.blulinc-table tbody tr {
    border-bottom: 1px solid #f1f5f9;
    transition: all 0.2s ease;
}

.blulinc-table tbody tr:hover {
    background-color: #fafbfd;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(1, 92, 255, 0.08);
}

.blulinc-table tbody tr:last-child {
    border-bottom: none;
}

    .blulinc-table tbody td {
        padding: 16px 12px;
        color: var(--blulinc-black);
        font-size: 14px;
        border: none;
        vertical-align: middle;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 0;
    }

.blulinc-header {
    margin-bottom: 24px; /* Reducido de 32px */
    padding: 20px 32px; /* Aumentado padding horizontal para mejor proporción */
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(1, 92, 255, 0.08);
    border: 1px solid #e1ecf7;
}

.blulinc-header h1 {
    color: var(--blulinc-black);
    font-weight: 700;
    font-size: 28px; /* Reducido de 32px */
    margin: 0;
}

.blulinc-btn-primary {
    background: linear-gradient(135deg, var(--blulinc-blue) 0%, #0147d9 100%);
    border: none;
    color: white;
    border-radius: 10px;
    font-weight: 600;
    padding: 12px 24px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(1, 92, 255, 0.25);
}

.blulinc-btn-primary:hover {
    background: linear-gradient(135deg, #0147d9 0%, #0133b8 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(1, 92, 255, 0.35);
    color: white;
}

.blulinc-btn-secondary {
    background-color: white;
    border: 2px solid var(--blulinc-gray);
    color: var(--blulinc-black);
    border-radius: 8px;
    font-weight: 600;
    padding: 8px 16px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    font-size: 14px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}

.blulinc-btn-secondary:hover {
    background-color: var(--blulinc-light-blue);
    border-color: var(--blulinc-blue);
    color: var(--blulinc-blue);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(1, 92, 255, 0.15);
}

.view-details-btn {
    background: linear-gradient(135deg, #015cff 0%, #0146cc 100%);
    border: none;
    color: white;
    border-radius: 6px;
    font-weight: 600;
    padding: 8px 14px;
    font-size: 12px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(1, 92, 255, 0.3);
    cursor: pointer;
    display: inline-block;
    white-space: nowrap;
    position: relative;
    z-index: 1;
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    text-align: center;
    box-sizing: border-box;
    font-family: inherit;
    line-height: 1.2;
}

.view-details-btn:hover {
    background: linear-gradient(135deg, #0146cc 0%, #013299 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(1, 92, 255, 0.4);
    color: white;
}

.view-details-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(1, 92, 255, 0.3);
}

/* Reset completo para evitar herencia de estilos */
.view-details-btn {
    margin: 0;
    padding: 6px 8px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: none;
    border-radius: 6px;
    background: linear-gradient(135deg, #015cff 0%, #0146cc 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(1, 92, 255, 0.3);
    transition: all 0.2s ease;
    display: inline-block;
    white-space: normal;
    position: relative;
    z-index: 1;
    width: 70px;
    min-width: 70px;
    max-width: 70px;
    height: 50px;
    min-height: 50px;
    max-height: 50px;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Estilos para texto cuando no hay detalles */
.text-muted {
    font-size: 12px; /* Aumentado de 11px */
    color: #495057 !important; /* Color más oscuro para mejor contraste */
    font-style: italic;
    font-weight: 500;
}

.blulinc-pagination {
    margin-top: 24px;
    padding: 20px;
    background: white;
    border-radius: 0 0 12px 12px;
    border-top: 1px solid #f1f5f9;
}

.blulinc-id-column {
    color: var(--blulinc-blue);
    font-weight: 700;
    font-size: 15px; /* Aumentado */
    background-color: rgba(1, 92, 255, 0.05); /* Fondo sutil azul */
    border-radius: 6px;
    margin: 2px;
    padding: 4px 8px !important;
}

.blulinc-container {
    max-width: 1900px; /* Reducido dos niveles más para mayor compacidad */
    margin: 0 auto;
    padding: 24px 18px; /* Reducido padding lateral */
    min-height: 100vh;
    width: 95%; /* Ancho responsivo base */
}

/* Responsividad del container principal */
@media (min-width: 1920px) {
    .blulinc-container {
        max-width: 2100px;
        padding: 24px 20px;
    }
}

@media (max-width: 1199px) and (min-width: 992px) {
    .blulinc-container {
        padding: 20px 10px;
    }
}

@media (max-width: 991px) and (min-width: 768px) {
    .blulinc-container {
        padding: 15px 8px;
        width: 98%;
    }
}

@media (max-width: 767px) and (min-width: 576px) {
    .blulinc-container {
        padding: 10px 5px;
        width: 99%;
    }
}

@media (max-width: 575px) {
    .blulinc-container {
        padding: 8px 2px;
        width: 100%;
    }
}

.blulinc-main-content {
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(1, 92, 255, 0.1);
    overflow: hidden;
    border: 1px solid #e1ecf7;
}

.button-group {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Mejoras en la paginación */
.page-link {
    color: var(--blulinc-blue);
    border: 1px solid #e1ecf7;
    border-radius: 6px;
    margin: 0 2px;
    transition: all 0.2s ease;
}

.page-link:hover {
    color: white;
    background-color: var(--blulinc-blue);
    border-color: var(--blulinc-blue);
}

.page-item.active .page-link {
    background-color: var(--blulinc-blue);
    border-color: var(--blulinc-blue);
}

/* Ajustes específicos para columnas */
.col-id { width: 80px; }
.col-name { width: 200px; }
.col-groups { width: 180px; }
.col-partner { width: 180px; }
.col-amount { width: 120px; }
.col-personal { width: 130px; }
.col-semipublic { width: 130px; }
.col-public { width: 150px; }
.col-introaming { width: 130px; }
.col-total-energy { width: 130px; }
.col-actions { width: 120px; }

    /* Estilos de tabla más compactos y centrados */
    .blulinc-main-content {
        max-width: 1900px; /* Reducido dos niveles más para mayor compacidad */
        margin: 0 auto; /* Centrar contenido */
        background: white;
        border-radius: 16px;
        box-shadow: 0 8px 32px rgba(1, 92, 255, 0.1);
        overflow: hidden;
        border: 1px solid #e1ecf7;
        width: 95%; /* Ancho responsivo */
    }

    .blulinc-table-container {
        background: white;
        border-radius: 12px;
        overflow: hidden;
        padding: 18px; /* Reducido un poco más */
    }

    .blulinc-table {
        margin-bottom: 0;
        border: none;
        width: 100%;
        table-layout: fixed; /* Tabla de ancho fijo */
        border-collapse: separate; /* Cambiado para permitir bordes redondeados */
        border-spacing: 0 8px; /* Espacio entre filas */
    }

    .blulinc-table thead th {
        background-color: transparent; /* Sin fondo para que no compita con las cajas */
        color: var(--blulinc-black);
        font-weight: 600;
        font-size: 13px; /* Aumentado de 12px */
        text-transform: uppercase;
        letter-spacing: 0.6px;
        border: none;
        padding: 12px 9px; /* Ajustado para acomodar dos líneas */
        border-bottom: 2px solid #e9ecef;
        text-align: center;
        vertical-align: middle;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.2; /* Mejor espaciado entre líneas */
    }

    .blulinc-table tbody tr {
        background-color: #e9ecef; /* Gris más oscuro para mejor visibilidad */
        border-radius: 10px; /* Bordes redondeados */
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); /* Sombra un poco más visible */
        transition: all 0.3s ease;
        margin-bottom: 8px;
    }

    .blulinc-table tbody tr:hover {
        background-color: #dee2e6; /* Un poco más oscuro al hover */
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(1, 92, 255, 0.12); /* Sombra más pronunciada */
    }

    .blulinc-table tbody td {
        padding: 14px 9px; /* Reducido padding horizontal un poco más */
        color: var(--blulinc-black);
        font-size: 14px; /* Aumentado de 13px */
        font-weight: 500; /* Añadido peso */
        border: none;
        vertical-align: middle;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        background: transparent; /* Asegurar que el fondo de la celda no tape la caja */
        max-width: 0; /* Permite que text-overflow funcione correctamente */
    }

    /* Primera y última celda con bordes redondeados */
    .blulinc-table tbody td:first-child {
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }

    .blulinc-table tbody td:last-child {
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
    }

    /* Anchos de columnas más compactos - ajuste adicional */
    .col-id { width: 6%; }
    .col-name { width: 12%; }
    .col-groups { width: 10%; }
    .col-partner { width: 10%; }
    .col-amount { width: 9%; }
    .col-personal { width: 9%; }
    .col-semipublic { width: 9%; }
    .col-public { width: 9%; }
    .col-introaming { width: 9%; }
    .col-total-energy { width: 9%; }
    .col-actions { width: 8%; }

    /* === MEDIA QUERIES PARA RESPONSIVIDAD === */
    
    /* Pantallas muy grandes (1920px+) */
    @media (min-width: 1920px) {
        .blulinc-main-content {
            max-width: 2100px;
        }
        .blulinc-container {
            max-width: 2100px;
        }
        .col-id { width: 7%; }
        .col-name { width: 13%; }
        .col-groups { width: 11%; }
        .col-partner { width: 11%; }
        .col-amount { width: 10%; }
        .col-personal { width: 10%; }
        .col-semipublic { width: 10%; }
        .col-public { width: 10%; }
        .col-introaming { width: 10%; }
        .col-total-energy { width: 10%; }
        .col-actions { width: 8%; }
    }

    /* Pantallas grandes (1400px - 1919px) */
    @media (max-width: 1919px) and (min-width: 1400px) {
        .blulinc-main-content {
            max-width: 1900px;
            width: 95%;
        }
        .blulinc-container {
            max-width: 1900px;
        }
    }

    /* Pantallas medianas-grandes (1200px - 1399px) */
    @media (max-width: 1399px) and (min-width: 1200px) {
        .blulinc-main-content {
            max-width: 1600px;
            width: 95%;
        }
        .blulinc-container {
            max-width: 1600px;
            padding: 20px 15px;
        }
        .col-id { width: 6%; }
        .col-name { width: 12%; }
        .col-groups { width: 10%; }
        .col-partner { width: 10%; }
        .col-amount { width: 9%; }
        .col-personal { width: 9%; }
        .col-semipublic { width: 9%; }
        .col-public { width: 9%; }
        .col-introaming { width: 9%; }
        .col-total-energy { width: 9%; }
        .col-actions { width: 8%; }
    }

    /* Pantallas medianas (992px - 1199px) */
    @media (max-width: 1199px) and (min-width: 992px) {
        .blulinc-main-content {
            max-width: 1400px;
            width: 98%;
        }
        .blulinc-container {
            max-width: 1400px;
            padding: 20px 10px;
        }
        .blulinc-table-container {
            padding: 15px;
        }
        .col-id { width: 6%; }
        .col-name { width: 11%; }
        .col-groups { width: 9%; }
        .col-partner { width: 9%; }
        .col-amount { width: 8%; }
        .col-personal { width: 8%; }
        .col-semipublic { width: 8%; }
        .col-public { width: 8%; }
        .col-introaming { width: 8%; }
        .col-total-energy { width: 8%; }
        .col-actions { width: 7%; }
        
        .blulinc-table thead th {
            font-size: 12px;
            padding: 12px 8px;
        }
        .blulinc-table tbody td {
            font-size: 13px;
            padding: 12px 8px;
        }
    }

    /* Pantallas pequeñas-medianas (768px - 991px) */
    @media (max-width: 991px) and (min-width: 768px) {
        .blulinc-main-content {
            width: 98%;
            margin: 0 auto;
        }
        .blulinc-container {
            padding: 15px 8px;
        }
        .blulinc-table-container {
            padding: 12px;
        }
        .col-id { width: 5%; }
        .col-name { width: 10%; }
        .col-groups { width: 8%; }
        .col-partner { width: 8%; }
        .col-amount { width: 7%; }
        .col-personal { width: 7%; }
        .col-semipublic { width: 7%; }
        .col-public { width: 7%; }
        .col-introaming { width: 7%; }
        .col-total-energy { width: 7%; }
        .col-actions { width: 6%; }
        
        .blulinc-table thead th {
            font-size: 11px;
            padding: 10px 6px;
        }
        .blulinc-table tbody td {
            font-size: 12px;
            padding: 10px 6px;
        }
        
        .view-details-btn {
            padding: 4px 5px;
            font-size: 10px;
            width: 100%;
            height: 40px;
            white-space: normal;
            word-break: break-word;
            line-height: 1.2;
        }
    }

    /* Pantallas pequeñas (576px - 767px) */
    @media (max-width: 767px) and (min-width: 576px) {
        .blulinc-main-content {
            width: 99%;
            margin: 0 auto;
            border-radius: 8px;
        }
        .blulinc-container {
            padding: 10px 5px;
        }
        .blulinc-table-container {
            padding: 8px;
        }
        .col-id { width: 5%; }
        .col-name { width: 9%; }
        .col-groups { width: 8%; }
        .col-partner { width: 8%; }
        .col-amount { width: 7%; }
        .col-personal { width: 7%; }
        .col-semipublic { width: 7%; }
        .col-public { width: 7%; }
        .col-introaming { width: 7%; }
        .col-total-energy { width: 7%; }
        .col-actions { width: 6%; }
        
        .blulinc-table thead th {
            font-size: 10px;
            padding: 8px 4px;
            letter-spacing: 0.3px;
        }
        .blulinc-table tbody td {
            font-size: 11px;
            padding: 8px 4px;
        }
        
        .view-details-btn {
            padding: 3px 4px;
            font-size: 9px;
            width: 100%;
            height: 35px;
            white-space: normal;
            word-break: break-word;
            line-height: 1.2;
        }
    }

    /* Pantallas muy pequeñas (hasta 575px) */
    @media (max-width: 575px) {
        .blulinc-main-content {
            width: 100%;
            margin: 0;
            border-radius: 0;
        }
        .blulinc-container {
            padding: 8px 2px;
        }
        .blulinc-table-container {
            padding: 5px;
        }
        .col-id { width: 4%; }
        .col-name { width: 8%; }
        .col-groups { width: 7%; }
        .col-partner { width: 7%; }
        .col-amount { width: 6%; }
        .col-personal { width: 6%; }
        .col-semipublic { width: 6%; }
        .col-public { width: 6%; }
        .col-introaming { width: 6%; }
        .col-total-energy { width: 6%; }
        .col-actions { width: 5%; }
        
        .blulinc-table thead th {
            font-size: 9px;
            padding: 6px 3px;
            letter-spacing: 0.2px;
        }
        .blulinc-table tbody td {
            font-size: 10px;
            padding: 6px 3px;
        }
        
        .view-details-btn {
            padding: 2px 3px;
            font-size: 8px;
            width: 100%;
            height: 30px;
            word-break: break-word;
            white-space: normal;
            line-height: 1.1;
        }
        
        .blulinc-table tbody tr {
            border-radius: 6px;
        }
    }

    /* Estilos del botón View Details ya definidos arriba */
        box-shadow: 0 4px 15px rgba(1, 92, 255, 0.4); /* Sombra más pronunciada */
    }

    /* Estilos del botón secondary ya definidos arriba */

    .blulinc-btn-outline-primary {
        background: transparent;
        border: 2px solid #015cff;
        color: #015cff;
        padding: 8px 16px; /* Tamaño mediano */
        border-radius: 8px;
        font-weight: 500;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        transition: all 0.3s ease;
        font-size: 14px; /* Tamaño mediano */
        white-space: nowrap;
    }

    .blulinc-btn-outline-primary:hover {
        background: #015cff;
        color: white;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(1, 92, 255, 0.3);
        text-decoration: none;
    }

    .blulinc-btn-primary {
        background: linear-gradient(135deg, #015cff 0%, #0146cc 100%);
        border: none;
        color: white;
        padding: 8px 16px; /* Tamaño mediano */
        border-radius: 8px;
        font-weight: 500;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        transition: all 0.3s ease;
        font-size: 14px; /* Tamaño mediano */
        white-space: nowrap;
    }

    .blulinc-btn-primary:hover {
        background: linear-gradient(135deg, #0146cc 0%, #013299 100%);
        color: white;
        text-decoration: none;
        transform: translateY(-1px);
        box-shadow: 0 4px 15px rgba(1, 92, 255, 0.4);
    }

    /* Contenedor de botones */
    .d-flex.gap-3 {
        gap: 10px !important;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    /* Media queries específicas para botones del header - tamaño mediano */
    @media (max-width: 991px) {
        .blulinc-btn-secondary {
            padding: 7px 14px !important;
            font-size: 13px !important;
        }
    }

    @media (max-width: 767px) {
        .blulinc-btn-secondary {
            padding: 6px 12px !important;
            font-size: 12px !important;
        }
        
        .d-flex.gap-3 {
            gap: 8px !important;
        }
    }

    @media (max-width: 575px) {
        .blulinc-btn-secondary {
            padding: 5px 10px !important;
            font-size: 11px !important;
        }
        
        .d-flex.gap-3 {
            gap: 6px !important;
        }
    }



    /* Estilos para unidades en encabezados */
    .table-unit {
        font-size: 10px;
        font-weight: 400;
        color: #6c757d;
        opacity: 0.8;
        letter-spacing: 0.3px;
    }

    /* Ajustar padding de encabezados para acomodar dos líneas */
    .blulinc-table thead th {
        background-color: transparent; /* Sin fondo para que no compita con las cajas */
        color: var(--blulinc-black);
        font-weight: 600;
        font-size: 13px; /* Aumentado de 12px */
        text-transform: uppercase;
        letter-spacing: 0.6px;
        border: none;
        padding: 12px 9px; /* Ajustado para acomodar dos líneas */
        border-bottom: 2px solid #e9ecef;
        text-align: center;
        vertical-align: middle;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.2; /* Mejor espaciado entre líneas */
    }

    /* Media queries para unidades en encabezados */
    @media (max-width: 1199px) {
        .table-unit {
            font-size: 9px;
        }
    }

    @media (max-width: 991px) {
        .table-unit {
            font-size: 8px;
        }
        
        .blulinc-table thead th {
            padding: 10px 8px;
            line-height: 1.1;
        }
    }

    @media (max-width: 767px) {
        .table-unit {
            font-size: 7px;
            letter-spacing: 0.2px;
        }
        
        .blulinc-table thead th {
            padding: 8px 6px;
            font-size: 11px;
        }
    }

    @media (max-width: 575px) {
        .table-unit {
            font-size: 6px;
            letter-spacing: 0.1px;
        }
        
        .blulinc-table thead th {
            padding: 6px 4px;
            font-size: 9px;
            line-height: 1.0;
        }
        
        /* Permitir que el texto se ajuste en pantallas muy pequeñas */
        .blulinc-table tbody td {
            white-space: normal;
            word-break: break-word;
            line-height: 1.2;
        }
        
        .blulinc-table thead th {
            white-space: normal;
            word-break: break-word;
            line-height: 1.1;
        }
    }
</style>

<div class="blulinc-container">
    <div class="blulinc-header d-flex justify-content-between align-items-center">
        <h1>User List</h1>
        <div class="button-group">
            <a href="{{ route('users.updateData') }}" name="update-data-button" class="blulinc-btn-secondary">
                <i class="bi bi-arrow-clockwise me-2"></i>Update Data
            </a>
            <a href="{{ route('users.export', request()->query()) }}" class="blulinc-btn-primary">
                <i class="bi bi-download me-2"></i>Export to CSV
            </a>
            <button type="button" class="blulinc-btn-primary" data-bs-toggle="modal" data-bs-target="#filtersModal">
                <i class="bi bi-funnel me-2"></i>Filters & View
            </button>
            @if(request()->hasAny(['search', 'group_id', 'start_date', 'end_date', 'partner_name', 'partner_search']))
                <a href="{{ route('users.index') }}" class="blulinc-btn-secondary">
                    <i class="bi bi-x-circle me-2"></i>Clear Filters
                </a>
            @endif
        </div>
    </div>
    
    <div class="blulinc-main-content">
        <div class="blulinc-table-container">
            <table class="table blulinc-table">
                <thead>
                    <tr>
                        <th class="col-id">ID</th>
                        <th class="col-name">NAME</th>
                        <th class="col-groups">GROUPS</th>
                        <th class="col-partner">PARTNER NAME</th>
                        <th class="col-amount">
                            TOTAL AMOUNT
                            <br><span class="table-unit">(€)</span>
                        </th>
                        <th class="col-personal">
                            PERSONAL HOME
                            <br><span class="table-unit">(KWH)</span>
                        </th>
                        <th class="col-semipublic">
                            SEMI-PUBLIC
                            <br><span class="table-unit">(KWH)</span>
                        </th>
                        <th class="col-public">
                            C.PUBLIC ROAMING
                            <br><span class="table-unit">(KWH)</span>
                        </th>
                        <th class="col-introaming">
                            INT ROAMING
                            <br><span class="table-unit">(KWH)</span>
                        </th>
                        <th class="col-total-energy">
                            TOTAL ENERGY
                            <br><span class="table-unit">(KWH)</span>
                        </th>
                        <th class="col-actions">ACTIONS</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($users as $user)
                        <tr>
                            <td class="col-id blulinc-id-column">{{ $user->api_user_id ?? 'N/A' }}</td>
                            <td class="col-name">{{ $user->full_name ?? 'N/A' }}</td>
                            <td class="col-groups">{{ $user->group_names ?? 'N/A' }}</td>
                            <td class="col-partner">{{ $user->partner_name ?? 'N/A' }}</td>
                            <td class="col-amount">{{ number_format($user->total_amount ?? 0, 2, ',', '.') }}</td>
                            <td class="col-personal">{{ number_format(floor(($user->personal_kwh ?? 0) * 100) / 100, 2, ',', '.') }}</td>
                            <td class="col-semipublic">{{ number_format(floor(($user->commercial_private_kwh ?? 0) * 100) / 100, 2, ',', '.') }}</td>
                            <td class="col-public">{{ number_format(floor(($user->public_kwh ?? 0) * 100) / 100, 2, ',', '.') }}</td>
                            <td class="col-introaming">{{ number_format(floor(($user->intRoamingKwh ?? 0) * 100) / 100, 2, ',', '.') }}</td>
                            <td class="col-total-energy">{{ number_format(floor(($user->total_energy_kwh ?? 0) * 100) / 100, 2, ',', '.') }}</td>
                            <td class="col-actions">
                                @if($user->api_user_id)
                                    <button type="button" class="view-details-btn" onclick="window.location.href='{{ route('users.show', ['id' => $user->api_user_id]) }}'">
                                        View<br>Details
                                    </button>
                                @else
                                    <span class="text-muted">No Details</span>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="11" class="text-center py-5" style="color: var(--blulinc-gray); font-style: italic;">No users found.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="blulinc-pagination d-flex justify-content-center">
            {{ $users->links('pagination::bootstrap-5') }}
        </div>
    </div>
</div>

{{-- Modal de Filtros y Visibilidad --}}
<div class="modal fade" id="filtersModal" tabindex="-1" aria-labelledby="filtersModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form action="{{ route('users.index') }}" method="GET">
                <div class="modal-header">
                    <h5 class="modal-title" id="filtersModalLabel">Filters & Column View</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    {{-- FILTROS --}}
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="search_modal" class="form-label">Search User:</label>
                            <input type="text" class="form-control" id="search_modal" name="search" value="{{ $filters['search'] ?? '' }}" placeholder="Name or email" list="user-list">
                            <datalist id="user-list">
                                @foreach($userNamesForDropdown as $userName)
                                    <option value="{{ $userName }}">
                                @endforeach
                            </datalist>
                        </div>
                        @if(auth()->user()->isSuperAdmin())
                        <div class="col-md-6 mb-3">
                            <label for="group_search_modal" class="form-label">Search Group:</label>
                            <input type="text" class="form-control" id="group_search_modal" name="group_search" value="{{ $filters['group_search'] ?? '' }}" placeholder="Group name" list="group-list">
                            <datalist id="group-list">
                                @foreach($groups as $group)
                                    <option value="{{ $group['name'] }}">
                                @endforeach
                            </datalist>
                        </div>
                        @endif
                        @if(auth()->user()->isSuperAdmin() || auth()->user()->isPartnerAdmin())
                        <div class="col-md-6 mb-3">
                            <label for="partner_search_modal" class="form-label">Search Partner:</label>
                            <input type="text" class="form-control" id="partner_search_modal" name="partner_search" value="{{ $filters['partner_search'] ?? '' }}" placeholder="Partner name" list="partner-list">
                            <datalist id="partner-list">
                                @foreach ($partnerNamesForDropdown as $partnerName)
                                    <option value="{{ $partnerName }}">
                                @endforeach
                            </datalist>
                            @if(auth()->user()->isPartnerAdmin())
                            <small class="form-text text-muted">
                                <i class="bi bi-info-circle me-1"></i>Showing only your associated partners
                            </small>
                            @endif
                        </div>
                        @endif
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="start_date_modal" class="form-label">Start Date:</label>
                            <input type="date" class="form-control" id="start_date_modal" name="start_date" value="{{ $filters['start_date'] ?? '' }}">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="end_date_modal" class="form-label">End Date:</label>
                            <input type="date" class="form-control" id="end_date_modal" name="end_date" value="{{ $filters['end_date'] ?? '' }}">
                        </div>
                    </div>

                    <hr>
                    <div class="mb-3">
                        <label class="form-label fw-bold">Column Visibility:</label>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-check">
                                    <input class="form-check-input column-toggle" type="checkbox" id="col_id" data-column="col-id" checked>
                                    <label class="form-check-label" for="col_id">ID</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input column-toggle" type="checkbox" id="col_name" data-column="col-name" checked>
                                    <label class="form-check-label" for="col_name">Name</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input column-toggle" type="checkbox" id="col_groups" data-column="col-groups" checked>
                                    <label class="form-check-label" for="col_groups">Groups</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input column-toggle" type="checkbox" id="col_partner" data-column="col-partner" checked>
                                    <label class="form-check-label" for="col_partner">Partner</label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check">
                                    <input class="form-check-input column-toggle" type="checkbox" id="col_amount" data-column="col-amount" checked>
                                    <label class="form-check-label" for="col_amount">Total Amount</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input column-toggle" type="checkbox" id="col_personal" data-column="col-personal" checked>
                                    <label class="form-check-label" for="col_personal">Personal Home</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input column-toggle" type="checkbox" id="col_semipublic" data-column="col-semipublic" checked>
                                    <label class="form-check-label" for="col_semipublic">Semi-Public</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input column-toggle" type="checkbox" id="col_public" data-column="col-public" checked>
                                    <label class="form-check-label" for="col_public">C.Public Roaming</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input column-toggle" type="checkbox" id="col_introaming" data-column="col-introaming" checked>
                                    <label class="form-check-label" for="col_introaming">Int Roaming</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input column-toggle" type="checkbox" id="col_total_energy" data-column="col-total-energy" checked>
                                    <label class="form-check-label" for="col_total_energy">Total Energy</label>
                                </div>
                            </div>
                        </div>
                        <div class="mt-2">
                            <button type="button" class="btn btn-sm btn-outline-primary" id="show-all-columns">Show All</button>
                            <button type="button" class="btn btn-sm btn-outline-secondary" id="hide-all-columns">Hide All</button>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    @if(request()->hasAny(['search', 'group_id', 'start_date', 'end_date', 'partner_name', 'partner_search']))
                        <a href="{{ route('users.index') }}" class="btn btn-outline-danger me-auto">
                            <i class="bi bi-x-circle me-1"></i> Clear Filters
                        </a>
                    @endif
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="bi bi-x-lg me-1"></i> Cancel
                    </button>
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-funnel me-1"></i> Apply Filters
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM loaded, initializing column visibility...');
    
    // Estado por defecto - todas las columnas visibles
    const defaultState = {
        'col-id': true,
        'col-name': true,
        'col-groups': true,
        'col-partner': true,
        'col-amount': true,
        'col-personal': true,
        'col-semipublic': true,
        'col-public': true,
        'col-introaming': true,
        'col-total-energy': true,
        'col-actions': true
    };

    // Cargar estado guardado o usar el por defecto
    let columnState = defaultState;
    try {
        const savedState = localStorage.getItem('userTableColumns');
        if (savedState) {
            columnState = JSON.parse(savedState);
            console.log('Loaded saved state:', columnState);
        }
    } catch (error) {
        console.error('Error loading saved state:', error);
        columnState = defaultState;
    }

    // Función para aplicar el estado visual
    function applyColumnVisibility() {
        console.log('Applying column visibility...');
        
        // Aplicar a elementos de la tabla
        Object.keys(columnState).forEach(columnClass => {
            const elements = document.querySelectorAll('.' + columnClass);
            const shouldShow = columnState[columnClass];
            
            elements.forEach(el => {
                el.style.display = shouldShow ? '' : 'none';
            });
            
            console.log(`Column ${columnClass}: ${shouldShow ? 'visible' : 'hidden'} (${elements.length} elements)`);
        });

        // Aplicar a checkboxes
        const checkboxes = document.querySelectorAll('.column-toggle');
        checkboxes.forEach(checkbox => {
            const columnClass = checkbox.getAttribute('data-column');
            if (columnState.hasOwnProperty(columnClass)) {
                checkbox.checked = columnState[columnClass];
            }
        });
    }

    // Función para guardar estado
    function saveColumnState() {
        try {
            localStorage.setItem('userTableColumns', JSON.stringify(columnState));
            console.log('State saved:', columnState);
        } catch (error) {
            console.error('Error saving state:', error);
        }
    }

    // Event listeners para checkboxes
    document.querySelectorAll('.column-toggle').forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            const columnClass = this.getAttribute('data-column');
            columnState[columnClass] = this.checked;
            
            console.log(`Checkbox changed: ${columnClass} = ${this.checked}`);
            
            // Aplicar cambio inmediatamente
            const elements = document.querySelectorAll('.' + columnClass);
            elements.forEach(el => {
                el.style.display = this.checked ? '' : 'none';
            });
            
            saveColumnState();
        });
    });

    // Botón "Show All"
    document.getElementById('show-all-columns').addEventListener('click', function() {
        console.log('Show all columns clicked');
        Object.keys(columnState).forEach(key => {
            columnState[key] = true;
        });
        applyColumnVisibility();
        saveColumnState();
    });

    // Botón "Hide All"
    document.getElementById('hide-all-columns').addEventListener('click', function() {
        console.log('Hide all columns clicked');
        Object.keys(columnState).forEach(key => {
            if (key !== 'col-actions') { // Mantener Actions siempre visible
                columnState[key] = false;
            }
        });
        applyColumnVisibility();
        saveColumnState();
    });

    // Aplicar estado inicial
    applyColumnVisibility();
    console.log('Column visibility initialization completed');


});
</script>
@endpush

@endsection