<?php $__env->startSection('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-container {
    max-width: 1400px; /* Limitar ancho máximo */
    margin: 0 auto;
    padding: 24px 20px; /* Reducido */
    min-height: 100vh;
    width: 95%; /* Ancho responsivo base */
}

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

.blulinc-card-header {
    background: linear-gradient(135deg, #015cff 0%, #0146cc 100%);
    color: white;
    padding: 16px 20px;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
}

.blulinc-card-header h5 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
}

.blulinc-card-header small {
    opacity: 0.9;
    font-size: 12px;
    display: block;
    margin-top: 2px;
}

.blulinc-card-body {
    padding: 18px; /* Más compacto */
}

.blulinc-btn-primary {
    background: linear-gradient(135deg, var(--blulinc-blue) 0%, #0147d9 100%);
    border: none;
    color: white;
    border-radius: 8px;
    font-weight: 600;
    padding: 8px 16px;
    font-size: 13px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(1, 92, 255, 0.25);
    text-decoration: none;
    display: inline-block;
}

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

.blulinc-btn-light {
    background: linear-gradient(135deg, #ffffff 0%, var(--blulinc-light-blue) 100%);
    border: 2px solid rgba(255, 255, 255, 0.8);
    color: var(--blulinc-blue);
    border-radius: 8px;
    font-weight: 600;
    padding: 6px 14px;
    font-size: 13px;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-block;
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.3);
}

.blulinc-btn-light:hover {
    background: linear-gradient(135deg, var(--blulinc-light-blue) 0%, #ffffff 100%);
    border-color: rgba(255, 255, 255, 1);
}

/* Estilos específicos para filtros de fechas - asegurar consistencia */
.blulinc-form-control[type="date"],
.blulinc-form-control[type="select"],
select.blulinc-form-control {
    padding: 8px 12px;
    font-size: 12px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    width: 100%;
    background-color: white;
    transition: all 0.3s ease;
}

.blulinc-form-control[type="date"]:focus,
.blulinc-form-control[type="select"]:focus,
select.blulinc-form-control:focus {
    border-color: var(--blulinc-blue);
    box-shadow: 0 0 0 0.2rem rgba(1, 92, 255, 0.25);
    outline: none;
}

/* Asegurar que los contenedores de filtros tengan el mismo espaciado */
.filter-date-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.filter-date-item {
    flex: 1;
    min-width: 160px;
}

/* Estilos para el botón Back con color blanco */
.blulinc-btn-secondary[href*="users.index"] {
    color: white !important;
    border-color: white !important;
}

.blulinc-btn-secondary[href*="users.index"] i {
    color: white !important;
}

.blulinc-btn-secondary[href*="users.index"]:hover {
    color: white !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Responsividad para filtros de fechas */
@media (max-width: 768px) {
    .filter-date-container {
        flex-direction: column;
        gap: 10px;
        margin-bottom: 12px;
    }
    
    .filter-date-item {
        min-width: 100%;
    }
    
    .filter-actions {
        flex-direction: column !important;
        gap: 6px !important;
    }
    
    .blulinc-card-header {
        padding: 12px 16px;
        font-size: 18px;
    }
    
    .blulinc-card-header h5 {
        font-size: 18px;
    }
    
    .blulinc-card-header small {
        font-size: 11px;
    }
    
    .blulinc-card-body {
        padding: 14px;
    }
    
    .blulinc-info-section, 
    .blulinc-stats-section, 
    .blulinc-payment-section {
        padding: 16px;
        margin-bottom: 14px;
    }
    
    .blulinc-info-section h5,
    .blulinc-stats-section h5,
    .blulinc-payment-section h5 {
        font-size: 16px;
        margin-bottom: 12px;
    }
}

@media (max-width: 576px) {
    .filter-date-container {
        gap: 8px;
        margin-bottom: 10px;
    }
    
    .blulinc-form-control[type="date"],
    .blulinc-form-control {
        padding: 6px 10px;
        font-size: 11px;
    }
    
    .blulinc-form-label {
        font-size: 11px;
        margin-bottom: 3px;
    }
    
    .filter-actions {
        gap: 4px !important;
    }
    
    .blulinc-card-header {
        padding: 10px 12px;
        font-size: 16px;
    }
    
    .blulinc-card-header h5 {
        font-size: 16px;
    }
    
    .blulinc-card-header small {
        font-size: 10px;
    }
    
    .blulinc-card-body {
        padding: 12px;
    }
    
    .blulinc-info-section, 
    .blulinc-stats-section, 
    .blulinc-payment-section {
        padding: 12px;
        margin-bottom: 10px;
    }
    
    .blulinc-info-section h5,
    .blulinc-stats-section h5,
    .blulinc-payment-section h5 {
        font-size: 14px;
        margin-bottom: 10px;
    }
    
    .blulinc-dl dt {
        font-size: 12px;
    }
    
    .blulinc-dl dd {
        font-size: 13px;
        margin-bottom: 6px;
    }
    
    .blulinc-payment-dl dt {
        font-size: 13px;
    }
    
    .blulinc-payment-dl dd {
        font-size: 14px;
        margin-bottom: 6px;
    }
    
    .blulinc-alert-info {
        padding: 8px;
        margin-bottom: 12px;
        font-size: 11px;
        border-radius: 6px;
    }
}


    color: var(--blulinc-blue);
    transform: translateY(-1px);
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.5);
}

.blulinc-btn-secondary {
    background-color: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    border-radius: 8px;
    font-weight: 600;
    padding: 6px 14px;
    font-size: 13px;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-block;
}

.blulinc-btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    color: white;
    transform: translateY(-1px);
    text-decoration: none;
}

