<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 shadow-sm">
                <div class="card-header bg-primary text-white">
                    <div class="d-flex justify-content-between align-items-center">
                        <h3 class="mb-0"><i class="fas fa-tags mr-2"></i>Gestor de Asignaciones</h3>
                        <a class="btn btn-sm btn-light" ui-sref="main.tags_lista" title="Volver a lista de TAGs">
                            <i class="fas fa-chevron-left"></i> Volver
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    <!-- Sección de pasos para asignación -->
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <div class="card h-100 border-primary">
                                <div class="card-header bg-primary text-white">
                                    <h5 class="mb-0"><i class="fas fa-tag mr-2"></i>Paso 1: Seleccionar TAG</h5>
                                </div>
                                <div class="card-body">
                                    <div ng-if="tag_selected" class="alert alert-success mb-3">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div>
                                                <h5 class="mb-1">TAG seleccionado: <strong>{{tag_selected.numero_tag}}</strong></h5>
                                                <p class="mb-0">Saldo: ${{tag_selected.saldo | number:2}}</p>
                                            </div>
                                            <button type="button" class="btn btn-sm btn-outline-danger" ng-click="removeTagSelection()">
                                                <i class="fas fa-times"></i>
                                            </button>
                                        </div>
                                    </div>
                                    
                                    <div ng-if="!tag_selected">
                                        <div class="table-responsive max-h-200">
                                            <table class="table table-sm table-hover" ng-if="tags_sin_asignar.length > 0">
                                                <thead>
                                                    <tr class="bg-light">
                                                        <th>Número TAG</th>
                                                        <th>Saldo</th>
                                                        <th>Fecha Activación</th>
                                                        <th class="text-center">Acciones</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr ng-repeat="tag in tags_sin_asignar">
                                                        <td>{{tag.numero_tag}}</td>
                                                        <td>${{tag.saldo | number:2}}</td>
                                                        <td>{{tag.fecha_activacion | date:'dd/MM/yyyy'}}</td>
                                                        <td class="text-center">
                                                            <button type="button" class="btn btn-sm btn-outline-primary" 
                                                                    ng-click="selectTag(tag)">
                                                                <i class="fas fa-check"></i> Seleccionar
                                                            </button>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                            <div class="text-center p-3" ng-if="tags_sin_asignar.length === 0">
                                                No hay TAGs disponibles para asignar.
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Sección de búsqueda de número económico -->
                        <div class="col-md-6">
                            <div class="card h-100 border-success">
                                <div class="card-header bg-success text-white">
                                    <h5 class="mb-0"><i class="fas fa-bus mr-2"></i>Paso 2: Buscar Número Económico</h5>
                                </div>
                                <div class="card-body">
                                    <div ng-if="numero_economico_selected" class="alert alert-success mb-3">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div>
                                                <h5 class="mb-1">Número seleccionado: <strong>{{numero_economico_selected.modalidad_nombre}} - {{numero_economico_selected.numero_economico}}</strong></h5>
                                                <p class="mb-0" ng-if="numero_economico_selected.observacion">{{numero_economico_selected.observacion}}</p>
                                            </div>
                                            <button type="button" class="btn btn-sm btn-outline-danger" ng-click="removeNumeroEconomicoSelection()">
                                                <i class="fas fa-times"></i>
                                            </button>
                                        </div>
                                    </div>
                                    
                                    <div ng-if="!numero_economico_selected">
                                        <form name="searchForm" ng-submit="buscarNumeroEconomico()" novalidate class="mb-3">
                                            <div class="form-group">
                                                <label class="font-weight-bold">Número Económico</label>
                                                <div class="input-group">
                                                    <input type="text" class="form-control" ng-model="filtros.numero" placeholder="Ingrese número para buscar">
                                                    <div class="input-group-append">
                                                        <button type="submit" class="btn btn-primary" ng-disabled="loading">
                                                            <i class="fas fa-search"></i>
                                                            <span ng-if="loading" class="spinner-border spinner-border-sm ml-1" role="status"></span>
                                                        </button>
                                                    </div>
                                                </div>
                                                <small class="form-text text-muted">Solo se mostrarán unidades tipo COLECTIVO.</small>
                                            </div>
                                        </form>
                                        
                                        <div class="table-responsive max-h-200" ng-if="numeros_economicos.length > 0">
                                            <table class="table table-sm table-hover">
                                                <thead>
                                                    <tr class="bg-light">
                                                        <th>Número</th>
                                                        <th>Modalidad</th>
                                                        <th class="text-center">Acciones</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr ng-repeat="numero in numeros_economicos">
                                                        <td>{{numero.numero_economico}}</td>
                                                        <td>{{numero.modalidad_nombre}}</td>
                                                        <td class="text-center">
                                                            <button type="button" class="btn btn-sm btn-outline-success" 
                                                                    ng-click="selectNumeroEconomico(numero)">
                                                                <i class="fas fa-check"></i> Seleccionar
                                                            </button>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Sección de asignación -->
                    <div class="row">
                        <div class="col-12">
                            <div class="card border-warning">
                                <div class="card-header bg-warning text-dark">
                                    <h5 class="mb-0"><i class="fas fa-link mr-2"></i>Paso 3: Asignar</h5>
                                </div>
                                <div class="card-body text-center">
                                    <p ng-if="!tag_selected || !numero_economico_selected">
                                        <i class="fas fa-info-circle mr-1"></i>
                                        Por favor, seleccione primero un TAG y un número económico para realizar la asignación.
                                    </p>
                                    
                                    <div ng-if="tag_selected && numero_economico_selected" class="p-3">
                                        <h5 class="mb-3">¿Confirma la asignación del TAG <strong>{{tag_selected.numero_tag}}</strong> al número económico <strong>{{numero_economico_selected.modalidad_nombre}} - {{numero_economico_selected.numero_economico}}</strong>?</h5>
                                        
                                        <button type="button" class="btn btn-lg btn-success" ng-click="asignarTagNumeroEconomico()" ng-disabled="loading">
                                            <i class="fas fa-link mr-1"></i> Confirmar Asignación
                                            <span ng-if="loading" class="spinner-border spinner-border-sm ml-1" role="status"></span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- TAGs ya asignados -->
                    <div class="row mt-4">
                        <div class="col-12">
                            <div class="card border-success">
                                <div class="card-header bg-success text-white">
                                    <h5 class="mb-0"><i class="fas fa-check-circle mr-2"></i>TAGs con número económico asignado</h5>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table table-striped table-responsive-md" ng-if="tags_asignados.length > 0">
                                            <thead class="thead-dark">
                                                <tr>
                                                    <th>Número TAG</th>
                                                    <th>Número Económico</th>
                                                    <th>Saldo</th>
                                                    <th>Fecha Asignación</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr ng-repeat="tag in tags_asignados">
                                                    <td>{{tag.numero_tag}}</td>
                                                    <td>
                                                        <div>
                                                            {{tag.modalidad_nombre}} - {{tag.numero_economico}}
                                                        </div>
                                                    </td>
                                                    <td>${{tag.saldo | number:2}}</td>
                                                    <td>{{tag.fecha_asignacion | date:'dd/MM/yyyy HH:mm'}}</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <div class="p-3 text-center" ng-if="tags_asignados.length === 0">
                                            No hay TAGs con número económico asignado.
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .max-h-200 {
        max-height: 200px;
        overflow-y: auto;
    }
</style>