<div class="container-fluid">
    <div class="row align-items-center justify-content-center">
        <div class="col">
            <div ng-if="!show_form" class="text-center">
                <img src="images/searching.gif" class="img-fluid" alt=""/>
            </div>
            <div ng-if="show_form" class="card my-5 shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h3 class="mb-0"><i class="fas fa-tag mr-2"></i>Asignar TAG {{tag.numero_tag}}</h3>
                </div>
                <div class="card-body bg-light">
                    <div class="row">
                        <div class="col-12">
                            <!-- Formulario de búsqueda con mejor estilo -->
                            <form name="searchForm" ng-submit="buscarNumeroEconomico()" novalidate class="bg-white p-4 rounded shadow-sm mb-4">
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label class="font-weight-bold">Número Económico</label>
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text"><i class="fas fa-hashtag"></i></span>
                                                </div>
                                                <input type="text" class="form-control" ng-model="filtros.numero" placeholder="Ingrese número">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label class="font-weight-bold">Modalidad</label>
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text"><i class="fas fa-bus"></i></span>
                                                </div>
                                                <input type="text" class="form-control" value="COLECTIVO" readonly>
                                                <input type="hidden" ng-model="filtros.modalidad_id" ng-init="filtros.modalidad_id = '2'">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label class="font-weight-bold">Estatus</label>
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text"><i class="fas fa-check-circle"></i></span>
                                                </div>
                                                <select class="form-control" ng-model="filtros.estatus">
                                                    <option value="1">Activos</option>
                                                    <option value="0">Inactivos</option>
                                                    <option value="">Todos</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mt-3">
                                    <div class="col">
                                        <button type="button" class="btn btn-outline-secondary" ng-click="limpiarFiltros()">
                                            <i class="fas fa-eraser"></i> Limpiar filtros
                                        </button>
                                        <button type="submit" class="btn btn-primary" ng-disabled="loading">
                                            <i class="fas fa-search"></i> Buscar
                                            <span ng-if="loading" class="spinner-border spinner-border-sm ml-2" role="status"></span>
                                        </button>
                                    </div>
                                </div>
                            </form>

                            <!-- Tabla de resultados con mejor estilo -->
                            <div ng-if="numeros_economicos.length > 0" class="bg-white rounded shadow-sm p-3">
                                <div class="table-responsive">
                                    <table class="table table-hover">
                                        <thead>
                                            <tr class="bg-primary text-white">
                                                <th>Número</th>
                                                <th>Modalidad</th>
                                                <th>Observaciones</th>
                                                <th class="text-center">Acciones</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr ng-repeat="numero in numeros_economicos">
                                                <td class="font-weight-bold">{{numero.numero_economico}}</td>
                                                <td><span class="badge badge-info">{{numero.modalidad_nombre}}</span></td>
                                                <td>{{numero.observacion}}</td>
                                                <td class="text-center">
                                                    <button type="button" class="btn btn-sm btn-outline-primary" 
                                                            ng-click="selectNumeroEconomico(numero)">
                                                        <i class="fas fa-check"></i> Seleccionar
                                                    </button>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            
                            <!-- Sección de confirmación con mejor estilo -->
                            <div ng-if="numero_economico_selected" class="card mt-4 border-success shadow-sm">
                                <div class="card-header bg-success text-white">
                                    <h5 class="mb-0"><i class="fas fa-check-circle mr-2"></i>Número Económico Seleccionado</h5>
                                </div>
                                <div class="card-body">
                                    <div class="row align-items-center">
                                        <div class="col-md-8">
                                            <h6 class="text-success mb-2">
                                                <i class="fas fa-bus mr-2"></i>
                                                {{numero_economico_selected.modalidad_nombre}} - {{numero_economico_selected.numero_economico}}
                                            </h6>
                                            <p class="text-muted mb-0"><i class="fas fa-info-circle mr-2"></i>{{numero_economico_selected.observacion}}</p>
                                        </div>
                                        <div class="col-md-4 text-right">
                                            <button type="button" class="btn btn-outline-danger mr-2" ng-click="removeNumeroEconomico()">
                                                <i class="fas fa-times"></i> Remover
                                            </button>
                                            <button type="button" class="btn btn-success" ng-click="submit()">
                                                <i class="fas fa-link"></i> Asignar TAG
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>