<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" class="card my-5">
                <div class="card-header">
                    <a class="btn btn-sm btn-success float-right rounded-0 ml-2" ui-sref="main.tag_agregar" title="Agregar TAG" ng-if="(modulos_acciones_list | contains:'920205')">
                        <i class="fas fa-plus"></i> Agregar Tag
                    </a>
                    <a class="btn btn-sm btn-info float-right rounded-0 ml-2" ui-sref="main.tags_asignaciones" title="Gestor de Asignaciones" ng-if="(modulos_acciones_list | contains:'920208')">
                        <i class="fas fa-link"></i> Gestor de Asignaciones
                    </a>
                    <a class="btn btn-sm btn-primary float-right rounded-0 ml-2" ui-sref="main.tags_recargas" title="Gestor de Recargas" ng-if="(modulos_acciones_list | contains:'920206')">
                        <i class="fas fa-money-bill"></i> Gestor de Recargas
                    </a>
                    <a class="btn btn-sm btn-warning float-right rounded-0 ml-2" ui-sref="main.tag_asignar_recargar({tag_id: null})" title="Crear, Asignar y Recargar TAG" ng-if="(modulos_acciones_list | contains:'920209')">
                        <i class="fas fa-plus"></i> <i class="fas fa-link"></i> <i class="fas fa-money-bill"></i> Gestión Completa
                    </a>
                    <h3>TAGs</h3>
                </div>
                <div class="card-body">
                    <!-- TAGs sin asignar -->
                    <div class="mb-4">
                        <h4 class="text-danger mb-3"><i class="fas fa-exclamation-triangle"></i> TAGs sin número económico asignado</h4>
                        <div class="table-responsive">
                            <table class="table table-striped table-responsive-md table-danger" ng-if="tagsNoAsignados.length > 0">
                                <thead class="thead-dark">
                                    <tr>
                                        <th>Número TAG</th>
                                        <th>Saldo</th>
                                        <th>Estatus</th>
                                        <th>Fecha Activación</th>
                                        <th class="actions">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr ng-repeat="tag in tagsNoAsignados">
                                        <td>{{tag.numero_tag}}</td>
                                        <td>${{tag.saldo | number:2}}</td>
                                        <td>
                                            <span class="badge" ng-class="{'badge-success': tag.status === '1', 'badge-danger': tag.status === '-1'}">
                                                {{tag.status === '1' ? 'Activo' : 'Inactivo'}}
                                            </span>
                                        </td>
                                        <td>{{tag.fecha_activacion | date:'dd/MM/yyyy HH:mm'}}</td>
                                        <td class="actions">
                                            <a class="btn btn-sm btn-outline-primary float-right ml-2" 
                                               title="Asignar Numero Economico" 
                                               ui-sref="main.tag_asignar({tag_id: tag.id})" 
                                               ng-if="tag.status === '1' && (modulos_acciones_list | contains:'920204')">
                                                <i class="fas fa-link"></i>
                                            </a>
                                            <button class="btn btn-sm btn-outline-success float-right ml-2" 
                                                title="Recargar TAG" 
                                                ui-sref="main.tag_recharge({tag_id: tag.id})" 
                                                ng-if="tag.status === '1' && (modulos_acciones_list | contains:'920203')">
                                                <i class="fas fa-money-bill"></i>
                                            </button>
                                            <a class="btn btn-sm btn-outline-warning float-right ml-2" 
                                               title="Asignar y Recargar" 
                                               ui-sref="main.tag_asignar_recargar({tag_id: tag.id})" 
                                               ng-if="tag.status === '1' && (modulos_acciones_list | contains:'920209')">
                                                <i class="fas fa-link"></i>
                                                <i class="fas fa-money-bill"></i>
                                            </a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <div class="p-3 text-center" ng-if="tagsNoAsignados.length === 0">
                                No hay TAGs sin asignar.
                            </div>
                        </div>
                    </div>
                    
                    <!-- TAGs ya asignados -->
                    <div>
                        <h4 class="text-success mb-3"><i class="fas fa-check-circle"></i> TAGs con número económico asignado</h4>
                        <div class="table-responsive">
                            <table class="table table-striped table-responsive-md" ng-if="tagsAsignados.length > 0">
                                <thead class="thead-dark">
                                    <tr>
                                        <th>Número TAG</th>
                                        <th>Número Económico</th>
                                        <th>Saldo</th>
                                        <th>Estatus</th>
                                        <th>Fecha Asignación</th>
                                        <th class="actions">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr ng-repeat="tag in tagsAsignados">
                                        <td>{{tag.numero_tag}}</td>
                                        <td>
                                            <div>
                                                {{tag.modalidad_nombre}} - {{tag.numero_economico}}
                                            </div>
                                        </td>
                                        <td>${{tag.saldo | number:2}}</td>
                                        <td>
                                            <span class="badge" ng-class="{'badge-success': tag.status === '1', 'badge-danger': tag.status === '-1'}">
                                                {{tag.status === '1' ? 'Activo' : 'Inactivo'}}
                                            </span>
                                        </td>
                                        <td>{{tag.fecha_asignacion | date:'dd/MM/yyyy HH:mm'}}</td>
                                        <td class="actions">
                                            <button class="btn btn-sm btn-outline-success float-right ml-2" 
                                                title="Recargar TAG" 
                                                ui-sref="main.tag_recharge({tag_id: tag.id})" 
                                                ng-if="tag.status === '1' && (modulos_acciones_list | contains:'920203')">
                                                <i class="fas fa-money-bill"></i>
                                            </button>
                                            <a class="btn btn-sm btn-outline-warning float-right ml-2" 
                                               title="Asignar y Recargar" 
                                               ui-sref="main.tag_asignar_recargar({tag_id: tag.id})" 
                                               ng-if="tag.status === '1' && (modulos_acciones_list | contains:'920209')">
                                                <i class="fas fa-link"></i>
                                                <i class="fas fa-money-bill"></i>
                                            </a>
                                            <button class="btn btn-sm btn-outline-info float-right ml-2" 
                                                title="Imprimir Ticket" 
                                                ng-click="imprimirTicket(tag.id)" 
                                                ng-if="tag.status === '1' && (modulos_acciones_list | contains:'920304')">
                                                <i class="fas fa-print"></i>
                                            </button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <div class="p-3 text-center" ng-if="tagsAsignados.length === 0">
                                No hay TAGs con número económico asignado.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>