.blulinc-form-control {
    padding: 8px 12px;
    border: 2px solid #e1ecf7;
    border-radius: 6px;
    font-size: 12px;
    transition: all 0.2s ease;
    background-color: white;
}

.blulinc-form-control:focus {
    outline: none;
    border-color: var(--blulinc-blue);
    box-shadow: 0 0 0 3px rgba(1, 92, 255, 0.1);
}

.blulinc-form-label {
    color: var(--blulinc-black);
    font-weight: 600;
    font-size: 12px;
    margin-bottom: 4px;
}

.blulinc-info-section {
    background: linear-gradient(135deg, var(--blulinc-light-blue) 0%, #ffffff 100%);
    border: 2px solid #e1ecf7;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 18px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.blulinc-info-section h5 {
    color: var(--blulinc-blue);
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.blulinc-stats-section {
    background: linear-gradient(135deg, #ffffff 0%, var(--blulinc-light-blue) 100%);
    border: 2px solid #e1ecf7;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 18px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.blulinc-stats-section h5 {
    color: var(--blulinc-blue);
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.blulinc-payment-section {
    background: linear-gradient(135deg, var(--blulinc-light-blue) 0%, #ffffff 100%);
    border: 2px solid #e1ecf7;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 18px;
}

.blulinc-payment-section h5 {
    color: var(--blulinc-blue);
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.blulinc-dl dt {
    color: var(--blulinc-black);
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 2px;
}

.blulinc-dl dd {
    color: var(--blulinc-black);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
}

.blulinc-payment-dl dt {
    color: var(--blulinc-black);
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 2px;
}

.blulinc-payment-dl dd {
    color: var(--blulinc-black);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}

.blulinc-table-container {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    padding: 16px; /* Reducido de 24px */
    margin-bottom: 24px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.blulinc-table {
    margin-bottom: 0;
    border: none;
    width: 100%;
    table-layout: fixed; /* Controla ancho de columnas */
}

/* Anchos específicos para columnas de historial de sesiones */
.blulinc-table th:nth-child(1), .blulinc-table td:nth-child(1) { width: 10%; } /* Session ID */
.blulinc-table th:nth-child(2), .blulinc-table td:nth-child(2) { width: 12%; } /* Start */
.blulinc-table th:nth-child(3), .blulinc-table td:nth-child(3) { width: 12%; } /* End */
.blulinc-table th:nth-child(4), .blulinc-table td:nth-child(4) { width: 20%; } /* Charger ID - Address */
.blulinc-table th:nth-child(5), .blulinc-table td:nth-child(5) { width: 14%; } /* Consumption Type */
.blulinc-table th:nth-child(6), .blulinc-table td:nth-child(6) { width: 12%; } /* Payment Type */
.blulinc-table th:nth-child(7), .blulinc-table td:nth-child(7) { width: 10%; } /* Energy */
.blulinc-table th:nth-child(8), .blulinc-table td:nth-child(8) { width: 10%; } /* Amount */

.blulinc-table thead th {
    background-color: #f8f9fa;
    color: var(--blulinc-black);
    font-weight: 600;
    font-size: 11px; /* Reducido */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    padding: 10px 8px; /* Reducido padding */
    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 td {
    padding: 8px 8px; /* Reducido */
    color: var(--blulinc-black);
    font-size: 12px; /* Aumentado para mejor legibilidad */
    font-weight: 500; /* Añadido peso */
    border: none;
    vertical-align: middle;
    text-align: left;
    border-bottom: 1px solid #f1f3f4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 0;
}

.blulinc-alert-info {
    background-color: #e6f2ff;
    border: 2px solid var(--blulinc-blue);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
    color: var(--blulinc-blue);
    font-weight: 500;
    font-size: 13px;
}

.blulinc-alert-info a {
    color: #0147d9;
    font-weight: 600;
}

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

.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);
}

.blulinc-modal-content {
    border-radius: 16px;
    border: 2px solid var(--blulinc-blue);
    box-shadow: 0 12px 40px rgba(1, 92, 255, 0.15);
}

.blulinc-modal-header {
    background: linear-gradient(135deg, var(--blulinc-blue) 0%, #0147d9 100%);
    color: white;
    border-bottom: none;
    border-radius: 14px 14px 0 0;
}

.blulinc-modal-title {
    font-weight: 700;
    font-size: 18px;
}

.blulinc-modal-body {
    padding: 24px;
}

.blulinc-modal-footer {
    border-top: 1px solid #e1ecf7;
    padding: 16px 24px;
}

.button-group {
    display: flex;
    gap: 8px;
}

/* Hacer que las columnas tengan la misma altura */
.equal-height-row {
    display: flex;
    flex-wrap: wrap;
}

.equal-height-col {
    display: flex;
    flex-direction: column;
}

.filter-row {
    margin-bottom: 20px;
}

.payment-filter-row {
    margin-top: 20px;
}

.btn-secondary {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
    border: none;
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background: linear-gradient(135deg, #5a6268 0%, #545b62 100%);
    transform: translateY(-1px);
    color: white;
}

/* === MEDIA QUERIES PARA RESPONSIVIDAD === */
    
/* Pantallas muy grandes (1920px+) */
@media (min-width: 1920px) {
    .blulinc-container {
        max-width: 1600px;
        padding: 28px 24px;
    }
    .blulinc-card-header {
        font-size: 28px;
        padding: 24px 28px;
    }
    .blulinc-card-body {
        padding: 28px;
    }
    .blulinc-table-container {
        padding: 20px;
    }
    .blulinc-table thead th {
        font-size: 12px;
        padding: 12px 10px;
    }
    .blulinc-table tbody td {
        font-size: 13px;
        padding: 10px 10px;
    }
    .btn-secondary {
        padding: 14px 28px;
        font-size: 14px;
    }
}

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

/* Pantallas medianas-grandes (1200px - 1399px) */
@media (max-width: 1399px) and (min-width: 1200px) {
    .blulinc-container {
        max-width: 1200px;
        width: 95%;
        padding: 20px 15px;
    }
    .blulinc-card-header {
        font-size: 22px;
        padding: 18px 20px;
    }
    .blulinc-card-body {
        padding: 20px;
    }
    .blulinc-table-container {
        padding: 14px;
    }
}

/* Pantallas medianas (992px - 1199px) */
@media (max-width: 1199px) and (min-width: 992px) {
    .blulinc-container {
        max-width: 1000px;
        width: 95%;
        padding: 20px 10px;
    }
    .blulinc-card-header {
        font-size: 20px;
        padding: 16px 18px;
    }
    .blulinc-card-body {
        padding: 18px;
    }
    .blulinc-table-container {
        padding: 12px;
    }

    .blulinc-table thead th {
        font-size: 10px;
        padding: 8px 6px;
    }
    .blulinc-table tbody td {
        font-size: 11px;
        padding: 6px 6px;
    }
    .btn-secondary {
        padding: 10px 20px;
        font-size: 12px;
    }
}

/* Pantallas pequeñas-medianas (768px - 991px) */
@media (max-width: 991px) and (min-width: 768px) {
    .blulinc-container {
        width: 98%;
        padding: 15px 8px;
    }
    .blulinc-card-header {
        font-size: 18px;
        padding: 14px 16px;
    }
    .blulinc-card-body {
        padding: 16px;
    }
    .blulinc-table-container {
        padding: 10px;
    }
    .blulinc-table thead th {
        font-size: 9px;
        padding: 6px 4px;
    }
    .blulinc-table tbody td {
        font-size: 10px;
        padding: 5px 4px;
    }
    .btn-secondary {
        padding: 8px 16px;
        font-size: 11px;
    }
}

/* Pantallas pequeñas (576px - 767px) */
@media (max-width: 767px) and (min-width: 576px) {
    .blulinc-container {
        width: 99%;
        padding: 8px 4px;
    }
    .blulinc-card {
        border-radius: 12px;
        margin-bottom: 12px;
    }
    .blulinc-card-header {
        font-size: 16px;
        padding: 10px 12px;
    }
    .blulinc-card-body {
        padding: 12px;
    }
    .blulinc-table-container {
        padding: 8px;
        border-radius: 8px;
    }
    .blulinc-table thead th {
        font-size: 8px;
        padding: 4px 3px;
        letter-spacing: 0.3px;
    }
    .blulinc-table tbody td {
        font-size: 9px;
        padding: 4px 3px;
    }
    .btn-secondary {
        padding: 6px 12px;
        font-size: 10px;
    }
}

/* Pantallas muy pequeñas (hasta 575px) */
@media (max-width: 575px) {
    .blulinc-container {
        width: 100%;
        padding: 6px 2px;
    }
    .blulinc-card {
        border-radius: 8px;
        margin-bottom: 8px;
    }
    .blulinc-card-header {
        font-size: 14px;
        padding: 8px 10px;
    }
    .blulinc-card-body {
        padding: 10px;
    }
    .blulinc-table-container {
        padding: 5px;
        border-radius: 6px;
    }
    .blulinc-table thead th {
        font-size: 7px;
        padding: 3px 2px;
        letter-spacing: 0.2px;
    }
    .blulinc-table tbody td {
        font-size: 8px;
        padding: 3px 2px;
    }
    .btn-secondary {
        padding: 4px 8px;
        font-size: 9px;
    }
    
    /* 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;
    }
}

/* Media queries para ajustar anchos de columna en pantallas pequeñas */
@media (max-width: 991px) {
    .blulinc-table th:nth-child(1), .blulinc-table td:nth-child(1) { width: 8%; } /* Session ID */
    .blulinc-table th:nth-child(2), .blulinc-table td:nth-child(2) { width: 11%; } /* Start */
    .blulinc-table th:nth-child(3), .blulinc-table td:nth-child(3) { width: 11%; } /* End */
    .blulinc-table th:nth-child(4), .blulinc-table td:nth-child(4) { width: 22%; } /* Charger ID - Address */
    .blulinc-table th:nth-child(5), .blulinc-table td:nth-child(5) { width: 15%; } /* Consumption Type */
    .blulinc-table th:nth-child(6), .blulinc-table td:nth-child(6) { width: 13%; } /* Payment Type */
    .blulinc-table th:nth-child(7), .blulinc-table td:nth-child(7) { width: 10%; } /* Energy */
    .blulinc-table th:nth-child(8), .blulinc-table td:nth-child(8) { width: 10%; } /* Amount */
}

@media (max-width: 767px) {
    .blulinc-table th:nth-child(1), .blulinc-table td:nth-child(1) { width: 7%; } /* Session ID */
    .blulinc-table th:nth-child(2), .blulinc-table td:nth-child(2) { width: 10%; } /* Start */
    .blulinc-table th:nth-child(3), .blulinc-table td:nth-child(3) { width: 10%; } /* End */
    .blulinc-table th:nth-child(4), .blulinc-table td:nth-child(4) { width: 25%; } /* Charger ID - Address */
    .blulinc-table th:nth-child(5), .blulinc-table td:nth-child(5) { width: 16%; } /* Consumption Type */
    .blulinc-table th:nth-child(6), .blulinc-table td:nth-child(6) { width: 12%; } /* Payment Type */
    .blulinc-table th:nth-child(7), .blulinc-table td:nth-child(7) { width: 10%; } /* Energy */
    .blulinc-table th:nth-child(8), .blulinc-table td:nth-child(8) { width: 10%; } /* Amount */
}

@media (max-width: 575px) {
    .blulinc-table th:nth-child(1), .blulinc-table td:nth-child(1) { width: 6%; } /* Session ID */
    .blulinc-table th:nth-child(2), .blulinc-table td:nth-child(2) { width: 9%; } /* Start */
    .blulinc-table th:nth-child(3), .blulinc-table td:nth-child(3) { width: 9%; } /* End */
    .blulinc-table th:nth-child(4), .blulinc-table td:nth-child(4) { width: 28%; } /* Charger ID - Address */
    .blulinc-table th:nth-child(5), .blulinc-table td:nth-child(5) { width: 16%; } /* Consumption Type */
    .blulinc-table th:nth-child(6), .blulinc-table td:nth-child(6) { width: 12%; } /* Payment Type */
    .blulinc-table th:nth-child(7), .blulinc-table td:nth-child(7) { width: 10%; } /* Energy */
    .blulinc-table th:nth-child(8), .blulinc-table td:nth-child(8) { width: 10%; } /* Amount */
}

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

@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%;
    }
}
</style>

<div class="blulinc-container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="blulinc-card">
                <div class="blulinc-card-header">
                    <div>
                        <h5><i class="bi bi-person-circle me-2"></i>User Details</h5>
                        <small>ID: <?php echo e($user->ampeco_user_id ?? 'N/A'); ?> - <?php echo e($user->full_name ?? 'N/A'); ?></small>
                    </div>
                    
                    <div class="button-group">
                        <?php if (app(\Illuminate\Contracts\Auth\Access\Gate::class)->check('view-session-history')): ?>
                            <?php if(auth()->user()->isPartnerAdmin()): ?>
                            <button type="button" class="blulinc-btn-light" data-bs-toggle="modal" data-bs-target="#filtersModal">
                                <i class="bi bi-funnel me-1"></i>Filters
                            </button>
                            <?php endif; ?>
                        <?php endif; ?>

                        <a href="<?php echo e(route('users.index')); ?>" class="blulinc-btn-secondary" style="color: white !important;">
                            <i class="bi bi-arrow-left me-1" style="color: white !important;"></i>Back
                        </a>
                    </div>
                </div>

                <div class="blulinc-card-body">
                    
                    <?php if(auth()->user() && (auth()->user()->isPartnerAdmin() || auth()->user()->isSuperAdmin())): ?>
                        <div class="mb-4">
                            <form method="GET" action="<?php echo e(url()->current()); ?>" class="filter-date-container">
                                <div class="filter-date-item">
                                    <label for="start_date" class="blulinc-form-label" style="display: block; margin-bottom: 8px;">Start Date</label>
                                    <input type="date" class="blulinc-form-control" id="start_date" name="start_date" value="<?php echo e(request('start_date')); ?>">
                                </div>
                                <div class="filter-date-item">
                                    <label for="end_date" class="blulinc-form-label" style="display: block; margin-bottom: 8px;">End Date</label>
                                    <input type="date" class="blulinc-form-control" id="end_date" name="end_date" value="<?php echo e(request('end_date')); ?>">
                                </div>
                                <?php if(auth()->user()->isSuperAdmin()): ?>
                                <div class="filter-date-item">
                                    <label for="consumption_type" class="blulinc-form-label" style="display: block; margin-bottom: 8px;">Charge Location</label>
                                    <select class="blulinc-form-control" id="consumption_type" name="consumption_type">
                                        <option value="">All Charge Locations</option>
                                        <option value="personal" <?php echo e((request('consumption_type') ?? '') === 'personal' ? 'selected' : ''); ?>>
                                            Personal Home
                                        </option>
                                        <option value="commercial_private" <?php echo e((request('consumption_type') ?? '') === 'commercial_private' ? 'selected' : ''); ?>>
                                            Semi-Public
                                        </option>
                                        <option value="public" <?php echo e((request('consumption_type') ?? '') === 'public' ? 'selected' : ''); ?>>
                                            C.Public Roaming
                                        </option>
                                        <option value="int_roaming" <?php echo e((request('consumption_type') ?? '') === 'int_roaming' ? 'selected' : ''); ?>>
                                            Int Roaming
                                        </option>
                                        <?php $__currentLoopData = $availableConsumptionTypes ?? []; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $consumptionType): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                            <option value="<?php echo e($consumptionType); ?>" <?php echo e((request('consumption_type') ?? '') === $consumptionType ? 'selected' : ''); ?>>
                                                <?php echo e($consumptionType); ?>

                                            </option>
                                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                    </select>
                                </div>
                                <?php endif; ?>
                                <div class="filter-actions" style="display: flex; gap: 10px; align-items: end;">
                                    <button type="submit" class="blulinc-btn-primary">Filter</button>
                                    <?php if(request('start_date') || request('end_date') || (auth()->user()->isSuperAdmin() && request('consumption_type'))): ?>
                                        <a href="<?php echo e(route('users.show', $user->ampeco_user_id)); ?>" class="blulinc-btn-secondary">Clear Filters</a>
                                    <?php endif; ?>
                                </div>
                            </form>
                        </div>
                    <?php endif; ?>
                    
                    <?php if(isset($filters['start_date']) || isset($filters['end_date']) || isset($filters['consumption_type'])): ?>
                        <div class="blulinc-alert-info">
                            <i class="bi bi-info-circle me-2"></i>
                            <strong>Filtered Statistics:</strong> Showing data for the selected filters. 
                            <a href="<?php echo e(route('users.show', $user->ampeco_user_id)); ?>">Clear filters to see global statistics</a>
                        </div>
                    <?php endif; ?>
                    
                    <div class="row mb-4 equal-height-row">
                        <div class="col-md-6 equal-height-col">
                            <div class="blulinc-info-section">
                                <h5><i class="bi bi-person-badge"></i>User Information</h5>
                                <dl class="row blulinc-dl flex-grow-1">
                                    <dt class="col-sm-4">ID:</dt>
                                    <dd class="col-sm-8"><?php echo e($user->ampeco_user_id ?? 'N/A'); ?></dd>
                                    <dt class="col-sm-4">Name:</dt>
                                    <dd class="col-sm-8"><?php echo e($user->full_name ?? 'N/A'); ?></dd>
                                    <dt class="col-sm-4">Email:</dt>
                                    <dd class="col-sm-8"><?php echo e($user->email ?? 'N/A'); ?></dd>
                                    <dt class="col-sm-4">Phone:</dt>
                                    <dd class="col-sm-8"><?php echo e($user->phone ?? 'N/A'); ?></dd>
                                </dl>
                            </div>
                        </div>
                        <div class="col-md-6 equal-height-col">
                            <div class="blulinc-stats-section">
                                <h5><i class="bi bi-lightning-charge"></i>Consumption Statistics</h5>
                                <dl class="row blulinc-dl flex-grow-1">
                                    <dt class="col-sm-5">Total Amount:</dt>
                                    <dd class="col-sm-7"><?php echo e(number_format($totalAmount ?? 0, 2, ',', '.')); ?> €</dd>
                                    <dt class="col-sm-5">Total Consumed:</dt>
                                    <dd class="col-sm-7"><?php echo e(number_format(floor(($totalKwh ?? 0) * 100) / 100, 2, ',', '.')); ?> kWh</dd>
                                    <dt class="col-sm-5">Personal Home:</dt>
                                    <dd class="col-sm-7"><?php echo e(number_format(floor(($personalKwh ?? 0) * 100) / 100, 2, ',', '.')); ?> kWh</dd>
                                    <dt class="col-sm-5">Semi-Public:</dt>
                                    <dd class="col-sm-7"><?php echo e(number_format(floor(($commercialPrivateKwh ?? 0) * 100) / 100, 2, ',', '.')); ?> kWh</dd>
                                    <dt class="col-sm-5">C.Public Roaming:</dt>
                                    <dd class="col-sm-7"><?php echo e(number_format(floor(($publicKwh ?? 0) * 100) / 100, 2, ',', '.')); ?> kWh</dd>
                                    <dt class="col-sm-5">Int Roaming:</dt>
                                    <dd class="col-sm-7"><?php echo e(number_format(floor(($intRoamingKwh ?? 0) * 100) / 100, 2, ',', '.')); ?> kWh</dd>
                                </dl>
                            </div>
                        </div>
                    </div>

                    <div class="row mb-4">
                        <div class="col-md-12">
                            <div class="blulinc-payment-section">
                                <h5><i class="bi bi-credit-card"></i>Payment Method Statistics</h5>
                                <dl class="row blulinc-payment-dl">
                                    <dt class="col-sm-2">Wallet:</dt>
                                    <dd class="col-sm-2"><?php echo e(number_format($walletAmount ?? 0, 2, ',', '.')); ?> €</dd>
                                    <dt class="col-sm-2">Credit Card:</dt>
                                    <dd class="col-sm-2"><?php echo e(number_format($creditCardAmount ?? 0, 2, ',', '.')); ?> €</dd>
                                    <dt class="col-sm-2">Other Methods:</dt>
                                    <dd class="col-sm-2"><?php echo e(number_format($otherPaymentAmount ?? 0, 2, ',', '.')); ?> €</dd>
                                </dl>
                                
                                <!-- Mostrar estadísticas detalladas por consumption_type cuando se aplique filtro -->
                                <?php if(isset($filters['consumption_type']) && $filters['consumption_type'] && !empty($consumptionTypeStats)): ?>
                                    <div class="mt-3">
                                        <h6 style="color: var(--blulinc-blue); font-weight: 600;">Detailed Consumption Type Statistics:</h6>
                                        <div class="blulinc-table-container">
                                            <table class="table blulinc-table">
                                                <thead>
                                                    <tr>
                                                        <th>Consumption Type</th>
                                                        <th>Sessions</th>
                                                        <th>Total Amount (€)</th>
                                                        <th>Total Energy (kWh)</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <?php $__currentLoopData = $consumptionTypeStats; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $consumptionType => $stats): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                        <tr>
                                                            <td><?php echo e($consumptionType); ?></td>
                                                            <td><?php echo e($stats['count']); ?></td>
                                                            <td><?php echo e(number_format($stats['amount'], 2, ',', '.')); ?></td>
                                                            <td><?php echo e(rtrim(rtrim(number_format($stats['kwh'], 4, ',', '.'), '0'), ',')); ?></td>
                                                        </tr>
                                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>

                    
                    <?php if(auth()->user()->isSuperAdmin()): ?>
                    <div class="row mb-4">
                        <div class="col-12 text-center">
                            <h4 style="color: var(--blulinc-dark); font-weight: 600; margin-bottom: 8px;">
                                <i class="bi bi-clock-history me-2" style="color: var(--blulinc-blue);"></i>
                                Session History
                            </h4>
                            <p style="color: var(--blulinc-gray); font-size: 14px; margin: 0; font-style: italic;">
                                (From the last two months)
                            </p>
                        </div>
                    </div>
                    <?php endif; ?>

                    
                    <?php if (app(\Illuminate\Contracts\Auth\Access\Gate::class)->check('view-session-history')): ?>
                        <?php if(!empty($sessions) && $sessions->count() > 0): ?>
                            <div class="blulinc-table-container">
                                <table class="table blulinc-table">
                                    <thead>
                                        <tr>
                                            <th>Session ID</th>
                                            <th>Start</th>
                                            <th>End</th>
                                            <th>Charger ID - Address</th>
                                            <th>Charge Location</th>
                                            <th>Payment Type</th>
                                            <th>Energy (kWh)</th>
                                            <th>Amount (€)</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <?php $__currentLoopData = $sessions; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $session): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                            <tr>
                                                <td><?php echo e($session->ampeco_session_id ?? 'N/A'); ?></td>
                                                <td><?php echo e($session->started_at?->format('d/m/Y H:i') ?? 'N/A'); ?></td>
                                                <td><?php echo e($session->stopped_at?->format('d/m/Y H:i') ?? 'N/A'); ?></td>
                                                <td>
                                                    <?php echo e($session->ampeco_charge_point_id ?? 'N/A'); ?>

                                                    <?php if($session->location_address_en === 'ACCESS_DENIED'): ?>
                                                        - access denied
                                                    <?php elseif($session->location_address_en === 'NOT_AVAILABLE'): ?>
                                                        - Int Roaming
                                                    <?php elseif($session->location_address_en): ?>
                                                        - <?php echo e($session->location_address_en_display ?? 'N/A'); ?>

                                                    <?php endif; ?>
                                                </td>
                                                <td>
                                                    <?php if($session->display_access_type === 'access denied'): ?>
                                                        access denied
                                                    <?php elseif($session->display_access_type === 'not available'): ?>
                                                        Int Roaming
                                                    <?php else: ?>
                                                        <?php echo e($session->display_access_type ?? 'N/A'); ?>

                                                    <?php endif; ?>
                                                </td>
                                                <td><?php echo e($session->display_payment_type ?? 'N/A'); ?></td>
                                                <?php
                                                    $kwh = ($session->energy ?? 0) / 1000;
                                                    $formattedKwh = rtrim(rtrim(number_format($kwh, 4, ',', '.'), '0'), ',');
                                                ?>
                                                <td><?php echo e($formattedKwh); ?></td>
                                                <td><?php echo e(number_format($session->amount ?? 0, 2, ',', '.')); ?></td>
                                            </tr>
                                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                    </tbody>
                                </table>
                            </div>

                            
                            <div class="blulinc-pagination d-flex justify-content-center">
                                <?php echo e($sessions->links('pagination::bootstrap-5')); ?>

                            </div>
                        <?php else: ?>
                            <div class="blulinc-alert-info">
                                <i class="bi bi-info-circle me-2"></i>No session history available for this user in the selected period.
                            </div>
                        <?php endif; ?>
                    <?php endif; ?>
                    
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Filter Modal -->
<?php if (app(\Illuminate\Contracts\Auth\Access\Gate::class)->check('view-session-history')): ?>
<div class="modal fade" id="filtersModal" tabindex="-1" aria-labelledby="filtersModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content blulinc-modal-content">
            <form action="<?php echo e(route('users.show', $user->ampeco_user_id)); ?>" method="GET">
                <div class="modal-header blulinc-modal-header">
                    <h5 class="modal-title blulinc-modal-title" id="filtersModalLabel">
                        <i class="bi bi-funnel me-2"></i>Filter Session History - Updated
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body blulinc-modal-body">
                    <!-- Contenedor con estilos CSS para filtros de fechas -->
                    <div class="filter-date-container">
                        <div class="filter-date-item">
                            <label for="start_date" class="blulinc-form-label" style="display: block; margin-bottom: 8px;">Start Date</label>
                            <input type="date" class="blulinc-form-control" id="start_date" name="start_date"
                                   value="<?php echo e($filters['start_date'] ?? ''); ?>">
                        </div>
                        <div class="filter-date-item">
                            <label for="end_date" class="blulinc-form-label" style="display: block; margin-bottom: 8px;">End Date</label>
                            <input type="date" class="blulinc-form-control" id="end_date" name="end_date"
                                   value="<?php echo e($filters['end_date'] ?? ''); ?>">
                        </div>
                        <div class="filter-date-item">
                            <label for="consumption_type" class="blulinc-form-label" style="display: block; margin-bottom: 8px;">Charge Location</label>
                            <select class="blulinc-form-control" id="consumption_type" name="consumption_type">
                                <option value="">All Consumption Types</option>
                                <option value="personal" <?php echo e(($filters['consumption_type'] ?? '') === 'personal' ? 'selected' : ''); ?>>
                                    Personal Home
                                </option>
                                <option value="commercial_private" <?php echo e(($filters['consumption_type'] ?? '') === 'commercial_private' ? 'selected' : ''); ?>>
                                    Semi-Public
                                </option>
                                <option value="public" <?php echo e(($filters['consumption_type'] ?? '') === 'public' ? 'selected' : ''); ?>>
                                    C.Public Roaming
                                </option>
                                <option value="int_roaming" <?php echo e(($filters['consumption_type'] ?? '') === 'int_roaming' ? 'selected' : ''); ?>>
                                    Int Roaming
                                </option>
                                <?php $__currentLoopData = $availableConsumptionTypes ?? []; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $consumptionType): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <option value="<?php echo e($consumptionType); ?>" <?php echo e(($filters['consumption_type'] ?? '') === $consumptionType ? 'selected' : ''); ?>>
                                        <?php echo e($consumptionType); ?>

                                    </option>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer blulinc-modal-footer">
                    <button type="button" class="blulinc-btn-secondary" data-bs-dismiss="modal" style="background-color: white; border: 2px solid var(--blulinc-gray); color: var(--blulinc-black);">Cancel</button>
                    <button type="submit" class="blulinc-btn-primary">Apply Filters</button>
                </div>
            </form>
        </div>
    </div>
</div>
<?php endif; ?>

<?php $__env->startPush('scripts'); ?>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const startDateInput = document.getElementById('start_date');
        const endDateInput = document.getElementById('end_date');
        
        if (startDateInput && endDateInput) {
            startDateInput.addEventListener('change', function() {
                endDateInput.min = this.value;
            });
            
            endDateInput.addEventListener('change', function() {
                if (startDateInput.value) {
                    startDateInput.max = this.value;
                }
            });
            
            const today = new Date().toISOString().split('T')[0];
            if (!startDateInput.value && !endDateInput.value) {
                endDateInput.max = today;
            } else if (startDateInput.value && !endDateInput.value) {
                endDateInput.min = startDateInput.value;
                endDateInput.max = today;
            } else if (!startDateInput.value && endDateInput.value) {
                startDateInput.max = endDateInput.value;
            } else {
                startDateInput.max = endDateInput.value;
                endDateInput.min = startDateInput.value;
            }
        }

        const updateButton = document.querySelector('a[name="update-data-button"]');
        const loadingOverlay = document.getElementById('loadingOverlay');

        if (updateButton && loadingOverlay) {
            updateButton.addEventListener('click', function(event) {
                event.preventDefault(); 
                loadingOverlay.style.display = 'flex';

                setTimeout(() => {
                    window.location.href = updateButton.href;
                }, 50);
            });
        }
    });
</script>
<?php $__env->stopPush(); ?>

<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /home/pixjucom/blulinc.pixju.com/resources/views/users/show.blade.php ENDPATH**/ ?>