<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">
                    <div class="d-flex justify-content-between align-items-center">
                        <h3 class="mb-0" ng-if="step === 1"><i class="fas fa-tag mr-2"></i>Selección de TAG para Asignar y Recargar</h3>
                        <h3 class="mb-0" ng-if="step === 2"><i class="fas fa-link mr-2"></i><i class="fas fa-money-bill mr-2"></i>Asignar y Recargar TAG {{tag.numero_tag}}</h3>
                        <h3 class="mb-0" ng-if="step === 3"><i class="fas fa-plus mr-2"></i>Crear Nuevo TAG</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>
                
                <!-- Paso 1: Selección de TAG -->
                <div class="card-body" ng-if="step === 1">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h4 class="m-0">Seleccione un TAG para asignar y recargar</h4>
                        <button type="button" class="btn btn-success" ng-click="goToCreateTag()">
                            <i class="fas fa-plus mr-1"></i> Crear Nuevo TAG
                        </button>
                    </div>
                    
                    <div class="table-responsive">
                        <table class="table table-striped table-hover" ng-if="tags_disponibles.length > 0">
                            <thead class="thead-dark">
                                <tr>
                                    <th>Número TAG</th>
                                    <th>Saldo Actual</th>
                                    <th>Número Económico</th>
                                    <th>Estatus</th>
                                    <th>Acción</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="tag in tags_disponibles | filter:{status:'1'}">
                                    <td>{{tag.numero_tag}}</td>
                                    <td>${{tag.saldo | number:2}}</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 class="badge badge-success">Activo</span></td>
                                    <td>
                                        <a class="btn btn-sm btn-primary" ui-sref="main.tag_asignar_recargar({tag_id: tag.id})">
                                            <i class="fas fa-check"></i> Seleccionar
                                        </a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <div class="alert alert-info" ng-if="tags_disponibles.length === 0">
                            <i class="fas fa-info-circle mr-2"></i> No hay TAGs disponibles.
                        </div>
                    </div>
                </div>
                
                <!-- Paso 2: Asignar y Recargar -->
                <div class="card-body" ng-if="step === 2">
                    <!-- Información del TAG -->
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <div class="card border-info">
                                <div class="card-header bg-info text-white">
                                    <h5 class="mb-0"><i class="fas fa-tag mr-2"></i>Información del TAG</h5>
                                </div>
                                <div class="card-body">
                                    <p><strong>Número TAG:</strong> {{tag.numero_tag}}</p>
                                    <p><strong>Saldo Actual:</strong> ${{tag.saldo | number:2}}</p>
                                    <p><strong>Fecha Activación:</strong> {{tag.fecha_activacion | date:'dd/MM/yyyy HH:mm'}}</p>
                                    <div class="alert alert-warning" ng-if="!tag.numero_economico">
                                        <i class="fas fa-exclamation-triangle mr-2"></i> Este TAG no tiene número económico asignado.
                                    </div>
                                    <div class="alert alert-success" ng-if="tag.numero_economico">
                                        <i class="fas fa-check-circle mr-2"></i> Este TAG ya tiene asignado el número económico: 
                                        <strong>{{tag.modalidad_nombre}} - {{tag.numero_economico}}</strong>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Paso 1: Buscar y seleccionar número económico -->
                        <div class="col-md-6">
                            <div class="card border-success" ng-if="!tag.numero_economico && !numero_economico_selected">
                                <div class="card-header bg-success text-white">
                                    <h5 class="mb-0"><i class="fas fa-bus mr-2"></i>Paso 1: Buscar Número Económico</h5>
                                </div>
                                <div class="card-body">
                                    <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 class="card border-success" ng-if="numero_economico_selected || tag.numero_economico">
                                <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="alert alert-success">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div>
                                                <h5 class="mb-1">Número seleccionado: <strong>{{numero_economico_selected.modalidad_nombre || tag.modalidad_nombre}} - {{numero_economico_selected.numero_economico || tag.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="removeNumeroEconomico()" ng-if="!tag.numero_economico">
                                                <i class="fas fa-times"></i>
                                            </button>
                                        </div>
                                    </div>
                                    
                                    <!-- Paso 2: Recarga -->
                                    <div class="mt-4">
                                        <h5 class="mb-3"><i class="fas fa-money-bill mr-2"></i>Paso 2: Recarga de TAG</h5>
                                        <form name="formRecharge" novalidate>
                                            <div class="form-group">
                                                <label>Monto a Recargar <span class="text-danger">*</span></label>
                                                <div class="input-group">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text">$</span>
                                                    </div>
                                                    <input type="number" 
                                                           class="form-control" 
                                                           ng-model="form.monto"
                                                           name="monto"
                                                           required
                                                           min="0.01"
                                                           step="0.01">
                                                </div>
                                                <div ng-messages="formRecharge.monto.$error" ng-if="formRecharge.monto.$dirty" class="text-danger">
                                                    <small ng-message="required">Este campo es requerido</small>
                                                    <small ng-message="min">El monto debe ser mayor a 0</small>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label>Comentario</label>
                                                <textarea class="form-control" 
                                                          ng-model="form.comentario"
                                                          name="comentario"
                                                          maxlength="500"
                                                          rows="2"></textarea>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Botones de acción -->
                    <div class="row mt-3">
                        <div class="col-12 text-center">
                            <button type="button" class="btn btn-secondary mr-2" ui-sref="main.tags_lista">
                                <i class="fas fa-times"></i> Cancelar
                            </button>
                            
                            <button type="button" class="btn btn-success" ng-click="submit()" ng-disabled="((!tag.numero_economico && !numero_economico_selected) || !form.monto || form.monto <= 0) || procesando">
                                <i class="fas fa-check"></i> 
                                <span ng-if="!tag.numero_economico">Asignar y Recargar</span>
                                <span ng-if="tag.numero_economico">Recargar TAG</span>
                                <span ng-if="procesando" class="spinner-border spinner-border-sm ml-1" role="status"></span>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- Paso 3: Crear TAG -->
                <div class="card-body" ng-if="step === 3">
                    <div class="row align-items-center justify-content-center">
                        <div class="col-md-6">
                            <div class="card border-success shadow-sm">
                                <div class="card-header bg-success text-white">
                                    <h5 class="mb-0"><i class="fas fa-plus mr-2"></i>Crear Nuevo TAG</h5>
                                </div>
                                <div class="card-body">
                                    <form name="formNewTag" ng-submit="createTag()" novalidate>
                                        <div class="form-group">
                                            <label>Número de TAG <span class="text-danger">*</span></label>
                                            <input type="text" 
                                                   class="form-control" 
                                                   ng-model="new_tag.numero_tag"
                                                   name="numero_tag"
                                                   required
                                                   maxlength="50">
                                            <div ng-messages="formNewTag.numero_tag.$error" ng-if="formNewTag.numero_tag.$dirty" class="text-danger">
                                                <small ng-message="required">Este campo es requerido</small>
                                                <small ng-message="maxlength">El número de TAG no debe exceder 50 caracteres</small>
                                            </div>
                                            <small class="form-text text-muted">
                                                Ingrese el número o código identificador único para este TAG.
                                            </small>
                                        </div>
                                        
                                        <div class="text-center mt-4">
                                            <button type="button" class="btn btn-secondary mr-2" ui-sref="main.tag_asignar_recargar({tag_id: null})">
                                                <i class="fas fa-arrow-left"></i> Volver
                                            </button>
                                            <button type="submit" class="btn btn-success" ng-disabled="formNewTag.$invalid || procesando">
                                                <i class="fas fa-save mr-1"></i> Crear TAG
                                                <span ng-if="procesando" class="spinner-border spinner-border-sm ml-1" role="status"></span>
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

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