<div class="container-fluid">
    <div class="row align-items-center justify-content-center">
        <div class="col-md-10">
            <div class="card my-4">
                <div class="card-header bg-warning text-dark">
                    <h3><i class="fas fa-door-closed"></i> Cierre de Caja</h3>
                </div>
                <div class="card-body">
                    <!-- 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">Procesando...</p>
                    </div>
                    
                    <!-- Formulario de cierre -->
                    <div ng-if="!loading && caja">
                        <div class="alert alert-warning mb-4">
                            <div class="row">
                                <div class="col-md-6">
                                    <p class="mb-0"><strong>ID Caja:</strong> {{ caja.id }}</p>
                                    <p class="mb-0"><strong>Fecha Apertura:</strong> {{ caja.fecha_apertura | date:'dd/MM/yyyy HH:mm' }}</p>
                                </div>
                                <div class="col-md-6 text-right">
                                    <h4 class="text-success mb-0">Saldo Final: $ {{ caja.saldo | number:2 }}</h4>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Resumen de movimientos -->
                        <div class="card mb-4">
                            <div class="card-header bg-light">
                                <h5 class="mb-0"><i class="fas fa-chart-pie"></i> Resumen de Movimientos</h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="card bg-success text-white">
                                            <div class="card-body text-center">
                                                <h3 class="mb-0">$ {{ calcularTotalPorTipo('RECARGA') | number:2 }}</h3>
                                                <p class="mb-0">Total Recargas</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="card bg-danger text-white">
                                            <div class="card-body text-center">
                                                <h3 class="mb-0">$ {{ calcularTotalPorTipo('RETIRO') | number:2 }}</h3>
                                                <p class="mb-0">Total Retiros</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="card bg-info text-white">
                                            <div class="card-body text-center">
                                                <h3 class="mb-0">$ {{ calcularTotalPorTipo('VENTA') | number:2 }}</h3>
                                                <p class="mb-0">Total Ventas</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <form ng-submit="submit()">
                            <div class="form-group">
                                <label>Observaciones:</label>
                                <textarea class="form-control" ng-model="form.observaciones" rows="3"></textarea>
                            </div>
                            
                            <div class="alert alert-danger">
                                <i class="fas fa-exclamation-triangle"></i> <strong>Advertencia:</strong> Al cerrar la caja, ya no se podrán realizar más operaciones hasta que se abra una nueva. Esta acción no se puede deshacer.
                            </div>
                            
                            <div class="row mt-4">
                                <div class="col-md-6">
                                    <button type="button" class="btn btn-secondary btn-block" ng-click="cancelar()">
                                        <i class="fas fa-times"></i> Cancelar
                                    </button>
                                </div>
                                <div class="col-md-6">
                                    <button type="submit" class="btn btn-danger btn-block">
                                        <i class="fas fa-door-closed"></i> Cerrar Caja
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>