|<div class="container-fluid">
    <div class="row align-items-center justify-content-center">
        <div class="col">
            <div ng-if="!show_list" class="text-center">
                <img src="images/searching.gif" class="img-fluid" alt=""/>
            </div>
            <div ng-if="show_list">
                <div class="card mb-3">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h3 class="mb-0">Gestor de Recargas</h3>
                        <a class="btn btn-sm btn-secondary" ui-sref="main.tags_lista" title="Volver a lista de TAGs">
                            <i class="fas fa-chevron-left"></i> Volver
                        </a>
                    </div>
                </div>
                
                <!-- Filtros simplificados -->
                <div class="mb-3">
                    <div class="d-flex flex-wrap align-items-center">
                        <div class="mr-2 mb-2">
                            <span class="font-weight-bold">Ver TAGs:</span>
                        </div>
                        
                        <!-- Filtros de saldo -->
                        <div class="btn-group mr-3 mb-2">
                            <button type="button" class="btn" ng-class="{'btn-secondary': filtroSaldo === 'todos', 'btn-outline-secondary': filtroSaldo !== 'todos'}" ng-click="aplicarFiltro('saldo', 'todos')">Todos</button>
                            <button type="button" class="btn" ng-class="{'btn-danger': filtroSaldo === 'sin_saldo', 'btn-outline-danger': filtroSaldo !== 'sin_saldo'}" ng-click="aplicarFiltro('saldo', 'sin_saldo')">Sin saldo</button>
                            <button type="button" class="btn" ng-class="{'btn-success': filtroSaldo === 'con_saldo', 'btn-outline-success': filtroSaldo !== 'con_saldo'}" ng-click="aplicarFiltro('saldo', 'con_saldo')">Con saldo</button>
                        </div>
                        
                        <!-- Filtros de asignación -->
                        <div class="btn-group mr-3 mb-2">
                            <button type="button" class="btn" ng-class="{'btn-secondary': filtroAsignacion === 'todos', 'btn-outline-secondary': filtroAsignacion !== 'todos'}" ng-click="aplicarFiltro('asignacion', 'todos')">Todos</button>
                            <button type="button" class="btn" ng-class="{'btn-warning': filtroAsignacion === 'sin_asignar', 'btn-outline-warning': filtroAsignacion !== 'sin_asignar'}" ng-click="aplicarFiltro('asignacion', 'sin_asignar')">Sin asignar</button>
                            <button type="button" class="btn" ng-class="{'btn-primary': filtroAsignacion === 'asignados', 'btn-outline-primary': filtroAsignacion !== 'asignados'}" ng-click="aplicarFiltro('asignacion', 'asignados')">Asignados</button>
                        </div>
                        
                        <!-- Búsqueda -->
                        <div class="input-group mb-2" style="max-width: 400px;">
                            <input type="text" class="form-control" ng-model="busqueda" 
                                   ng-change="actualizarFiltros()" 
                                   placeholder="Buscar por número de TAG o número económico">
                            <div class="input-group-append">
                                <button class="btn btn-secondary" type="button" ng-click="limpiarFiltros()">
                                    <i class="fas fa-times"></i> Limpiar
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Tabla unificada con colores por saldo -->
                <div class="table-responsive mb-3">
                    <table class="table table-bordered table-hover">
                        <thead class="thead-dark">
                            <tr>
                                <th>Número TAG</th>
                                <th>Número Económico</th>
                                <th>Saldo</th>
                                <th>Fecha Activación/Asignación</th>
                                <th class="text-center">Acciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- Filtramos los tags basados en los criterios -->
                            <tr ng-repeat="tag in tagsFiltrados|filter:busqueda" 
                                ng-class="{'bg-danger text-white': parseFloat(tag.saldo) === 0, 'bg-success text-white': parseFloat(tag.saldo) > 0}">
                                <td>{{tag.numero_tag}}</td>
                                <td>
                                    <span ng-if="tag.numero_economico">{{tag.modalidad_nombre}} - {{tag.numero_economico}}</span>
                                    <span class="badge badge-warning" ng-if="!tag.numero_economico">Sin asignar</span>
                                </td>
                                <td>
                                    <span ng-class="{'font-weight-bold': parseFloat(tag.saldo) === 0}">
                                        ${{tag.saldo | number:2}}
                                    </span>
                                </td>
                                <td>{{tag.fecha_asignacion ? (tag.fecha_asignacion | date:'yyyy-MM-dd HH:mm:ss') : (tag.fecha_activacion | date:'yyyy-MM-dd HH:mm:ss')}}</td>
                                <td class="text-center">
                                    <button class="btn btn-sm btn-outline-light" title="Imprimir Ticket" ng-click="imprimirTicket(tag.id)" 
                                            ng-if="tag.status === '1' && (modulos_acciones_list | contains:'920207')">
                                        <i class="fas fa-print"></i>
                                    </button>
                                    <button class="btn btn-sm btn-outline-light" title="Recargar TAG" ng-click="recargarTag(tag)" 
                                            ng-if="tag.status === '1' && (modulos_acciones_list | contains:'920203')">
                                        <i class="fas fa-money-bill"></i> Recargar
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                
                <!-- Mensaje cuando no hay resultados -->
                <div class="alert alert-info text-center" ng-if="tagsFiltrados.length === 0">
                    <i class="fas fa-info-circle mr-2"></i> No se encontraron TAGs con los filtros seleccionados.
                </div>
                
                <!-- Contadores de estadísticas -->
                <div class="row mt-4">
                    <div class="col-md-4">
                        <div class="card bg-light mb-3">
                            <div class="card-body text-center py-3">
                                <div>Total TAGs</div>
                                <h3 class="mb-0">{{allTags.length}}</h3>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card bg-danger text-white mb-3">
                            <div class="card-body text-center py-3">
                                <div>TAGs sin saldo</div>
                                <h3 class="mb-0">{{tags_sin_saldo.length}}</h3>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card bg-success text-white mb-3">
                            <div class="card-body text-center py-3">
                                <div>TAGs con saldo</div>
                                <h3 class="mb-0">{{tags_con_saldo.length}}</h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    /* Ajustes para los filtros */
    .btn-group .btn {
        font-size: 0.9rem;
        padding: 0.375rem 0.75rem;
    }
    
    /* Colores para las filas */
    .bg-danger {
        background-color: #ff6b6b !important;
    }
    
    .bg-success {
        background-color: #51cf66 !important;
    }
    
    /* Estilo para los botones dentro de filas coloreadas */
    .bg-danger .btn-outline-light:hover, 
    .bg-success .btn-outline-light:hover {
        background-color: rgba(255, 255, 255, 0.2);
    }
    
    /* Estilos para las tarjetas de contador */
    .card {
        border-radius: 0.25rem;
        border: none;
    }
    
    /* Color para las badges */
    .badge-warning {
        background-color: #fcc419;
        color: #212529;
    }
    
    /* Estilos para hacer la UI más compacta */
    .table td, .table th {
        padding: 0.5rem;
        vertical-align: middle;
    }
    
    .card-body {
        padding: 1rem;
    }
    
    /* Ajuste para móviles */
    @media (max-width: 768px) {
        .d-flex.flex-wrap {
            justify-content: center;
        }
    }
</style>