<div class="container-fluid">
    <div class="row align-items-center justify-content-center">
        <div class="col">
            <div class="card my-4">
                <div class="card-header">
                    <h3>Reporte de Ventas y Recargas</h3>
                </div>
                <div class="card-body">
                    <form ng-submit="buscarMovimientos()">
                        <div class="row">
                            <div class="col-md-3 form-group">
                                <label>Fecha Inicio:</label>
                                <input id="moment_picker_fecha_inicio" moment-picker locale="es" format="DD/MM/YYYY" 
                                       ng-model="moment_picker_fecha_inicio" class="form-control"
                                       change="on_change_moment_picker_fecha_inicio(newValue, oldValue)" />
                            </div>
                            <div class="col-md-3 form-group">
                                <label>Fecha Fin:</label>
                                <input id="moment_picker_fecha_fin" moment-picker locale="es" format="DD/MM/YYYY" 
                                       ng-model="moment_picker_fecha_fin" class="form-control"
                                       change="on_change_moment_picker_fecha_fin(newValue, oldValue)" />
                            </div>
                            <div class="col-md-3 form-group">
                                <label>Tipo de Movimiento:</label>
                                <select ng-model="filtros.tipo_movimiento" class="form-control">
                                    <option value="RECARGA">Recarga</option>
                                    <option value="CARGO">Cargo</option>
                                </select>
                            </div>
                            <div class="col-md-3 form-group text-right">
                                <label>&nbsp;</label><br>
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-search"></i> Buscar
                                </button>
                                <!-- Agrega esto justo después del botón de búsqueda -->
                                <button type="button" class="btn btn-warning" ng-click="mostrarTodo()">
                                    <i class="fas fa-list"></i> Mostrar Todo
                                </button>
                                <button type="button" class="btn btn-success" 
                                    ng-click="exportarExcel()" 
                                    ng-disabled="movimientos.length === 0"
                                    ng-if="(modulos_acciones_list | contains:'920302')">
                                    <i class="fas fa-file-excel"></i> Excel
                                </button>
                                <button type="button" class="btn btn-danger" 
                                    ng-click="exportarPdf()" 
                                    ng-disabled="movimientos.length === 0"
                                    ng-if="(modulos_acciones_list | contains:'920303')">
                                    <i class="fas fa-file-pdf"></i> PDF
                                </button>
                            </div>
                        </div>
                    </form>
                    
                    <!-- Spinner de carga -->
                    <div class="mt-4 text-center" ng-if="loading">
                        <div class="spinner-border text-primary" role="status">
                            <span class="sr-only">Cargando...</span>
                        </div>
                        <p class="mt-2">Cargando datos...</p>
                    </div>
                    
                    <!-- Mensaje de error -->
                    <div class="alert alert-danger mt-4" ng-if="mensaje_error">
                        <i class="fas fa-exclamation-triangle"></i> {{ mensaje_error }}
                    </div>
                    
                    <!-- Tabla de resultados -->
                    <div class="table-responsive mt-4" ng-if="!loading && movimientos.length > 0">
                        <table class="table table-striped table-hover">
                            <thead class="thead-dark">
                                <tr>
                                    <th>Referencia</th>
                                    <th>TAG</th>
                                    <th>Número Económico</th>
                                    <th>Tipo</th>
                                    <th class="text-right">Monto</th>
                                    <th class="text-right">Saldo Anterior</th>
                                    <th class="text-right">Saldo Nuevo</th>
                                    <th>Fecha</th>
                                    <th class="text-center">Acciones</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="mov in movimientos | orderBy:'created_at':false">
                                    <td>{{mov.referencia}}</td>
                                    <td>{{mov.numero_tag}}</td>
                                    <td>{{mov.numero_economico || 'N/A'}}</td>
                                    <td>{{mov.tipo_movimiento}}</td>
                                    <td class="text-right">${{mov.monto | number:2}}</td>
                                    <td class="text-right">${{mov.saldo_anterior | number:2}}</td>
                                    <td class="text-right">${{mov.saldo_nuevo | number:2}}</td>
                                    <td>{{mov.created_at | date:'dd/MM/yyyy HH:mm'}}</td>
                                    <td class="text-center">
                                        <button class="btn btn-sm btn-info" 
                                            ng-click="imprimirTicket(mov.id)" 
                                            title="Imprimir Ticket"
                                            ng-if="(modulos_acciones_list | contains:'920304')">
                                            <i class="fas fa-print"></i>
                                        </button>
                                        <button class="btn btn-sm btn-success" 
                                            ng-click="verHistoricoRecargas(mov.tag_id)"
                                            title="Ver Histórico de Recargas"
                                            ng-if="(modulos_acciones_list | contains:'920305')">
                                            <i class="fas fa-history"></i>
                                        </button>
                                    </td>
                                </tr>
                            </tbody>
                            <tfoot>
                                <tr class="table-info">
                                    <td colspan="4" class="text-right"><strong>Total:</strong></td>
                                    <td class="text-right"><strong>${{total_monto | number:2}}</strong></td>
                                    <td colspan="4"></td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                    
                    <!-- Mensaje sin resultados -->
                    <div class="alert alert-info mt-4" ng-if="!loading && movimientos.length === 0">
                        <i class="fas fa-info-circle"></i> No se encontraron movimientos con los criterios de búsqueda especificados.
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>